import { Content, Footer, Header } from "antd/es/layout/layout"; import "./layout.less"; import { inject, observer } from "mobx-react"; import { Store } from "antd/es/form/interface"; import { useEffect, useState } from "react"; import { Avatar, Breadcrumb, Layout, Menu, MenuProps, theme } from "antd"; import { UserOutlined } from "@ant-design/icons"; import Sider from "antd/es/layout/Sider"; import { items, headItems } from "./layout_config"; import { Dropdown } from "antd/lib"; import { Outlet, useNavigate } from "react-router"; const getLevelKeys = (items1) => { const key: Record = {}; const func = (items2: [], level = 1) => { items2.forEach((item: any) => { if (item.key) { key[item.key] = level; } if (item.children) { func(item.children, level + 1); } }); }; func(items1); return key; }; const levelKeys = getLevelKeys(items); const LayOut = (props: Store) => { const { usrStore } = props; const [collapsed, setCollapsed] = useState(false); const nav = useNavigate(); const [muens, setMenus] = useState([]) const [uName, setUname] = useState("") const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); const headStyle = { display: "flex", alignItems: "center", justifyContent: "space-between", }; const logoStyle = { width: 60, color: "white" }; const contentstyle = { padding: "12px 0px 12px 12px", margin: 0, minHeight: 280, background: colorBgContainer, borderRadius: borderRadiusLG, }; const breadItem = [ { title: "首页" }, { title: "数据集管理" }, { title: "数据管理" }, ]; const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']); useEffect(() => { const uData = window.localStorage.getItem("user") ?? ''; setUname(JSON.parse(uData).user.user_name) usrStore.getMenu().then((res) => { const men: any = []; res.forEach(ele => { items.forEach((v: any) => { if (ele.router_path === v.key) { if (ele.children?.length > 0) { const childs: any = [] ele.children?.forEach(eles => { v.children?.forEach(vs => { if (eles.router_path === vs.key) { childs.push(vs) } }); }); v.children = childs } men.push(v) } }) }); setMenus(men) }) }, [usrStore, usrStore.isNeedLogin]); const onOpenChange: MenuProps['onOpenChange'] = (openKeys) => { const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1); // open if (currentOpenKey !== undefined) { const repeatIndex = openKeys .filter((key) => key !== currentOpenKey) .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]); setStateOpenKeys( openKeys .filter((_, index) => index !== repeatIndex) .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]), ); } else { // close setStateOpenKeys(openKeys); } }; return (
黄甲数据
{ if (e.key === "loginout") { window.localStorage.removeItem("token") nav("/login") return } nav(e.key) } }}>
欢迎回来 {uName} } />
setCollapsed(value)} > { nav(e.key); }} /> ); }; export default inject("usrStore")(observer(LayOut));