refactor(projects): 嵌入naive-ui的css vars，替换windicss的extend color

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

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;