From 59ffda20e74c0a7772319347a1b7b23d38879de6 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Tue, 2 Jan 2024 01:15:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=AC=A1=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7=E6=8C=89=E9=92=AE=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=A7=BB=E5=8A=A8=E5=88=B0=E6=AC=A1=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/SubSidebar/index.vue   | 39 +++++++++++++++----
 .../components/Topbar/Toolbar/leftSide.vue    |  6 +--
 src/store/modules/settings.ts                 | 13 ++++---
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/src/layouts/components/SubSidebar/index.vue b/src/layouts/components/SubSidebar/index.vue
index a6c70997..db84f88b 100755
--- a/src/layouts/components/SubSidebar/index.vue
+++ b/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);
     }
   }
 
diff --git a/src/layouts/components/Topbar/Toolbar/leftSide.vue b/src/layouts/components/Topbar/Toolbar/leftSide.vue
index 2a3b6348..3659255f 100644
--- a/src/layouts/components/Topbar/Toolbar/leftSide.vue
+++ b/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" />
diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts
index 0f3cc0b8..2adfb759 100755
--- a/src/store/modules/settings.ts
+++ b/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':