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) { 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} title - 标题内容,支持静态字符串或计算属性 + * + * @example + * // 设置静态标题 + * setTabTitle(tab, '新标签页'); + * + * @example + * // 设置动态标题 + * setTabTitle(tab, computed(() => t('common.dashboard'))); */ - async setTabTitle(tab: TabDefinition, title: string) { + async setTabTitle(tab: TabDefinition, title: ComputedRef | string) { const findTab = this.tabs.find( (item) => getTabPath(item) === getTabPath(tab), );