修改一个参数，就实现默认的四个系统主题快速切换

jeecgboot-vue3/src/enums/menuEnum.ts

@@ -2,13 +2,13 @@
  * @description: menu type
  */
 export enum MenuTypeEnum {
-  // left menu
+  // 左侧边菜单导航风格
   SIDEBAR = 'sidebar',
-
+  // 顶部栏导航风格
-  MIX_SIDEBAR = 'mix-sidebar',
-  // mixin menu
   MIX = 'mix',
-  // top menu
+ // 侧边折叠导航风格
+  MIX_SIDEBAR = 'mix-sidebar',
+  //顶部混合导航风格
   TOP_MENU = 'top-menu',
 }
 

jeecgboot-vue3/src/layouts/default/setting/handler.ts

@@ -9,8 +9,7 @@ import { changeTheme } from '/@/logics/theme';
 import { updateDarkTheme } from '/@/logics/theme/dark';
 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
-import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+import { getConfigByMenuType } from '../../../utils/getConfigByMenuType';
-import { getThemeColorByMenuType } from '/@/utils/getThemeColorByMenuType';
 import { isObject } from '/@/utils/is';
 import { ThemeEnum } from '/@/enums/appEnum';
 import { APP__THEME__COLOR } from '/@/enums/cacheEnum';
