From 6ecd41e3798b5c312b3129d89edb491885bf0af6 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Tue, 8 Jul 2025 23:11:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E5=AE=9E=E7=8E=B0=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=89=8B=E9=A3=8E=E7=90=B4=E6=A8=A1=E5=BC=8F=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在Menu.vue中为n-menu组件添加accordion属性
- 在app store中添加menuAccordion状态控制
- 在SettingDrawer.vue中新增菜单手风琴模式开关
- 支持用户在设置面板中开启/关闭手风琴效果
- 配置自动持久化存储到localStorage
- 默认启用手风琴模式，提升菜单使用体验
---
 src/layouts/components/common/SettingDrawer.vue | 4 ++++
 src/layouts/components/sider/Menu.vue           | 1 +
 src/store/app/index.ts                          | 7 ++++++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/layouts/components/common/SettingDrawer.vue b/src/layouts/components/common/SettingDrawer.vue
index 857346e..0460643 100644
--- a/src/layouts/components/common/SettingDrawer.vue
+++ b/src/layouts/components/common/SettingDrawer.vue
@@ -53,6 +53,10 @@
           {{ $t('app.BreadcrumbIcon') }}
           <n-switch v-model:value="appStore.showBreadcrumbIcon" />
         </n-space>
+        <n-space justify="space-between">
+          菜单手风琴模式
+          <n-switch v-model:value="appStore.menuAccordion" />
+        </n-space>
       </n-space>
 
       <template #footer>
diff --git a/src/layouts/components/sider/Menu.vue b/src/layouts/components/sider/Menu.vue
index 68b107b..a328b08 100644
--- a/src/layouts/components/sider/Menu.vue
+++ b/src/layouts/components/sider/Menu.vue
@@ -6,6 +6,7 @@
     :collapsed-width="64"
     :options="routeStore.menus"
     :value="routeStore.activeMenu"
+    :accordion="appStore.menuAccordion"
   />
 </template>
 
diff --git a/src/store/app/index.ts b/src/store/app/index.ts
index 7791bc0..d22854c 100644
--- a/src/store/app/index.ts
+++ b/src/store/app/index.ts
@@ -38,6 +38,7 @@ export const useAppStore = defineStore('app-store', {
       transitionAnimation: 'zoom-out' as TransitionAnimation,
       layoutMode: 'leftMenu' as LayoutMode,
       contentFullScreen: false,
+      menuAccordion: true,
     }
   },
   getters: {
@@ -65,10 +66,10 @@ export const useAppStore = defineStore('app-store', {
       this.showFooter = true
       this.showBreadcrumb = true
       this.showBreadcrumbIcon = true
-      this.showWatermark = false
       this.transitionAnimation = 'zoom-out'
       this.layoutMode = 'leftMenu'
       this.contentFullScreen = false
+      this.menuAccordion = true
 
       // 重置所有配色
       this.setPrimaryColor(this.primaryColor)
@@ -125,6 +126,10 @@ export const useAppStore = defineStore('app-store', {
       docEle.value.classList.toggle('gray-mode')
       this.grayMode = docEle.value.classList.contains('gray-mode')
     },
+    /* 切换菜单手风琴模式 */
+    toggleMenuAccordion() {
+      this.menuAccordion = !this.menuAccordion
+    },
   },
   persist: {
     storage: localStorage,