feat(projects): 添加生产的主题配置缓存

src/store/modules/tab/helpers.ts

@@ -1,4 +1,6 @@
 import type { RouteRecordNormalized, RouteLocationNormalizedLoaded } from 'vue-router';
+import { EnumStorageKey } from '@/enum';
+import { setLocal, getLocal } from '@/utils';
 
 /**
  * 根据vue路由获取tab路由
@@ -55,3 +57,30 @@ function hasFullPath(
 ): route is RouteLocationNormalizedLoaded {
   return Boolean((route as RouteLocationNormalizedLoaded).fullPath);
 }
+
+/** 缓存多页签数据 */
+export function setTabRoutes(data: GlobalTabRoute[]) {
+  setLocal(EnumStorageKey['multi-tab-routes'], data);
+}
+
+/** 获取缓存的多页签数据 */
+export function getTabRoutes() {
+  const routes: GlobalTabRoute[] = [];
+  const data = getLocal<GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
+  if (data) {
+    const defaultTabRoutes = data.map(item => ({
+      ...item,
+      scrollPosition: {
+        left: 0,
+        top: 0
+      }
+    }));
+    routes.push(...defaultTabRoutes);
+  }
+  return routes;
+}
+
+/** 清空多页签数据 */
+export function clearTabRoutes() {
+  setTabRoutes([]);
+}

src/store/modules/tab/index.ts

@@ -1,9 +1,16 @@
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
-import { getTabRoutes, clearTabRoutes } from '@/utils';
 import { useThemeStore } from '../theme';
-import { getTabRouteByVueRoute, isInTabRoutes, getIndexInTabRoutes, getIndexInTabRoutesByRouteName } from './helpers';
+import {
+  getTabRouteByVueRoute,
+  isInTabRoutes,
+  getIndexInTabRoutes,
+  getIndexInTabRoutesByRouteName,
+  setTabRoutes,
+  getTabRoutes,
+  clearTabRoutes
+} from './helpers';
 
 interface TabState {
   /** 多页签数据 */
@@ -43,6 +50,10 @@ export const useTabStore = defineStore('tab-store', {
       clearTabRoutes();
       this.$reset();
     },
+    /** 缓存页签路由数据 */
+    cacheTabRoutes() {
+      setTabRoutes(this.tabs);
+    },
     /**
      * 设置当前路由对应的页签为激活状态
      * @param fullPath - 路由fullPath

src/store/modules/theme/helpers.ts

@@ -1,10 +1,18 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
-import { getThemeColor, getColorPalette, addColorAlpha } from '@/utils';
+import { EnumStorageKey } from '@/enum';
+import { getThemeColor, getColorPalette, addColorAlpha, setLocal, getLocal, removeLocal } from '@/utils';
+
+/** 初始化主题配置 */
+export function initThemeSettings() {
+  const isProd = import.meta.env.PROD;
+  // 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
+  const storageSettings = getThemeSettings();
+  if (isProd && storageSettings) {
+    return storageSettings;
+  }
 
-/** 获取主题配置 */
-export function getThemeSettings() {
   const themeColor = getThemeColor() || themeSetting.themeColor;
   const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
   const otherColor = { ...themeSetting.otherColor, info };
@@ -70,3 +78,18 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
+
+/** 获取缓存中的主题配置 */
+function getThemeSettings() {
+  return getLocal<Theme.Setting>(EnumStorageKey['theme-settings']);
+}
+
+/** 获取缓存中的主题配置 */
+export function setThemeSettings(settings: Theme.Setting) {
+  return setLocal(EnumStorageKey['theme-settings'], settings);
+}
+
+/** 清除缓存配置 */
+export function clearThemeSettings() {
+  removeLocal(EnumStorageKey['theme-settings']);
+}

src/store/modules/theme/index.ts

@@ -1,11 +1,11 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { getThemeSettings, getNaiveThemeOverrides } from './helpers';
+import { initThemeSettings, getNaiveThemeOverrides, setThemeSettings, clearThemeSettings } from './helpers';
 
 type ThemeState = Theme.Setting;
 
 export const useThemeStore = defineStore('theme-store', {
-  state: (): ThemeState => getThemeSettings(),
+  state: (): ThemeState => initThemeSettings(),
   getters: {
     /** naiveUI的主题配置 */
     naiveThemeOverrides(state) {
@@ -24,8 +24,16 @@ export const useThemeStore = defineStore('theme-store', {
   actions: {
     /** 重置theme状态 */
     resetThemeStore() {
+      clearThemeSettings();
       this.$reset();
     },
+    /** 缓存主题配置 */
+    cacheThemeSettings() {
+      const isProd = import.meta.env.PROD;
+      if (isProd) {
+        setThemeSettings(this.$state);
+      }
+    },
     /** 设置暗黑模式 */
     setDarkMode(darkMode: boolean) {
       this.darkMode = darkMode;