refactor(projects)!: refactor route cache & support reset route cache strategy

Author: honghuangdc

src/constants/app.ts

@@ -54,3 +54,10 @@ export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode,
 };
 
 export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);
+
+export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I18n.I18nKey> = {
+  close: 'theme.resetCacheStrategy.close',
+  refresh: 'theme.resetCacheStrategy.refresh'
+};
+
+export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);

src/layouts/modules/global-content/index.vue

@@ -42,7 +42,7 @@ function resetScroll() {
       @after-leave="resetScroll"
       @after-enter="appStore.setContentXScrollable(false)"
     >
-      <KeepAlive :include="routeStore.cacheRoutes">
+      <KeepAlive :include="routeStore.cacheRoutes" :exclude="routeStore.excludeCacheRoutes">
         <component
           :is="Component"
           v-if="appStore.reloadFlag"

src/layouts/modules/global-tab/index.vue

@@ -84,7 +84,10 @@ function getContextMenuDisabledKeys(tabId: string) {
 
 async function handleCloseTab(tab: App.Global.Tab) {
   await tabStore.removeTab(tab.id);
-  await routeStore.reCacheRoutesByKey(tab.routeKey);
+
+  if (themeStore.resetCacheStrategy === 'close') {
+    routeStore.resetRouteCache(tab.routeKey);
+  }
 }
 
 async function refresh() {

src/layouts/modules/theme-drawer/modules/page-fun.vue

@@ -2,7 +2,12 @@
 import { computed } from 'vue';
 import { $t } from '@/locales';
 import { useThemeStore } from '@/store/modules/theme';
-import { themePageAnimationModeOptions, themeScrollModeOptions, themeTabModeOptions } from '@/constants/app';
+import {
+  resetCacheStrategyOptions,
+  themePageAnimationModeOptions,
+  themeScrollModeOptions,
+  themeTabModeOptions
+} from '@/constants/app';
 import { translateOptions } from '@/utils/common';
 import SettingItem from '../components/setting-item.vue';
 
@@ -22,6 +27,14 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
 <template>
   <NDivider>{{ $t('theme.pageFunTitle') }}</NDivider>
   <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
+    <SettingItem key="0" :label="$t('theme.resetCacheStrategy.title')">
+      <NSelect
+        v-model:value="themeStore.resetCacheStrategy"
+        :options="translateOptions(resetCacheStrategyOptions)"
+        size="small"
+        class="w-120px"
+      />
+    </SettingItem>
     <SettingItem key="1" :label="$t('theme.scrollMode.title')">
       <NSelect
         v-model:value="themeStore.layout.scrollMode"

src/locales/langs/en-us.ts

@@ -141,6 +141,11 @@ const local: App.I18n.Schema = {
     },
     themeDrawerTitle: 'Theme Configuration',
     pageFunTitle: 'Page Function',
+    resetCacheStrategy: {
+      title: 'Reset Cache Strategy',
+      close: 'Close Page',
+      refresh: 'Refresh Page'
+    },
     configOperation: {
       copyConfig: 'Copy Config',
       copySuccessMsg: 'Copy Success, Please replace the variable "themeSettings" in "src/theme/settings.ts"',

src/locales/langs/zh-cn.ts

@@ -141,6 +141,11 @@ const local: App.I18n.Schema = {
     },
     themeDrawerTitle: '主题配置',
     pageFunTitle: '页面功能',
+    resetCacheStrategy: {
+      title: '重置缓存策略',
+      close: '关闭页面',
+      refresh: '刷新页面'
+    },
     configOperation: {
       copyConfig: '复制配置',
       copySuccessMsg: '复制成功，请替换 src/theme/settings.ts 中的变量 themeSettings',

src/store/modules/app/index.ts

@@ -46,6 +46,10 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
     });
 
     setReloadFlag(true);
+
+    if (themeStore.resetCacheStrategy === 'refresh') {
+      routeStore.resetRouteCache();
+    }
   }
 
   const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');

src/store/modules/route/index.ts

@@ -1,4 +1,4 @@
-import { computed, ref, shallowRef } from 'vue';
+import { computed, nextTick, ref, shallowRef } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useBoolean } from '@sa/hooks';
@@ -9,7 +9,6 @@ import { createStaticRoutes, getAuthVueRoutes } from '@/router/routes';
 import { ROOT_ROUTE } from '@/router/routes/builtin';
 import { getRouteName, getRoutePath } from '@/router/elegant/transform';
 import { fetchGetConstantRoutes, fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
-import { useAppStore } from '../app';
 import { useAuthStore } from '../auth';
 import { useTabStore } from '../tab';
 import {
@@ -25,7 +24,6 @@ import {
 } from './shared';
 
 export const useRouteStore = defineStore(SetupStoreId.Route, () => {
-  const appStore = useAppStore();
   const authStore = useAuthStore();
   const tabStore = useTabStore();
   const { bool: isInitConstantRoute, setBool: setIsInitConstantRoute } = useBoolean();
@@ -97,78 +95,36 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
   /** Cache routes */
   const cacheRoutes = ref<RouteKey[]>([]);
 
-  /** All cache routes */
-  const allCacheRoutes = shallowRef<RouteKey[]>([]);
-
-  /**
-   * Get cache routes
-   *
-   * @param routes Vue routes
-   */
-  function getCacheRoutes(routes: RouteRecordRaw[]) {
-    const alls = getCacheRouteNames(routes);
-
-    cacheRoutes.value = alls;
-    allCacheRoutes.value = [...alls];
-  }
-
   /**
-   * Add cache routes
+   * Exclude cache routes
    *
-   * @param routeKey
+   * for reset route cache
    */
-  function addCacheRoutes(routeKey: RouteKey) {
-    if (cacheRoutes.value.includes(routeKey)) return;
-
-    cacheRoutes.value.push(routeKey);
-  }
+  const excludeCacheRoutes = ref<RouteKey[]>([]);
 
   /**
-   * Remove cache routes
-   *
-   * @param routeKey
-   */
-  function removeCacheRoutes(routeKey: RouteKey) {
-    const index = cacheRoutes.value.findIndex(item => item === routeKey);
-
-    if (index === -1) return;
-
-    cacheRoutes.value.splice(index, 1);
-  }
-
-  /**
-   * Is cached route
+   * Get cache routes
    *
-   * @param routeKey
+   * @param routes Vue routes
    */
-  function isCachedRoute(routeKey: RouteKey) {
-    return allCacheRoutes.value.includes(routeKey);
+  function getCacheRoutes(routes: RouteRecordRaw[]) {
+    cacheRoutes.value = getCacheRouteNames(routes);
   }
 
   /**
-   * Re cache routes by route key
+   * Reset route cache
    *
+   * @default router.currentRoute.value.name current route name
    * @param routeKey
    */
-  async function reCacheRoutesByKey(routeKey: RouteKey) {
-    if (!isCachedRoute(routeKey)) return;
-
-    removeCacheRoutes(routeKey);
+  async function resetRouteCache(routeKey?: RouteKey) {
+    const routeName = routeKey || (router.currentRoute.value.name as RouteKey);
 
-    await appStore.reloadPage();
+    excludeCacheRoutes.value.push(routeName);
 
-    addCacheRoutes(routeKey);
-  }
+    await nextTick();
 
-  /**
-   * Re cache routes by route keys
-   *
-   * @param routeKeys
-   */
-  async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
-    for await (const key of routeKeys) {
-      await reCacheRoutesByKey(key);
-    }
+    excludeCacheRoutes.value = [];
   }
 
   /** Global breadcrumbs */
@@ -361,8 +317,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     searchMenus,
     updateGlobalMenusByLocale,
     cacheRoutes,
-    reCacheRoutesByKey,
-    reCacheRoutesByKeys,
+    excludeCacheRoutes,
+    resetRouteCache,
     breadcrumbs,
     initConstantRoute,
     isInitConstantRoute,

src/theme/settings.ts

@@ -12,6 +12,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
     error: '#f5222d'
   },
   isInfoFollowPrimary: true,
+  resetCacheStrategy: 'close',
   layout: {
     mode: 'vertical',
     scrollMode: 'content',
@@ -82,4 +83,10 @@ export const themeSettings: App.Theme.ThemeSetting = {
  *
  * If publish new version, use `overrideThemeSettings` to override certain theme settings
  */
-export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {};
+export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {
+  resetCacheStrategy: 'close',
+  watermark: {
+    visible: false,
+    text: 'SoybeanAdmin'
+  }
+};

src/typings/app.d.ts

@@ -20,6 +20,8 @@ declare namespace App {
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */
       isInfoFollowPrimary: boolean;
+      /** Reset cache strategy */
+      resetCacheStrategy?: UnionKey.ResetCacheStrategy;
       /** Layout */
       layout: {
         /** Layout mode */
@@ -388,6 +390,7 @@ declare namespace App {
         };
         themeDrawerTitle: string;
         pageFunTitle: string;
+        resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
         configOperation: {
           copyConfig: string;
           copySuccessMsg: string;