refactor(projects): 去除在pinia的getters的函数调用副作用，用watch代替

components.d.ts

@@ -13,9 +13,17 @@ declare module 'vue' {
     IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconCustomActivity: typeof import('~icons/custom/activity')['default']
     IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
+    IconCustomBanner: typeof import('~icons/custom/banner')['default']
+    IconCustomCast: typeof import('~icons/custom/cast')['default']
+    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
     IconCustomLogo: typeof import('~icons/custom/logo')['default']
     IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
+    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
+    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
+    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
+    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
@@ -47,6 +55,8 @@ declare module 'vue' {
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -59,18 +69,26 @@ declare module 'vue' {
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NThing: typeof import('naive-ui')['NThing']
     NTimeline: typeof import('naive-ui')['NTimeline']
     NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']

src/store/modules/theme/helpers.ts

@@ -1,5 +1,5 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { cloneDeep, kebabCase } from 'lodash-es';
+import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
 import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils';
 
@@ -72,20 +72,6 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
   };
 }
 
-type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
-type ThemeVarsKeys = keyof ThemeVars;
-
-/** 添加css vars至html */
-export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
-  const keys = Object.keys(themeVars) as ThemeVarsKeys[];
-  const style: string[] = [];
-  keys.forEach(key => {
-    style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
-  });
-  const styleStr = style.join(';');
-  document.documentElement.style.cssText += styleStr;
-}
-
 /** windicss 暗黑模式 */
 export function handleWindicssDarkMode() {
   const DARK_CLASS = 'dark';

src/store/modules/theme/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { getThemeSettings, getNaiveThemeOverrides, addThemeCssVarsToHtml } from './helpers';
+import { getThemeSettings, getNaiveThemeOverrides } from './helpers';
 
 type ThemeState = Theme.Setting;
 
@@ -10,9 +10,6 @@ export const useThemeStore = defineStore('theme-store', {
     /** naiveUI的主题配置 */
     naiveThemeOverrides(state) {
       const overrides = getNaiveThemeOverrides({ primary: state.themeColor, ...state.otherColor });
-      if (overrides.common) {
-        addThemeCssVarsToHtml(overrides.common);
-      }
       return overrides;
     },
     /** naive-ui暗黑主题 */

src/store/subscribe/theme.ts

@@ -1,6 +1,8 @@
 import { watch, onUnmounted } from 'vue';
 import { useOsTheme } from 'naive-ui';
+import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
+import { kebabCase } from 'lodash-es';
 import { setThemeColor } from '@/utils';
 import { useThemeStore } from '../modules';
 
@@ -11,6 +13,7 @@ export default function subscribeThemeStore() {
   const { width } = useElementSize(document.documentElement);
   const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
 
+  // 监听主题颜色
   const stopThemeColor = watch(
     () => theme.themeColor,
     newValue => {
@@ -19,6 +22,17 @@ export default function subscribeThemeStore() {
     { immediate: true }
   );
 
+  // 监听naiveUI themeOverrides
+  const stopThemeOverrides = watch(
+    () => theme.naiveThemeOverrides,
+    newValue => {
+      if (newValue.common) {
+        addThemeCssVarsToHtml(newValue.common);
+      }
+    },
+    { immediate: true }
+  );
+
   // 监听暗黑模式
   const stopDarkMode = watch(
     () => theme.darkMode,
@@ -55,6 +69,7 @@ export default function subscribeThemeStore() {
 
   onUnmounted(() => {
     stopThemeColor();
+    stopThemeOverrides();
     stopDarkMode();
     stopOsTheme();
     stopWidth();
@@ -75,3 +90,17 @@ function handleWindicssDarkMode() {
     removeDarkClass
   };
 }
+
+type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
+type ThemeVarsKeys = keyof ThemeVars;
+
+/** 添加css vars至html */
+function addThemeCssVarsToHtml(themeVars: ThemeVars) {
+  const keys = Object.keys(themeVars) as ThemeVarsKeys[];
+  const style: string[] = [];
+  keys.forEach(key => {
+    style.push(`--${kebabCase(key)}: ${themeVars[key]}`);
+  });
+  const styleStr = style.join(';');
+  document.documentElement.style.cssText += styleStr;
+}