@yyp92-cli/template-react-pc 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @yyp92-cli/template-react-pc
 
+## 2.7.0
+
+### Minor Changes
+
+- react pc 模板更改
+
+## 2.6.0
+
+### Minor Changes
+
+- 模板增加.gitignore
+
 ## 2.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yyp92-cli/template-react-pc",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "publishConfig": {
     "access": "public"
   },

package/template/src/antdTheme/darkTheme.ts

@@ -39,6 +39,9 @@ export const darkToken = {
         colorIcon: iconColor,
         colorBgSolidHover: activeColor2,
         colorTextQuaternary: iconColor,
+        
+        colorWarning: errorColor,
+        colorSuccess: successColor,
 
         colorPrimary: activeColor,
         colorPrimaryActive: activeColor,
@@ -63,6 +66,8 @@ export const darkToken = {
         controlItemBgHover: bgGreyColor,
         controlItemBgActiveHover: activeColor3,
         controlItemBgActive: activeColor3,
+
+        colorTextHeading: textColor,
     },
     components: {
         Button: {
@@ -280,6 +285,14 @@ export const darkToken = {
         },
         Cascader: {
             optionPadding: '5px 12px',
-        }
+            optionSelectedBg: activeColor3,
+            optionSelectedColor: activeColor,
+        },
+        Message: {
+            contentBg: bgColor
+        },
+        Upload: {
+            actionsColor: textColor
+        },
     }
 }

package/template/src/antdTheme/lightTheme.ts

@@ -39,6 +39,9 @@ export const lightToken = {
         colorIcon: iconColor,
         colorBgSolidHover: activeColor2,
         colorTextQuaternary: iconColor,
+        
+        colorWarning: errorColor,
+        colorSuccess: successColor,
 
         colorPrimary: activeColor,
         colorPrimaryActive: activeColor,
@@ -63,6 +66,8 @@ export const lightToken = {
         controlItemBgHover: bgGreyColor,
         controlItemBgActiveHover: activeColor3,
         controlItemBgActive: activeColor3,
+
+        colorTextHeading: textColor,
     },
     components: {
         Button: {
@@ -281,6 +286,14 @@ export const lightToken = {
         },
         Cascader: {
             optionPadding: '5px 12px',
-        }
+            optionSelectedBg: activeColor3,
+            optionSelectedColor: activeColor,
+        },
+        Message: {
+            contentBg: bgColor
+        },
+        Upload: {
+            actionsColor: textColor
+        },
     }
 }

package/template/src/app.scss

@@ -13,6 +13,7 @@ body {
 #root {
     width: 100%;
     height: 100%;
+    background: var(--bg-white-color);
 }
 
 

package/template/src/components/403/index.module.scss

@@ -0,0 +1,21 @@
+@import '../../theme/lightTheme.scss';
+@import '../../theme/darkTheme.scss';
+
+.noAuth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--bg-white-color);
+
+    :global {
+        .ant-result {
+            .ant-result-title  {
+                color: var(--text-color) !important;
+            }
+
+            .ant-result-subtitle {
+                color: var(--text-color-secondary) !important;
+            }
+        }
+    }
+}

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

