mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2025-12-08 08:52:28 +08:00
Compare commits
3 Commits
526734c5a5
...
281c3ff3c8
| Author | SHA1 | Date | |
|---|---|---|---|
| 281c3ff3c8 | |||
| 38d44c2487 | |||
| 8c88f8adf5 |
@ -1,14 +1,14 @@
|
|||||||
/**
|
/**
|
||||||
* @description: menu type
|
* @description: 默认四种菜单主题
|
||||||
*/
|
*/
|
||||||
export enum MenuTypeEnum {
|
export enum MenuTypeEnum {
|
||||||
// left menu
|
// 左侧边菜单导航风格
|
||||||
SIDEBAR = 'sidebar',
|
SIDEBAR = 'sidebar',
|
||||||
|
// 顶部栏导航风格
|
||||||
MIX_SIDEBAR = 'mix-sidebar',
|
|
||||||
// mixin menu
|
|
||||||
MIX = 'mix',
|
MIX = 'mix',
|
||||||
// top menu
|
// 侧边折叠导航风格
|
||||||
|
MIX_SIDEBAR = 'mix-sidebar',
|
||||||
|
//顶部混合导航风格
|
||||||
TOP_MENU = 'top-menu',
|
TOP_MENU = 'top-menu',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -9,8 +9,7 @@ import { changeTheme } from '/@/logics/theme';
|
|||||||
import { updateDarkTheme } from '/@/logics/theme/dark';
|
import { updateDarkTheme } from '/@/logics/theme/dark';
|
||||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||||
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
|
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 { isObject } from '/@/utils/is';
|
||||||
import { ThemeEnum } from '/@/enums/appEnum';
|
import { ThemeEnum } from '/@/enums/appEnum';
|
||||||
import { APP__THEME__COLOR } from '/@/enums/cacheEnum';
|
import { APP__THEME__COLOR } from '/@/enums/cacheEnum';
|
||||||
@ -27,10 +26,10 @@ export function layoutHandler(event: HandlerEnum, value: any) {
|
|||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
|
const darkMode = appStore.getDarkMode === ThemeEnum.DARK;
|
||||||
// 根据菜单类型动态获取主题色
|
// 根据菜单类型动态获取主题色
|
||||||
const dynamicThemeColor = getThemeColorByMenuType(value.type);
|
const {themeColor: dynamicThemeColor, headerBgColor, sideBgColor } = getConfigByMenuType(value.type);
|
||||||
if (isHTopMenu) {
|
if (isHTopMenu) {
|
||||||
baseHandler(event, value);
|
baseHandler(event, value);
|
||||||
baseHandler(HandlerEnum.HEADER_THEME, HEADER_PRESET_BG_COLOR_LIST[4]);
|
baseHandler(HandlerEnum.HEADER_THEME, headerBgColor);
|
||||||
baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
|
baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
|
||||||
if (darkMode) {
|
if (darkMode) {
|
||||||
updateHeaderBgColor();
|
updateHeaderBgColor();
|
||||||
@ -39,8 +38,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
|
|||||||
baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
|
baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
|
||||||
} else if (isMixMenu) {
|
} else if (isMixMenu) {
|
||||||
baseHandler(event, value);
|
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) {
|
if (darkMode) {
|
||||||
updateHeaderBgColor();
|
updateHeaderBgColor();
|
||||||
updateSidebarBgColor();
|
updateSidebarBgColor();
|
||||||
@ -51,8 +50,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
|
|||||||
} else if (isMixSidebarMenu) {
|
} else if (isMixSidebarMenu) {
|
||||||
baseHandler(event, value);
|
baseHandler(event, value);
|
||||||
baseHandler(HandlerEnum.CHANGE_THEME_COLOR, dynamicThemeColor);
|
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) {
|
if (darkMode) {
|
||||||
updateHeaderBgColor();
|
updateHeaderBgColor();
|
||||||
updateSidebarBgColor();
|
updateSidebarBgColor();
|
||||||
@ -60,8 +59,8 @@ export function layoutHandler(event: HandlerEnum, value: any) {
|
|||||||
baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
|
baseHandler(HandlerEnum.TABS_THEME, tabsThemeOptions[1].value);
|
||||||
} else {
|
} else {
|
||||||
baseHandler(event, value);
|
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) {
|
if (darkMode) {
|
||||||
updateHeaderBgColor();
|
updateHeaderBgColor();
|
||||||
updateSidebarBgColor();
|
updateSidebarBgColor();
|
||||||
|
|||||||
@ -50,7 +50,9 @@ export function useTabDropdown(tabContentProps: TabContentProps, getIsTabs: Comp
|
|||||||
} else {
|
} else {
|
||||||
// 【TV360X-1039】当只有首页和另一个tab页时关闭左侧禁用
|
// 【TV360X-1039】当只有首页和另一个tab页时关闭左侧禁用
|
||||||
const validTabList = tabStore.getTabList.filter((item) => !item?.meta?.affix);
|
const validTabList = tabStore.getTabList.filter((item) => !item?.meta?.affix);
|
||||||
return validTabList[0].path === state.current?.path;
|
// update-begin--author:liaozhiyang---date:20251128---for:【issues/9098】tabs标签页关闭异常
|
||||||
|
return validTabList[0]?.path === state.current?.path;
|
||||||
|
// update-end--author:liaozhiyang---date:20251128---for:【issues/9098】tabs标签页关闭异常
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
// Close other
|
// Close other
|
||||||
|
|||||||
@ -10,11 +10,14 @@ import {
|
|||||||
SessionTimeoutProcessingEnum,
|
SessionTimeoutProcessingEnum,
|
||||||
TabsThemeEnum,
|
TabsThemeEnum,
|
||||||
} from '/@/enums/appEnum';
|
} from '/@/enums/appEnum';
|
||||||
import { SIDE_BAR_BG_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST } from './designSetting';
|
|
||||||
import { darkMode } from '/@/settings/designSetting';
|
import { darkMode } from '/@/settings/designSetting';
|
||||||
import { getThemeColorByMenuType } from '/@/utils/getThemeColorByMenuType';
|
import { getConfigByMenuType } from '../utils/getConfigByMenuType';
|
||||||
|
// 修改此属性,实现默认的四个系统主题快速切换
|
||||||
const menuType = MenuTypeEnum.SIDEBAR;
|
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 = {
|
const setting: ProjectConfig = {
|
||||||
// 是否显示SettingButton
|
// 是否显示SettingButton
|
||||||
@ -43,7 +46,7 @@ const setting: ProjectConfig = {
|
|||||||
// SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗,覆盖当前页面
|
// SessionTimeoutProcessingEnum.PAGE_COVERAGE: 生成登录弹窗,覆盖当前页面
|
||||||
sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
|
sessionTimeoutProcessing: SessionTimeoutProcessingEnum.ROUTE_JUMP,
|
||||||
// 项目主题色 - 根据导航栏模式确定主题色动态设置
|
// 项目主题色 - 根据导航栏模式确定主题色动态设置
|
||||||
themeColor: getThemeColorByMenuType(menuType),
|
themeColor: themeColor,
|
||||||
// 项目主题模式
|
// 项目主题模式
|
||||||
themeMode: darkMode,
|
themeMode: darkMode,
|
||||||
|
|
||||||
@ -71,7 +74,7 @@ const setting: ProjectConfig = {
|
|||||||
// 头部配置
|
// 头部配置
|
||||||
headerSetting: {
|
headerSetting: {
|
||||||
// 背景色
|
// 背景色
|
||||||
bgColor: HEADER_PRESET_BG_COLOR_LIST[4],
|
bgColor: headerBgColor,
|
||||||
// 固定头部
|
// 固定头部
|
||||||
fixed: true,
|
fixed: true,
|
||||||
// 是否显示顶部
|
// 是否显示顶部
|
||||||
@ -93,7 +96,7 @@ const setting: ProjectConfig = {
|
|||||||
// 菜单配置
|
// 菜单配置
|
||||||
menuSetting: {
|
menuSetting: {
|
||||||
// 背景色
|
// 背景色
|
||||||
bgColor: SIDE_BAR_BG_COLOR_LIST[0],
|
bgColor: sideBgColor,
|
||||||
// 是否固定住左侧菜单
|
// 是否固定住左侧菜单
|
||||||
fixed: true,
|
fixed: true,
|
||||||
// 菜单折叠
|
// 菜单折叠
|
||||||
@ -110,15 +113,15 @@ const setting: ProjectConfig = {
|
|||||||
// 菜单宽度
|
// 菜单宽度
|
||||||
menuWidth: 210,
|
menuWidth: 210,
|
||||||
// 菜单模式
|
// 菜单模式
|
||||||
mode: MenuModeEnum.INLINE,
|
mode,
|
||||||
// 菜单类型
|
// 菜单类型
|
||||||
type: MenuTypeEnum.SIDEBAR,
|
type: menuType,
|
||||||
// 菜单主题
|
// 菜单主题
|
||||||
theme: ThemeEnum.DARK,
|
theme: ThemeEnum.LIGHT,
|
||||||
// 左侧导航栏文字颜色调整区分彩色和暗黑 (不对应配置)
|
// 左侧导航栏文字颜色调整区分彩色和暗黑 (不对应配置)
|
||||||
isThemeBright: false,
|
isThemeBright: false,
|
||||||
// 分割菜单
|
// 分割菜单
|
||||||
split: false,
|
split,
|
||||||
// 顶部菜单布局
|
// 顶部菜单布局
|
||||||
topMenuAlign: 'center',
|
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];
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user