diff --git a/jeecgboot-vue3/src/enums/menuEnum.ts b/jeecgboot-vue3/src/enums/menuEnum.ts index 89cfa9f5c..af9cf9eaf 100644 --- a/jeecgboot-vue3/src/enums/menuEnum.ts +++ b/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', } diff --git a/jeecgboot-vue3/src/layouts/default/setting/handler.ts b/jeecgboot-vue3/src/layouts/default/setting/handler.ts index 35d1de50d..e70d0d479 100644 --- a/jeecgboot-vue3/src/layouts/default/setting/handler.ts +++ b/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 { getThemeColorByMenuType } from '/@/utils/getThemeColorByMenuType'; +import { getConfigByMenuType } from '../../../utils/getConfigByMenuType'; 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.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[3]); + baseHandler(HandlerEnum.HEADER_THEME, headerBgColor); + 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.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[0]); + baseHandler(HandlerEnum.HEADER_THEME, headerBgColor); + 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.MENU_THEME, SIDE_BAR_BG_COLOR_LIST[7]); + baseHandler(HandlerEnum.HEADER_THEME, headerBgColor); + baseHandler(HandlerEnum.MENU_THEME, sideBgColor); if (darkMode) { updateHeaderBgColor(); updateSidebarBgColor(); diff --git a/jeecgboot-vue3/src/settings/projectSetting.ts b/jeecgboot-vue3/src/settings/projectSetting.ts index d7e6e53d0..40e1522e8 100644 --- a/jeecgboot-vue3/src/settings/projectSetting.ts +++ b/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', // 折叠触发器的位置 diff --git a/jeecgboot-vue3/src/utils/getConfigByMenuType.ts b/jeecgboot-vue3/src/utils/getConfigByMenuType.ts new file mode 100644 index 000000000..428bd4720 --- /dev/null +++ b/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, + }; +} diff --git a/jeecgboot-vue3/src/utils/getThemeColorByMenuType.ts b/jeecgboot-vue3/src/utils/getThemeColorByMenuType.ts deleted file mode 100644 index 6c1a9c0bc..000000000 --- a/jeecgboot-vue3/src/utils/getThemeColorByMenuType.ts +++ /dev/null @@ -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]; -}