From cfb4a5f5f7525847fadadbbd3d15fbab0defe98d Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 8 Dec 2023 10:54:26 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 12 ++++++------
 src/App.jsx       | 22 +++++++++++++++++-----
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6d4aa92..5eb84ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19363,9 +19363,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.1.1.tgz",
-      "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "node_modules/supercluster": {
       "version": "7.1.5",
@@ -35568,9 +35568,9 @@
       }
     },
     "stylis": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.1.1.tgz",
-      "integrity": "sha512-lVrM/bNdhVX2OgBFNa2YJ9Lxj7kPzylieHd3TNjuGE0Re9JB7joL5VUKOVH1kdNNJTgGPpT8hmwIAPLaSyEVFQ=="
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
     },
     "supercluster": {
       "version": "7.1.5",
diff --git a/src/App.jsx b/src/App.jsx
index 45919d2..06cee48 100644
--- a/src/App.jsx
+++ b/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} />
-              <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={['2', '5']} mode="inline" items={menu_items} />
+              {/* <Image src={Logo} preview={false} /> */}
+              <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={[]} mode="inline" items={menu_items} onClick={() => setCollapsed(!collapsed)} />
             </Sider>
 
             <Layout className="site-layout">