update views cache

src/App.vue

@@ -1,9 +1,11 @@
 <template>
 	<el-config-provider :locale="elocale">
 		<router-view v-slot="{ Component }">
-			<keep-alive :include="['FlatMap', 'ReliefMap']">
-				<component :is="Component" />
-			</keep-alive>
+			<transition name="fade-transform" mode="out-in">
+				<keep-alive :include="cachedViews">
+					<component :is="Component" />
+				</keep-alive>
+			</transition>
 		</router-view>
 	</el-config-provider>
 </template>
@@ -16,6 +18,7 @@ import en from 'element-plus/dist/locale/en.mjs'
 
 const App = useAppStore();
 const locale = computed(() => App.getLocale);
+const cachedViews = computed(() => App.getCachedViews);
 const elocale = computed(() => (locale.value === 'zh' ? zh : en))
 App.setLocale(locale.value)
 </script>

src/main.ts

@@ -1,10 +1,10 @@
+import App from './App.vue';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import ElementPlus from 'element-plus';
-import App from './App.vue';
 import router from './router/index';
 import { i18n } from '@/i18n/index';
-
+import useAppStore from '@/store/app';
+import ElementPlus from 'element-plus';
 import { getStorage, setStorage, setAssetsBaseUrl } from './utils/index';
 
 import '@/assets/style/reset.less'; // css reset
@@ -28,4 +28,5 @@ app.mount('#app');
 
 window.onload = function () {
 	setAssetsBaseUrl();
+	useAppStore().setCachedViews();
 };

src/router/index.ts

@@ -18,7 +18,7 @@ const { tm } = i18n.global;
 export const routes: Array<RouteRecordRaw> = [
 	{
 		path: '/login',
-		name: 'login',
+		name: 'Login',
 		meta: {
 			title: 'system.menu.login',
 			cache: true,

src/store/app.ts

@@ -1,16 +1,35 @@
+import { routes } from '@/router';
 import { defineStore } from 'pinia';
 import { setI18nLanguage } from '@/i18n';
 import { WritableComputedRef } from 'vue';
 import { getStorage, setStorage } from '@/utils';
+import { RouteRecordRaw, RouteRecordName } from 'vue-router';
+
+function flapComponent(routes: Array<RouteRecordRaw>, result: Array<RouteRecordRaw> = []) {
+	for (let i = 0; i < routes.length; i++) {
+		const component = routes[i];
+		if (component.children) {
+			for (let k = 0; k < component.children.length; k++) {
+				const el = component.children[k];
+				el.path = component.path + '/' + el.path;
+			}
+			flapComponent(component.children, result);
+		}
+		result.push(component);
+	}
+	return result;
+}
 
 const locale = getStorage('locale');
 const isMenuCollapse = getStorage('isMenuCollapse');
+const cachedViews = getStorage('cachedViews') as Array<RouteRecordName>;
 
 const useAppStore = defineStore({
 	id: 'app',
 	state: () => ({
 		isMenuCollapse: typeof isMenuCollapse == 'boolean' ? isMenuCollapse : false,
 		locale: (locale ? locale : window.navigator.language) as string | WritableComputedRef<string>,
+		cachedViews: cachedViews instanceof Array ? cachedViews : [],
 	}),
 	getters: {
 		getMenuCollapse: state => {
@@ -19,6 +38,9 @@ const useAppStore = defineStore({
 		getLocale: state => {
 			return state.locale;
 		},
+		getCachedViews(state) {
+			return state.cachedViews;
+		},
 	},
 	actions: {
 		switchMenuCollapse: function (state: boolean) {
@@ -30,6 +52,16 @@ const useAppStore = defineStore({
 			setI18nLanguage(locale);
 			setStorage('locale', locale);
 		},
+		setCachedViews() {
+			const cachedViews: Array<RouteRecordName> = [];
+			flapComponent(routes).map(el => {
+				if (el?.meta?.cache) {
+					cachedViews.push(el.name as RouteRecordName);
+				}
+			});
+			setStorage('cachedViews', cachedViews);
+			this.cachedViews = cachedViews;
+		},
 	},
 });
 

src/utils/index.ts

@@ -1,29 +1,29 @@
 export function setAssetsBaseUrl() {
-	const cesiumAssetsPath = "/cesium";
+	const cesiumAssetsPath = '/cesium';
 
-	if (import.meta.env.MODE == "development") {
+	if (import.meta.env.MODE == 'development') {
 		// Cesium 静态资源路径
 		(window as Window & any).CESIUM_BASE_URL = cesiumAssetsPath;
 		// three 静态资源路径
-		(window as Window & any).threeAssetsPath = "/src/components/Three/";
+		(window as Window & any).threeAssetsPath = '/src/components/Three/';
 	} else {
 		(window as Window & any).CESIUM_BASE_URL = import.meta.env.VITE_PUBLIC_PATH + cesiumAssetsPath;
 
-		(window as Window & any).threeAssetsPath = import.meta.env.VITE_PUBLIC_PATH + "/three/";
+		(window as Window & any).threeAssetsPath = import.meta.env.VITE_PUBLIC_PATH + '/three/';
 	}
 }
 
-export function getStorage(key: string): string {
+export function getStorage(key: string): string | Array<any> | object | any {
 	const str: string = window.localStorage[key] ?? undefined;
 	try {
 		if (str) {
 			const storageString = window.localStorage.getItem(key) as string;
 			return JSON.parse(storageString)[key];
 		} else {
-			return "";
+			return '';
 		}
 	} catch (error: any) {
-		return "";
+		return '';
 	}
 }