refactor(projects): 生产环境缓存主题变更为sessionStorage

src/components/common/app-loading.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import { useAppInfo } from '@/composables';
-import { localStg, getRgbOfColor } from '@/utils';
+import { sessionStg, getRgbOfColor } from '@/utils';
 import themeSettings from '@/settings/theme.json';
 
 const { title } = useAppInfo();
@@ -31,7 +31,7 @@ const lodingClasses = [
 
 function addThemeColorCssVars() {
   const defaultColor = themeSettings.themeColor;
-  const themeColor = localStg.get('themeColor') || defaultColor;
+  const themeColor = sessionStg.get('themeColor') || defaultColor;
 
   const { r, g, b } = getRgbOfColor(themeColor);
 

src/store/modules/theme/helpers.ts

@@ -1,19 +1,19 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
-import { localStg, addColorAlpha, getColorPalette } from '@/utils';
+import { sessionStg, addColorAlpha, getColorPalette } from '@/utils';
 
 /** 初始化主题配置 */
 export function initThemeSettings() {
   const isProd = import.meta.env.PROD;
   // 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
-  const storageSettings = localStg.get('themeSettings');
+  const storageSettings = sessionStg.get('themeSettings');
 
   if (isProd && storageSettings) {
     return storageSettings;
   }
 
-  const themeColor = localStg.get('themeColor') || themeSetting.themeColor;
+  const themeColor = sessionStg.get('themeColor') || themeSetting.themeColor;
   const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
   const otherColor = { ...themeSetting.otherColor, info };
   const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });

src/store/modules/theme/index.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { localStg } from '@/utils';
+import { sessionStg } from '@/utils';
 import { getNaiveThemeOverrides, initThemeSettings } from './helpers';
 
 type ThemeState = Theme.Setting;
@@ -25,14 +25,14 @@ export const useThemeStore = defineStore('theme-store', {
   actions: {
     /** 重置theme状态 */
     resetThemeStore() {
-      localStg.remove('themeSettings');
+      sessionStg.remove('themeSettings');
       this.$reset();
     },
     /** 缓存主题配置 */
     cacheThemeSettings() {
       const isProd = import.meta.env.PROD;
       if (isProd) {
-        localStg.set('themeSettings', this.$state);
+        sessionStg.set('themeSettings', this.$state);
       }
     },
     /** 设置暗黑模式 */

src/store/subscribe/theme.ts

@@ -3,7 +3,7 @@ import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { kebabCase } from 'lodash-es';
-import { localStg, getColorPalettes, getRgbOfColor } from '@/utils';
+import { sessionStg, getColorPalettes, getRgbOfColor } from '@/utils';
 import { useThemeStore } from '../modules';
 
 /** 订阅theme store */
@@ -19,7 +19,7 @@ export default function subscribeThemeStore() {
     watch(
       () => theme.themeColor,
       newValue => {
-        localStg.set('themeColor', newValue);
+        sessionStg.set('themeColor', newValue);
       },
       { immediate: true }
     );

src/typings/storage.d.ts

@@ -1,21 +1,20 @@
 declare namespace StorageInterface {
   /** localStorage的存储数据的类型 */
   interface Session {
-    demoKey: string;
+    /** 主题颜色 */
+    themeColor: string;
+    /** 主题配置 */
+    themeSettings: Theme.Setting;
   }
 
   /** localStorage的存储数据的类型 */
   interface Local {
-    /** 主题颜色 */
-    themeColor: string;
     /** 用户token */
     token: string;
     /** 用户刷新token */
     refreshToken: string;
     /** 用户信息 */
     userInfo: Auth.UserInfo;
-    /** 主题配置 */
-    themeSettings: Theme.Setting;
     /** 多页签路由信息 */
     multiTabRoutes: App.GlobalTabRoute[];
     /** 本地语言缓存 */