feat(projects): 主题配置抽屉：迁移暗黑模式、布局模式、添加颜色选择面板

src/store/modules/theme/helpers.ts

@@ -63,14 +63,27 @@ type ThemeVars = Exclude<GlobalThemeOverrides['common'], undefined>;
 type ThemeVarsKeys = keyof ThemeVars;
 
 /** 添加css vars至html */
-export function addThemeCssVarsToHtml(themeVars: ThemeVars) {
+export function addThemeCssVarsToHtml(themeVars: ThemeVars, action: 'add' | 'update' = 'add') {
   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;
+  if (action === 'add') {
+    document.documentElement.style.cssText = styleStr;
+  } else {
+    document.documentElement.style.cssText += styleStr;
+  }
+}
+
+/**
+ * 根据主题颜色更新css vars
+ * @param primaryColor
+ */
+export function updateThemeCssVarsByPrimary(primaryColor: string) {
+  const themeColor = getThemeColors([['primary', primaryColor]]);
+  addThemeCssVarsToHtml(themeColor, 'update');
 }
 
 /** windicss 暗黑模式 */

src/store/modules/theme/hooks.ts

@@ -4,7 +4,7 @@ import { useOsTheme } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { objectAssign } from '@/utils';
 import type { ThemeSetting, ThemeLayoutMode, ThemeTabMode, ThemeAnimateMode } from '@/interface';
-import { handleWindicssDarkMode } from './helpers';
+import { handleWindicssDarkMode, updateThemeCssVarsByPrimary } from './helpers';
 
 export interface LayoutFunc {
   /** 设置布局最小宽度 */
@@ -251,3 +251,16 @@ export function setupHiddenScroll(minWidthOfLayout: ComputedRef<number>) {
     stopHandle();
   });
 }
+
+/**
+ * 监听主题颜色的变化
+ * @param themeColor
+ */
+export function themeColorWatcher(themeColor: Ref<string>) {
+  const stopHandle = watch(themeColor, newValue => {
+    updateThemeCssVarsByPrimary(newValue);
+  });
+  onUnmounted(() => {
+    stopHandle();
+  });
+}

src/store/modules/theme/index.ts

@@ -17,7 +17,8 @@ import {
   usePageFunc,
   osThemeWatcher,
   setupWindicssDarkMode,
-  setupHiddenScroll
+  setupHiddenScroll,
+  themeColorWatcher
 } from './hooks';
 import type { LayoutFunc, HeaderFunc, TabFunc, SiderFunc, FooterFunc, PageFunc } from './hooks';
 
@@ -169,6 +170,7 @@ export const useThemeStore = defineStore('theme-store', () => {
     handleAdaptOsTheme();
     setupWindicssDarkMode(darkMode);
     setupHiddenScroll(computed(() => layout.minWidth));
+    themeColorWatcher(themeColor);
   }
 
   init();