mirror of
https://github.com/soybeanjs/soybean-admin.git
synced 2025-11-13 12:13:43 +08:00
feat(projects): optimize tabs cache cleaning strategy. close #820.
This commit is contained in:
@@ -57,13 +57,6 @@ export const themePageAnimationModeRecord: Record<UnionKey.ThemePageAnimateMode,
|
|||||||
|
|
||||||
export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);
|
export const themePageAnimationModeOptions = transformRecordToOption(themePageAnimationModeRecord);
|
||||||
|
|
||||||
export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I18n.I18nKey> = {
|
|
||||||
refresh: 'theme.layout.resetCacheStrategy.refresh',
|
|
||||||
close: 'theme.layout.resetCacheStrategy.close'
|
|
||||||
};
|
|
||||||
|
|
||||||
export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
|
|
||||||
|
|
||||||
export const DARK_CLASS = 'dark';
|
export const DARK_CLASS = 'dark';
|
||||||
|
|
||||||
export const watermarkTimeFormatOptions = [
|
export const watermarkTimeFormatOptions = [
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { resetCacheStrategyOptions, themeTabModeOptions } from '@/constants/app';
|
import { themeTabModeOptions } from '@/constants/app';
|
||||||
import { useThemeStore } from '@/store/modules/theme';
|
import { useThemeStore } from '@/store/modules/theme';
|
||||||
import { translateOptions } from '@/utils/common';
|
import { translateOptions } from '@/utils/common';
|
||||||
import { $t } from '@/locales';
|
import { $t } from '@/locales';
|
||||||
@@ -15,14 +15,6 @@ const themeStore = useThemeStore();
|
|||||||
<template>
|
<template>
|
||||||
<NDivider>{{ $t('theme.layout.tab.title') }}</NDivider>
|
<NDivider>{{ $t('theme.layout.tab.title') }}</NDivider>
|
||||||
<TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
|
<TransitionGroup tag="div" name="setting-list" class="flex-col-stretch gap-12px">
|
||||||
<SettingItem key="0" :label="$t('theme.layout.resetCacheStrategy.title')">
|
|
||||||
<NSelect
|
|
||||||
v-model:value="themeStore.resetCacheStrategy"
|
|
||||||
:options="translateOptions(resetCacheStrategyOptions)"
|
|
||||||
size="small"
|
|
||||||
class="w-120px"
|
|
||||||
/>
|
|
||||||
</SettingItem>
|
|
||||||
<SettingItem key="1" :label="$t('theme.layout.tab.visible')">
|
<SettingItem key="1" :label="$t('theme.layout.tab.visible')">
|
||||||
<NSwitch v-model:value="themeStore.tab.visible" />
|
<NSwitch v-model:value="themeStore.tab.visible" />
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ type ThemePreset = Pick<
|
|||||||
| 'themeColor'
|
| 'themeColor'
|
||||||
| 'otherColor'
|
| 'otherColor'
|
||||||
| 'isInfoFollowPrimary'
|
| 'isInfoFollowPrimary'
|
||||||
| 'resetCacheStrategy'
|
|
||||||
| 'layout'
|
| 'layout'
|
||||||
| 'page'
|
| 'page'
|
||||||
| 'header'
|
| 'header'
|
||||||
|
|||||||
@@ -185,11 +185,6 @@ const local: App.I18n.Schema = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
fixedHeaderAndTab: 'Fixed Header And Tab'
|
fixedHeaderAndTab: 'Fixed Header And Tab'
|
||||||
},
|
|
||||||
resetCacheStrategy: {
|
|
||||||
title: 'Reset Cache Strategy',
|
|
||||||
close: 'Close Page',
|
|
||||||
refresh: 'Refresh Page'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
general: {
|
general: {
|
||||||
|
|||||||
@@ -182,11 +182,6 @@ const local: App.I18n.Schema = {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
fixedHeaderAndTab: '固定头部和标签栏'
|
fixedHeaderAndTab: '固定头部和标签栏'
|
||||||
},
|
|
||||||
resetCacheStrategy: {
|
|
||||||
title: '重置缓存策略',
|
|
||||||
close: '关闭页面',
|
|
||||||
refresh: '刷新页面'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
general: {
|
general: {
|
||||||
|
|||||||
@@ -46,11 +46,8 @@ export const useAppStore = defineStore(SetupStoreId.App, () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setReloadFlag(true);
|
setReloadFlag(true);
|
||||||
|
|
||||||
if (themeStore.resetCacheStrategy === 'refresh') {
|
|
||||||
routeStore.resetRouteCache();
|
routeStore.resetRouteCache();
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
|
const locale = ref<App.I18n.LangType>(localStg.get('lang') || 'zh-CN');
|
||||||
|
|
||||||
|
|||||||
@@ -112,11 +112,9 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
|||||||
await switchRouteByTab(nextTab);
|
await switchRouteByTab(nextTab);
|
||||||
}
|
}
|
||||||
|
|
||||||
// reset route cache if cache strategy is close
|
// reset route cache
|
||||||
if (themeStore.resetCacheStrategy === 'close') {
|
|
||||||
routeStore.resetRouteCache(removedTabRouteKey);
|
routeStore.resetRouteCache(removedTabRouteKey);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
/** remove active tab */
|
/** remove active tab */
|
||||||
async function removeActiveTab() {
|
async function removeActiveTab() {
|
||||||
@@ -147,11 +145,9 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
|
|||||||
const tabsToRemove = tabs.value.filter(tab => !remainTabIds.includes(tab.id));
|
const tabsToRemove = tabs.value.filter(tab => !remainTabIds.includes(tab.id));
|
||||||
const routeKeysToReset: RouteKey[] = [];
|
const routeKeysToReset: RouteKey[] = [];
|
||||||
|
|
||||||
if (themeStore.resetCacheStrategy === 'close') {
|
|
||||||
for (const tab of tabsToRemove) {
|
for (const tab of tabsToRemove) {
|
||||||
routeKeysToReset.push(tab.routeKey);
|
routeKeysToReset.push(tab.routeKey);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const removedTabsIds = tabsToRemove.map(tab => tab.id);
|
const removedTabsIds = tabsToRemove.map(tab => tab.id);
|
||||||
|
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
"error": "#c49a9a"
|
"error": "#c49a9a"
|
||||||
},
|
},
|
||||||
"isInfoFollowPrimary": true,
|
"isInfoFollowPrimary": true,
|
||||||
"resetCacheStrategy": "refresh",
|
|
||||||
"layout": {
|
"layout": {
|
||||||
"mode": "vertical-mix",
|
"mode": "vertical-mix",
|
||||||
"scrollMode": "wrapper"
|
"scrollMode": "wrapper"
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
"error": "#f5222d"
|
"error": "#f5222d"
|
||||||
},
|
},
|
||||||
"isInfoFollowPrimary": true,
|
"isInfoFollowPrimary": true,
|
||||||
"resetCacheStrategy": "close",
|
|
||||||
"layout": {
|
"layout": {
|
||||||
"mode": "vertical",
|
"mode": "vertical",
|
||||||
"scrollMode": "content"
|
"scrollMode": "content"
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
"error": "#f5222d"
|
"error": "#f5222d"
|
||||||
},
|
},
|
||||||
"isInfoFollowPrimary": true,
|
"isInfoFollowPrimary": true,
|
||||||
"resetCacheStrategy": "close",
|
|
||||||
"layout": {
|
"layout": {
|
||||||
"mode": "vertical",
|
"mode": "vertical",
|
||||||
"scrollMode": "content"
|
"scrollMode": "content"
|
||||||
|
|||||||
@@ -15,7 +15,6 @@
|
|||||||
"error": "#f5222d"
|
"error": "#f5222d"
|
||||||
},
|
},
|
||||||
"isInfoFollowPrimary": true,
|
"isInfoFollowPrimary": true,
|
||||||
"resetCacheStrategy": "close",
|
|
||||||
"layout": {
|
"layout": {
|
||||||
"mode": "vertical",
|
"mode": "vertical",
|
||||||
"scrollMode": "content"
|
"scrollMode": "content"
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ export const themeSettings: App.Theme.ThemeSetting = {
|
|||||||
error: '#f5222d'
|
error: '#f5222d'
|
||||||
},
|
},
|
||||||
isInfoFollowPrimary: true,
|
isInfoFollowPrimary: true,
|
||||||
resetCacheStrategy: 'refresh',
|
|
||||||
layout: {
|
layout: {
|
||||||
mode: 'vertical',
|
mode: 'vertical',
|
||||||
scrollMode: 'content'
|
scrollMode: 'content'
|
||||||
|
|||||||
3
src/typings/app.d.ts
vendored
3
src/typings/app.d.ts
vendored
@@ -20,8 +20,6 @@ declare namespace App {
|
|||||||
otherColor: OtherColor;
|
otherColor: OtherColor;
|
||||||
/** Whether info color is followed by the primary color */
|
/** Whether info color is followed by the primary color */
|
||||||
isInfoFollowPrimary: boolean;
|
isInfoFollowPrimary: boolean;
|
||||||
/** Reset cache strategy */
|
|
||||||
resetCacheStrategy: UnionKey.ResetCacheStrategy;
|
|
||||||
/** Layout */
|
/** Layout */
|
||||||
layout: {
|
layout: {
|
||||||
/** Layout mode */
|
/** Layout mode */
|
||||||
@@ -436,7 +434,6 @@ declare namespace App {
|
|||||||
};
|
};
|
||||||
fixedHeaderAndTab: string;
|
fixedHeaderAndTab: string;
|
||||||
};
|
};
|
||||||
resetCacheStrategy: { title: string } & Record<UnionKey.ResetCacheStrategy, string>;
|
|
||||||
};
|
};
|
||||||
general: {
|
general: {
|
||||||
title: string;
|
title: string;
|
||||||
|
|||||||
8
src/typings/union-key.d.ts
vendored
8
src/typings/union-key.d.ts
vendored
@@ -14,14 +14,6 @@ declare namespace UnionKey {
|
|||||||
/** Theme scheme */
|
/** Theme scheme */
|
||||||
type ThemeScheme = 'light' | 'dark' | 'auto';
|
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
|
* The layout mode
|
||||||
*
|
*
|
||||||
|
|||||||
Reference in New Issue
Block a user