@yyp92-cli/template-react-pc 1.5.0 → 2.1.0

package/template/src/components/layout/index.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { ConfigProvider } from 'antd'
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-import zhCN from 'antd/locale/zh_CN';
-import { lightToken } from '@/antdTheme/lightTheme'
+import zhCN from 'antd/locale/zh_CN'
+import { antdTokenStore } from '@/store/antdToken'
+import { getDarkTheme } from '@/utils'
 import Content from './content'
 
 import styles from './index.module.scss'
@@ -13,36 +14,23 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ }) => {
+    const {antdToken} =  antdTokenStore()
+
     useEffect(() => {
-        getDarkTheme(0)
+        getDarkTheme(false)
         dayjs.locale('zh-cn')
     }, [])
 
 
     // ********** 操作 **********
-    // 主题切换
-    const getDarkTheme = (theme: number) => {
-        // 获取根元素
-        const root = document.documentElement;
-
-        if (theme != 1) {
-            // 修改 data-theme 属性的值为 "light"
-            root.setAttribute('data-theme', 'light');
-            return
-        }
-
-        // 修改 data-theme 属性的值为 "dark"
-        root.setAttribute('data-theme', 'dark');
-    }
 
 
     // ********** 渲染 **********
-
     return (
         <div className={styles.layout}>
             <ConfigProvider
                 // 主题
-                theme={lightToken}
+                theme={antdToken}
                 locale={zhCN}
 
                 button={{

package/template/src/components/layout/side/index.tsx

@@ -88,7 +88,7 @@ export const Side: React.FC<SideProps> = () => {
                     alt="logo"
                 />
 
-                <span>财务系统</span>
+                <span>后台管理系统</span>
             </div>
 
             <Menu

package/template/src/components/layout-horizontal/header/index.tsx

@@ -5,6 +5,7 @@ import type { MenuProps } from 'antd'
 import { FullscreenExitOutlined, FullscreenOutlined, UserOutlined } from '@ant-design/icons'
 import { getDarkTheme } from '@/utils'
 import { userInfoStore } from '@/store/login'
+import { antdTokenStore } from '@/store/antdToken'
 import { tokenStore } from '@/store/token'
 import { menusStore } from '@/store/menus'
 import { permissionStore } from '@/store/permission'
@@ -19,6 +20,7 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({}) => {
     const navigate = useNavigate()
     const {clearUserInfo} = userInfoStore()
+    const {setAntdToken} = antdTokenStore()
     const {clearToken} = tokenStore()
     const {clearMenus} = menusStore()
     const {clearPermissions} = permissionStore()
@@ -52,6 +54,7 @@ export const Header: React.FC<HeaderProps> = ({}) => {
 
     const handleChangeTheme = (checked: boolean) => {
         getDarkTheme(checked)
+        setAntdToken(checked)
     }
 
 

package/template/src/components/layout-horizontal/index.tsx

@@ -3,7 +3,8 @@ import { ConfigProvider } from 'antd'
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import zhCN from 'antd/locale/zh_CN';
-import { lightToken } from '@/antdTheme/lightTheme'
+import { getDarkTheme } from '@/utils'
+import { antdTokenStore } from '@/store/antdToken'
 import Content from './content'
 
 import styles from './index.module.scss'
@@ -13,27 +14,15 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ }) => {
+    const {antdToken} =  antdTokenStore()
+
     useEffect(() => {
-        getDarkTheme(0)
+        getDarkTheme(false)
         dayjs.locale('zh-cn')
     }, [])
 
 
     // ********** 操作 **********
-    // 主题切换
-    const getDarkTheme = (theme: number) => {
-        // 获取根元素
-        const root = document.documentElement;
-
-        if (theme != 1) {
-            // 修改 data-theme 属性的值为 "light"
-            root.setAttribute('data-theme', 'light');
-            return
-        }
-
-        // 修改 data-theme 属性的值为 "dark"
-        root.setAttribute('data-theme', 'dark');
-    }
 
 
     // ********** 渲染 **********
@@ -42,7 +31,7 @@ const Layout: React.FC<LayoutProps> = ({ }) => {
         <div className={styles.layout}>
             <ConfigProvider
                 // 主题
-                theme={lightToken}
+                theme={antdToken}
                 locale={zhCN}
 
                 button={{

package/template/src/components/layout-horizontal/side/index.tsx

@@ -84,7 +84,7 @@ export const Side: React.FC<SideProps> = ({}) => {
                     alt="logo"
                 />
 
-                <span>财务系统</span>
+                <span>后台管理系统</span>
             </div>
 
             <Menu

package/template/src/components/login/index.tsx

@@ -52,11 +52,11 @@ const Login: React.FC<LoginProps> = ({}) => {
     const onFinish = async (values: any) => {
         console.log('Success:', values)
 
-        if (values.username === 'yang' && values.password === '123456') {
+        if (values.username === 'admin' && values.password === '123456') {
             setPermissions(defaultList)
             setToken('111')
             setUserInfo({
-                userName: 'yang',
+                userName: 'admin',
                 userId: '001'
             })
             

package/template/src/global/constants.ts

@@ -2,3 +2,4 @@ export const LOGIN_TOKEN = 'login/token'
 export const USER_INFO = 'userInfo'
 export const MENUS = 'menus'
 export const PERMISSION = 'permission'
+export const ANTDTOKEN = 'antd/token'

package/template/src/store/antdToken.ts

@@ -0,0 +1,35 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { ANTDTOKEN} from '@/global/constants'
+import { lightToken } from '@/antdTheme/lightTheme'
+import { darkToken } from '@/antdTheme/darkTheme'
+
+type AntdTokenStoreState = {
+    antdToken: any
+}
+
+type AntdTokenStoreActions = {
+    setAntdToken: (
+        antdToken: AntdTokenStoreState['antdToken']
+    ) => void,
+}
+
+type AntdTokenStore = AntdTokenStoreState & AntdTokenStoreActions
+
+export const antdTokenStore = create<AntdTokenStore>()(
+    persist(
+        (set) => ({
+            antdToken: {},
+            setAntdToken: (isDark) => {
+                const antdToken = isDark ? darkToken : lightToken
+                return set({antdToken})
+            },
+        }),
+        {
+            name: ANTDTOKEN
+        }
+    )
+)