perf(store, globalConfig): 优化多语言刷新和主题颜色缓存

1.  修改全局配置的多语言刷新逻辑,新增参数控制全量刷新时机
2.  为主题颜色生成添加缓存,避免重复遍历主题对象计算CSS变量
3.  从本地存储初始化主题配置,持久化主题状态
This commit is contained in:
2026-06-16 17:34:09 +08:00
parent 2e85e11e92
commit c01a026149
2 changed files with 20 additions and 5 deletions

View File

@@ -9,6 +9,11 @@ import util from '../common/js/util.js'
import ThemeOverride from '../common/js/theme-override.js'
import { sanitizeFlatMap, mergeThemeBuckets } from '../common/js/merge-theme.js'
// themeColor 结果缓存(避免每次都全量遍历 theme 对象)
// key: JSON.stringify(theme) + tabBarHeight, value: CSS变量字符串
let _themeColorCache = null;
let _themeColorCacheKey = '';
const store = new Vuex.Store({
state: {
token: null,
@@ -16,8 +21,8 @@ const store = new Vuex.Store({
memberInfo: null,
tabBarList: null,
siteState: 1,
themeStyle: '',
themeColor: '',
themeStyle: (function() { try { return uni.getStorageSync('themeStyle') || ''; } catch(e) { return ''; } })(),
themeColor: (function() { try { return uni.getStorageSync('themeColor') || ''; } catch(e) { return ''; } })(),
addonIsExist: {
bundling: 0,
coupon: 0,
@@ -420,11 +425,18 @@ const store = new Vuex.Store({
this.commit('setCartIds', ids);
},
// 生成主题颜色CSS变量
// 生成主题颜色CSS变量(带缓存)
themeColorSet() {
let theme = this.state.themeStyle;
if (!theme?.main_color || !theme?.aux_color) return;
try {
const cacheKey = (typeof theme === 'object' ? JSON.stringify(theme) : String(theme)) + '|' + (this.state.tabBarHeight || '');
if (_themeColorCache && _themeColorCacheKey === cacheKey) {
if (this.state.themeColor !== _themeColorCache) {
this.commit('setThemeColor', _themeColorCache);
}
return;
}
let themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
if (this.state.tabBarHeight != '56px') themeColor += `--tab-bar-height:${this.state.tabBarHeight};`
Object.keys(theme).forEach(key => {
@@ -441,6 +453,8 @@ const store = new Vuex.Store({
let color = util.colourBlend(theme.main_color, '#ffffff', (i / 10));
themeColor += `--base-color-light-${i}:${color};`;
}
_themeColorCache = themeColor;
_themeColorCacheKey = cacheKey;
this.commit('setThemeColor', themeColor);
} catch (e) {
console.error('设置主题颜色失败', e);