From 175abd0aa3388e8473f6ecbf63e28133fce55bd3 Mon Sep 17 00:00:00 2001
From: kailong321200875 <321200875@qq.com>
Date: Sun, 13 Aug 2023 14:25:49 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=AE=8C=E5=96=84useTagsView?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/web/useTagsView.ts            | 7 ++++++-
 src/router/index.ts                     | 3 ++-
 src/store/modules/tagsView.ts           | 8 ++++++++
 src/views/Function/MultipleTabsDemo.vue | 5 +++++
 src/views/hooks/useTagsView.vue         | 9 +++++++--
 5 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/hooks/web/useTagsView.ts b/src/hooks/web/useTagsView.ts
index d236a1e2c..6d78d6cc6 100644
--- a/src/hooks/web/useTagsView.ts
+++ b/src/hooks/web/useTagsView.ts
@@ -47,12 +47,17 @@ export const useTagsView = () => {
     callback?.()
   }
 
+  const setTitle = (title: string) => {
+    tagsViewStore.setTitle(title)
+  }
+
   return {
     closeAll,
     closeLeft,
     closeRight,
     closeOther,
     closeCurrent,
-    refreshPage
+    refreshPage,
+    setTitle
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index cccf263da..a20413af9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -339,7 +339,8 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           hidden: true,
           title: t('router.details'),
-          canTo: true
+          canTo: true,
+          activeMenu: '/function/multiple-tabs'
         }
       }
     ]
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 483687b36..df511e155 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -140,6 +140,14 @@ export const useTagsViewStore = defineStore('tagsView', {
     // 设置当前选中的tag
     setSelectedTag(tag: RouteLocationNormalizedLoaded) {
       this.selectedTag = tag
+    },
+    setTitle(title: string) {
+      for (const v of this.visitedViews) {
+        if (v.path === this.selectedTag?.path) {
+          v.meta.title = title
+          break
+        }
+      }
     }
   }
 })
diff --git a/src/views/Function/MultipleTabsDemo.vue b/src/views/Function/MultipleTabsDemo.vue
index e8089bd41..9421a9aa5 100644
--- a/src/views/Function/MultipleTabsDemo.vue
+++ b/src/views/Function/MultipleTabsDemo.vue
@@ -3,10 +3,15 @@ import { ContentWrap } from '@/components/ContentWrap'
 import { ElInput } from 'element-plus'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useTagsView } from '@/hooks/web/useTagsView'
+
+const { setTitle } = useTagsView()
 
 const { params } = useRoute()
 
 const val = ref(params.id as string)
+
+setTitle(`详情页-${val.value}`)
 </script>
 
 <template>
diff --git a/src/views/hooks/useTagsView.vue b/src/views/hooks/useTagsView.vue
index c267d9ccc..7f827ecf8 100644
--- a/src/views/hooks/useTagsView.vue
+++ b/src/views/hooks/useTagsView.vue
@@ -6,7 +6,8 @@ import { useRouter } from 'vue-router'
 
 const { push } = useRouter()
 
-const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
+const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage, setTitle } =
+  useTagsView()
 
 const closeAllTabs = () => {
   closeAll(() => {
@@ -35,6 +36,10 @@ const closeCurrentTab = () => {
     push('/dashboard/analysis')
   })
 }
+
+const setTabTitle = () => {
+  setTitle(new Date().getTime().toString())
+}
 </script>
 
 <template>
@@ -45,6 +50,6 @@ const closeCurrentTab = () => {
     <ElButton @click="closeOtherTabs"> 关闭其他标签页 </ElButton>
     <ElButton @click="closeCurrentTab"> 关闭当前标签页 </ElButton>
     <ElButton @click="refresh"> 刷新当前标签页 </ElButton>
+    <ElButton @click="setTabTitle"> 修改当前标题 </ElButton>
   </ContentWrap>
 </template>
-@/hooks/web/useTagsView