feat: add setting menuAutoCollapsed

Tencent · Aug 18, 2024 · b7c3f06 · b7c3f06
1 parent abe1c39
commit b7c3f06
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/src/config/style.ts b/src/config/style.ts
@@ -2,6 +2,7 @@ export default {
   showFooter: true,
   isSidebarCompact: false,
   showBreadcrumb: false,
+  menuAutoCollapsed: false,
   mode: 'light',
   layout: 'side',
   splitMenu: false,

diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
@@ -6,6 +6,7 @@
       :value="active"
       :collapsed="collapsed"
       :expanded="expanded"
+      :expand-mutex="menuAutoCollapsed"
       @expand="onExpanded"
     >
       <template #logo>
@@ -73,6 +74,7 @@ const props = defineProps({
 });
 
 const collapsed = computed(() => useSettingStore().isSidebarCompact);
+const menuAutoCollapsed = computed(() => useSettingStore().menuAutoCollapsed);
 
 const active = computed(() => getActive());
 
@@ -83,7 +85,7 @@ watch(
   () => {
     const path = getActive();
     const parentPath = path.substring(0, path.lastIndexOf('/'));
-    expanded.value = union([parentPath], expanded.value);
+    expanded.value = menuAutoCollapsed.value ? [parentPath] : union([parentPath], expanded.value);
   },
 );
 

diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
@@ -95,6 +95,9 @@
         <t-form-item :label="$t('layout.setting.element.useTagTabs')" name="isUseTabsRouter">
           <t-switch v-model="formData.isUseTabsRouter"></t-switch>
         </t-form-item>
+        <t-form-item :label="$t('layout.setting.element.menuAutoCollapsed')" name="menuAutoCollapsed">
+          <t-switch v-model="formData.menuAutoCollapsed"></t-switch>
+        </t-form-item>
       </t-form>
       <div class="setting-info">
         <p>{{ $t('layout.setting.tips') }}</p>

diff --git a/src/locales/lang/en_US/layout.ts b/src/locales/lang/en_US/layout.ts
@@ -42,6 +42,7 @@ export default {
       showBreadcrumb: 'Show Breadcrumb',
       showFooter: 'Show Footer',
       useTagTabs: 'Use Tag Tabs',
+      menuAutoCollapsed: 'Menu Auto Collapsed',
     },
     tips: 'Please copy and manually modify the configuration file: /src/config/style.ts',
     copy: {

diff --git a/src/locales/lang/zh_CN/layout.ts b/src/locales/lang/zh_CN/layout.ts
@@ -42,6 +42,7 @@ export default {
       showBreadcrumb: '显示面包屑',
       showFooter: '显示页脚',
       useTagTabs: '展示多标签Tab页',
+      menuAutoCollapsed: '菜单自动折叠',
     },
     tips: '请复制后手动修改配置文件: /src/config/style.ts',
     copy: {