feat: theme color switch

src/layouts/default/setting/SettingDrawer.tsx

@@ -31,7 +31,11 @@ import {
   mixSidebarTriggerOptions,
 } from './enum';
 
-import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+import {
+  HEADER_PRESET_BG_COLOR_LIST,
+  SIDE_BAR_BG_COLOR_LIST,
+  APP_PRESET_COLOR_LIST,
+} from '/@/settings/designSetting';
 
 const { t } = useI18n();
 
@@ -48,6 +52,7 @@ export default defineComponent({
       getColorWeak,
       getGrayMode,
       getLockTime,
+      getThemeColor,
     } = useRootSetting();
 
     const {
@@ -129,6 +134,16 @@ export default defineComponent({
       );
     }
 
+    function renderMainTheme() {
+      return (
+        <ThemePicker
+          colorList={APP_PRESET_COLOR_LIST}
+          def={unref(getThemeColor)}
+          event={HandlerEnum.CHANGE_THEME_COLOR}
+        />
+      );
+    }
+
     /**
      * @description:
      */
@@ -391,6 +406,8 @@ export default defineComponent({
       >
         <Divider>{() => t('layout.setting.navMode')}</Divider>
         {renderSidebar()}
+        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
+        {renderMainTheme()}
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>
         {renderHeaderTheme()}
         <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>

src/layouts/default/setting/components/SettingFooter.vue

@@ -27,7 +27,8 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-  import { updateColorWeak, updateGrayMode } from '/@/logics/theme';
+  import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+  import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
 
   export default defineComponent({
     name: 'SettingFooter',

src/layouts/default/setting/enum.ts

@@ -13,6 +13,7 @@ const { t } = useI18n();
 
 export enum HandlerEnum {
   CHANGE_LAYOUT,
+  CHANGE_THEME_COLOR,
   // menu
   MENU_HAS_DRAG,
   MENU_ACCORDION,

src/layouts/default/setting/handler.ts

@@ -1,12 +1,12 @@
 import { HandlerEnum } from './enum';
-import {
-  updateColorWeak,
-  updateGrayMode,
-  updateHeaderBgColor,
-  updateSidebarBgColor,
-} from '/@/logics/theme';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
+import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
+
 import { appStore } from '/@/store/modules/app';
 import { ProjectConfig } from '/@/types/config';
+import { changeTheme } from '/@/logics/theme';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 
 export function baseHandler(event: HandlerEnum, value: any) {
   const config = handler(event, value);
@@ -14,6 +14,7 @@ export function baseHandler(event: HandlerEnum, value: any) {
 }
 
 export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
+  const { getThemeColor } = useRootSetting();
   switch (event) {
     case HandlerEnum.CHANGE_LAYOUT:
       const { mode, type, split } = value;
@@ -30,6 +31,13 @@ export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConf
         },
       };
 
+    case HandlerEnum.CHANGE_THEME_COLOR:
+      if (getThemeColor.value === value) {
+        return {};
+      }
+      changeTheme(value);
+      return { themeColor: value };
+
     case HandlerEnum.MENU_HAS_DRAG:
       return { menuSetting: { canDrag: value } };