From 487213b64853765e2bd186474e4607572624a33e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=87=95=E5=8D=9A=E6=96=87?= <349952469@qq.com>
Date: Tue, 14 Jun 2022 15:42:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(projects):=20=E5=A2=9E=E5=8A=A0=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=BD=93=E5=89=8DTab=E9=A1=B5=E7=AD=BE=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/tab/index.ts   | 12 ++++++++++++
 src/views/function/tab/index.vue | 16 ++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
index f590f3de..2c9b8bbc 100644
--- a/src/store/modules/tab/index.ts
+++ b/src/store/modules/tab/index.ts
@@ -1,3 +1,5 @@
+import { unref } from 'vue';
+import type { Ref } from 'vue';
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
@@ -50,6 +52,16 @@ export const useTabStore = defineStore('tab-store', {
     setActiveTab(fullPath: string) {
       this.activeTab = fullPath;
     },
+    /**
+     * 设置当前路由对应的页签title
+     * @param title - tab名称
+     */
+    setActiveTabTitle(title: string | Ref<string>) {
+      const item = this.tabs.find(tab => tab.fullPath === this.activeTab);
+      if (item) {
+        Object.assign(item, { meta: { title: unref(title) } });
+      }
+    },
     /**
      * 初始化首页页签路由
      * @param routeHomeName - 路由首页的name
diff --git a/src/views/function/tab/index.vue b/src/views/function/tab/index.vue
index cafdeb65..6bd81a15 100644
--- a/src/views/function/tab/index.vue
+++ b/src/views/function/tab/index.vue
@@ -5,16 +5,24 @@
         <n-button @click="handleToTabDetail">跳转Tab Detail</n-button>
         <n-button @click="handleToTabMultiDetail(1)">跳转Tab Multi Detail 1</n-button>
         <n-button @click="handleToTabMultiDetail(2)">跳转Tab Multi Detail 2</n-button>
+        <n-input-group>
+          <n-input v-model:value="title" />
+          <n-button type="primary" @click="handleSetTitle">设置当前Tab页标题</n-button>
+        </n-input-group>
       </n-space>
     </n-card>
   </n-space>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { routeName } from '@/router';
+import { useTabStore } from '@/store';
 import { useRouterPush } from '@/composables';
 
 const { routerPush } = useRouterPush();
+const tabStore = useTabStore();
+const title = ref('');
 
 function handleToTabDetail() {
   routerPush({ name: routeName('function_tab-detail'), query: { name: 'abc' }, hash: '#DEMO_HASH' });
@@ -23,6 +31,14 @@ function handleToTabDetail() {
 function handleToTabMultiDetail(num: number) {
   routerPush({ name: routeName('function_tab-multi-detail'), query: { name: 'abc', num }, hash: '#DEMO_HASH' });
 }
+
+function handleSetTitle() {
+  if (!title.value) {
+    window.$message?.warning('请输入要设置的标题名称');
+  } else {
+    tabStore.setActiveTabTitle(title.value);
+  }
+}
 </script>
 
 <style scoped></style>