Pre Merge pull request !304 from glacier0315/master

src/layout/components/Menu/src/Menu.vue

@@ -44,7 +44,7 @@ export default defineComponent({
     const routers = computed(() =>
       unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
     )
-
+    console.log('routers', unref(routers))
     const collapse = computed(() => appStore.getCollapse)
 
     const uniqueOpened = computed(() => appStore.getUniqueOpened)
@@ -95,6 +95,7 @@ export default defineComponent({
           {{
             default: () => {
               const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
+              console.log('renderMenu', unref(routers))
               return renderMenuItem(unref(routers))
             }
           }}

src/layout/components/Menu/src/components/useRenderMenuItem.tsx

@@ -1,40 +1,26 @@
 import { ElSubMenu, ElMenuItem } from 'element-plus'
 import type { RouteMeta } from 'vue-router'
-import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
 import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'
 
-export const useRenderMenuItem = (
+export const useRenderMenuItem = (menuMode: 'vertical' | 'horizontal') => {
-  // allRouters: AppRouteRecordRaw[] = [],
-  menuMode: 'vertical' | 'horizontal'
-) => {
-  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
-    return routers.map((v) => {
-      const meta = (v.meta ?? {}) as RouteMeta
-      if (!meta.hidden) {
-        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
-
   const { renderMenuTitle } = useRenderMenuTitle()
+  const { getPrefixCls } = useDesign()
+  const preFixCls = getPrefixCls('menu-popper')
 
-        if (
+  const renderMenuItemTitle = (router: AppRouteRecordRaw, fullPath: string) => {
-          oneShowingChild &&
-          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
-          !meta?.alwaysShow
-        ) {
     return (
-            <ElMenuItem index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}>
+      <ElMenuItem index={fullPath}>
         {{
-                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
+          default: () => renderMenuTitle(router?.meta)
         }}
       </ElMenuItem>
     )
-        } else {
+  }
-          const { getPrefixCls } = useDesign()
 
-          const preFixCls = getPrefixCls('menu-popper')
+  const renderMenuItemWithChildren = (router: AppRouteRecordRaw, fullPath: string) => {
     return (
       <ElSubMenu
         index={fullPath}
@@ -43,12 +29,36 @@ export const useRenderMenuItem = (
         }
       >
         {{
-                title: () => renderMenuTitle(meta),
+          title: () => renderMenuTitle(router.meta),
-                default: () => renderMenuItem(v.children!, fullPath)
+          default: () => renderMenuItem(router.children!, fullPath)
         }}
       </ElSubMenu>
     )
   }
+
+  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    return routers.map((v) => {
+      const meta = (v.meta ?? {}) as RouteMeta
+      if (!meta.hidden) {
+        const { children = [] } = v
+
+        const showingChildren = children.filter((v) => !v.meta.hidden)
+
+        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path)
+
+        if (!showingChildren.length) {
+          return renderMenuItemTitle(v, fullPath)
+        }
+        if (showingChildren.length === 1 && !meta?.alwaysShow) {
+          const child = showingChildren[0]
+          const childFullPath = isUrl(child.path) ? child.path : pathResolve(fullPath, child.path)
+          if (!child.children) {
+            return renderMenuItemTitle(child, childFullPath)
+          } else {
+            return renderMenuItemWithChildren(child, childFullPath)
+          }
+        }
+        return renderMenuItemWithChildren(v, fullPath)
       }
     })
   }

src/layout/components/Menu/src/helper.ts

@@ -1,54 +1,6 @@
-import type { RouteMeta } from 'vue-router'
 import { findPath } from '@/utils/tree'
 
-type OnlyOneChildType = AppRouteRecordRaw & { noShowingChildren?: boolean }
-
-interface HasOneShowingChild {
-  oneShowingChild?: boolean
-  onlyOneChild?: OnlyOneChildType
-}
-
 export const getAllParentPath = <T = Recordable>(treeData: T[], path: string) => {
   const menuList = findPath(treeData, (n) => n.path === path) as AppRouteRecordRaw[]
   return (menuList || []).map((item) => item.path)
 }
-
-export const hasOneShowingChild = (
-  children: AppRouteRecordRaw[] = [],
-  parent: AppRouteRecordRaw
-): HasOneShowingChild => {
-  const onlyOneChild = ref<OnlyOneChildType>()
-
-  const showingChildren = children.filter((v) => {
-    const meta = (v.meta ?? {}) as RouteMeta
-    if (meta.hidden) {
-      return false
-    } else {
-      // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = v
-      return true
-    }
-  })
-
-  // When there is only one child router, the child router is displayed by default
-  if (showingChildren.length === 1) {
-    return {
-      oneShowingChild: true,
-      onlyOneChild: unref(onlyOneChild)
-    }
-  }
-
-  // Show parent if there are no child router to display
-  if (!showingChildren.length) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
-    return {
-      oneShowingChild: true,
-      onlyOneChild: unref(onlyOneChild)
-    }
-  }
-
-  return {
-    oneShowingChild: false,
-    onlyOneChild: unref(onlyOneChild)
-  }
-}

src/utils/routerHelper.ts

@@ -69,11 +69,9 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
       icon: route.icon,
       hidden: !route.visible,
       noCache: !route.keepAlive,
-      alwaysShow:
+      alwaysShow: !!route.alwaysShow
-        route.children &&
-        route.children.length === 1 &&
-        (route.alwaysShow !== undefined ? route.alwaysShow : true)
     }
+
     // 路由地址转首字母大写驼峰，作为路由名称，适配keepAlive
     let data: AppRouteRecordRaw = {
       path: route.path,