image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 06:58:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: improves modify theme color logic (#428)

Browse Source
This commit is contained in:
hzgotb 2023-02-24 01:07:50 +08:00 committed by GitHub
parent 90299975ca
commit 44cca54cda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/layouts/setting.vue
View File

@ -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(() => {

29
src/store/modules/setting.ts
View File

@ -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) {