feat(projects): 🔥 optimize tabs cache cleaning strategy. fixed [#165]

src/constants/app.ts

@@ -55,10 +55,4 @@ 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);
-
 export const DARK_CLASS = 'dark';

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

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import {
-  resetCacheStrategyOptions,
-  themePageAnimationModeOptions,
-  themeScrollModeOptions,
-  themeTabModeOptions
-} from '@/constants/app';
+import { themePageAnimationModeOptions, themeScrollModeOptions, themeTabModeOptions } from '@/constants/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { translateOptions } from '@/utils/common';
 import { $t } from '@/locales';
@@ -25,16 +20,6 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
 <template>
   <ElDivider>{{ $t('theme.pageFunTitle') }}</ElDivider>
   <TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
-    <SettingItem key="1" :label="$t('theme.resetCacheStrategy.title')">
-      <ElSelect v-model="themeStore.resetCacheStrategy" size="small" class="w-120px">
-        <ElOption
-          v-for="{ label, value } in translateOptions(resetCacheStrategyOptions)"
-          :key="value"
-          :label="label"
-          :value="value"
-        />
-      </ElSelect>
-    </SettingItem>
     <SettingItem key="1" :label="$t('theme.scrollMode.title')">
       <ElSelect v-model="themeStore.layout.scrollMode" size="small" class="w-120px">
         <ElOption

src/locales/langs/en-us.ts

@@ -148,11 +148,6 @@ 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

@@ -148,11 +148,6 @@ 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,10 +46,6 @@ 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/tab/index.ts

@@ -98,7 +98,6 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     const removeTabIndex = tabs.value.findIndex(tab => tab.id === tabId);
     if (removeTabIndex === -1) return;
 
-    const removedTabRouteKey = tabs.value[removeTabIndex].routeKey;
     const isRemoveActiveTab = activeTabId.value === tabId;
 
     // if remove the last tab, then switch to the second last tab
@@ -111,11 +110,6 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     if (isRemoveActiveTab && nextTab) {
       await switchRouteByTab(nextTab);
     }
-
-    // reset route cache if cache strategy is close
-    if (themeStore.resetCacheStrategy === 'close') {
-      routeStore.resetRouteCache(removedTabRouteKey);
-    }
   }
 
   /** remove active tab */
@@ -147,12 +141,6 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     const tabsToRemove = tabs.value.filter(tab => !remainTabIds.includes(tab.id));
     const routeKeysToReset: RouteKey[] = [];
 
-    if (themeStore.resetCacheStrategy === 'close') {
-      for (const tab of tabsToRemove) {
-        routeKeysToReset.push(tab.routeKey);
-      }
-    }
-
     const removedTabsIds = tabsToRemove.map(tab => tab.id);
 
     // If no tabs are actually being removed based on excludes and fixed tabs, exit

src/theme/settings.ts

@@ -12,7 +12,6 @@ export const themeSettings: App.Theme.ThemeSetting = {
     error: '#f5222d'
   },
   isInfoFollowPrimary: true,
-  resetCacheStrategy: 'close',
   layout: {
     mode: 'vertical',
     scrollMode: 'content',

src/typings/app.d.ts

@@ -20,8 +20,6 @@ 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 */
@@ -409,7 +407,6 @@ declare namespace App {
         };
         themeDrawerTitle: string;
         pageFunTitle: string;
-        resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
         configOperation: {
           copyConfig: string;
           copySuccessMsg: string;

src/typings/union-key.d.ts

@@ -14,14 +14,6 @@ declare namespace UnionKey {
   /** Theme scheme */
   type ThemeScheme = 'light' | 'dark' | 'auto';
 
-  /**
-   * Reset cache strategy
-   *
-   * - close: re-cache when close page
-   * - refresh: re-cache when refresh page
-   */
-  type ResetCacheStrategy = 'close' | 'refresh';
-
   /**
    * The layout mode
    *