refactor(sj_1.2.0-beta2): 重构搜索条件记录功能

src/components/common/search-form.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useNaiveForm } from '@/hooks/common/form';
+import { useSearchStore } from '@/store/modules/search';
 
 defineOptions({
   name: 'SearchForm'
@@ -22,7 +24,9 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+const route = useRoute();
 const appStore = useAppStore();
+const searchStore = useSearchStore();
 
 const title = ref(appStore.isMobile ? $t('common.search') : undefined);
 
@@ -31,12 +35,14 @@ const { formRef, validate, restoreValidation } = useNaiveForm();
 async function reset() {
   await restoreValidation();
   Object.assign(props.model, { ...props.model, page: 1 });
+  searchStore.remove(String(route.path));
   emit('reset');
 }
 
 async function search() {
   await validate();
   Object.assign(props.model, { ...props.model, page: 1 });
+  searchStore.set(String(route.path), props.model);
   emit('search');
 }
 
@@ -44,6 +50,12 @@ const btnSpan = computed(() => {
   const keyNum = Object.keys(props.model).length - 2;
   return props.btnSpan || (keyNum % 4 !== 0 ? `24 m:12 m:${(4 - (keyNum % 4)) * 6}` : '24');
 });
+
+onMounted(() => {
+  const searchParams = searchStore.get(String(route.path));
+  if (!searchParams) return;
+  Object.assign(props.model, searchParams);
+});
 </script>
 
 <template>

src/enum/index.ts

@@ -3,5 +3,7 @@ export enum SetupStoreId {
   Theme = 'theme-store',
   Auth = 'auth-store',
   Route = 'route-store',
-  Tab = 'tab-store'
+  Tab = 'tab-store',
+  Workflow = 'workflow-store',
+  Search = 'search-store'
 }

src/router/elegant/routes.ts

@@ -59,7 +59,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.group',
       order: 30,
       icon: 'material-symbols:group-work-outline',
-      keepAlive: true
+      keepAlive: false
     }
   },
   {
@@ -71,7 +71,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.home',
       icon: 'material-symbols:dashboard-outline-rounded',
       order: 1,
-      keepAlive: true
+      keepAlive: false
     }
   },
   {
@@ -96,7 +96,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.job',
       order: 50,
       icon: 'eos-icons:cronjob',
-      keepAlive: true
+      keepAlive: false
     },
     children: [
       {
@@ -108,7 +108,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.job_batch',
           icon: 'carbon:batch-job',
           order: 20,
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -120,7 +120,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.job_task',
           icon: 'octicon:tasklist',
           order: 10,
-          keepAlive: true
+          keepAlive: false
         }
       }
     ]
@@ -158,7 +158,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       icon: 'eos-icons:namespace',
       order: 20,
       roles: ['R_ADMIN'],
-      keepAlive: true
+      keepAlive: false
     }
   },
   {
@@ -170,7 +170,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.notify',
       order: 100,
       icon: 'material-symbols:notifications-active-outline-rounded',
-      keepAlive: true
+      keepAlive: false
     },
     children: [
       {
@@ -181,7 +181,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           title: 'notify_config',
           i18nKey: 'route.notify_config',
           icon: 'cbi:scene-dynamic',
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -192,7 +192,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           title: 'notify_recipient',
           i18nKey: 'route.notify_recipient',
           icon: 'fluent:people-call-20-filled',
-          keepAlive: true
+          keepAlive: false
         }
       }
     ]
@@ -206,7 +206,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.pods',
       icon: 'ant-design:database-outlined',
       order: 10,
-      keepAlive: true
+      keepAlive: false
     }
   },
   {
@@ -218,7 +218,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.retry',
       order: 70,
       icon: 'carbon:retry-failed',
-      keepAlive: true
+      keepAlive: false
     },
     children: [
       {
@@ -230,7 +230,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.retry_dead-letter',
           icon: 'streamline:interface-arrows-synchronize-warning-arrow-fail-notification-sync-warning-failure-synchronize-error',
           order: 30,
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -242,7 +242,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.retry_log',
           icon: 'tabler:logs',
           order: 20,
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -254,7 +254,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.retry_scene',
           icon: 'cbi:scene-dynamic',
           order: 1,
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -266,7 +266,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.retry_task',
           icon: 'octicon:tasklist',
           order: 10,
-          keepAlive: true
+          keepAlive: false
         }
       }
     ]
