Compare commits

...

3 Commits

Author SHA1 Message Date
281c3ff3c8 措辞优化 2025-12-04 13:55:53 +08:00
38d44c2487 修改一个参数,就实现默认的四个系统主题快速切换 2025-12-03 19:55:13 +08:00
8c88f8adf5 【issues/9098】tabs标签页关闭异常 2025-12-03 19:06:21 +08:00
6 changed files with 80 additions and 50 deletions

View File

@ -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',
} }

View File

@ -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();

View File

@ -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

View File

@ -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',
// 折叠触发器的位置 // 折叠触发器的位置

View 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,
};
}

View File

@ -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];
}