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,13 +227,16 @@ export default function AppLayout() {
   return (
     <Layout className='layout-container'>
       <EditorIconSprite />
+      <div className={`layout-sider-slot${collapsed ? ' layout-sider-slot--collapsed' : ''}`}>
         <Sider
           className='layout-sider'
           width={240}
           collapsedWidth={64}
-        collapsed={collapsed}
+          collapsed={siderCollapsed}
           theme='light'
           trigger={null}
+          onMouseEnter={() => setSiderHovered(true)}
+          onMouseLeave={() => setSiderHovered(false)}
         >
           <div className='layout-brand'>
             <Link className='layout-brand__logo' to='/' aria-label='返回工作台首页'>
@@ -240,14 +244,19 @@ export default function AppLayout() {
             </Link>
           </div>
           <div className='layout-sider__body'>
-          <Menu menuList={menuList} collapsed={collapsed}></Menu>
+            <Menu menuList={menuList} collapsed={siderCollapsed}></Menu>
           </div>
-        <Tooltip title={collapsed ? '展开侧边菜单' : '收起侧边菜单'} placement='right'>
+          <Tooltip title={collapsed ? '固定展开侧边菜单' : '收起侧边菜单'} placement='right'>
             <Button
               className='layout-sider-toggle'
               type='text'
-            onClick={() => setCollapsed((value) => !value)}
-            aria-label={collapsed ? '展开侧边菜单' : '收起侧边菜单'}
+              onClick={() =>
+                setCollapsed((value) => {
+                  localStorage.setItem(SIDER_COLLAPSED_STORAGE_KEY, String(!value))
+                  return !value
+                })
+              }
+              aria-label={collapsed ? '固定展开侧边菜单' : '收起侧边菜单'}
             >
               {collapsed ? (
                 <RiMenuUnfoldLine aria-hidden='true' />
@@ -257,6 +266,7 @@ export default function AppLayout() {
             </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;