feat(projects): routes cache

soybeanjs · Nov 9, 2023 · 073e615 · 073e615
1 parent d927989
commit 073e615
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 31 deletions.
diff --git a/src/layouts/modules/global-content/index.vue b/src/layouts/modules/global-content/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAppStore } from '@/store/modules/app';
+import { useRouteStore } from '@/store/modules/route';
 
 defineOptions({
   name: 'GlobalContent'
@@ -17,6 +18,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 const app = useAppStore();
+const routeStore = useRouteStore();
 </script>
 
 <template>
@@ -26,13 +28,15 @@ const app = useAppStore();
       leave-active-class="animate-fade-out animate-duration-750"
       mode="out-in"
     >
-      <component
-        :is="Component"
-        v-if="app.reloadFlag"
-        :key="route.path"
-        :class="{ 'p-16px': showPadding }"
-        class="flex-grow bg-layout transition-300"
-      />
+      <KeepAlive :include="routeStore.cacheRoutes">
+        <component
+          :is="Component"
+          v-if="app.reloadFlag"
+          :key="route.path"
+          :class="{ 'p-16px': showPadding }"
+          class="flex-grow bg-layout transition-300"
+        />
+      </KeepAlive>
     </Transition>
   </RouterView>
 </template>

diff --git a/src/layouts/modules/global-tab/index.vue b/src/layouts/modules/global-tab/index.vue
@@ -4,19 +4,21 @@ import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
 import { PageTab } from '@sa/materials';
 import BetterScroll from '@/components/custom/better-scroll.vue';
-import { useTabStore } from '@/store/modules/tab';
+import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useTabStore } from '@/store/modules/tab';
 import ContextMenu from './context-menu.vue';
-import { useAppStore } from '@/store/modules/app';
 
 defineOptions({
   name: 'GlobalTab'
 });
 
-const app = useAppStore();
 const route = useRoute();
+const app = useAppStore();
 const theme = useThemeStore();
-const tab = useTabStore();
+const routeStore = useRouteStore();
+const tabStore = useTabStore();
 
 const bsWrapper = ref<HTMLElement>();
 const { width: bsWrapperWidth, left: bsWrapperLeft } = useElementBounding(bsWrapper);
@@ -42,7 +44,7 @@ async function scrollToActiveTab() {
 
     const { value: tabId } = (child.attributes as TabNamedNodeMap)[TAB_DATA_ID];
 
-    if (tabId === tab.activeTabId) {
+    if (tabId === tabStore.activeTabId) {
       const { left, width } = child.getBoundingClientRect();
       const clientX = left + width / 2;
 
@@ -72,30 +74,35 @@ function scrollByClientX(clientX: number) {
 function getContextMenuDisabledKeys(tabId: string) {
   const disabledKeys: App.Global.DropdownKey[] = [];
 
-  if (tab.isTabRetain(tabId)) {
+  if (tabStore.isTabRetain(tabId)) {
     disabledKeys.push('closeCurrent');
   }
 
   return disabledKeys;
 }
 
+async function handleCloseTab(tab: App.Global.Tab) {
+  await tabStore.removeTab(tab.id);
+  await routeStore.reCacheRoutesByKey(tab.routeKey);
+}
+
 async function refresh() {
   app.reloadPage(500);
 }
 
 function init() {
-  tab.initTabStore(route);
+  tabStore.initTabStore(route);
 }
 
 // watch
 watch(
   () => route.fullPath,
   () => {
-    tab.addTab(route);
+    tabStore.addTab(route);
   }
 );
 watch(
-  () => tab.activeTabId,
+  () => tabStore.activeTabId,
   () => {
     scrollToActiveTab();
   }
@@ -111,28 +118,28 @@ init();
       <BetterScroll ref="bsScroll" :options="{ scrollX: true, scrollY: false, click: app.isMobile }">
         <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
           <ContextMenu
-            v-for="item in tab.tabs"
-            :key="item.id"
-            :tab-id="item.id"
-            :disabled-keys="getContextMenuDisabledKeys(item.id)"
+            v-for="tab in tabStore.tabs"
+            :key="tab.id"
+            :tab-id="tab.id"
+            :disabled-keys="getContextMenuDisabledKeys(tab.id)"
           >
             <PageTab
-              :[TAB_DATA_ID]="item.id"
+              :[TAB_DATA_ID]="tab.id"
               :dark-mode="theme.darkMode"
-              :active="item.id === tab.activeTabId"
+              :active="tab.id === tabStore.activeTabId"
               :active-color="theme.themeColor"
-              :closable="!tab.isTabRetain(item.id)"
-              @click="tab.switchRouteByTab(item)"
-              @close="tab.removeTab(item.id)"
+              :closable="!tabStore.isTabRetain(tab.id)"
+              @click="tabStore.switchRouteByTab(tab)"
+              @close="handleCloseTab(tab)"
             >
               <template #prefix>
                 <SvgIcon
-                  :icon="item.icon"
-                  :local-icon="item.localIcon"
+                  :icon="tab.icon"
+                  :local-icon="tab.localIcon"
                   class="inline-block align-text-bottom text-16px"
                 />
               </template>
-              {{ item.label }}
+              {{ tab.label }}
             </PageTab>
           </ContextMenu>
         </div>

diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
@@ -91,7 +91,8 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.manage_route',
           icon: 'material-symbols:route',
           order: 3,
-          roles: ['R_ADMIN']
+          roles: ['R_ADMIN'],
+          keepAlive: true
         }
       },
       {

diff --git a/src/router/routes/index.ts b/src/router/routes/index.ts
@@ -26,7 +26,7 @@ const customRoutes: CustomRoute[] = [
   }
 ];
 
-function createRoutes() {
+export function createRoutes() {
   const constantRoutes: ElegantRoute[] = [];
 
   const authRoutes: ElegantRoute[] = [];

diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts
@@ -80,6 +80,50 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     cacheRoutes.value = getCacheRouteNames([...constantVueRoutes, ...routes]);
   }
 
+  /**
+   * add cache routes
+   * @param routeKey
+   */
+  function addCacheRoutes(routeKey: RouteKey) {
+    if (cacheRoutes.value.includes(routeKey)) return;
+
+    cacheRoutes.value.push(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);
+  }
+
+  /**
+   * re-cache routes by route key
+   * @param routeKey
+   */
+  async function reCacheRoutesByKey(routeKey: RouteKey) {
+    removeCacheRoutes(routeKey);
+
+    await app.reloadPage();
+
+    addCacheRoutes(routeKey);
+  }
+
+  /**
+   * re-cache routes by route keys
+   * @param routeKeys
+   */
+  async function reCacheRoutesByKeys(routeKeys: RouteKey[]) {
+    for await (const key of routeKeys) {
+      await reCacheRoutesByKey(key);
+    }
+  }
+
   /**
    * global breadcrumbs
    */
@@ -228,6 +272,8 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     routeHome,
     menus,
     cacheRoutes,
+    reCacheRoutesByKey,
+    reCacheRoutesByKeys,
     breadcrumbs,
     initAuthRoute,
     isInitAuthRoute,

diff --git a/src/views/manage/route/index.vue b/src/views/manage/route/index.vue
@@ -1,4 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onActivated } from 'vue';
+
+console.log('setup');
+
+onActivated(() => {
+  console.log('onActivated');
+});
+</script>
 
 <template>
   <LookForward />