update

spug_web2/src/layout/Header.jsx

@@ -1,7 +1,7 @@
-import {useContext} from 'react'
-import {Layout, Flex, Dropdown} from 'antd'
+import {useContext, useEffect} from 'react'
+import {Dropdown, Flex, Layout, theme as antdTheme} from 'antd'
 import {AiOutlineTranslation} from 'react-icons/ai'
-import {IoSunny, IoMoon} from 'react-icons/io5'
+import {IoMoon, IoSunny} from 'react-icons/io5'
 import {SContext} from '@/libs'
 import css from './index.module.scss'
 import i18n from '@/i18n.js'
@@ -9,6 +9,12 @@ import logo from "@/assets/spug-default.png";
 
 function Header() {
   const {S: {theme}, updateS} = useContext(SContext)
+  const {token} = antdTheme.useToken()
+
+  useEffect(() => {
+    document.body.style.backgroundColor = token.colorBgLayout
+  }, [theme])
+
 
   function handleThemeChange() {
     const newTheme = theme === 'light' ? 'dark' : 'light'

spug_web2/src/layout/index.jsx

@@ -1,3 +1,4 @@
+import {useState} from 'react'
 import {Outlet, useMatches, useNavigate} from 'react-router-dom'
 import {Layout, Flex, Menu, theme} from 'antd'
 import Header from './Header.jsx'
@@ -6,6 +7,7 @@ import css from './index.module.scss'
 
 
 function LayoutIndex() {
+  const [collapsed, setCollapsed] = useState(false);
   const {token: {colorTextTertiary}} = theme.useToken()
   const navigate = useNavigate()
   const matches = useMatches()
@@ -19,12 +21,15 @@ function LayoutIndex() {
     <Layout style={{minHeight: '100vh'}}>
       <Header/>
       <Layout>
-        <Layout.Sider theme="light" collapsible className={css.sider}>
-          <Menu theme="light" mode="inline" items={menus} selectedKeys={[selectedKey]}
+        <div style={{width: collapsed ? 80 : 200, transition: 'all 0.2s'}}/>
+        <Layout.Sider theme="light" collapsible className={css.sider} collapsed={collapsed} onCollapse={setCollapsed}>
+          <Menu mode="inline" items={menus} selectedKeys={[selectedKey]}
                 onClick={handleMenuClick}/>
         </Layout.Sider>
-        <Layout.Content style={{margin: '16px 16px 0 16px'}}>
+        <Layout.Content style={{margin: '64px 16px 0 16px'}}>
+          <div style={{minHeight: 'calc(100vh - 64px - 54px'}}>
             <Outlet/>
+          </div>
           <Layout.Footer>
             <Flex justify="center" align="center" style={{color: colorTextTertiary}}>
               Copyright © 2023 OpenSpug All Rights Reserved.

spug_web2/src/layout/index.module.scss

@@ -1,6 +1,8 @@
 .header {
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 999;
   padding: 0 8px;
   display: flex;
@@ -32,6 +34,11 @@
 }
 
 .sider {
+  position: fixed !important;
+  top: 48px;
+  left: 0;
+  bottom: 0;
+
   :global(.ant-menu) {
     height: 100%;
   }