github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

update

pull/661/head
vapao 2023-12-26 11:28:45 +08:00
parent 41990ef08b
commit 3008fbfc86
3 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
spug_web2/src/layout/Header.jsx
View File

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

13
spug_web2/src/layout/index.jsx
View File

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

9
spug_web2/src/layout/index.module.scss
View File

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