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,