feat(web): 调整侧边栏实现

service-web/client/src/pages/App.tsx

@@ -1,7 +1,7 @@
 import {type AppItemProps, ProLayout} from '@ant-design/pro-components'
 import {ConfigProvider} from 'antd'
 import {dateFormat} from 'licia'
-import React, {useMemo} from 'react'
+import React, {useMemo, useState} from 'react'
 import {Outlet, useLocation, useNavigate} from 'react-router'
 import styled from 'styled-components'
 import {menus} from '../route.tsx'
@@ -14,7 +14,7 @@ const ProLayoutDiv = styled.div`
     margin: 0;
 
     .ant-menu-sub > .ant-menu-item {
-        padding-left: 16px !important;
+        //padding-left: 28px !important;
     }
 `
 
@@ -52,10 +52,13 @@ const apps: AppItemProps[] = [
 const App: React.FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
+  const [collapsed, setCollapsed] = useState<boolean>(false)
   const currentYear = useMemo(() => dateFormat(new Date(), 'yyyy'), [])
   return (
     <ProLayoutDiv>
       <ProLayout
+        collapsed={collapsed}
+        onCollapse={setCollapsed}
         siderWidth={180}
         token={{
           colorTextAppListIcon: '#dfdfdf',
@@ -78,7 +81,6 @@ const App: React.FC = () => {
           },
         }}
         appList={apps}
-        defaultCollapsed={false}
         breakpoint={false}
         disableMobile={true}
         logo={<img src="icon.png" alt="logo"/>}
@@ -86,11 +88,12 @@ const App: React.FC = () => {
         route={menus}
         location={{pathname: location.pathname}}
         menu={{type: 'sub'}}
-        menuItemRender={(item) => {
+        menuItemRender={(item, defaultDom) => {
           return (
             <div onClick={() => navigate(item.path || '/')}>
-              {item.icon}
+              {/*<span className="align-center">{item.icon}</span>*/}
-              <span className="ml-2">{item.name}</span>
+              {/*<span className="ml-2">{item.name}</span>*/}
+              {defaultDom}
             </div>
           )
         }}