提交 1dd30bce authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 3cd06846
import { useState } from 'react' import { useState, useEffect, useMemo } from 'react'
import { Outlet, NavLink, useLocation } from 'react-router' import { Outlet, NavLink, useLocation } from 'react-router'
import { import {
CircleArrowRight, CircleArrowRight,
...@@ -26,6 +26,7 @@ type MenuItem = Required<MenuProps>['items'][number] ...@@ -26,6 +26,7 @@ type MenuItem = Required<MenuProps>['items'][number]
export default function DataLayout() { export default function DataLayout() {
const [collapsed, setCollapsed] = useState(false) const [collapsed, setCollapsed] = useState(false)
const [openKeys, setOpenKeys] = useState<string[]>([])
const toggleCollapsed = () => { const toggleCollapsed = () => {
setCollapsed(!collapsed) setCollapsed(!collapsed)
...@@ -34,7 +35,8 @@ export default function DataLayout() { ...@@ -34,7 +35,8 @@ export default function DataLayout() {
const location = useLocation() const location = useLocation()
const selectedKeys = [location.pathname] const selectedKeys = [location.pathname]
const menus: MyMenuItem[] = [ const menus: MyMenuItem[] = useMemo(() => {
return [
{ {
icon: <Database />, icon: <Database />,
name: '数据采集', name: '数据采集',
...@@ -136,6 +138,26 @@ export default function DataLayout() { ...@@ -136,6 +138,26 @@ export default function DataLayout() {
path: '/data/screen', path: '/data/screen',
}, },
] ]
}, [])
useEffect(() => {
// 根据当前路径计算需要展开的菜单项
const calculateOpenKeys = (menus: MyMenuItem[]): string[] => {
for (const menu of menus) {
if (menu.children) {
if (menu.children.some((child) => child.path === location.pathname)) {
return [menu.path]
}
const result = calculateOpenKeys(menu.children)
if (result.length > 0) {
return [menu.path, ...result]
}
}
}
return []
}
setOpenKeys(calculateOpenKeys(menus))
}, [location.pathname, menus])
const menusToMenuItems = (menus: MyMenuItem[]): MenuItem[] => { const menusToMenuItems = (menus: MyMenuItem[]): MenuItem[] => {
return menus.map((item) => { return menus.map((item) => {
...@@ -165,7 +187,14 @@ export default function DataLayout() { ...@@ -165,7 +187,14 @@ export default function DataLayout() {
<span onClick={toggleCollapsed}>{collapsed ? <CircleArrowRight /> : <CircleArrowLeft />}</span> <span onClick={toggleCollapsed}>{collapsed ? <CircleArrowRight /> : <CircleArrowLeft />}</span>
</div> </div>
<div className="data-layout-sidebar-nav"> <div className="data-layout-sidebar-nav">
<Menu items={items} mode="inline" inlineCollapsed={collapsed} selectedKeys={selectedKeys} /> <Menu
items={items}
mode="inline"
inlineCollapsed={collapsed}
selectedKeys={selectedKeys}
openKeys={openKeys}
onOpenChange={setOpenKeys}
/>
</div> </div>
</div> </div>
<div className="data-layout-container"> <div className="data-layout-container">
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论