mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-10 20:02:56 +00:00
修改一个参数，就实现默认的四个系统主题快速切换
This commit is contained in:
JEECG
parent
8c88f8adf5
commit
38d44c2487
@ -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',
|
||||
}
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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',
|
||||
// 折叠触发器的位置
|
||||
|
||||
49
jeecgboot-vue3/src/utils/getConfigByMenuType.ts
Normal file
49
jeecgboot-vue3/src/utils/getConfigByMenuType.ts
Normal file
@ -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,
|
||||
};
|
||||
}
|
||||
@ -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];
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user