From 3008fbfc86991e85e0b8fa9fd7bf797513020b97 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Tue, 26 Dec 2023 11:28:45 +0800
Subject: [PATCH] update

---
 spug_web2/src/layout/Header.jsx        | 12 +++++++++---
 spug_web2/src/layout/index.jsx         | 13 +++++++++----
 spug_web2/src/layout/index.module.scss |  9 ++++++++-
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/spug_web2/src/layout/Header.jsx b/spug_web2/src/layout/Header.jsx
index d962c13..586431c 100644
--- a/spug_web2/src/layout/Header.jsx
+++ b/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'
diff --git a/spug_web2/src/layout/index.jsx b/spug_web2/src/layout/index.jsx
index bc60b49..ce1c31b 100644
--- a/spug_web2/src/layout/index.jsx
+++ b/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'}}>
-          <Outlet/>
+        <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.
diff --git a/spug_web2/src/layout/index.module.scss b/spug_web2/src/layout/index.module.scss
index 2e92d0d..fe016dd 100644
--- a/spug_web2/src/layout/index.module.scss
+++ b/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%;
   }