/** * 动态设置网页标题的 Hook */ import { useEffect } from 'react'; export interface UseDocumentTitleOptions { /** 基础标题(默认:价值前沿) */ baseTitle?: string; /** 是否在组件卸载时恢复基础标题 */ restoreOnUnmount?: boolean; } /** * 动态设置网页标题 * * @param title - 要显示的标题(会与 baseTitle 组合) * @param options - 配置选项 * * @example * ```tsx * // 基础用法 * useDocumentTitle('我的页面'); * // 结果: "我的页面 - 价值前沿" * * // 股票页面 * useDocumentTitle(stockName ? `${stockName}(${stockCode})` : stockCode); * // 结果: "平安银行(000001) - 价值前沿" * * // 自定义基础标题 * useDocumentTitle('Dashboard', { baseTitle: 'My App' }); * // 结果: "Dashboard - My App" * ``` */ export const useDocumentTitle = ( title?: string | null, options: UseDocumentTitleOptions = {} ): void => { const { baseTitle = '价值前沿', restoreOnUnmount = true } = options; useEffect(() => { if (title) { document.title = `${title} - ${baseTitle}`; } else { document.title = baseTitle; } // 组件卸载时恢复默认标题 if (restoreOnUnmount) { return () => { document.title = baseTitle; }; } }, [title, baseTitle, restoreOnUnmount]); }; /** * 股票页面专用的标题 Hook * * @param stockCode - 股票代码 * @param stockName - 股票名称(可选) * * @example * ```tsx * useStockDocumentTitle('000001', '平安银行'); * // 结果: "平安银行(000001) - 价值前沿" * ``` */ export const useStockDocumentTitle = ( stockCode: string, stockName?: string | null ): void => { const title = stockName ? `${stockName}(${stockCode})` : stockCode || null; useDocumentTitle(title); }; export default useDocumentTitle;