diff --git a/src/layouts/components/SideNav.vue b/src/layouts/components/SideNav.vue index fbe24c51..90a195d7 100644 --- 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([]); +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 index 883738a2..3bd3b499 100644 --- 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',