@@ -1,15 +1,20 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Button, Result } from 'antd';
+import { antdTokenStore } from '@/store/theme';
+import { getDarkTheme } from '@/utils';
+
+import styles from './index.module.scss'
 
 export const Page403: React.FC = () => {
+    const {isDark} =  antdTokenStore()
+    
+    useEffect(() => {
+        getDarkTheme(isDark)
+    }, [isDark])
+
     return (
         <div
-            style={{
-                flex: '1',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-            }}
+            className={styles.noAuth}
         >
            <Result
                 status="403"

package/template/src/components/404/index.module.scss

@@ -0,0 +1,21 @@
+@import '../../theme/lightTheme.scss';
+@import '../../theme/darkTheme.scss';
+
+.noFound {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--bg-white-color);
+
+    :global {
+        .ant-result {
+            .ant-result-title  {
+                color: var(--text-color) !important;
+            }
+
+            .ant-result-subtitle {
+                color: var(--text-color-secondary) !important;
+            }
+        }
+    }
+}

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

@@ -1,15 +1,21 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { Button, Result } from 'antd';
+import { antdTokenStore } from '@/store/theme';
+import { getDarkTheme } from '@/utils';
+
+import styles from './index.module.scss'
+
 
 export const Page404: React.FC = () => {
+    const {isDark} =  antdTokenStore()
+
+    useEffect(() => {
+        getDarkTheme(isDark)
+    }, [isDark])
+
     return (
         <div
-            style={{
-                flex: '1',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center'
-            }}
+            className={styles.noFound}
         >
             <Result
                 status="404"

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

@@ -8,7 +8,7 @@ import { userInfoStore } from '@/store/login'
 import { tokenStore } from '@/store/token'
 import { menusStore } from '@/store/menus'
 import { permissionStore } from '@/store/permission'
-import { antdTokenStore } from '@/store/antdToken'
+import { antdTokenStore } from '@/store/theme'
 
 import styles from './index.module.scss'
 
@@ -19,7 +19,7 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({ }) => {
     const navigate = useNavigate()
     const {clearUserInfo} = userInfoStore()
-    const {setAntdToken} = antdTokenStore()
+    const {isDark, setIsDark} = antdTokenStore()
     const {clearToken} = tokenStore()
     const {clearMenus} = menusStore()
     const {clearPermissions} = permissionStore()
@@ -53,7 +53,7 @@ export const Header: React.FC<HeaderProps> = ({ }) => {
 
     const handleChangeTheme = (checked: boolean) => {
         getDarkTheme(checked)
-        setAntdToken(checked)
+        setIsDark(checked)
     }
 
 
@@ -80,6 +80,7 @@ export const Header: React.FC<HeaderProps> = ({ }) => {
                         checkedChildren="暗黑"
                         unCheckedChildren="明亮"
                         defaultChecked={false}
+                        checked={isDark}
                         onChange={handleChangeTheme}
                     />
                 </Tooltip>

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

@@ -3,8 +3,10 @@ import { ConfigProvider } from 'antd'
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import zhCN from 'antd/locale/zh_CN'
-import { antdTokenStore } from '@/store/antdToken'
+import { antdTokenStore } from '@/store/theme'
 import { getDarkTheme } from '@/utils'
+import { lightToken } from '@/antdTheme/lightTheme'
+import { darkToken } from '@/antdTheme/darkTheme'
 import Content from './content'
 
 import styles from './index.module.scss'
@@ -14,13 +16,16 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ }) => {
-    const {antdToken} =  antdTokenStore()
+    const {isDark} =  antdTokenStore()
 
     useEffect(() => {
-        getDarkTheme(false)
         dayjs.locale('zh-cn')
     }, [])
 
+    useEffect(() => {
+        getDarkTheme(isDark)
+    }, [isDark])
+    
 
     // ********** 操作 **********
 
@@ -30,7 +35,7 @@ const Layout: React.FC<LayoutProps> = ({ }) => {
         <div className={styles.layout}>
             <ConfigProvider
                 // 主题
-                theme={antdToken}
+                theme={isDark ? darkToken : lightToken}
                 locale={zhCN}
 
                 button={{

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

@@ -5,7 +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 { antdTokenStore } from '@/store/theme'
 import { tokenStore } from '@/store/token'
 import { menusStore } from '@/store/menus'
 import { permissionStore } from '@/store/permission'
@@ -20,7 +20,7 @@ interface HeaderProps {
 export const Header: React.FC<HeaderProps> = ({}) => {
     const navigate = useNavigate()
     const {clearUserInfo} = userInfoStore()
-    const {setAntdToken} = antdTokenStore()
+    const {isDark, setIsDark} = antdTokenStore()
     const {clearToken} = tokenStore()
     const {clearMenus} = menusStore()
     const {clearPermissions} = permissionStore()
@@ -54,7 +54,7 @@ export const Header: React.FC<HeaderProps> = ({}) => {
 
     const handleChangeTheme = (checked: boolean) => {
         getDarkTheme(checked)
-        setAntdToken(checked)
+        setIsDark(checked)
     }
 
 
@@ -80,6 +80,7 @@ export const Header: React.FC<HeaderProps> = ({}) => {
                         checkedChildren="暗黑"
                         unCheckedChildren="明亮"
                         defaultChecked={false}
+                        checked={isDark}
                         onChange={handleChangeTheme}
                     />
                 </Tooltip>

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

@@ -4,7 +4,9 @@ import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import zhCN from 'antd/locale/zh_CN';
 import { getDarkTheme } from '@/utils'
-import { antdTokenStore } from '@/store/antdToken'
+import { antdTokenStore } from '@/store/theme'
+import { lightToken } from '@/antdTheme/lightTheme'
+import { darkToken } from '@/antdTheme/darkTheme'
 import Content from './content'
 
 import styles from './index.module.scss'
@@ -14,13 +16,16 @@ interface LayoutProps {
 }
 
 const Layout: React.FC<LayoutProps> = ({ }) => {
-    const {antdToken} =  antdTokenStore()
-
+    const {isDark} =  antdTokenStore()
+    
     useEffect(() => {
-        getDarkTheme(false)
         dayjs.locale('zh-cn')
     }, [])
 
+    useEffect(() => {
+        getDarkTheme(isDark)
+    }, [isDark])
+
 
     // ********** 操作 **********
 
@@ -31,7 +36,7 @@ const Layout: React.FC<LayoutProps> = ({ }) => {
         <div className={styles.layout}>
             <ConfigProvider
                 // 主题
-                theme={antdToken}
+                theme={isDark ? darkToken : lightToken}
                 locale={zhCN}
 
                 button={{

package/template/src/global/constants.ts

@@ -2,4 +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'
+export const THEME_TOKEN = 'theme'

package/template/src/store/theme.ts

@@ -0,0 +1,30 @@
+/**
+ * * 用户信息
+ */
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { THEME_TOKEN} from '@/global/constants'
+
+type AntdTokenStoreState = {
+    isDark: boolean
+}
+
+type AntdTokenStoreActions = {
+    setIsDark: (
+        isDark: AntdTokenStoreState['isDark']
+    ) => void,
+}
+
+type AntdTokenStore = AntdTokenStoreState & AntdTokenStoreActions
+
+export const antdTokenStore = create<AntdTokenStore>()(
+    persist(
+        (set) => ({
+            isDark: false,
+            setIsDark: (isDark) => set({isDark})
+        }),
+        {
+            name: THEME_TOKEN
+        }
+    )
+)

package/template/src/store/antdToken.ts

@@ -1,35 +0,0 @@
-/**
- * * 用户信息
- */
-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
-        }
-    )
-)