feat(projects): 创建自定义布局组件SoybeanLayout

src/store/modules/theme/helpers.ts

@@ -1,22 +1,20 @@
+import type { GlobalThemeOverrides } from 'naive-ui';
+import { kebabCase } from 'lodash-es';
 import { getColorPalette, addColorAlpha } 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][]) {
+function getThemeColors(colors: [ColorType, string][]) {
   const colorActions: ColorAction[] = [
     { scene: '', handler: color => color },
     { scene: 'Suppl', handler: color => color },
@@ -38,23 +36,51 @@ export function getThemeColors(colors: [ColorType, string][]) {
   return themeColor;
 }
 
+/** 获取naive的主题颜色 */
+export function getNaiveThemeOverrides(colors: { [key in ColorType]: string }): GlobalThemeOverrides {
+  const { primary, info, success, warning, error } = colors;
+  const themeColors = getThemeColors([
+    ['primary', primary],
+    ['info', info],
+    ['success', success],
+    ['warning', warning],
+    ['error', error]
+  ]);
+
+  const colorLoading = primary;
+
+  return {
+    common: {
+      ...themeColors
+    },
+    LoadingBar: {
+      colorLoading
+    }
+  };
+}
+
+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';
-  function getHtmlElement() {
-    return document.querySelector('html');
-  }
   function addDarkClass() {
-    const html = getHtmlElement();
-    if (html) {
-      html.classList.add(DARK_CLASS);
-    }
+    document.documentElement.classList.add(DARK_CLASS);
   }
   function removeDarkClass() {
-    const html = getHtmlElement();
-    if (html) {
-      html.classList.remove(DARK_CLASS);
-    }
+    document.documentElement.classList.remove(DARK_CLASS);
   }
   return {
     addDarkClass,

src/store/modules/theme/index.ts

@@ -3,10 +3,9 @@ import type { Ref, ComputedRef } from 'vue';
 import { defineStore } from 'pinia';
 import { useThemeVars, darkTheme, useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides, GlobalTheme } from 'naive-ui';
-import { kebabCase } from 'lodash-es';
 import { useBoolean } from '@/hooks';
 import { getColorPalette } from '@/utils';
-import { getThemeColors, handleWindicssDarkMode } from './helpers';
+import { getNaiveThemeOverrides, addThemeCssVarsToHtml, handleWindicssDarkMode } from './helpers';
 
 interface OtherColor {
   /** 信息 */
@@ -38,8 +37,6 @@ interface ThemeStore {
   naiveTheme: ComputedRef<BuiltInGlobalTheme | undefined>;
 }
 
-type ThemeVarsKeys = keyof Exclude<GlobalThemeOverrides['common'], undefined>;
-
 export const useThemeStore = defineStore('theme-store', () => {
   const themeVars = useThemeVars();
   const { bool: darkMode, setBool: setDarkMode, toggle: toggleDarkMode } = useBoolean();
@@ -53,27 +50,9 @@ export const useThemeStore = defineStore('theme-store', () => {
     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
-      }
-    };
-  });
+  const naiveThemeOverrides = computed<GlobalThemeOverrides>(() =>
+    getNaiveThemeOverrides({ primary: themeColor.value, ...otherColor.value })
+  );
 
   /** naive-ui暗黑主题 */
   const naiveTheme = computed(() => (darkMode.value ? darkTheme : undefined));
@@ -81,22 +60,14 @@ export const useThemeStore = defineStore('theme-store', () => {
   /** 操作系统暗黑主题 */
   const osTheme = useOsTheme();
 
-  /** 添加css vars至html */
-  function addThemeCssVarsToHtml() {
-    if (document.documentElement.style.cssText) return;
-
+  /** 初始化css vars, 并添加至html */
+  function initThemeCssVars() {
     const updatedThemeVars = { ...themeVars.value, ...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;
+    addThemeCssVarsToHtml(updatedThemeVars);
   }
 
   function init() {
-    addThemeCssVarsToHtml();
+    initThemeCssVars();
   }
 
   init();