perf: improves modify theme color logic

Tencent · Feb 22, 2023 · 975b845 · 975b845
1 parent 24d913d
commit 975b845
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 27 deletions.
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
@@ -95,7 +95,6 @@
 import { ref, computed, onMounted, watchEffect } from 'vue';
 import { MessagePlugin } from 'tdesign-vue-next';
 import type { PopupVisibleChangeContext } from 'tdesign-vue-next';
-import { Color } from 'tvision-color';
 import useClipboard from 'vue-clipboard3';
 
 import { useSettingStore } from '@/store';
@@ -104,7 +103,6 @@ import ColorContainer from '@/components/color/index.vue';
 
 import STYLE_CONFIG from '@/config/style';
 import { DEFAULT_COLOR_OPTIONS } from '@/config/color';
-import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
 
 import SettingDarkIcon from '@/assets/assets-setting-dark.svg';
 import SettingLightIcon from '@/assets/assets-setting-light.svg';
@@ -150,19 +148,7 @@ const showSettingPanel = computed({
 });
 
 const changeColor = (hex: string) => {
-  const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
-    colors: [hex],
-    step: 10,
-    remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
-  })[0];
-  const { mode } = settingStore;
-
-  const colorMap = generateColorMap(hex, newPalette, mode as 'light' | 'dark', brandColorIndex);
-
-  settingStore.addColor({ [hex]: colorMap });
   formData.value.brandTheme = hex;
-  settingStore.updateConfig({ ...formData.value, brandTheme: hex });
-  insertThemeStylesheet(hex, colorMap, mode as 'light' | 'dark');
 };
 
 onMounted(() => {

diff --git a/src/store/modules/setting.ts b/src/store/modules/setting.ts
@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { Color } from 'tvision-color';
 import keys from 'lodash/keys';
-import { LIGHT_CHART_COLORS, DARK_CHART_COLORS, TColorSeries } from '@/config/color';
+import { LIGHT_CHART_COLORS, DARK_CHART_COLORS } from '@/config/color';
 import { insertThemeStylesheet, generateColorMap } from '@/utils/color';
 import STYLE_CONFIG from '@/config/style';
 import { store } from '@/store';
@@ -51,21 +51,24 @@ export const useSettingStore = defineStore('setting', {
       this.chartColors = isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS;
     },
     changeBrandTheme(brandTheme: string) {
-      const { colors: newPalette, primary: brandColorIndex } = Color.getColorGradations({
-        colors: [brandTheme],
-        step: 10,
-        remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
-      })[0];
-      const { mode } = this;
-      const colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
-
+      const mode = this.displayMode;
+      // 以主题色加显示模式作为键
+      const colorKey = `${brandTheme}[${mode}]`;
+      let colorMap = this.colorList[colorKey];
+      // 如果不存在色阶，就需要计算
+      if (colorMap === undefined) {
+        const [{ colors: newPalette, primary: brandColorIndex }] = Color.getColorGradations({
+          colors: [brandTheme],
+          step: 10,
+          remainInput: false, // 是否保留输入 不保留会矫正不合适的主题色
+        });
+        colorMap = generateColorMap(brandTheme, newPalette, mode as 'light' | 'dark', brandColorIndex);
+        this.colorList[colorKey] = colorMap;
+      }
+      // TODO 需要解决不停切换时有反复插入 style 的问题
       insertThemeStylesheet(brandTheme, colorMap, mode as 'light' | 'dark');
-
       document.documentElement.setAttribute('theme-color', brandTheme);
     },
-    addColor(payload: TColorSeries) {
-      this.colorList = { ...this.colorList, ...payload };
-    },
     updateConfig(payload: Partial<TState>) {
       for (const key in payload) {
         if (payload[key] !== undefined) {