fix: 多级菜单下，不能正确展开菜单

Tencent · Sep 9, 2024 · a59759e · a59759e
1 parent 1e3ee32
commit a59759e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue
@@ -27,7 +27,7 @@
 import { difference, remove, union } from 'lodash';
 import { MenuValue } from 'tdesign-vue-next';
 import type { PropType } from 'vue';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import AssetLogoFull from '@/assets/assets-logo-full.svg?component';
@@ -80,12 +80,24 @@ const active = computed(() => getActive());
 
 const expanded = ref<MenuValue[]>([]);
 
+const getExpanded = () => {
+  const path = getActive();
+  const parts = path.split('/');
+  const result = [];
+  let currentPath = '';
+
+  for (let i = 1; i < parts.length - 1; i++) {
+    currentPath += `/${parts[i]}`;
+    result.push(currentPath);
+  }
+
+  expanded.value = menuAutoCollapsed.value ? result : union(result, expanded.value);
+};
+
 watch(
   () => active.value,
   () => {
-    const path = getActive();
-    const parentPath = path.substring(0, path.lastIndexOf('/'));
-    expanded.value = menuAutoCollapsed.value ? [parentPath] : union([parentPath], expanded.value);
+    getExpanded();
   },
 );
 
@@ -148,13 +160,14 @@ const autoCollapsed = () => {
 };
 
 onMounted(() => {
-  const path = getActive();
-  const parentPath = path.substring(0, path.lastIndexOf('/'));
-  expanded.value = union([parentPath], expanded.value);
+  getExpanded();
   autoCollapsed();
-  window.onresize = () => {
-    autoCollapsed();
-  };
+
+  window.addEventListener('resize', autoCollapsed);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', autoCollapsed);
 });
 
 const goHome = () => {

diff --git a/src/router/modules/homepage.ts b/src/router/modules/homepage.ts
@@ -21,13 +21,37 @@ export default [
       {
         path: 'base',
         name: 'DashboardBase',
-        component: () => import('@/pages/dashboard/base/index.vue'),
+        // component: () => import('@/pages/dashboard/base/index.vue'),
         meta: {
           title: {
             zh_CN: '概览仪表盘',
             en_US: 'Overview',
           },
         },
+        children: [
+          {
+            path: 'base-1',
+            name: 'DashboardBase-1',
+            component: () => import('@/pages/dashboard/base/index.vue'),
+            meta: {
+              title: {
+                zh_CN: '概览仪表盘-1',
+                en_US: 'Overview-1',
+              },
+            },
+          },
+          {
+            path: 'detail-1',
+            name: 'DashboardDetail-1',
+            component: () => import('@/pages/dashboard/detail/index.vue'),
+            meta: {
+              title: {
+                zh_CN: '统计报表-1',
+                en_US: 'Dashboard Detail-1',
+              },
+            },
+          },
+        ],
       },
       {
         path: 'detail',