feat: ✨ 修改主题颜色

src/App.tsx

@@ -14,7 +14,7 @@ import { localeConfig } from './locales';
 import { useStoreApp } from './hooks/setting/useStoreApp';
 
 function App() {
-  const { locale, themeMode } = useStoreApp();
+  const { locale, color, themeMode } = useStoreApp();
 
   const getLocale = useMemo(() => {
     if (locale === 'en-US') {
@@ -30,7 +30,7 @@ function App() {
     <ConfigProvider
       theme={{
         token: {
-          colorPrimary: '#409eff',
+          colorPrimary: color || '#409eff',
         },
         algorithm: themeMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
       }}

src/layout/components/Setting/ThemeSettings/index.less

@@ -0,0 +1,14 @@
+.theme-settings {
+  .color-list {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .color-list-item {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}

src/layout/components/Setting/ThemeSettings/index.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+import { CheckOutlined } from '@ant-design/icons';
+import { useStoreApp } from '@/hooks/setting/useStoreApp';
+import './index.less';
+
+const ThemeSettings = memo(() => {
+  const { color, setAppConfig } = useStoreApp();
+
+  const colorList = ['#722ed1', '#eb2f96', '#52c41a', '#13c2c2', '#fadb14', '#fa541c', '#f5222d'];
+
+  return (
+    <div className="theme-settings">
+      <div className="color-list">
+        {colorList.map((i) => {
+          return (
+            <div
+              className="cursor color-list-item"
+              style={{ backgroundColor: i }}
+              key={i}
+              onClick={() => {
+                setAppConfig({ color: i });
+              }}
+            >
+              {color === i && <CheckOutlined />}
+              {/* <SvgIcon v-if="i === pureColor" class="icon" name="iEL-select" /> */}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+export default ThemeSettings;

src/layout/components/Setting/index.less

@@ -1,61 +1,65 @@
-.sidebar_seting {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
+.setting {
+  padding: 0 16px;
 
-  .sidebar_mode {
-    position: relative;
-    width: 80px;
-    height: 60px;
-    background: #f0f2f5;
-    border-radius: 5px;
-    box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
-    overflow: hidden;
+  .sidebar_seting {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 
-    &:nth-child(1) {
-      div {
-        &:nth-child(1) {
-          width: 30%;
-          height: 100%;
-        }
+    .sidebar_mode {
+      position: relative;
+      width: 80px;
+      height: 60px;
+      background: #f0f2f5;
+      border-radius: 5px;
+      box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
+      overflow: hidden;
+
+      &:nth-child(1) {
+        div {
+          &:nth-child(1) {
+            width: 30%;
+            height: 100%;
+          }
 
-        &:nth-child(2) {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 70%;
-          height: 30%;
-          background: #fff;
-          box-shadow: 0 0 1px #888;
+          &:nth-child(2) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 70%;
+            height: 30%;
+            background: #fff;
+            box-shadow: 0 0 1px #888;
+          }
         }
       }
-    }
 
-    &:nth-child(2) {
-      div {
-        &:nth-child(1) {
-          width: 100%;
-          height: 30%;
-          box-shadow: 0 0 1px #888;
+      &:nth-child(2) {
+        div {
+          &:nth-child(1) {
+            width: 100%;
+            height: 30%;
+            box-shadow: 0 0 1px #888;
+          }
         }
       }
-    }
 
-    &:nth-child(3) {
-      div {
-        &:nth-child(1) {
-          width: 30%;
-          height: 100%;
-          background: #fff;
-        }
+      &:nth-child(3) {
+        div {
+          &:nth-child(1) {
+            width: 30%;
+            height: 100%;
+            background: #fff;
+          }
 
-        &:nth-child(2) {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: 100%;
-          height: 30%;
-          box-shadow: 0 0 1px #888;
+          &:nth-child(2) {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 30%;
+            box-shadow: 0 0 1px #888;
+          }
         }
       }
     }

src/layout/components/Setting/index.tsx

@@ -1,6 +1,7 @@
 import { SettingOutlined } from '@ant-design/icons';
 import { Divider, Drawer, theme, Tooltip } from 'antd';
 import { memo, useState } from 'react';
+import ThemeSettings from './ThemeSettings';
 import { useLocale } from '@/locales';
 import './index.less';
 import type { AppConfigMode } from '@/store/modules/app';
@@ -41,7 +42,7 @@ const Setting = memo(() => {
         onClose={() => setDrawerOpen(false)}
         open={drawerOpen}
       >
-        <div className="setting">
+        <div className="setting" style={{ color: thme.token.colorText }}>
           <Divider>{intl.formatMessage({ id: 'layout.setting.layoutSettings' })}</Divider>
           <div className="sidebar_seting">
             {sidebarSeting.map((i) => {
@@ -66,6 +67,9 @@ const Setting = memo(() => {
               );
             })}
           </div>
+          <Divider>{intl.formatMessage({ id: 'layout.setting.themeSettings' })}</Divider>
+
+          <ThemeSettings />
         </div>
       </Drawer>
     </>

src/locales/en_US/modules/layout.ts

@@ -1,4 +1,5 @@
 export default {
   'layout.setting.title': 'Setting',
   'layout.setting.layoutSettings': 'Layout Settings',
+  'layout.setting.themeSettings': 'Theme Settings',
 };

src/locales/zh_CN/modules/layout.ts

@@ -1,4 +1,5 @@
 export default {
   'layout.setting.title': '设置',
   'layout.setting.layoutSettings': '布局设置',
+  'layout.setting.themeSettings': '主题设置',
 };

src/store/modules/app.ts

@@ -7,19 +7,25 @@ export interface AppConfigMode {
   locale: LocaleType;
   themeMode: 'dark' | 'light';
   sidebarMode: 'vertical' | 'horizontal' | 'blend';
+  color: string;
 }
 
-interface appConfig {
+interface AppConfig {
   appConfigMode: AppConfigMode;
 }
 
-const initialState: appConfig = {
-  appConfigMode: {
-    collapsed: false,
-    locale: 'zh-CN',
-    themeMode: 'light',
-    sidebarMode: 'vertical',
-  },
+const defaultAppConfig: AppConfigMode = {
+  collapsed: false,
+  locale: 'zh-CN',
+  themeMode: 'light',
+  sidebarMode: 'vertical',
+  color: '#409eff',
+};
+
+const localAppConfig = localStorage.getItem('appConfig');
+
+const initialState: AppConfig = {
+  appConfigMode: localAppConfig ? JSON.parse(localAppConfig) : defaultAppConfig,
 };
 
 export const appSlice = createSlice({
@@ -28,6 +34,7 @@ export const appSlice = createSlice({
   reducers: {
     setAppConfigMode: (state, action: PayloadAction<AppConfigMode>) => {
       state.appConfigMode = action.payload;
+      localStorage.setItem('appConfig', JSON.stringify(state.appConfigMode));
     },
   },
 });