feat 完善三级路由功能

src/layout/component/aside.vue

@@ -101,13 +101,11 @@ onBeforeMount(() => {
   // 此界面不需要取消监听(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) {
       // 经典布局分割菜单只有一项子级时，收起左侧导航菜单

src/layout/navBars/topBar/index.vue

@@ -3,9 +3,7 @@
     <div class="left-section">
       <Logo v-if="setIsShowLogo" />
     </div>
-
     <Horizontal :menuList="state.menuList" />  
-    
     <div class="right-section">
       <User />
     </div>
@@ -14,11 +12,13 @@
 
 <script setup lang="ts" name="layoutBreadcrumbIndex">
 import { defineAsyncComponent, computed, reactive, onMounted, onUnmounted, onBeforeMount } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter, RouteRecordRaw } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import mittBus from '/@/utils/mitt'
+import { treeToList, listToTree, filterList } from '/@/utils/tree'
+import { cloneDeep } from 'lodash-es'
 
 // 引入组件
 const User = defineAsyncComponent(() => import('/@/layout/navBars/topBar/user.vue'))
@@ -51,11 +51,7 @@ const setIsShowLogo = computed(() => {
   let { isShowLogo, layout } = themeConfig.value
   return (isShowLogo && layout === 'classic') || (isShowLogo && layout === 'transverse')
 })
-// 设置是否显示横向导航菜单
-const isLayoutTransverse = computed(() => {
-  let { layout, isClassicSplitMenu } = themeConfig.value
-  return layout === 'transverse' || (isClassicSplitMenu && layout === 'classic')
-})
+
 // 设置/过滤路由（非静态路由/是否显示在菜单中）
 const setFilterRoutes = () => {
   let { layout, isClassicSplitMenu } = themeConfig.value
@@ -64,18 +60,13 @@ const setFilterRoutes = () => {
     // 但仍然发送分割后的数据给侧边栏
     state.menuList = filterRoutesFun(routesList.value) // 保留完整结构用于下拉菜单
     const resData = setSendClassicChildren(route.path)
-    mittBus.emit('setSendClassicChildren', resData)
+    //console.log('设置/过滤路由', resData)
+    //mittBus.emit('setSendClassicChildren', resData)
   } else {
     state.menuList = filterRoutesFun(routesList.value)
   }
 }
-// 设置了分割菜单时，删除底下 children
-const delClassicChildren = <T extends ChilType>(arr: T[]): T[] => {
-  arr.map((v: T) => {
-    if (v.children) delete v.children
-  })
-  return arr
-}
+
 // 路由过滤递归函数
 const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
   return arr
@@ -87,47 +78,45 @@ const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
       return item
     })
 }
-// 传送当前子级数据到菜单中
-const setSendClassicChildren = (path: string) => {
-  const currentPathSplit = path.split('/')
-  let currentData: MittMenu = { children: [] }
-  filterRoutesFun(routesList.value).map((v: RouteItem, k: number) => {
-    if (v.path === `/${currentPathSplit[1]}`) {
-      v['k'] = k
-      currentData['item'] = { ...v }
-      currentData['children'] = [{ ...v }]
-      if (v.children) currentData['children'] = v.children
-    }
-  })
-  return currentData
+
+const getRootPath = (path: string) => {
+  let rootPath = ''
+  let routeTree = listToTree(
+    filterList(treeToList(cloneDeep(routesList.value)), path, {
+      filterWhere: (item: any, filterword: string) => {
+        return item.path?.toLocaleLowerCase() === filterword
+      },
+    })
+  )
+  if (routeTree.length > 0 && routeTree[0]?.path) {
+    rootPath = routeTree[0].path
+  }
+  return rootPath
 }
 
-// 优先用 props.menuList，否则 fallback 到 layout.children
-const topModules = computed<RouteItem[]>(() => {
-  if (props.menuList && props.menuList.length) {
-    return filterRoutesFun(props.menuList)
-  }
-  const layout = routesList.value.find((item: RouteItem) => item.path === '/')
-  if (!layout || !layout.children) return []
-  return filterRoutesFun(layout.children)
-})
+// 新增：传送当前二级子级数据到左侧菜单
+const setSendClassicChildren = (path: string) => {
+  let res: MittMenu = { children: [] }
 
-const onModuleChange = (path: string) => {
-  router.push(path)
-  mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
-  if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
-    mittBus.emit('setSendClassicChildren', path)
+  //解析菜单路径
+  const rootPath = getRootPath(path)
+  const module = state.menuList.find(item => item.path === rootPath)
+  if (module && module.children) {
+    const sub = module.children.find((child: RouteRecordRaw) =>  path.startsWith(child.path))
+    if (sub) {
+      res.item = { ...sub }
+      res.children = sub.children ? [...sub.children] : []
+    }
   }
+
+  return res
 }
 
 // 页面加载时
 onMounted(() => {
   setFilterRoutes()
-  mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
-    setFilterRoutes()
-  })
   if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
-    mittBus.emit('setSendClassicChildren', route.path)
+    mittBus.emit('setSendClassicChildren', setSendClassicChildren(route.path))
   }
 })
 // 页面卸载时
