diff --git a/src/layout/components/Menu/src/components/useRenderMenuItem.tsx b/src/layout/components/Menu/src/components/useRenderMenuItem.tsx index 17a520a610b035beacb735741da674350b31498c..eda501d04782bc1f584b9223f25474a02bbf4eed 100644 --- a/src/layout/components/Menu/src/components/useRenderMenuItem.tsx +++ b/src/layout/components/Menu/src/components/useRenderMenuItem.tsx @@ -1,54 +1,64 @@ 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 = ( - // allRouters: AppRouteRecordRaw[] = [], - menuMode: 'vertical' | 'horizontal' -) => { +export const useRenderMenuItem = (menuMode: 'vertical' | 'horizontal') => { + const { renderMenuTitle } = useRenderMenuTitle() + const { getPrefixCls } = useDesign() + const preFixCls = getPrefixCls('menu-popper') + + const renderMenuItemTitle = (router: AppRouteRecordRaw, fullPath: string) => { + return ( + + {{ + default: () => renderMenuTitle(router?.meta) + }} + + ) + } + + const renderMenuItemWithChildren = (router: AppRouteRecordRaw, fullPath: string) => { + return ( + + {{ + title: () => renderMenuTitle(router.meta), + default: () => renderMenuItem(router.children!, fullPath) + }} + + ) + } + 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(allRouters, v.path).join('/') - - const { renderMenuTitle } = useRenderMenuTitle() - - if ( - oneShowingChild && - (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) && - !meta?.alwaysShow - ) { - return ( - - {{ - default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) - }} - - ) - } else { - const { getPrefixCls } = useDesign() - - const preFixCls = getPrefixCls('menu-popper') - return ( - - {{ - title: () => renderMenuTitle(meta), - default: () => renderMenuItem(v.children!, fullPath) - }} - - ) + 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) } }) } diff --git a/src/layout/components/Menu/src/helper.ts b/src/layout/components/Menu/src/helper.ts index c26f5f4bfd8d04f5ac05964babc80cf11f810d25..7e7dd8876093ebf836e8b14642319246c53fe1c4 100644 --- a/src/layout/components/Menu/src/helper.ts +++ b/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 = (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() - - 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) - } -} diff --git a/src/utils/routerHelper.ts b/src/utils/routerHelper.ts index d9fe42aa65df69d982b3fa984c08fc467184e131..f2cd7d408da9b16c69990f4a57f735e73007b2d7 100644 --- a/src/utils/routerHelper.ts +++ b/src/utils/routerHelper.ts @@ -69,11 +69,9 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord icon: route.icon, hidden: !route.visible, noCache: !route.keepAlive, - alwaysShow: - route.children && - route.children.length === 1 && - (route.alwaysShow !== undefined ? route.alwaysShow : true) + alwaysShow: !!route.alwaysShow } + // 路由地址转首字母大写驼峰,作为路由名称,适配keepAlive let data: AppRouteRecordRaw = { path: route.path,