@@ -27,10 +26,10 @@ export function layoutHandler(event: HandlerEnum, value: any) {
   const appStore = useAppStore();
   const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
   // 根据菜单类型动态获取主题色
-  const dynamicThemeColor = getThemeColorByMenuType(value.type);
+  const {themeColor: dynamicThemeColor, headerBgColor, sideBgColor } = getConfigByMenuType(value.type);
   if (isHTopMenu) {
     baseHandler(event, value);
-    baseHandler(HandlerEnum.HEADER_THEME, HEADER_PRESET_BG_COLOR_LIST[4]);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
     baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
     if (darkMode) {
       updateHeaderBgColor();
@@ -39,8 +38,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
     baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
   } else if (isMixMenu) {
     baseHandler(event, value);
-    baseHandler(HandlerEnum.HEADER_THEME, HEADER_PRESET_BG_COLOR_LIST[2]);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
-    baseHandler(HandlerEnum.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[3]);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
     if (darkMode) {
       updateHeaderBgColor();
       updateSidebarBgColor();
@@ -51,8 +50,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
   } else if (isMixSidebarMenu) {
     baseHandler(event, value);
     baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
-    baseHandler(HandlerEnum.HEADER_THEME, HEADER_PRESET_BG_COLOR_LIST[0]);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
-    baseHandler(HandlerEnum.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[0]);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
     if (darkMode) {
       updateHeaderBgColor();
       updateSidebarBgColor();
@@ -60,8 +59,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
     baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
   } else {
     baseHandler(event, value);
-    baseHandler(HandlerEnum.HEADER_THEME, HEADER_PRESET_BG_COLOR_LIST[4]);
+    baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
-    baseHandler(HandlerEnum.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[7]);
+    baseHandler(HandlerEnum.MENU_THEME, sideBgColor);
     if (darkMode) {
       updateHeaderBgColor();
       updateSidebarBgColor();

jeecgboot-vue3/src/settings/projectSetting.ts

@@ -10,11 +10,14 @@ import {
   SessionTimeoutProcessingEnum,
   TabsThemeEnum,
 } from '/@/enums/appEnum';
-import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting';
 import { darkMode } from '/@/settings/designSetting';
-import { getThemeColorByMenuType } from '/@/utils/getThemeColorByMenuType';
+import { getConfigByMenuType } from '../utils/getConfigByMenuType';
-
+// 修改此属性，实现默认的四个系统主题快速切换
 const menuType = MenuTypeEnum.SIDEBAR;
+
+// update-begin--author:liaozhiyang---date:20251201---for【QQYUN-14176】修改一个配置就能切换默认四个主题，不需要额外修改颜色等
+const { themeColor, headerBgColor, sideBgColor, split, mode } = getConfigByMenuType(menuType);
+// update-end--author:liaozhiyang---date:20251201---for【QQYUN-14176】修改一个配置就能切换默认四个主题，不需要额外修改颜色等
 // ! 改动后需要清空浏览器缓存
 const setting: ProjectConfig = {
   // 是否显示SettingButton
@@ -43,7 +46,7 @@ const setting: ProjectConfig = {
   // SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗，覆盖当前页面
   sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
   // 项目主题色 - 根据导航栏模式确定主题色动态设置
-  themeColor: getThemeColorByMenuType(menuType),
+  themeColor: themeColor,
   // 项目主题模式
   themeMode: darkMode,
 
@@ -71,7 +74,7 @@ const setting: ProjectConfig = {
   // 头部配置
   headerSetting: {
     // 背景色
-    bgColor: HEADER_PRESET_BG_COLOR_LIST[4],
+    bgColor: headerBgColor,
     // 固定头部
     fixed: true,
     // 是否显示顶部
@@ -93,7 +96,7 @@ const setting: ProjectConfig = {
   // 菜单配置
   menuSetting: {
     // 背景色
-    bgColor: SIDE_BAR_BG_COLOR_LIST[0],
+    bgColor: sideBgColor,
     // 是否固定住左侧菜单
     fixed: true,
     // 菜单折叠
@@ -110,15 +113,15 @@ const setting: ProjectConfig = {
     // 菜单宽度
     menuWidth: 210,
     // 菜单模式
-    mode: MenuModeEnum.INLINE,
+    mode,
     // 菜单类型
-    type: MenuTypeEnum.SIDEBAR,
+    type: menuType,
     // 菜单主题
-    theme: ThemeEnum.DARK,
+    theme: ThemeEnum.LIGHT,
     // 左侧导航栏文字颜色调整区分彩色和暗黑 (不对应配置)
     isThemeBright: false,
     // 分割菜单
-    split: false,
+    split,
     // 顶部菜单布局
     topMenuAlign: 'center',
     // 折叠触发器的位置

jeecgboot-vue3/src/utils/getConfigByMenuType.ts

@@ -0,0 +1,49 @@
+import { MenuTypeEnum, MenuModeEnum } from '/@/enums/menuEnum';
+import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
+
+/**
+ * 根据菜单类型和模式获取对应的主题色
+ * @param menuType 菜单类型
+ */
+export function getConfigByMenuType(menuType: MenuTypeEnum): {
+  themeColor: string;
+  headerBgColor: string;
+  sideBgColor: string;
+  split: boolean;
+  mode: MenuModeEnum;
+} {
+  let themeColor;
+  let headerBgColor;
+  let sideBgColor;
+  let split = false;
+  let mode: MenuModeEnum = MenuModeEnum.INLINE;
+  if (menuType === MenuTypeEnum.TOP_MENU) {
+    // 顶部栏导航
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[4];
+    mode = MenuModeEnum.HORIZONTAL;
+  } else if (menuType === MenuTypeEnum.MIX) {
+    // 顶部混合菜单模式
+    themeColor = APP_PRESET_COLOR_LIST[2];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[2];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[3];
+    split = true;
+  } else if (menuType === MenuTypeEnum.MIX_SIDEBAR) {
+    // 侧边折叠导航模式
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[0];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[0];
+  } else if (menuType === MenuTypeEnum.SIDEBAR) {
+    // 侧边栏导航
+    themeColor = APP_PRESET_COLOR_LIST[1];
+    headerBgColor = HEADER_PRESET_BG_COLOR_LIST[4];
+    sideBgColor = SIDE_BAR_BG_COLOR_LIST[7];
+  }
+  return {
+    themeColor,
+    headerBgColor,
+    sideBgColor,
+    split,
+    mode,
+  };
+}

jeecgboot-vue3/src/utils/getThemeColorByMenuType.ts

@@ -1,23 +0,0 @@
-import { MenuTypeEnum } from '/@/enums/menuEnum';
-import { APP_PRESET_COLOR_LIST } from '/@/settings/designSetting';
-
-/**
- * 根据菜单类型和模式获取对应的主题色
- * @param menuType 菜单类型
- */
-export function getThemeColorByMenuType(menuType: MenuTypeEnum): string {
-  if (menuType === MenuTypeEnum.TOP_MENU) {
-    // 顶部栏导航
-    return APP_PRESET_COLOR_LIST[1];
-  } else if (menuType === MenuTypeEnum.MIX) {
-    // 顶部混合菜单使用青绿色主题
-    return APP_PRESET_COLOR_LIST[2];
-  } else if (menuType === MenuTypeEnum.MIX_SIDEBAR) {
-    // 侧边折叠导航模式
-    return APP_PRESET_COLOR_LIST[1];
-  } else if (menuType === MenuTypeEnum.SIDEBAR) {
-    // 侧边栏导航
-    return APP_PRESET_COLOR_LIST[1];
-  }
-  return APP_PRESET_COLOR_LIST[1];
-}