fix: improve persistent cache logic

package.json

@@ -76,7 +76,7 @@
     "conventional-changelog-cli": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
-    "eslint": "^7.20.0",
+    "eslint": "^7.21.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-vue": "^7.6.0",
@@ -106,7 +106,7 @@
     "vite-plugin-pwa": "^0.5.5",
     "vite-plugin-style-import": "^0.7.5",
     "vite-plugin-theme": "^0.4.8",
-    "vite-plugin-windicss": "0.6.0",
+    "vite-plugin-windicss": "0.6.2",
     "vue-eslint-parser": "^7.5.0",
     "yargs": "^16.2.0"
   },

src/components/Menu/src/BasicMenu.vue

@@ -110,7 +110,7 @@
       listenerLastChangeTab((route) => {
         if (route.name === REDIRECT_NAME) return;
         handleMenuChange(route);
-        currentActiveMenu.value = route.meta?.currentActiveMenu;
+        currentActiveMenu.value = route.meta?.currentActiveMenu as string;
 
         if (unref(currentActiveMenu)) {
           menuState.selectedKeys = [unref(currentActiveMenu)];

src/hooks/web/useFullContent.ts

@@ -21,5 +21,6 @@ export const useFullContent = () => {
     // Return to the configuration in the configuration file
     return appStore.getProjectConfig.fullContent;
   });
+
   return { getFullContent };
 };

src/layouts/default/menu/useLayoutMenu.ts

@@ -41,7 +41,7 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
       if (unref(splitNotLeft) || unref(getIsMobile)) return;
 
       const { meta } = unref(currentRoute);
-      const currentActiveMenu = meta.currentActiveMenu;
+      const currentActiveMenu = meta.currentActiveMenu as string;
       let parentPath = await getCurrentParentPath(path);
       if (!parentPath) {
         parentPath = await getCurrentParentPath(currentActiveMenu);

src/logics/initAppConfig.ts

@@ -1,7 +1,9 @@
 /**
  * Application configuration
  */
+import type { ProjectConfig } from '/#/config';
 
+import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 import projectSetting from '/@/settings/projectSetting';
 
 import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
@@ -15,17 +17,21 @@ import { localeStore } from '/@/store/modules/locale';
 import { getCommonStoragePrefix, getStorageShortName } from '/@/utils/env';
 
 import { primaryColor } from '../../build/config/themeConfig';
+import { Persistent } from '/@/utils/cache/persistent';
+import { deepMerge } from '/@/utils';
 
 // Initial project configuration
 export function initAppConfigStore() {
+  let projCfg: ProjectConfig = Persistent.getLocal(PROJ_CFG_KEY) as ProjectConfig;
+  projCfg = deepMerge(projectSetting, projCfg || {});
   try {
     const {
       colorWeak,
       grayMode,
       themeColor,
       headerSetting: { bgColor: headerBgColor } = {},
       menuSetting: { bgColor } = {},
-    } = projectSetting;
+    } = projCfg;
     if (themeColor && themeColor !== primaryColor) {
       changeTheme(themeColor);
     }
@@ -36,7 +42,7 @@ export function initAppConfigStore() {
   } catch (error) {
     console.log(error);
   }
-  appStore.commitProjectConfigState(projectSetting);
+  appStore.commitProjectConfigState(projCfg);
   localeStore.initLocale();
 
   setTimeout(() => {

src/settings/projectSetting.ts

@@ -22,7 +22,7 @@ const setting: ProjectConfig = {
   permissionMode: PermissionModeEnum.ROLE,
 
   // Permission-related cache is stored in sessionStorage or localStorage
-  permissionCacheType: CacheTypeEnum.LOCAL,
+  permissionCacheType: CacheTypeEnum.SESSION,
 
   // color
   themeColor: primaryColor,

src/store/modules/error.ts

@@ -22,7 +22,7 @@ export interface ErrorState {
   errorListCountState: number;
 }
 
-const NAME = 'error';
+const NAME = 'app-error';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })
 class Error extends VuexModule implements ErrorState {

src/store/modules/locale.ts

@@ -13,7 +13,7 @@ const ls = createLocalStorage();
 
 const lsSetting = (ls.get(LOCALE_KEY) || localeSetting) as LocaleSetting;
 
-const NAME = 'locale';
+const NAME = 'app-locale';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })
 class Locale extends VuexModule {

src/store/modules/lock.ts

@@ -13,7 +13,7 @@ export interface LockInfo {
   isLock: boolean;
 }
 
-const NAME = 'lock';
+const NAME = 'app-lock';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })
 class Lock extends VuexModule {

src/store/modules/permission.ts

@@ -22,7 +22,7 @@ import { useI18n } from '/@/hooks/web/useI18n';
 import { ERROR_LOG_ROUTE, PAGE_NOT_FOUND_ROUTE } from '/@/router/constant';
 
 const { createMessage } = useMessage();
-const NAME = 'permission';
+const NAME = 'app-permission';
 hotModuleUnregisterModule(NAME);
 @Module({ dynamic: true, namespaced: true, store, name: NAME })
 class Permission extends VuexModule {

src/store/modules/tab.ts

@@ -14,7 +14,7 @@ import { getRoute } from '/@/router/helper/routeHelper';
 import { useGo, useRedo } from '/@/hooks/web/usePage';
 import { cloneDeep } from 'lodash-es';
 
-const NAME = 'tab';
+const NAME = 'app-tab';
 
 hotModuleUnregisterModule(NAME);
 

src/store/modules/user.ts

@@ -25,16 +25,22 @@ import projectSetting from '/@/settings/projectSetting';
 
 export type UserInfo = Omit<GetUserInfoByUserIdModel, 'roles'>;
 
-const NAME = 'user';
+const { permissionCacheType } = projectSetting;
+const isLocal = permissionCacheType === CacheTypeEnum.LOCAL;
+
+const NAME = 'app-user';
 hotModuleUnregisterModule(NAME);
 
 function getCache<T>(key: BasicKeys) {
-  const { permissionCacheType } = projectSetting;
-  const fn =
-    permissionCacheType === CacheTypeEnum.LOCAL ? Persistent.getLocal : Persistent.getSession;
+  const fn = isLocal ? Persistent.getLocal : Persistent.getSession;
   return fn(key) as T;
 }
 
+function setCache(key: BasicKeys, value) {
+  const fn = isLocal ? Persistent.setLocal : Persistent.setSession;
+  return fn(key, value);
+}
+
 @Module({ namespaced: true, name: NAME, dynamic: true, store })
 class User extends VuexModule {
   // user info
@@ -68,19 +74,19 @@ class User extends VuexModule {
   @Mutation
   commitUserInfoState(info: UserInfo): void {
     this.userInfoState = info;
-    Persistent.setLocal(USER_INFO_KEY, info);
+    setCache(USER_INFO_KEY, info);
   }
 
   @Mutation
   commitRoleListState(roleList: RoleEnum[]): void {
     this.roleListState = roleList;
-    Persistent.setLocal(ROLES_KEY, roleList);
+    setCache(ROLES_KEY, roleList);
   }
 
   @Mutation
   commitTokenState(info: string): void {
     this.tokenState = info;
-    Persistent.setLocal(TOKEN_KEY, info);
+    setCache(TOKEN_KEY, info);
   }
 
   /**

src/utils/cache/persistent.ts

@@ -1,3 +1,7 @@
+import type { UserInfo } from '/@/store/modules/user';
+import type { LockInfo } from '/@/store/modules/lock';
+import { ProjectConfig } from '/#/config';
+
 import { createLocalStorage, createSessionStorage } from '/@/utils/cache';
 import { Memory } from './memory';
 import {
@@ -14,10 +18,10 @@ import { toRaw } from 'vue';
 
 interface BasicStore {
   [TOKEN_KEY]: string | number | null | undefined;
-  [USER_INFO_KEY]: Recordable;
-  [ROLES_KEY]: Recordable;
-  [LOCK_INFO_KEY]: Recordable;
-  [PROJ_CFG_KEY]: Recordable;
+  [USER_INFO_KEY]: UserInfo;
+  [ROLES_KEY]: string[];
+  [LOCK_INFO_KEY]: LockInfo;
+  [PROJ_CFG_KEY]: ProjectConfig;
 }
 
 type LocalStore = BasicStore;
@@ -36,7 +40,7 @@ const sessionMemory = new Memory(DEFAULT_CACHE_TIME);
 
 function initPersistentMemory() {
   const localCache = ls.get(APP_LOCAL_CACHE_KEY);
-  const sessionCache = ls.get(APP_SESSION_CACHE_KEY);
+  const sessionCache = ss.get(APP_SESSION_CACHE_KEY);
   localCache && localMemory.resetCache(localCache);
   sessionCache && sessionMemory.resetCache(sessionCache);
 }
@@ -65,7 +69,7 @@ export class Persistent {
 
   static setSession(key: SessionKeys, value: SessionStore[SessionKeys], immediate = false): void {
     sessionMemory.set(key, toRaw(value));
-    immediate && ss.set(APP_SESSION_CACHE_KEY, localMemory);
+    immediate && ss.set(APP_SESSION_CACHE_KEY, sessionMemory);
   }
 
   static removeSession(key: SessionKeys): void {

yarn.lock

@@ -1057,10 +1057,10 @@
   resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.3.3.tgz#980487763bc7c9238d6d88d1ac0dee2d4df3df68"
   integrity sha512-v75yutF4BDMv9weDQVM+K5XEfjiODhugSV729pnoxtBDO61ij2CsDnQa4N4E9xGaH3/FX5ASZjnajljT2F71tA==
 
-"@eslint/eslintrc@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
-  integrity sha512-1JTKgrOKAHVivSvOYw+sJOunkBjUOvjqWk1DPja7ZFhIS2mX/4EgTT8M7eTK9jrKhL/FvXXEbQwIs3pg1xp3dg==
+"@eslint/eslintrc@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
+  integrity sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==
   dependencies:
     ajv "^6.12.4"
     debug "^4.1.1"
@@ -1069,7 +1069,6 @@
     ignore "^4.0.6"
     import-fresh "^3.2.1"
     js-yaml "^3.13.1"
-    lodash "^4.17.20"
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
@@ -1718,10 +1717,10 @@
   dependencies:
     vue-demi latest
 
-"@windicss/plugin-utils@0.6.0":
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.0.tgz#34eb852b7ff338bb933b0079112318a30d2aee00"
-  integrity sha512-CpXn3CRrAaDrpTjenidVfBz0JONLuGTFP6qjrwZ2tmhsKOuvTWw8Ic9JQ2a9L0AkYBH33lTso1qk70/PjnE6WQ==
+"@windicss/plugin-utils@0.6.2":
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-0.6.2.tgz#8fc76d9f2a1e3de123ffd54fdd9d1583801bb087"
+  integrity sha512-qR2h/vDn3LZtL0cC3id9nxPwhYqCtkcwASs63sHTUOzLhxz+zkG4xR+odndbR6PTjrlTgBC7n5hLjpq0lxRksg==
   dependencies:
     esbuild "^0.8.52"
     esbuild-register "^2.0.0"
@@ -3678,13 +3677,13 @@ eslint-visitor-keys@^2.0.0:
   resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint@^7.20.0:
-  version "7.20.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-7.20.0.tgz#db07c4ca4eda2e2316e7aa57ac7fc91ec550bdc7"
-  integrity sha512-qGi0CTcOGP2OtCQBgWZlQjcTuP0XkIpYFj25XtRTQSHC+umNnp7UMshr2G8SLsRFYDdAPFeHOsiteadmMH02Yw==
+eslint@^7.21.0:
+  version "7.21.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-7.21.0.tgz#4ecd5b8c5b44f5dedc9b8a110b01bbfeb15d1c83"
+  integrity sha512-W2aJbXpMNofUp0ztQaF40fveSsJBjlSCSWpy//gzfTvwC+USs/nceBrKmlJOiM8r1bLwP2EuYkCqArn/6QTIgg==
   dependencies:
     "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.3.0"
+    "@eslint/eslintrc" "^0.4.0"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -3697,7 +3696,7 @@ eslint@^7.20.0:
     espree "^7.3.1"
     esquery "^1.4.0"
     esutils "^2.0.2"
-    file-entry-cache "^6.0.0"
+    file-entry-cache "^6.0.1"
     functional-red-black-tree "^1.0.1"
     glob-parent "^5.0.0"
     globals "^12.1.0"
@@ -4030,6 +4029,13 @@ file-entry-cache@^6.0.0:
   dependencies:
     flat-cache "^3.0.4"
 
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
 file-type@5.2.0, file-type@^5.2.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz#2ddbea7c73ffe36368dfae49dc338c058c2b8ad6"
@@ -8968,12 +8974,12 @@ vite-plugin-theme@^0.4.8:
     es-module-lexer "^0.3.26"
     tinycolor2 "^1.4.2"
 
-vite-plugin-windicss@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.0.tgz#ac8f24e70439904b67adc1f133e692fb6257ecaf"
-  integrity sha512-PSFdm0hrAGaKFzkFOiz31+dODoKNbh9wo/3m/7/012WwV9oJ1mX/9OxDxACykW7hMR0YvWHFmC0UwtvMra+InQ==
+vite-plugin-windicss@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-0.6.2.tgz#2b406c65768ce7df22451dc7b47c0026abd4bb24"
+  integrity sha512-V4WnjkxvriJSVQjswY+SrDKogOLNq1eG6dQw1wWcJRV+0QUz9pAGrMolSwed4d4MwSSbJrCA7If8xa+EFLUigw==
   dependencies:
-    "@windicss/plugin-utils" "0.6.0"
+    "@windicss/plugin-utils" "0.6.2"
     windicss "^2.2.0"
 
 vite@2.0.4: