Skip to content

S
StandaloneFrame
Commit 601e3411 authored by wuhao's avatar wuhao 🎯
Browse files
Options

slider

parent 0a12916a
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 92 deletions
frontend/src/layouts/components/Header.jsx
View file @ 601e3411
...@@ -66,12 +66,23 @@ function Headers({ currentUser, children, broken }) { ...@@ -66,12 +66,23 @@ function Headers({ currentUser, children, broken }) {
<Dropdown <Dropdown
menu={{ menu={{
items, items,
onClick:(e)=>{ onClick: (e) => {
if(e.key === "1"){ switch (e.key) {
history.push("/mycenter") case 1:
} history.push("/mycenter");
break;
} case 4:
doFetch({ url: "/webtool/logout", params: {} }).then(
(res) => {
localStorage.removeItem("TOKENES");
history.push("/user/login");
}
);
break;
default:
break;
}
},
}} }}
placement="bottom" placement="bottom"
> >
......
frontend/src/layouts/layout.jsx
View file @ 601e3411
...@@ -30,8 +30,8 @@ const items = [UserOutlined, VideoCameraOutlined].map((icon, index) => ({ ...@@ -30,8 +30,8 @@ const items = [UserOutlined, VideoCameraOutlined].map((icon, index) => ({
})); }));
const Dashboard = () => { const Dashboard = () => {
const collapsed = true; // const collapsed = true;
const [collapseds, setCollapsed] = useState(false); const [collapsed, setCollapsed] = useState(false);
const [broken, setbroken] = useState(false); const [broken, setbroken] = useState(false);
const [open, setopen] = useState(false); const [open, setopen] = useState(false);
const { const {
...@@ -46,104 +46,109 @@ const Dashboard = () => { ...@@ -46,104 +46,109 @@ const Dashboard = () => {
const { mode } = useOutletContext(); const { mode } = useOutletContext();
const { pathname } = useLocation(); const { pathname } = useLocation();
const MenuDOM = ( const MenuDOM = (drawer) => {
<div return (
style={{
backgroundColor: colorBgDeep,
padding: 12,
height: "calc(100%)",
color: colorTextBase,
display: "flex",
flexDirection: "column",
}}
>
<div <div
className="centerl"
style={{ style={{
padding: "0px 0px 16px 6px", backgroundColor: colorBgDeep,
paddingLeft: !collapsed ? 6 : 12, padding: 12,
height: "calc(100%)",
color: colorTextBase,
display: "flex",
flexDirection: "column",
}} }}
> >
<img
src="./logo.png"
alt=""
style={{
width: 28,
marginRight: 10,
}}
onClick={() => {
history.push("/");
}}
/>
<div <div
className="centerl" className="centerl"
style={{ style={{
flex: 1, padding: "0px 0px 16px 6px",
overflow: "hidden", paddingLeft: !collapsed ? 6 : 12,
height: 40,
opacity: !collapsed ? 1 : 0,
fontSize: 16,
fontWeight: "bold",
color: colorTextBase,
}} }}
> >
<Fade duration={400} left cascade when={!collapsed}> <img
健康监测系统 src="./logo.png"
</Fade> alt=""
style={{
width: 28,
marginRight: 10,
}}
onClick={() => {
history.push("/");
}}
/>
<div
className="centerl"
style={{
flex: 1,
overflow: "hidden",
height: 40,
opacity: !collapsed ? 1 : 0,
fontSize: 16,
fontWeight: "bold",
color: colorTextBase,
}}
>
<Fade duration={400} left cascade when={!collapsed}>
健康监测系统
</Fade>
</div>
</div> </div>
</div>
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<Menu <Menu
theme={"dark"} theme={"dark"}
mode="inline" mode="inline"
selectedKeys={[pathname]} selectedKeys={[pathname]}
items={items} items={items}
style={{ style={{
background: "transparent", background: "transparent",
}} }}
onClick={(e) => { onClick={(e) => {
history.push(e.key); history.push(e.key);
}} }}
inlineIndent={12} inlineIndent={12}
/> />
</div> </div>
<div {drawer ?? (
className="spread"
style={{
width: "100%",
padding: 8,
flexDirection: collapsed && !open ? "column" : "row",
}}
>
<Tooltip title="退出登录" placement="right">
<div <div
className="sorts" className="spread"
onClick={() => { style={{
doFetch({ url: "/webtool/logout", params: {} }).then((res) => { width: "100%",
localStorage.removeItem("TOKENES"); padding: 8,
history.push("/user/login"); flexDirection: collapsed && !open ? "column" : "row",
});
}} }}
> >
<LogoutOutlined style={{ fontSize: 18, color: "#ff4800" }} /> <div></div>
{/* <Tooltip title="退出登录" placement="right">
<div
className="sorts"
onClick={() => {
doFetch({ url: "/webtool/logout", params: {} }).then((res) => {
localStorage.removeItem("TOKENES");
history.push("/user/login");
});
}}
>
<LogoutOutlined style={{ fontSize: 18, color: "#ff4800" }} />
</div>
</Tooltip> */}
<div style={{ marginTop: collapsed ? 14 : 0 }}>
<div className="sorts">
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
style: { color: colorTextBase },
onClick: () => setCollapsed(!collapsed),
}
)}
</div>
</div>
</div> </div>
</Tooltip> )}
<div style={{ marginTop: collapsed ? 14 : 0 }}>
<div className="sorts">
{React.createElement(
collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
{
className: "trigger",
style: { color: colorTextBase },
onClick: () => setCollapsed(!collapsed),
}
)}
</div>
</div>
</div> </div>
</div> );
); };
return ( return (
<Layout hasSider className="contained"> <Layout hasSider className="contained">
...@@ -160,13 +165,14 @@ const Dashboard = () => { ...@@ -160,13 +165,14 @@ const Dashboard = () => {
width={200} width={200}
getContainer={false} getContainer={false}
> >
{MenuDOM} {MenuDOM(true)}
</Drawer> </Drawer>
<Sider <Sider
breakpoint="lg" breakpoint="lg"
onBreakpoint={(broken) => { onBreakpoint={(broken) => {
setCollapsed(broken); setCollapsed(broken);
setbroken(broken); setbroken(broken);
broken === false && setopen(broken);
}} }}
style={{ style={{
overflow: "auto", overflow: "auto",
...@@ -178,7 +184,7 @@ const Dashboard = () => { ...@@ -178,7 +184,7 @@ const Dashboard = () => {
collapsed={collapsed} collapsed={collapsed}
collapsedWidth={broken ? 0 : 78} collapsedWidth={broken ? 0 : 78}
> >
{!broken && MenuDOM} {!broken && MenuDOM()}
</Sider> </Sider>
<Layout style={{ background: colorBgContainer }}> <Layout style={{ background: colorBgContainer }}>
<Headers currentUser={currentUser} broken={broken}> <Headers currentUser={currentUser} broken={broken}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment