102 lines
2.8 KiB
TypeScript
102 lines
2.8 KiB
TypeScript
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,
|
|
Image,
|
|
} from "antd";
|
|
import { UserOutlined } from "@ant-design/icons";
|
|
import Sider from "antd/es/layout/Sider";
|
|
import { items } from "./layout_config";
|
|
import { Dropdown } from "antd/lib";
|
|
import { Outlet, useNavigate } from "react-router";
|
|
import logo from "@/static/favicon.png";
|
|
const LayOut = (props: Store) => {
|
|
const { usrStore } = props;
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
|
|
const nav = useNavigate();
|
|
const {
|
|
token: { colorBgContainer, borderRadiusLG },
|
|
} = theme.useToken();
|
|
const headStyle = {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
|
|
};
|
|
const logoStyle = { width: 140, color: "white",display:"flex" };
|
|
const contentstyle = {
|
|
padding: 12,
|
|
margin: 0,
|
|
minHeight: 280,
|
|
background: colorBgContainer,
|
|
borderRadius: borderRadiusLG,
|
|
|
|
};
|
|
const breadItem = [
|
|
{ title: "首页" },
|
|
{ title: "数据集管理" },
|
|
{ title: "数据管理" },
|
|
];
|
|
useEffect(() => {
|
|
if (usrStore.isNeedLogin) {
|
|
nav("/login");
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [usrStore.isNeedLogin]);
|
|
|
|
return (
|
|
<Layout>
|
|
<Header style={headStyle}>
|
|
<div style={logoStyle}>
|
|
<Image src={logo} style={{ width: 40, height: 40,marginRight:10 ,borderRadius:10 }} />
|
|
<span>侬浓深情</span>
|
|
</div>
|
|
<Dropdown menu={{ items }}>
|
|
<Avatar icon={<UserOutlined />} />
|
|
</Dropdown>
|
|
</Header>
|
|
<Layout>
|
|
<Sider
|
|
width={150}
|
|
style={{ background: colorBgContainer }}
|
|
collapsible
|
|
collapsed={collapsed}
|
|
onCollapse={(value) => setCollapsed(value)}
|
|
>
|
|
<Menu
|
|
mode="inline"
|
|
theme="dark"
|
|
defaultSelectedKeys={["1"]}
|
|
defaultOpenKeys={["sub1"]}
|
|
style={{ height: "100%", borderRight: 0 ,overflowY:"auto"}}
|
|
items={items}
|
|
onClick={(e) => {
|
|
nav(e.key);
|
|
}}
|
|
/>
|
|
</Sider>
|
|
<Layout style={{ padding: "0 15px 15px" }}>
|
|
<Breadcrumb items={breadItem} style={{ margin: "10px 0" }} />
|
|
<Content style={{...contentstyle,overflowX:"auto"}}>
|
|
<Outlet />
|
|
</Content>
|
|
<Footer style={{ textAlign: "center" }}>
|
|
Ant Design ©{new Date().getFullYear()} Created by Ant UED
|
|
</Footer>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default inject("usrStore")(observer(LayOut));
|