From df35c72dae470851536b7dab25e7c1a8043fa126 Mon Sep 17 00:00:00 2001 From: Asoka Date: Thu, 5 Jun 2025 15:34:51 +0800 Subject: [PATCH] =?UTF-8?q?feat=20=E4=BF=AE=E6=94=B9=E4=B8=89=E7=BA=A7?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=E8=B7=B3=E8=BD=AC=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/component/aside.vue | 35 +++++++----------- src/layout/navMenu/horizontal.vue | 40 +++++++++------------ src/layout/navMenu/subItem.vue | 16 ++------- src/layout/navMenu/vertical.vue | 59 +++++++++++++++++++++++++------ 4 files changed, 80 insertions(+), 70 deletions(-) diff --git a/src/layout/component/aside.vue b/src/layout/component/aside.vue index 919c2ca..30dcbdc 100644 --- a/src/layout/component/aside.vue +++ b/src/layout/component/aside.vue @@ -82,21 +82,7 @@ const closeLayoutAsideMobileMode = () => { if (clientWidth < 1000) themeConfig.value.isCollapse = false document.body.setAttribute('class', '') } -// 设置/过滤路由（非静态路由/是否显示在菜单中） -const setFilterRoutes = () => { - if (themeConfig.value.layout === 'columns') return false - state.menuList = filterRoutesFun(routesList.value) -} -// 路由过滤递归函数 -const filterRoutesFun = (arr: T[]): T[] => { - return arr - .filter((item: T) => !item.meta?.isHide) - .map((item: T) => { - item = Object.assign({}, item) - if (item.children) item.children = filterRoutesFun(item.children) - return item - }) -} + // 设置菜单导航是否固定（移动端） const initMenuFixed = (clientWidth: number) => { state.clientWidth = clientWidth @@ -112,15 +98,16 @@ const onAsideEnterLeave = (bool: Boolean) => { // 页面加载前 onBeforeMount(() => { initMenuFixed(document.body.clientWidth) - setFilterRoutes() // 此界面不需要取消监听(mittBus.off('setSendColumnsChildren)) // 因为切换布局时有的监听需要使用，取消了监听，某些操作将不生效 mittBus.on('setSendColumnsChildren', (res: MittMenu) => { + console.log('setSendColumnsChildren', res) !res.children || res.children.length < 1 ? (themeConfig.value.isCollapse = true) : (themeConfig.value.isCollapse = false) state.menuList = res.children }) // 开启经典布局分割菜单时，设置菜单数据 mittBus.on('setSendClassicChildren', (res: MittMenu) => { + console.log('setSendClassicChildren', res) let { layout, isClassicSplitMenu } = themeConfig.value if (layout === 'classic' && isClassicSplitMenu) { // 经典布局分割菜单只有一项子级时，收起左侧导航菜单 @@ -131,10 +118,6 @@ onBeforeMount(() => { state.menuList = res.children } }) - // 开启经典布局分割菜单时，重新处理菜单数据 - mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => { - setFilterRoutes() - }) // 监听窗口大小改变时(适配移动端) mittBus.on('layoutMobileResize', (res: LayoutMobileResize) => { initMenuFixed(res.clientWidth) @@ -157,11 +140,17 @@ watch( if (layout === 'classic' && isClassicSplitMenu) return false } ) -// 监听用户权限切换，用于演示 `权限管理 -> 前端控制 -> 页面权限` 权限切换不生效 +// 监听路由列表变化，根据布局更新侧边菜单（默认布局由顶部导航控制） watch( () => routesList.value, () => { - setFilterRoutes() - } + // 在默认布局（水平模式）下，不自动恢复为二级菜单，以保留顶部导航控制的三级菜单 + if (themeConfig.value.layout === 'defaults') return + // 当路由数据加载完成时，确保停止加载动画 + if (routesList.value.length > 0) { + layoutAsideScrollbarRef.value?.update() + } + }, + { deep: true } ) diff --git a/src/layout/navMenu/horizontal.vue b/src/layout/navMenu/horizontal.vue index 69fd006..ad25c9e 100644 --- a/src/layout/navMenu/horizontal.vue +++ b/src/layout/navMenu/horizontal.vue @@ -17,6 +17,7 @@ {{ $t(item.meta?.title) }} + { const selectedModule = menuLists.value.find(item => item.path === path) if (!selectedModule) return - // 如果是外部链接，使用原有的处理方式 - if (selectedModule.meta?.isLink && !selectedModule.meta?.isIframe) { - onALinkClick(selectedModule) - return - } - - // 如果模块有子菜单，跳转到第一个可用的子菜单，并更新左侧菜单 + // 如果模块有子菜单，跳转到第一个可用的子菜单，并更新左侧菜单为第三级 if (selectedModule.children && selectedModule.children.length > 0) { - const firstChild = selectedModule.children.find((child: RouteItem) => !child.meta?.isHide) + const firstChild = selectedModule.children.find((child: RouteRecordRaw) => !child.meta?.isHide) if (firstChild) { router.push(firstChild.path) - // 更新左侧显示二级子菜单的子项 + console.log('onModuleCommand setSendColumnsChildren1', firstChild.path) + // 更新左侧显示为第三级菜单 mittBus.emit('setSendColumnsChildren', setSendSubMenuChildren(firstChild.path)) } else { router.push(selectedModule.path) + console.log('onModuleCommand setSendColumnsChildren2', firstChild.path) mittBus.emit('setSendColumnsChildren', { children: [] }) } } else { router.push(selectedModule.path) + console.log('onModuleCommand setSendColumnsChildren3', selectedModule.path) mittBus.emit('setSendColumnsChildren', { children: [] }) } - - // 更新水平菜单和经典布局下的左侧菜单 - mittBus.emit('getBreadcrumbIndexSetFilterRoutes') - if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) { - mittBus.emit('setSendClassicChildren', setSendClassicChildren(path)) - } } // 新增：计算二级菜单列表 @@ -239,14 +231,17 @@ const setSendSubMenuChildren = (path: string) => { res.children = sub.children ? [...sub.children] : [] } } + + console.log('res', res) return res } // 新增：二级菜单点击处理 const onSubMenuClick = (path: string) => { + // 跳转到选中的二级路由 router.push(path) - // 更新左侧菜单 - mittBus.emit('getBreadcrumbIndexSetFilterRoutes') + // 只更新左侧菜单为对应的三级菜单 + console.log('onSubMenuClick setSendColumnsChildren4', path) mittBus.emit('setSendColumnsChildren', setSendSubMenuChildren(path)) } @@ -287,12 +282,11 @@ onBeforeRouteUpdate((to) => { if (matchedModule) { state.currentModulePath = matchedModule.path } - - // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题 - let { layout, isClassicSplitMenu } = themeConfig.value - if (layout === 'classic' && isClassicSplitMenu) { - mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path)) - } + // // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题 + // let { layout, isClassicSplitMenu } = themeConfig.value + // if (layout === 'classic' && isClassicSplitMenu) { + // mittBus.emit('setSendClassicChildren', setSendClassicChildren(to.path)) + // } }) diff --git a/src/layout/navMenu/subItem.vue b/src/layout/navMenu/subItem.vue index 92674e3..17dac7c 100644 --- a/src/layout/navMenu/subItem.vue +++ b/src/layout/navMenu/subItem.vue @@ -3,7 +3,7 @@ @@ -11,13 +11,7 @@ - @@ -27,7 +21,6 @@ diff --git a/src/layout/navMenu/vertical.vue b/src/layout/navMenu/vertical.vue index be7f428..efa2a2c 100644 --- a/src/layout/navMenu/vertical.vue +++ b/src/layout/navMenu/vertical.vue @@ -10,19 +10,24 @@