增加菜单缩放功能

src/pages/nav_system_content/SystemContentList.js

@@ -64,6 +64,7 @@ const SystemContentList = (props) => {
     const [selectedKey, setSelectedKey] = useState([])
     const [menuItems, setMenuItems] = useState([])
     const [systemType, setSystemType] = useState('安全管理系统')
+    const [isMenuCollapsed, setIsMenuCollapsed] = useState(false); // 添加菜单收缩状态
     let defaultKey = ''
 
     useEffect(() => {
@@ -170,6 +171,11 @@ const SystemContentList = (props) => {
         history.replace(curKey)
     }
 
+    // 切换菜单收缩状态
+    const toggleMenu = () => {
+        setIsMenuCollapsed(!isMenuCollapsed);
+    };
+
     const { initialState: { menu }, setInitialState } = useModel('@@initialState')
 
     const loginOut = async () => {
@@ -213,12 +219,27 @@ const SystemContentList = (props) => {
 
     return (
         <div className='pageContainer systemContent'>
-            <div className='leftMenu'>
-                <div className='menuTitle' style={{ marginBottom: '10px' }}>
+            <div
+                className='leftMenu'
+                style={{
+                    width: isMenuCollapsed ? '80px' : '230px',
+                    transition: 'width 0.3s ease',
+                    position: 'relative', // 添加相对定位，使按钮可以相对于菜单定位
+                    overflow: 'unset'
+                }}
+            >
+                <div className='menuTitle' style={{
+                    marginBottom: '10px',
+                    display: isMenuCollapsed ? 'none' : 'flex'
+                }}>
                     <img src={menuTitle} alt='menuTitle' style={{ marginTop: '20px', marginBottom: '2px', width: '172.44px', height: '51.28px' }} />
                     <img src={menuTitle1} alt='menuTitle1' style={{ width: '172.44px', height: '51.28px' }} />
                 </div>
-                <div style={{ textAlign: 'center', marginBottom: 16 }}>
+                <div style={{
+                    textAlign: 'center',
+                    marginBottom: 16,
+                    display: isMenuCollapsed ? 'none' : 'block'
+                }}>
                     <Select
                         value={systemType}
                         onChange={setSystemType}
@@ -284,7 +305,43 @@ const SystemContentList = (props) => {
                         font-size: 16px !important;
                         font-weight: 600 !important;
                     }
+                    .menuToggleBtn {
+                        position: absolute;
+                        right: -15px;
+                        top: 280px;
+                        width: 30px;
+                        height: 30px;
+                        background: #FDFDFF;
+                        color: #5C5C5C;
+                        border: 1px solid #FFFFFF;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        cursor: pointer;
+                        z-index: 9999; /* 增加z-index确保按钮在最上层 */
+                        font-size: 16px;
+                        font-weight: bold;
+                        outline: none;
+                        transition: all 0.3s ease;
+                        box-shadow: 0 0 5px 3px rgba(169, 185, 255, 0.33);
+                    }
+                    .menuToggleBtn:hover {
+                        border: 1px solid #3D81FF;
+                        background: #3D81FF;
+                        color: white;
+                        transform: scale(1.1);
+                    }
                 `}</style>
+                {/* 菜单收缩按钮 */}
+                <button
+                    className="menuToggleBtn"
+                    onClick={toggleMenu}
+                    aria-label={isMenuCollapsed ? "展开菜单" : "收缩菜单"}
+                >
+                    {isMenuCollapsed ? ">" : "<"}
+                </button>
+
                 <Menu
                     openKeys={openKey}
                     selectedKeys={selectedKey}
@@ -326,15 +383,27 @@ const SystemContentList = (props) => {
                             return { ...child };
                         });
 
-                        return { ...item, icon, children };
+                        return {
+                            ...item,
+                            icon,
+                            children,
+                            // 根据菜单收缩状态决定是否显示标签文本
+                            label: isMenuCollapsed ? null : item.label
+                        };
                     })}
                     onClick={value => setRouteActive(value)}
                     onOpenChange={value => setOpenKey(value)}
-                    mode='inline'
+                    mode={isMenuCollapsed ? 'vertical' : 'inline'}
                 />
             </div>
 
-            <div className='rightContent'>
+            <div
+                className='rightContent'
+                style={{
+                    width: isMenuCollapsed ? 'calc(100% - 80px)' : 'calc(100% - 230px)',
+                    transition: 'width 0.3s ease'
+                }}
+            >
                 {/* <div style={{ width: '100%', backgroundColor: '#fff', marginBottom: '10px' }}> */}
                 <div className='tabBarHeader'>
                     <Row className='tabBarRow'>

src/pages/nav_system_content/SystemContentList.less

@@ -79,7 +79,8 @@
 		overflow-x: hidden;
 		background-color: #2E4CD4;
 
-		.ant-menu-inline {
+		.ant-menu-inline,
+		.ant-menu-vertical {
 			background: #2E4CD4 !important;
 		}