From be3be09bee8a125fa99d2e2f50303b8255bfa499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E8=8F=9C=20Cai?= <1064425721@qq.com>
Date: Mon, 19 Aug 2024 02:02:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=8A=98=E5=8F=A0=20(#744)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 点击tab导航栏，对应菜单层级没有自动展开

close #734

* feat: 当tab-route存在的项，menu都被展开

* feat: keep the currently expanded data

* feat: add setting `menuAutoCollapsed`
---
 src/config/style.ts                |  1 +
 src/layouts/components/SideNav.vue | 44 +++++++++++++++++++++++-------
 src/layouts/setting.vue            |  3 ++
 src/locales/lang/en_US/layout.ts   |  1 +
 src/locales/lang/zh_CN/layout.ts   |  1 +
 src/router/index.ts                |  4 +++
 6 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/config/style.ts b/src/config/style.ts
index cdf7d93..1d2e1f8 100644
--- 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
index fadfa69..fbe24c5 100644
--- a/src/layouts/components/SideNav.vue
+++ b/src/layouts/components/SideNav.vue
@@ -1,6 +1,14 @@
 <template>
   <div :class="sideNavCls">
-    <t-menu :class="menuCls" :theme="theme" :value="active" :collapsed="collapsed" :default-expanded="defaultExpanded">
+    <t-menu
+      :class="menuCls"
+      :theme="theme"
+      :value="active"
+      :collapsed="collapsed"
+      :expanded="expanded"
+      :expand-mutex="menuAutoCollapsed"
+      @expand="onExpanded"
+    >
       <template #logo>
         <span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="goHome">
           <component :is="getLogo()" :class="logoCls" />
@@ -16,15 +24,16 @@
 </template>
 
 <script setup lang="ts">
-import union from 'lodash/union';
+import { difference, remove, union } from 'lodash';
+import { MenuValue } from 'tdesign-vue-next';
 import type { PropType } from 'vue';
-import { computed, onMounted } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
 import AssetLogo from '@/assets/assets-t-logo.svg?component';
 import { prefix } from '@/config/global';
-import { getActive, getRoutesExpanded } from '@/router';
+import { getActive } from '@/router';
 import { useSettingStore } from '@/store';
 import type { MenuRoute, ModeType } from '@/types/interface';
 
@@ -65,15 +74,27 @@ const props = defineProps({
 });
 
 const collapsed = computed(() => useSettingStore().isSidebarCompact);
+const menuAutoCollapsed = computed(() => useSettingStore().menuAutoCollapsed);
 
 const active = computed(() => getActive());
 
-const defaultExpanded = computed(() => {
-  const path = getActive();
-  const parentPath = path.substring(0, path.lastIndexOf('/'));
-  const expanded = getRoutesExpanded();
-  return union(expanded, parentPath === '' ? [] : [parentPath]);
-});
+const expanded = ref<MenuValue[]>([]);
+
+watch(
+  () => active.value,
+  () => {
+    const path = getActive();
+    const parentPath = path.substring(0, path.lastIndexOf('/'));
+    expanded.value = menuAutoCollapsed.value ? [parentPath] : union([parentPath], expanded.value);
+  },
+);
+
+const onExpanded = (value: MenuValue[]) => {
+  const currentOperationMenu = difference(expanded.value, value);
+  const allExpanded = union(value, expanded.value);
+  remove(allExpanded, (item) => currentOperationMenu.includes(item));
+  expanded.value = allExpanded;
+};
 
 const sideMode = computed(() => {
   const { theme } = props;
@@ -127,6 +148,9 @@ const autoCollapsed = () => {
 };
 
 onMounted(() => {
+  const path = getActive();
+  const parentPath = path.substring(0, path.lastIndexOf('/'));
+  expanded.value = union([parentPath], expanded.value);
   autoCollapsed();
   window.onresize = () => {
     autoCollapsed();
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
index 058f4d7..3575769 100644
--- 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
index d833732..5c4a1d5 100644
--- 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
index 26f0e27..caca055 100644
--- 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: {
diff --git a/src/router/index.ts b/src/router/index.ts
index bcd69ed..7b49f0b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -39,6 +39,10 @@ export function mapModuleRouterList(modules: Record<string, unknown>): Array<Rou
   return routerList;
 }
 
+/**
+ *
+ * @deprecated 未使用
+ */
 export const getRoutesExpanded = () => {
   const expandedRoutes: Array<string> = [];