@@ -281,7 +281,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       order: 900,
       icon: 'material-symbols:manage-accounts',
       roles: ['R_ADMIN'],
-      keepAlive: true
+      keepAlive: false
     },
     children: [
       {
@@ -294,7 +294,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           icon: 'streamline:interface-user-multiple-close-geometric-human-multiple-person-up-user',
           order: 900,
           roles: ['R_ADMIN'],
-          keepAlive: true
+          keepAlive: false
         }
       }
     ]
@@ -308,7 +308,7 @@ export const generatedRoutes: GeneratedRoute[] = [
       i18nKey: 'route.workflow',
       order: 60,
       icon: 'lucide:workflow',
-      keepAlive: true
+      keepAlive: false
     },
     children: [
       {
@@ -320,7 +320,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.workflow_batch',
           icon: 'carbon:batch-job',
           order: 10,
-          keepAlive: true
+          keepAlive: false
         }
       },
       {
@@ -393,7 +393,7 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.workflow_task',
           icon: 'octicon:tasklist',
           order: 1,
-          keepAlive: true
+          keepAlive: false
         }
       }
     ]

src/store/modules/auth/index.ts

@@ -10,12 +10,14 @@ import { $t } from '@/locales';
 import { roleTypeRecord } from '@/constants/business';
 import { useRouteStore } from '../route';
 import { useTabStore } from '../tab';
+import { useSearchStore } from '../search';
 import { clearAuthStorage, getToken } from './shared';
 
 export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
   const route = useRoute();
   const routeStore = useRouteStore();
   const tabStore = useTabStore();
+  const searchStore = useSearchStore();
   const { toLogin, redirectFromLogin } = useRouterPush(false);
   const { loading: loginLoading, startLoading, endLoading } = useLoading();
 
@@ -54,6 +56,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
     clearAuthStorage();
 
     authStore.$reset();
+    searchStore.$reset();
 
     if (!route.meta.constant) {
       await toLogin();

src/store/modules/search/index.ts

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { SetupStoreId } from '@/enum';
+
+export type SearchParamsMap = { [key: string]: Record<string, any> | null };
+
+export const useSearchStore = defineStore(SetupStoreId.Search, () => {
+  const searchParamsMap = ref<SearchParamsMap>({});
+
+  function get(key: string) {
+    return searchParamsMap.value[key];
+  }
+
+  function set(key: string, params: Record<string, any>) {
+    searchParamsMap.value[key] = params;
+  }
+
+  function remove(key: string) {
+    searchParamsMap.value[key] = null;
+  }
+
+  function clear() {
+    searchParamsMap.value = {};
+  }
+
+  return {
+    get,
+    set,
+    remove,
+    clear
+  };
+});

src/store/modules/tab/index.ts

@@ -8,6 +8,7 @@ import { useRouterPush } from '@/hooks/common/router';
 import { localStg } from '@/utils/storage';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '../theme';
+import { useSearchStore } from '../search';
 import {
   extractTabsByAllRoutes,
   filterTabsById,
@@ -26,6 +27,7 @@ import {
 export const useTabStore = defineStore(SetupStoreId.Tab, () => {
   const routeStore = useRouteStore();
   const themeStore = useThemeStore();
+  const searchStore = useSearchStore();
   const { routerPush } = useRouterPush(false);
 
   /** Tabs */
@@ -98,6 +100,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
   async function removeTab(tabId: string) {
     const isRemoveActiveTab = activeTabId.value === tabId;
     const updatedTabs = filterTabsById(tabId, tabs.value);
+    searchStore.remove(tabId);
 
     function update() {
       tabs.value = updatedTabs;
@@ -145,6 +148,8 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
     const isRemoveActiveTab = removedTabsIds.includes(activeTabId.value);
     const updatedTabs = filterTabsByIds(removedTabsIds, tabs.value);
 
+    searchStore.clear();
+
     function update() {
       tabs.value = updatedTabs;
     }

src/store/modules/workflow/index.ts

@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { fetchGetJobList } from '@/service/api';
+import { SetupStoreId } from '@/enum';
 
-export const useWorkflowStore = defineStore('workflow', () => {
+export const useWorkflowStore = defineStore(SetupStoreId.Workflow, () => {
   const id = ref<string>();
   const type = ref<number>();
   const groupName = ref<string>();