feat(projects): 集成naiveUI主题配置，将css vars添加至html

package.json

@@ -23,9 +23,11 @@
   "dependencies": {
     "@vueuse/core": "^7.5.1",
     "axios": "^0.24.0",
+    "colord": "^2.9.2",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.10.7",
     "form-data": "^4.0.0",
+    "lodash-es": "^4.17.21",
     "naive-ui": "^2.23.2",
     "pinia": "^2.0.9",
     "qs": "^6.10.2",

src/App.vue

@@ -1,6 +1,19 @@
 <template>
-  <router-view />
+  <n-config-provider :theme-overrides="theme.naiveThemeOverrides">
+    <router-view />
+  </n-config-provider>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { NConfigProvider } from 'naive-ui';
+import { useThemeStore } from '@/store';
+
+const theme = useThemeStore();
+const { addThemeCssVarsToRoot } = useThemeStore();
+
+onMounted(() => {
+  addThemeCssVarsToRoot();
+});
+</script>
 <style scoped></style>

src/main.ts

@@ -4,10 +4,6 @@ import { setupRouter } from '@/router';
 import { setupStore } from '@/store';
 import App from './App.vue';
 
-function setupPlugins() {
-  setupAssets();
-}
-
 async function setupApp() {
   const app = createApp(App);
 
@@ -21,5 +17,6 @@ async function setupApp() {
   app.mount('#app');
 }
 
-setupPlugins();
+setupAssets();
+
 setupApp();

src/store/modules/theme/helpers.ts

@@ -0,0 +1,40 @@
+import { colord } from 'colord';
+import { getColorPalette } from '@/utils';
+
+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 => getColorPalette(color, 5) },
+    { scene: 'Pressed', handler: color => getColorPalette(color, 7) },
+    { scene: 'Active', handler: color => colord(color).alpha(0.1).toHex() }
+  ];
+
+  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

@@ -1,7 +1,87 @@
+import { ref, computed } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
 import { defineStore } from 'pinia';
+import { useThemeVars } from 'naive-ui';
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { kebabCase } from 'lodash-es';
+import { getColorPalette } from '@/utils';
+import { getThemeColors } from './helpers';
 
-// interface ThemeStore {
-//   primary: string;
-// }
+interface OtherColor {
+  /** 信息 */
+  info: string;
+  /** 成功 */
+  success: string;
+  /** 警告 */
+  warning: string;
+  /** 错误 */
+  error: string;
+}
 
-export const useThemeStore = defineStore('theme-store', () => {});
+interface ThemeStore {
+  /** 主题颜色 */
+  themeColor: Ref<string>;
+  /** 其他颜色 */
+  otherColor: ComputedRef<OtherColor>;
+  /** naiveUI的主题配置 */
+  naiveThemeOverrides: ComputedRef<GlobalThemeOverrides>;
+  /** 添加css vars至html */
+  addThemeCssVarsToRoot(): void;
+}
+
+type ThemeVarsKeys = keyof Exclude<GlobalThemeOverrides['common'], undefined>;
+
+export const useThemeStore = defineStore('theme-store', () => {
+  const themeVars = useThemeVars();
+
+  const themeColor = ref('#1890ff');
+  const otherColor = computed<OtherColor>(() => ({
+    info: getColorPalette(themeColor.value, 7),
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d'
+  }));
+
+  const naiveThemeOverrides = computed<GlobalThemeOverrides>(() => {
+    const { info, success, warning, error } = otherColor.value;
+    const themeColors = getThemeColors([
+      ['primary', themeColor.value],
+      ['info', info],
+      ['success', success],
+      ['warning', warning],
+      ['error', error]
+    ]);
+
+    const colorLoading = themeColor.value;
+
+    return {
+      common: {
+        ...themeColors
+      },
+      LoadingBar: {
+        colorLoading
+      }
+    };
+  });
+
+  function addThemeCssVarsToRoot() {
+    const updatedThemeVars = { ...themeVars.value };
+    Object.assign(updatedThemeVars, naiveThemeOverrides.value.common);
+    const keys = Object.keys(updatedThemeVars) as ThemeVarsKeys[];
+    const style: string[] = [];
+    keys.forEach(key => {
+      style.push(`--${kebabCase(key)}: ${updatedThemeVars[key]}`);
+    });
+    const styleStr = style.join(';');
+    document.documentElement.style.cssText += styleStr;
+  }
+
+  const themeStore: ThemeStore = {
+    themeColor,
+    otherColor,
+    naiveThemeOverrides,
+    addThemeCssVarsToRoot
+  };
+
+  return themeStore;
+});