From e4e6ee9afa1efbd074312e06650716f8fe12b1eb Mon Sep 17 00:00:00 2001 From: glacier Date: Thu, 2 Nov 2023 17:59:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 修复菜单显示错误问题 --- .../Menu/src/components/useRenderMenuItem.tsx | 88 +++++++++++-------- src/layout/components/Menu/src/helper.ts | 48 ---------- src/utils/routerHelper.ts | 6 +- 3 files changed, 51 insertions(+), 91 deletions(-) diff --git a/src/layout/components/Menu/src/components/useRenderMenuItem.tsx b/src/layout/components/Menu/src/components/useRenderMenuItem.tsx index 17a520a61..eda501d04 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 c26f5f4bf..7e7dd8876 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 d9fe42aa6..f2cd7d408 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, -- Gitee