diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
index f8a2222..4bda634 100644
--- a/src/components/breadcrumb/index.tsx
+++ b/src/components/breadcrumb/index.tsx
@@ -3,11 +3,13 @@ import { Link, useNavigate } from '@tanstack/react-router'
import { DownOutlined } from '@ant-design/icons'
import { getIcon } from '@/components/icon'
import { memo, useCallback } from 'react'
+import { useStyle } from './style.ts'
export const PageBreadcrumb = memo((props: BreadcrumbProps & {
showIcon?: boolean;
}) => {
+ const { styles }= useStyle()
const nav = useNavigate()
const { items = [], showIcon = true, ...other } = props
@@ -27,51 +29,54 @@ export const PageBreadcrumb = memo((props: BreadcrumbProps & {
return {
...item,
key: item.path || item.name,
- label: item.name,
+ label: {item.name},
}
})
return (
- {
- nav({
- to: e.key
- })
- }
- }}
- trigger={[ 'hover' ]}>
- {
- (!route.component || !route.path) ?
- {renderIcon(route.icon)}{route.name}
-
- : {renderIcon(route.icon)}{route.name}
-
-
- }
+ {
+ nav({
+ to: e.key
+ })
+ }
+ }}
+ trigger={[ 'hover' ]}>
+ {
+ (!route.component || !route.path) ?
+ {renderIcon(route.icon)}{route.name}
+
+ : {renderIcon(route.icon)}{route.name}
+
+
+ }
-
+
)
}
return isLast || !route.path ? (
- {renderIcon(route.icon)}{route.name}
+ {renderIcon(route.icon)}{route.name}
) : (
- {renderIcon(route.icon)}{route.name}
+ {renderIcon(route.icon)}{route.name}
)
}
return (
-
-
-
+
+
+
)
})
diff --git a/src/components/breadcrumb/style.ts b/src/components/breadcrumb/style.ts
new file mode 100644
index 0000000..c0cb471
--- /dev/null
+++ b/src/components/breadcrumb/style.ts
@@ -0,0 +1,15 @@
+import { createStyles } from '@/theme'
+
+export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
+ const prefix = `${prefixCls}-${token?.proPrefix}-header-breadcrumb`
+
+ const container = css`
+ .ant-dropdown-menu-title-content {
+ padding-inline-start: 10px;
+ }
+ `
+
+ return {
+ container: cx(prefix, props?.className, container)
+ }
+}) as any
diff --git a/src/global.d.ts b/src/global.d.ts
index a33ae76..e15e348 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -38,8 +38,8 @@ export type IApiResult = {
}
export type TreeItem = {
- [key: keyof T]: T[keyof T];
children?: TreeItem[];
+ [key: keyof T]: T[keyof T];
}
export type FlattenData = TreeItem & {
@@ -47,6 +47,8 @@ export type FlattenData = TreeItem & {
title?: string,
label?: string,
level?: number,
+
+ [key: keyof T]: T[keyof T];
}
export type FiledNames = {
diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx
index 45ef9bd..45b9fa2 100644
--- a/src/layout/RootLayout.tsx
+++ b/src/layout/RootLayout.tsx
@@ -9,12 +9,13 @@ import { ProConfigProvider, ProLayout, } from '@ant-design/pro-components'
import { zhCNIntl, enUSIntl } from '@ant-design/pro-provider/es/intl'
import { CatchBoundary, Link, Outlet } from '@tanstack/react-router'
import { ConfigProvider } from '@/components/config-provider'
-import { useState } from 'react'
-import defaultProps from './_defaultProps'
+import { useEffect, useRef, useState } from 'react'
import { useAtomValue } from 'jotai'
import { useStyle } from '@/layout/style.ts'
import zh from 'antd/locale/zh_CN'
import en from 'antd/locale/en_US'
+import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
+import { flattenTree } from '@/utils'
//根据menuData生成Breadcrumb所需的数据
const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -46,98 +47,181 @@ export default () => {
const items = getBreadcrumbData(menuData, location.pathname)
const [ pathname, setPathname ] = useState(location.pathname)
+ const menusFlatten = useRef