refactor: 次导航展开收起按钮位置移动到次导航底部

src/layouts/components/SubSidebar/index.vue

@@ -13,11 +13,20 @@ const route = useRoute()
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 
-const sidebarScrollTop = ref(0)
-
-function onSidebarScroll(e: Event) {
-  sidebarScrollTop.value = (e.target as HTMLElement).scrollTop
+const subSidebarRef = ref()
+const showShadowTop = ref(false)
+const showShadowBottom = ref(false)
+function onSidebarScroll() {
+  const scrollTop = subSidebarRef.value.scrollTop
+  showShadowTop.value = scrollTop > 0
+  const clientHeight = subSidebarRef.value.clientHeight
+  const scrollHeight = subSidebarRef.value.scrollHeight
+  showShadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
 }
+
+onMounted(() => {
+  onSidebarScroll()
+})
 </script>
 
 <template>
@@ -32,8 +41,9 @@ function onSidebarScroll(e: Event) {
       }"
     />
     <div
-      class="sub-sidebar flex-1 transition-shadow-300" :class="{
-        shadow: sidebarScrollTop,
+      ref="subSidebarRef" class="sub-sidebar flex-1 transition-shadow-300" :class="{
+        'shadow-top': showShadowTop,
+        'shadow-bottom': showShadowBottom,
       }" @scroll="onSidebarScroll"
     >
       <TransitionGroup name="sub-sidebar">
@@ -44,6 +54,11 @@ function onSidebarScroll(e: Event) {
         </template>
       </TransitionGroup>
     </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()">
+        <SvgIcon name="toolbar-collapse" />
+      </span>
+    </div>
   </div>
 </template>
 
@@ -98,8 +113,16 @@ function onSidebarScroll(e: Event) {
       display: none;
     }
 
-    &.shadow {
-      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color);
+    &.shadow-top {
+      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 0 0 transparent;
+    }
+
+    &.shadow-bottom {
+      box-shadow: inset 0 0 0 transparent, inset 0 -10px 10px -10px var(--g-box-shadow-color);
+    }
+
+    &.shadow-top.shadow-bottom {
+      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 -10px 10px -10px var(--g-box-shadow-color);
     }
   }
 

src/layouts/components/Topbar/Toolbar/leftSide.vue

@@ -7,15 +7,11 @@ defineOptions({
 })
 
 const settingsStore = useSettingsStore()
-
-const enableSubMenuCollapseButton = computed(() => {
-  return settingsStore.mode === 'mobile' || settingsStore.settings.menu.enableSubMenuCollapseButton
-})
 </script>
 
 <template>
   <div class="flex items-center">
-    <div v-if="enableSubMenuCollapseButton" class="flex-center cursor-pointer px-2 py-1 transition-transform" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+    <div v-if="settingsStore.mode === 'mobile'" class="flex-center cursor-pointer px-2 py-1 -rotate-z-180" @click="settingsStore.toggleSidebarCollapse()">
       <SvgIcon name="toolbar-collapse" />
     </div>
     <Breadcrumb v-if="settingsStore.settings.toolbar.breadcrumb" />

src/store/modules/settings.ts

@@ -70,16 +70,17 @@ const useSettingsStore = defineStore(
       }
     }
 
-    // 次导航是否收起（用于记录 pc 模式下最后的状态）
-    const subMenuCollapseLastStatus = ref(settingsDefault.menu.subMenuCollapse)
     // 切换侧边栏导航展开/收起
     function toggleSidebarCollapse() {
       settings.value.menu.subMenuCollapse = !settings.value.menu.subMenuCollapse
-      if (mode.value === 'pc') {
-        subMenuCollapseLastStatus.value = !subMenuCollapseLastStatus.value
-      }
     }
-
+    // 次导航是否收起（用于记录 pc 模式下最后的状态）
+    const subMenuCollapseLastStatus = ref(settingsDefault.menu.subMenuCollapse)
+    watch(() => settings.value.menu.subMenuCollapse, (val) => {
+      if (mode.value === 'pc') {
+        subMenuCollapseLastStatus.value = val
+      }
+    })
     watch(mode, (val) => {
       switch (val) {
         case 'pc':