feat(menu): 实现菜单手风琴模式功能

- 在Menu.vue中为n-menu组件添加accordion属性
- 在app store中添加menuAccordion状态控制
- 在SettingDrawer.vue中新增菜单手风琴模式开关
- 支持用户在设置面板中开启/关闭手风琴效果
- 配置自动持久化存储到localStorage
- 默认启用手风琴模式，提升菜单使用体验

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>

src/layouts/components/sider/Menu.vue

@@ -6,6 +6,7 @@
     :collapsed-width="64"
     :options="routeStore.menus"
     :value="routeStore.activeMenu"
+    :accordion="appStore.menuAccordion"
   />
 </template>
 

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,