@@ -137,7 +126,8 @@ onUnmounted(() => {
 
 onBeforeMount(() => {
   if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
-    mittBus.emit('setSendClassicChildren', route.path)
+    //console.log('onBeforeMount11122', route.path)
+    //mittBus.emit('setSendClassicChildren', route.path)
   }
 })
 

src/layout/navMenu/horizontal.vue

@@ -108,6 +108,9 @@ const currentModule = computed(() => {
     state.currentModulePath === module.path || 
     route.path.startsWith(module.path)
   )
+
+  console.log('state.currentModulePath', state.currentModulePath)
+
   return current || moduleList.value[0] || { 
     path: '', 
     title: '选择模块', 
@@ -172,10 +175,6 @@ const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
     else state.defaultActive = path
   }
 }
-// 打开外部链接
-const onALinkClick = (val: RouteItem) => {
-  other.handleOpenLink(val)
-}
 
 // 处理模块切换命令
 const onModuleCommand = (path: string) => {
@@ -232,7 +231,22 @@ const setSendSubMenuChildren = (path: string) => {
     }
   }
 
-  console.log('res', res)
+  return res
+}
+
+const setBeforeRouteUpdateClassicChildren = (path: string) => {
+  let res: MittMenu = { children: [] }
+
+  //解析菜单路径
+  const module = menuLists.value.find(item => item.path === state.currentModulePath)
+  if (module && module.children) {
+    const sub = module.children.find((child: RouteRecordRaw) =>  path.startsWith(child.path))
+    if (sub) {
+      res.item = { ...sub }
+      res.children = sub.children ? [...sub.children] : []
+    }
+  }
+
   return res
 }
 
@@ -240,8 +254,6 @@ const setSendSubMenuChildren = (path: string) => {
 const onSubMenuClick = (path: string) => {
   // 跳转到选中的二级路由
   router.push(path)
-  // 只更新左侧菜单为对应的三级菜单
-  console.log('onSubMenuClick setSendColumnsChildren4', path)
   mittBus.emit('setSendColumnsChildren', setSendSubMenuChildren(path))
 }
 
@@ -270,11 +282,11 @@ const initCurrentModule = () => {
     state.currentModulePath = menuLists.value[0].path
   }
 }
+
 // 路由更新时
 onBeforeRouteUpdate((to) => {
   // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
   setCurrentRouterHighlight(to)
-  
   // 更新当前模块
   const matchedModule = menuLists.value.find(module => 
     to.path.startsWith(module.path) && module.path !== '/'
@@ -282,6 +294,11 @@ onBeforeRouteUpdate((to) => {
   if (matchedModule) {
     state.currentModulePath = matchedModule.path
   }
+
+  console.log('onBeforeRouteUpdate', to.path, matchedModule.path) 
+  mittBus.emit('setSendClassicChildren', setBeforeRouteUpdateClassicChildren(to.path))
+   
+
   // // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
   // let { layout, isClassicSplitMenu } = themeConfig.value
   // if (layout === 'classic' && isClassicSplitMenu) {

src/layout/navMenu/vertical.vue

@@ -70,15 +70,10 @@ const localMenuList = ref<RouteItem[]>([])
 
 // 初始化本地菜单
 localMenuList.value = props.menuList
-// Debug: initial menuList received
-console.log('vertical initial menuList:', props.menuList)
-
 // 监听父组件传入的 menuList
 watch(
   () => props.menuList,
   (newList) => {
-    // Debug: props.menuList changed
-    console.log('vertical props.menuList changed:', newList)
     localMenuList.value = newList
   },
   { immediate: true }
@@ -86,8 +81,6 @@ watch(
 
 // 订阅水平菜单发送的菜单数据
 mittBus.on('setSendColumnsChildren', (res) => {
-  // Debug: received setSendColumnsChildren event
-  console.log('vertical received setSendColumnsChildren:', res)
   localMenuList.value = res.children || []
 })
 
@@ -99,8 +92,6 @@ const getThemeConfig = computed(() => {
 })
 // 菜单高亮（详情时，父级高亮）
 const setParentHighlight = (currentRoute: RouteToFrom) => {
-  console.log('vertical currentRoute', currentRoute)
-
   const { path, meta } = currentRoute
   const pathSplit = meta?.isDynamic ? meta.isDynamicPath!.split('/') : path!.split('/')
   if (pathSplit.length >= 4 && meta?.isHide) return pathSplit.splice(0, 3).join('/')
@@ -112,14 +103,10 @@ const onALinkClick = (val: RouteItem) => {
 }
 // 页面加载时
 onMounted(() => {
-  // Debug: onMounted, current route
-  console.log('vertical onMounted route.path:', route.path)
   state.defaultActive = setParentHighlight(route)
 })
 // 路由更新时
 onBeforeRouteUpdate((to) => {
-  // Debug: onBeforeRouteUpdate, target route
-  console.log('vertical onBeforeRouteUpdate to.path:', to.path)
   state.defaultActive = setParentHighlight(to)
   const clientWidth = document.body.clientWidth
   if (clientWidth < 1000) themeConfig.value.isCollapse = false