perf: add uniqueopened setting

kailong321200875 · Apr 14, 2022 · b060319 · b060319
1 parent 7dc6d8a
commit b060319
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 2 deletions.
diff --git a/src/components/Menu/src/Menu.vue b/src/components/Menu/src/Menu.vue
@@ -47,6 +47,8 @@ export default defineComponent({
 
     const collapse = computed(() => appStore.getCollapse)
 
+    const uniqueOpened = computed(() => appStore.getUniqueOpened)
+
     const activeMenu = computed(() => {
       const { meta, path } = unref(currentRoute)
       // if set path, the sidebar will highlight the path you set
@@ -87,6 +89,7 @@ export default defineComponent({
             collapse={
               unref(layout) === 'top' || unref(layout) === 'cutMenu' ? false : unref(collapse)
             }
+            uniqueOpened={unref(layout) === 'top' ? false : unref(uniqueOpened)}
             backgroundColor="var(--left-menu-bg-color)"
             textColor="var(--left-menu-text-color)"
             activeTextColor="var(--left-menu-text-active-color)"

diff --git a/src/components/Setting/src/Setting.vue b/src/components/Setting/src/Setting.vue
@@ -130,6 +130,8 @@ const copyConfig = async () => {
       tagsView: ${appStore.getTagsView},
       // logo
       logo: ${appStore.getLogo},
+      // 菜单手风琴
+      uniqueOpened: ${appStore.getUniqueOpened},
       // 固定header
       fixedHeader: ${appStore.getFixedHeader},
       // 页脚

diff --git a/src/components/Setting/src/components/InterfaceDisplay.vue b/src/components/Setting/src/components/InterfaceDisplay.vue
@@ -72,6 +72,13 @@ const logoChange = (show: boolean) => {
   appStore.setLogo(show)
 }
 
+// 菜单手风琴
+const uniqueOpened = ref(appStore.getUniqueOpened)
+
+const uniqueOpenedChange = (uniqueOpened: boolean) => {
+  appStore.setUniqueOpened(uniqueOpened)
+}
+
 // 固定头部
 const fixedHeader = ref(appStore.getFixedHeader)
 
@@ -147,6 +154,11 @@ watch(
       <ElSwitch v-model="logo" @change="logoChange" />
     </div>
 
+    <div class="flex justify-between items-center">
+      <span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
+      <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
+    </div>
+
     <div class="flex justify-between items-center">
       <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
       <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />

diff --git a/src/config/app.ts b/src/config/app.ts
@@ -24,6 +24,7 @@ export interface AppState {
   breadcrumb: boolean
   breadcrumbIcon: boolean
   collapse: boolean
+  uniqueOpened: boolean
   hamburger: boolean
   screenfull: boolean
   size: boolean
@@ -54,6 +55,7 @@ export const appModules: AppState = {
   breadcrumb: true, // 面包屑
   breadcrumbIcon: true, // 面包屑图标
   collapse: false, // 折叠菜单
+  uniqueOpened: false, // 是否只保持一个子菜单的展开
   hamburger: true, // 折叠图标
   screenfull: true, // 全屏图标
   size: true, // 尺寸图标

diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -72,7 +72,8 @@ export default {
     clearAndReset: 'Clear cache and reset',
     copySuccess: 'Copy success',
     copyFailed: 'Copy failed',
-    footer: 'Footer'
+    footer: 'Footer',
+    uniqueOpened: 'Unique opened'
   },
   size: {
     default: 'Default',

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -72,7 +72,8 @@ export default {
     clearAndReset: '清除缓存并且重置',
     copySuccess: '拷贝成功',
     copyFailed: '拷贝失败',
-    footer: '页脚'
+    footer: '页脚',
+    uniqueOpened: '菜单手风琴'
   },
   size: {
     default: '默认',

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
@@ -24,6 +24,9 @@ export const useAppStore = defineStore({
     getCollapse(): boolean {
       return this.collapse
     },
+    getUniqueOpened(): boolean {
+      return this.uniqueOpened
+    },
     getHamburger(): boolean {
       return this.hamburger
     },
@@ -89,6 +92,9 @@ export const useAppStore = defineStore({
     setCollapse(collapse: boolean) {
       this.collapse = collapse
     },
+    setUniqueOpened(uniqueOpened: boolean) {
+      this.uniqueOpened = uniqueOpened
+    },
     setHamburger(hamburger: boolean) {
       this.hamburger = hamburger
     },