From e3c3729eb6b8dd01ee4a5e38a15a250853b26d4e Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 21 Aug 2024 17:56:42 +0800
Subject: [PATCH] perf: remove tab in query

---
 src/layout/components/AppMain.vue          |  6 ++--
 src/layout/components/TabPage/index.vue    | 32 ++++++++--------------
 src/views/assets/Asset/AssetList/index.vue | 17 ++++++------
 3 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 048b88641..2d8e95cf8 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -33,11 +33,13 @@ export default {
         query[k] = v
       }
 
+      let key
       if (this.$route.name.toLowerCase().includes('list')) {
-        return _.trimEnd(this.$route.path, '/') + '?' + new URLSearchParams(query).toString()
+        key = _.trimEnd(this.$route.path, '/') + '?' + new URLSearchParams(query).toString()
       } else {
-        return new Date().getTime()
+        key = new Date().getTime()
       }
+      return key
     },
     chatAiEnabled() {
       return this.publicSettings?.CHAT_AI_ENABLED
diff --git a/src/layout/components/TabPage/index.vue b/src/layout/components/TabPage/index.vue
index 9416c9632..f142bf32f 100644
--- a/src/layout/components/TabPage/index.vue
+++ b/src/layout/components/TabPage/index.vue
@@ -46,7 +46,7 @@
         <el-alert v-if="helpMessage" type="success">
           <span v-sanitize="helpMessage" class="announcement-main" />
         </el-alert>
-        <transition v-if="!loading" appear mode="out-in" name="fade-transform">
+        <transition appear mode="out-in" name="fade-transform">
           <slot>
             <keep-alive>
               <component :is="computeActiveComponent" />
@@ -83,16 +83,18 @@ export default {
   },
   data() {
     return {
-      loading: true,
-      toSentenceCase: toSentenceCase
+      loading: false,
+      toSentenceCase: toSentenceCase,
+      activeTab: this.activeMenu
     }
   },
   computed: {
     iActiveMenu: {
       get() {
-        return this.activeMenu
+        return this.activeTab
       },
       set(item) {
+        this.activeTab = item
         this.$emit('update:activeMenu', item)
       }
     },
@@ -119,16 +121,13 @@ export default {
   },
   watch: {
     $route(to, from) {
-      const activeTab = to.query?.tab
-      if (activeTab && this.iActiveMenu !== activeTab) {
-        this.iActiveMenu = activeTab
-      }
+      // 好像没必要
+      // const activeTab = to.query?.tab
+      // if (activeTab && this.iActiveMenu !== activeTab) {
+      //   this.iActiveMenu = activeTab
+      // }
     }
   },
-  activated() {
-    this.iActiveMenu = this.getPropActiveTab()
-    this.loading = false
-  },
   created() {
     this.iActiveMenu = this.getPropActiveTab()
     this.loading = false
@@ -136,15 +135,8 @@ export default {
   methods: {
     handleTabClick(tab) {
       this.$emit('tab-click', tab)
-      this.$emit('update:activeMenu', tab.name)
-
+      this.iActiveMenu = tab.name
       this.$cookie.set(this.$route.path, tab.name, 1)
-
-      if (this.$router.currentRoute.query[this.$route.path]) {
-        this.$router.push({
-          query: { ...this.$route.query, [this.$route.path]: '' }
-        })
-      }
     },
     getPropActiveTab() {
       let activeTab = ''
diff --git a/src/views/assets/Asset/AssetList/index.vue b/src/views/assets/Asset/AssetList/index.vue
index 45c217c47..c8ccada5d 100644
--- a/src/views/assets/Asset/AssetList/index.vue
+++ b/src/views/assets/Asset/AssetList/index.vue
@@ -89,14 +89,15 @@ export default {
   },
   methods: {
     handleTabClick(tab) {
-      const query = _.cloneDeep(this.$route.query)
-      const newQuery = {
-        ...query,
-        tab: tab.name
-      }
-      this.$nextTick(() => {
-        this.$router.replace({ query: newQuery })
-      })
+      // 这样不行，会闪
+      // const query = _.cloneDeep(this.$route.query)
+      // const newQuery = {
+      //   ...query,
+      //   tab: tab.name
+      // }
+      // this.$nextTick(() => {
+      //   this.$router.replace({ query: newQuery })
+      // })
     }
   }
 }