From 15ed4a60630eccfa9c006a555b6ea4df2bf510f5 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Tue, 2 Jan 2024 02:06:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=AC=A1=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E9=AB=98=E5=BA=A6=E5=8F=98=E5=8C=96=E6=97=B6=EF=BC=8C=E5=BA=95?=
 =?UTF-8?q?=E9=83=A8=E9=98=B4=E5=BD=B1=E4=B8=8D=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/SubSidebar/index.vue | 27 +++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index db84f88b..c34cb887 100755
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/src/layouts/components/SubSidebar/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useElementSize } from '@vueuse/core'
 import Logo from '../Logo/index.vue'
 import Menu from '../Menu/index.vue'
 import useSettingsStore from '@/store/modules/settings'
@@ -24,8 +25,18 @@ function onSidebarScroll() {
   showShadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
 }
 
+const menuRef = ref()
+
 onMounted(() => {
   onSidebarScroll()
+  const { height } = useElementSize(menuRef)
+  watch(() => height.value, () => {
+    if (height.value > 0) {
+      onSidebarScroll()
+    }
+  }, {
+    immediate: true,
+  })
 })
 </script>
 
@@ -46,13 +57,15 @@ onMounted(() => {
         'shadow-bottom': showShadowBottom,
       }" @scroll="onSidebarScroll"
     >
-      <TransitionGroup name="sub-sidebar">
-        <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
-          <div v-show="mainIndex === menuStore.actived">
-            <Menu :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" />
-          </div>
-        </template>
-      </TransitionGroup>
+      <div ref="menuRef">
+        <TransitionGroup name="sub-sidebar">
+          <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
+            <div v-show="mainIndex === menuStore.actived">
+              <Menu :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" />
+            </div>
+          </template>
+        </TransitionGroup>
+      </div>
     </div>
     <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center p-4" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
       <span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark:bg-stone-9 hover:bg-stone-2 dark:hover:bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">