-
{{ title }}
+ {{ title }}
diff --git a/src/layouts/BasicLayout/components/common/GlobalLogo.vue b/src/layouts/BasicLayout/components/common/GlobalLogo.vue
index 11650857..1ffffd02 100644
--- a/src/layouts/BasicLayout/components/common/GlobalLogo.vue
+++ b/src/layouts/BasicLayout/components/common/GlobalLogo.vue
@@ -1,7 +1,7 @@
{{ title }}
+ {{ title }}
diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts
index 20c57821..4cceaa8e 100644
--- a/src/store/modules/theme/helpers.ts
+++ b/src/store/modules/theme/helpers.ts
@@ -1,8 +1,39 @@
-import { brightenColor, darkenColor } from '@/utils';
+import { brightenColor, darkenColor, addColorAlpha } from '@/utils';
-export function getHoverAndPressedColor(color: string) {
- return {
- hover: brightenColor(color),
- pressed: darkenColor(color)
- };
+type ColorType = 'primary' | 'info' | 'success' | 'warning' | 'error';
+
+type ColorScene = '' | 'Suppl' | 'Hover' | 'Pressed' | 'Active';
+
+type ColorKey = `${ColorType}Color${ColorScene}`;
+
+type ThemeColor = {
+ [key in ColorKey]?: string;
+};
+
+interface ColorAction {
+ scene: ColorScene;
+ handler: (color: string) => string;
+}
+
+/** 获取主题颜色的各种场景对应的颜色 */
+export function getThemeColors(colors: [ColorType, string][]) {
+ const colorActions: ColorAction[] = [
+ { scene: '', handler: color => color },
+ { scene: 'Suppl', handler: color => color },
+ { scene: 'Hover', handler: color => brightenColor(color) },
+ { scene: 'Pressed', handler: color => darkenColor(color) },
+ { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
+ ];
+
+ const themeColor: ThemeColor = {};
+
+ colors.forEach(color => {
+ colorActions.forEach(action => {
+ const [colorType, colorValue] = color;
+ const colorKey: ColorKey = `${colorType}Color${action.scene}`;
+ themeColor[colorKey] = action.handler(colorValue);
+ });
+ });
+
+ return themeColor;
}
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 4ee8caf8..9b5fa596 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -3,17 +3,10 @@ import type { GlobalThemeOverrides } from 'naive-ui';
import { themeSettings, defaultThemeSettings } from '@/settings';
import { store } from '@/store';
import type { ThemeSettings, NavMode, MultiTabMode, AnimateType, HorizontalMenuPosition } from '@/interface';
-import { addColorAlpha } from '@/utils';
-import { getHoverAndPressedColor } from './helpers';
+import { getThemeColors } from './helpers';
type ThemeState = ThemeSettings;
-interface relativeThemeColor {
- hover: string;
- pressed: string;
- shallow: string;
-}
-
const themeStore = defineStore({
id: 'theme-store',
state: (): ThemeState => ({
@@ -23,58 +16,29 @@ const themeStore = defineStore({
/** naive UI主题配置 */
themeOverrids(): GlobalThemeOverrides {
const {
- themeColor: primaryColor,
- otherColor: { info: infoColor, success: successColor, warning: warningColor, error: errorColor }
+ themeColor,
+ otherColor: { info, success, warning, error }
} = this;
- const { hover: primaryColorHover, pressed: primaryColorPressed } = getHoverAndPressedColor(primaryColor);
- const { hover: infoColorHover, pressed: infoColorPressed } = getHoverAndPressedColor(infoColor);
- const { hover: successColorHover, pressed: successColorPressed } = getHoverAndPressedColor(successColor);
- const { hover: warningColorHover, pressed: warningColorPressed } = getHoverAndPressedColor(warningColor);
- const { hover: errorColorHover, pressed: errorColorPressed } = getHoverAndPressedColor(errorColor);
+ const themeColors = getThemeColors([
+ ['primary', themeColor],
+ ['info', info],
+ ['success', success],
+ ['warning', warning],
+ ['error', error]
+ ]);
- const primaryColorSuppl = primaryColor;
- const infoColorSuppl = infoColor;
- const successColorSuppl = infoColor;
- const warningColorSuppl = warningColor;
- const errorColorSuppl = errorColor;
- const colorLoading = primaryColor;
+ const colorLoading = themeColor;
return {
common: {
- primaryColor,
- primaryColorHover,
- primaryColorPressed,
- primaryColorSuppl,
- infoColor,
- infoColorHover,
- infoColorPressed,
- infoColorSuppl,
- successColor,
- successColorHover,
- successColorPressed,
- successColorSuppl,
- warningColor,
- warningColorHover,
- warningColorPressed,
- warningColorSuppl,
- errorColor,
- errorColorHover,
- errorColorPressed,
- errorColorSuppl
+ ...themeColors
},
LoadingBar: {
colorLoading
}
};
},
- relativeThemeColor(): relativeThemeColor {
- const shallow = addColorAlpha(this.themeColor, 0.1);
- return {
- ...getHoverAndPressedColor(this.themeColor),
- shallow
- };
- },
isVerticalNav(): boolean {
const { mode } = this.navStyle;
return mode === 'vertical' || mode === 'vertical-mix';
@@ -92,6 +56,10 @@ const themeStore = defineStore({
handleDarkMode(isDark: boolean) {
this.darkMode = isDark;
},
+ /** 切换暗黑模式 */
+ toggleDarkMode() {
+ this.darkMode = !this.darkMode;
+ },
/** 设置系统主题颜色 */
setThemeColor(color: string) {
this.themeColor = color;
diff --git a/src/views/about/components/ProjectInfo/index.vue b/src/views/about/components/ProjectInfo/index.vue
index 4149bae7..a99b92ec 100644
--- a/src/views/about/components/ProjectInfo/index.vue
+++ b/src/views/about/components/ProjectInfo/index.vue
@@ -8,10 +8,10 @@
-
{{ item.label }}
+ {{ item.label }}