feat: 优化侧边栏布局，添加侧边栏状态存储和悬停效果

apps/admin/src/components/layout/index.jsx

@@ -53,6 +53,7 @@ import logo from '@/assets/images/logo.png'
 import { getMenuList, checkSSOLogin } from '@/api/base'
 
 const { Header, Content, Sider } = Layout
+const SIDER_COLLAPSED_STORAGE_KEY = 'kiwi.admin.sider.collapsed'
 
 function getMenuIcon(item, hasChildren) {
   const name = item.name || ''
@@ -173,7 +174,11 @@ export default function AppLayout() {
   const { pathname } = useLocation()
   const navigate = useNavigate()
   const [menuList, setMenuList] = useState([])
-  const [collapsed, setCollapsed] = useState(false)
+  const [collapsed, setCollapsed] = useState(
+    () => localStorage.getItem(SIDER_COLLAPSED_STORAGE_KEY) !== 'false',
+  )
+  const [siderHovered, setSiderHovered] = useState(false)
+  const siderCollapsed = collapsed && !siderHovered
   const headerOverride = pageHeaderOverrides[pathname]
   const pageTitle = headerOverride?.title || getCurrentMenuTitle(menuList, pathname)
 
@@ -208,10 +213,6 @@ export default function AppLayout() {
     })()
   }, [])
 
-  useEffect(() => {
-    if (menuList.length) setCollapsed(menuList.length < 3)
-  }, [menuList.length])
-
   useEffect(() => {
     if (pathname !== '/books/management' || !menuList.length || hasMenuPath(menuList, pathname)) {
       return
@@ -226,37 +227,46 @@ export default function AppLayout() {
   return (
     <Layout className='layout-container'>
       <EditorIconSprite />
-      <Sider
-        className='layout-sider'
-        width={240}
-        collapsedWidth={64}
-        collapsed={collapsed}
-        theme='light'
-        trigger={null}
-      >
-        <div className='layout-brand'>
-          <Link className='layout-brand__logo' to='/' aria-label='返回工作台首页'>
-            <img src={logo} alt='清控紫荆数智学堂' />
-          </Link>
-        </div>
-        <div className='layout-sider__body'>
-          <Menu menuList={menuList} collapsed={collapsed}></Menu>
-        </div>
-        <Tooltip title={collapsed ? '展开侧边菜单' : '收起侧边菜单'} placement='right'>
-          <Button
-            className='layout-sider-toggle'
-            type='text'
-            onClick={() => setCollapsed((value) => !value)}
-            aria-label={collapsed ? '展开侧边菜单' : '收起侧边菜单'}
-          >
-            {collapsed ? (
-              <RiMenuUnfoldLine aria-hidden='true' />
-            ) : (
-              <RiMenuFoldLine aria-hidden='true' />
-            )}
-          </Button>
-        </Tooltip>
-      </Sider>
+      <div className={`layout-sider-slot${collapsed ? ' layout-sider-slot--collapsed' : ''}`}>
+        <Sider
+          className='layout-sider'
+          width={240}
+          collapsedWidth={64}
+          collapsed={siderCollapsed}
+          theme='light'
+          trigger={null}
+          onMouseEnter={() => setSiderHovered(true)}
+          onMouseLeave={() => setSiderHovered(false)}
+        >
+          <div className='layout-brand'>
+            <Link className='layout-brand__logo' to='/' aria-label='返回工作台首页'>
+              <img src={logo} alt='清控紫荆数智学堂' />
+            </Link>
+          </div>
+          <div className='layout-sider__body'>
+            <Menu menuList={menuList} collapsed={siderCollapsed}></Menu>
+          </div>
+          <Tooltip title={collapsed ? '固定展开侧边菜单' : '收起侧边菜单'} placement='right'>
+            <Button
+              className='layout-sider-toggle'
+              type='text'
+              onClick={() =>
+                setCollapsed((value) => {
+                  localStorage.setItem(SIDER_COLLAPSED_STORAGE_KEY, String(!value))
+                  return !value
+                })
+              }
+              aria-label={collapsed ? '固定展开侧边菜单' : '收起侧边菜单'}
+            >
+              {collapsed ? (
+                <RiMenuUnfoldLine aria-hidden='true' />
+              ) : (
+                <RiMenuFoldLine aria-hidden='true' />
+              )}
+            </Button>
+          </Tooltip>
+        </Sider>
+      </div>
       <Layout className='layout-main'>
         <Header className='layout-header'>
           <div className='layout-page-header'>

apps/admin/src/components/layout/index.less

@@ -5,6 +5,21 @@
   background: #fff;
 }
 
+.layout-sider-slot {
+  flex: 0 0 240px;
+  width: 240px;
+  height: 100vh;
+}
+
+.layout-sider-slot--collapsed {
+  flex-basis: 64px;
+  width: 64px;
+
+  .layout-sider:not(.ant-layout-sider-collapsed) {
+    z-index: 102;
+  }
+}
+
 .layout-sider {
   position: sticky !important;
   top: 0;