From cf17a45d8dffdbe71f5bfb826f277da80c47e941 Mon Sep 17 00:00:00 2001
From: XiaoHetitu <38452227+XiaoHeitu@users.noreply.github.com>
Date: Fri, 16 May 2025 09:37:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(tabs):=20=E6=94=AF=E6=8C=81=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=E5=B1=9E=E6=80=A7=E4=BD=9C=E4=B8=BA=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=EF=BC=8C=E8=A7=A3=E5=86=B3=20#6170=20?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20(#6163)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(tabs): 支持动态函数作为标签标题

修改 `setTabTitle` 和 `tabsView` 逻辑，允许传入函数作为标签标题，以便动态生成标题内容

* feat(tabbar): 添加动态设置标签页标题功能

允许设置静态字符串或动态函数作为标签标题，支持根据状态或语言变化动态更新标题

* refactor(tabs): 移除冗余的newTabTitle2变量并优化标题设置逻辑

移除tabs组件中冗余的newTabTitle2变量，直接使用newTabTitle作为标题来源。同时，优化use-tabs和tabbar模块的标题设置逻辑，支持ComputedRef作为动态标题，提升代码简洁性和可维护性。

---------

Co-authored-by: yuanwj <ywj6792341@qq.com>
---
 packages/effects/hooks/src/use-tabs.ts | 20 +++++++++++++++++++-
 packages/stores/src/modules/tabbar.ts  | 20 +++++++++++++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/effects/hooks/src/use-tabs.ts b/packages/effects/hooks/src/use-tabs.ts
index 25bc4883..52672112 100644
--- a/packages/effects/hooks/src/use-tabs.ts
+++ b/packages/effects/hooks/src/use-tabs.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef } from 'vue';
 import type { RouteLocationNormalized } from 'vue-router';
 
 import { useRoute, useRouter } from 'vue-router';
@@ -53,7 +54,24 @@ export function useTabs() {
     await tabbarStore.closeTabByKey(key, router);
   }
 
-  async function setTabTitle(title: string) {
+  /**
+   * 设置当前标签页的标题
+   *
+   * @description 支持设置静态标题字符串或动态计算标题
+   * @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
+   *
+   * @param title - 标题内容
+   *   - 静态标题: 直接传入字符串
+   *   - 动态标题: 传入 ComputedRef
+   *
+   * @example
+   * // 静态标题
+   * setTabTitle('标签页')
+   *
+   * // 动态标题(多语言)
+   * setTabTitle(computed(() => t('page.title')))
+   */
+  async function setTabTitle(title: ComputedRef<string> | string) {
     tabbarStore.setUpdateTime();
     await tabbarStore.setTabTitle(route, title);
   }
diff --git a/packages/stores/src/modules/tabbar.ts b/packages/stores/src/modules/tabbar.ts
index 234bb02f..924af83c 100644
--- a/packages/stores/src/modules/tabbar.ts
+++ b/packages/stores/src/modules/tabbar.ts
@@ -1,3 +1,4 @@
+import type { ComputedRef } from 'vue';
 import type { Router, RouteRecordNormalized } from 'vue-router';
 
 import type { TabDefinition } from '@vben-core/typings';
@@ -401,10 +402,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
 
     /**
      * @zh_CN 设置标签页标题
-     * @param tab
-     * @param title
+     *
+     * @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
+     * @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
+     * @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
+     *
+     * @param {TabDefinition} tab - 标签页对象
+     * @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
+     *
+     * @example
+     * // 设置静态标题
+     * setTabTitle(tab, '新标签页');
+     *
+     * @example
+     * // 设置动态标题
+     * setTabTitle(tab, computed(() => t('common.dashboard')));
      */
-    async setTabTitle(tab: TabDefinition, title: string) {
+    async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
       const findTab = this.tabs.find(
         (item) => getTabPath(item) === getTabPath(tab),
       );