|
|
@ -18,6 +18,7 @@ import type { MenuDataItem } from '@ant-design/pro-layout/es/typing' |
|
|
|
import { convertToMenu, flattenTree } from '@/utils' |
|
|
|
import { Flex, Menu, Space } from 'antd' |
|
|
|
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons' |
|
|
|
import { If } from 'react-if' |
|
|
|
|
|
|
|
//根据menuData生成Breadcrumb所需的数据
|
|
|
|
const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => { |
|
|
@ -186,49 +187,53 @@ export default () => { |
|
|
|
} |
|
|
|
> |
|
|
|
|
|
|
|
<Flex className={styles.childMenus}> |
|
|
|
{ |
|
|
|
!collapsed && <div className={styles.childMenuTop}> |
|
|
|
<h2>{currentMenu?.title}</h2> |
|
|
|
</div> |
|
|
|
} |
|
|
|
|
|
|
|
<Menu |
|
|
|
mode={'inline'} |
|
|
|
inlineCollapsed={collapsed} |
|
|
|
selectedKeys={[ location.pathname ]} |
|
|
|
openKeys={openMenuKeys} |
|
|
|
onOpenChange={(keys) => { |
|
|
|
setOpenKeys(keys) |
|
|
|
}} |
|
|
|
onClick={(menu) => { |
|
|
|
const info = menusFlatten.current?.find(item => item.path === menu.key) |
|
|
|
if (info) { |
|
|
|
setOpenKeys([ info.path as string ]) |
|
|
|
navigate({ |
|
|
|
to: info.path, |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
items={convertToMenu((childMenuRef.current || []), (item => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
key: item.path, |
|
|
|
label: item.title, |
|
|
|
} |
|
|
|
})) as any} |
|
|
|
style={!collapsed ? { width: 210 } : {}} |
|
|
|
/> |
|
|
|
<div className={styles.childMenuBottom} |
|
|
|
onClick={() => { |
|
|
|
setCollapsed(!collapsed) |
|
|
|
}}> |
|
|
|
<If condition={childMenuRef.current?.length > 0}> |
|
|
|
<Flex className={styles.childMenus}> |
|
|
|
{ |
|
|
|
collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/> |
|
|
|
!collapsed && <div className={styles.childMenuTop}> |
|
|
|
<h2>{currentMenu?.title}</h2> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</Flex> |
|
|
|
|
|
|
|
|
|
|
|
<Menu |
|
|
|
mode={'inline'} |
|
|
|
inlineCollapsed={collapsed} |
|
|
|
selectedKeys={[ location.pathname ]} |
|
|
|
openKeys={openMenuKeys} |
|
|
|
onOpenChange={(keys) => { |
|
|
|
setOpenKeys(keys) |
|
|
|
}} |
|
|
|
onClick={(menu) => { |
|
|
|
const info = menusFlatten.current?.find(item => item.path === menu.key) |
|
|
|
if (info) { |
|
|
|
setOpenKeys([ info.path as string ]) |
|
|
|
navigate({ |
|
|
|
to: info.path, |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
}} |
|
|
|
items={convertToMenu((childMenuRef.current || []), (item => { |
|
|
|
return { |
|
|
|
...item, |
|
|
|
key: item.path, |
|
|
|
label: item.title, |
|
|
|
} |
|
|
|
})) as any} |
|
|
|
style={!collapsed ? { width: 210 } : {}} |
|
|
|
/> |
|
|
|
<div className={styles.childMenuBottom} |
|
|
|
onClick={() => { |
|
|
|
setCollapsed(!collapsed) |
|
|
|
}}> |
|
|
|
{ |
|
|
|
collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</Flex> |
|
|
|
</If> |
|
|
|
|
|
|
|
<Flex flex={1} className={styles.body} aria-description={'main-body'} vertical={true}> |
|
|
|
<div className={styles.bodyHeader}> |
|
|
|
<PageBreadcrumb |
|
|
|