slider

frontend/src/layouts/components/Header.jsx

@@ -66,12 +66,23 @@ function Headers({ currentUser, children, broken }) {
         <Dropdown
           menu={{
             items,
-            onClick:(e)=>{
-                if(e.key === "1"){
-                    history.push("/mycenter")
-                }
-
-            }
+            onClick: (e) => {
+              switch (e.key) {
+                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"
         >

frontend/src/layouts/layout.jsx

@@ -30,8 +30,8 @@ const items = [UserOutlined, VideoCameraOutlined].map((icon, index) => ({
 }));
 
 const Dashboard = () => {
-  const collapsed = true;
-  const [collapseds, setCollapsed] = useState(false);
+  // const collapsed = true;
+  const [collapsed, setCollapsed] = useState(false);
   const [broken, setbroken] = useState(false);
   const [open, setopen] = useState(false);
   const {
@@ -46,104 +46,109 @@ const Dashboard = () => {
   const { mode } = useOutletContext();
   const { pathname } = useLocation();
 
-  const MenuDOM = (
-    <div
-      style={{
-        backgroundColor: colorBgDeep,
-        padding: 12,
-        height: "calc(100%)",
-        color: colorTextBase,
-        display: "flex",
-        flexDirection: "column",
-      }}
-    >
+  const MenuDOM = (drawer) => {
+    return (
       <div
-        className="centerl"
         style={{
-          padding: "0px 0px 16px 6px",
-          paddingLeft: !collapsed ? 6 : 12,
+          backgroundColor: colorBgDeep,
+          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
           className="centerl"
           style={{
-            flex: 1,
-            overflow: "hidden",
-            height: 40,
-            opacity: !collapsed ? 1 : 0,
-            fontSize: 16,
-            fontWeight: "bold",
-            color: colorTextBase,
+            padding: "0px 0px 16px 6px",
+            paddingLeft: !collapsed ? 6 : 12,
           }}
         >
-          <Fade duration={400} left cascade when={!collapsed}>
-            健康监测系统
-          </Fade>
+          <img
+            src="./logo.png"
+            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 style={{ flex: 1 }}>
-        <Menu
-          theme={"dark"}
-          mode="inline"
-          selectedKeys={[pathname]}
-          items={items}
-          style={{
-            background: "transparent",
-          }}
-          onClick={(e) => {
-            history.push(e.key);
-          }}
-          inlineIndent={12}
-        />
-      </div>
-      <div
-        className="spread"
-        style={{
-          width: "100%",
-          padding: 8,
-          flexDirection: collapsed && !open ? "column" : "row",
-        }}
-      >
-        <Tooltip title="退出登录" placement="right">
+        <div style={{ flex: 1 }}>
+          <Menu
+            theme={"dark"}
+            mode="inline"
+            selectedKeys={[pathname]}
+            items={items}
+            style={{
+              background: "transparent",
+            }}
+            onClick={(e) => {
+              history.push(e.key);
+            }}
+            inlineIndent={12}
+          />
+        </div>
+        {drawer ?? (
           <div
-            className="sorts"
-            onClick={() => {
-              doFetch({ url: "/webtool/logout", params: {} }).then((res) => {
-                localStorage.removeItem("TOKENES");
-                history.push("/user/login");
-              });
+            className="spread"
+            style={{
+              width: "100%",
+              padding: 8,
+              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>
-        </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>
-  );
+    );
+  };
 
   return (
     <Layout hasSider className="contained">
@@ -160,13 +165,14 @@ const Dashboard = () => {
         width={200}
         getContainer={false}
       >
-        {MenuDOM}
+        {MenuDOM(true)}
       </Drawer>
       <Sider
         breakpoint="lg"
         onBreakpoint={(broken) => {
           setCollapsed(broken);
           setbroken(broken);
+          broken === false && setopen(broken);
         }}
         style={{
           overflow: "auto",
@@ -178,7 +184,7 @@ const Dashboard = () => {
         collapsed={collapsed}
         collapsedWidth={broken ? 0 : 78}
       >
-        {!broken && MenuDOM}
+        {!broken && MenuDOM()}
       </Sider>
       <Layout style={{ background: colorBgContainer }}>
         <Headers currentUser={currentUser} broken={broken}>