perf: 移动端折叠导航

package-lock.json

@@ -19363,9 +19363,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.1",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ=="
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supercluster": {
       "version": "7.1.5",
@@ -35568,9 +35568,9 @@
       }
     },
     "stylis": {
-      "version": "4.1.1",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ=="
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "supercluster": {
       "version": "7.1.5",

src/App.jsx

@@ -1,5 +1,5 @@
 import './App.css';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import {
   HomeOutlined,
   TeamOutlined,
@@ -48,9 +48,11 @@ import { stores_Context, APP_VERSION } from './config';
 import { WaterMark } from '@ant-design/pro-components';
 
 const App = () => {
-  const { Content, Footer, Sider } = Layout;
+  const { Content, Footer, Sider, } = Layout;
   const { auth_store } = useContext(stores_Context);
 
+  const [collapsed, setCollapsed] = useState(false);
+
   const menu_items = [
     { key: 1, label: <NavLink to="/">欢迎</NavLink>, icon: <CoffeeOutlined /> },
     { key: 'annual', label: <NavLink to="/annual">综合看板</NavLink>, icon: <DashboardOutlined /> },
@@ -170,17 +172,27 @@ const App = () => {
             <Sider
               collapsible={true}
               breakpoint="lg"
+              collapsedWidth="0"
+              collapsed={collapsed}
               style={{
-                overflow: 'auto',
+                // overflow: 'auto',
                 height: '100vh',
                 position: 'sticky',
                 left: 0,
                 top: 0,
                 bottom: 0,
+                zIndex: 999,
+              }}
+              zeroWidthTriggerStyle={collapsed ? { zIndex: 90, bottom: '64px', top: 'unset', left: 'unset', right: '-34px' } : { bottom: '64px', top: 'unset', left: 'unset', right: 0 }}
+              // onBreakpoint={(broken) => {
+              //   console.log(broken);
+              // }}
+              onCollapse={(collapsed, type) => {
+                setCollapsed(collapsed);
               }}
             >
-              <Image src={Logo} preview={false} />
+              {/* <Image src={Logo} preview={false} /> */}
-              <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['2', '5']} mode="inline" items={menu_items} />
+              <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={[]} mode="inline" items={menu_items} onClick={() => setCollapsed(!collapsed)} />
             </Sider>
 
             <Layout className="site-layout">