From 0ad0287f7b4a8dffb382a5baf10c443579f642c1 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 19 Dec 2025 16:16:12 +0800 Subject: [PATCH] =?UTF-8?q?fix(FinancialPanorama):=20=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=9C=9F=E6=95=B0=E5=88=87=E6=8D=A2=E5=92=8C=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Tab 切换时检查期数是否一致，不一致则重新加载 - 股票切换时立即清空旧数据，确保显示骨架屏 - 表格右上角显示当前期数 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/UnifiedFinancialTable.tsx | 6 ++ .../hooks/useFinancialData.ts | 55 +++++++++++++++++-- .../components/FinancialPanorama/index.tsx | 8 +-- 3 files changed, 60 insertions(+), 9 deletions(-) diff --git a/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx b/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx index f039900d..61869c73 100644 --- a/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx +++ b/src/views/Company/components/FinancialPanorama/components/UnifiedFinancialTable.tsx @@ -345,6 +345,12 @@ const UnifiedFinancialTableInner: React.FC = ({ return ( + {/* 右上角显示期数标签 */} + + + 显示 {displayData.length} 期 + + void; setSelectedPeriods: (periods: number) => void; setActiveTab: (tabKey: DataTypeKey) => void; + handleTabChange: (tabKey: DataTypeKey) => void; // Tab 切换时自动检查期数 // 当前参数 currentStockCode: string; @@ -140,22 +141,34 @@ export const useFinancialData = ( switch (dataType) { case 'balance': { const res = await financialService.getBalanceSheet(stockCode, periods, options); - if (res.success) setBalanceSheet(res.data); + if (res.success) { + setBalanceSheet(res.data); + dataPeriodsRef.current.balance = periods; + } break; } case 'income': { const res = await financialService.getIncomeStatement(stockCode, periods, options); - if (res.success) setIncomeStatement(res.data); + if (res.success) { + setIncomeStatement(res.data); + dataPeriodsRef.current.income = periods; + } break; } case 'cashflow': { const res = await financialService.getCashflow(stockCode, periods, options); - if (res.success) setCashflow(res.data); + if (res.success) { + setCashflow(res.data); + dataPeriodsRef.current.cashflow = periods; + } break; } case 'metrics': { const res = await financialService.getFinancialMetrics(stockCode, periods, options); - if (res.success) setFinancialMetrics(res.data); + if (res.success) { + setFinancialMetrics(res.data); + dataPeriodsRef.current.metrics = periods; + } break; } } @@ -205,6 +218,17 @@ export const useFinancialData = ( setSelectedPeriodsState(periods); }, []); + // Tab 切换处理：检查期数是否需要重新加载 + const handleTabChange = useCallback((tabKey: DataTypeKey) => { + setActiveTab(tabKey); + const dataType = getDataTypeForTab(tabKey); + // 如果该 Tab 数据的期数与当前选择的期数不一致，重新加载 + // 注：refetchByTab 使用传入的 tabKey，不依赖 activeTab 状态，无需延迟 + if (dataPeriodsRef.current[dataType] !== selectedPeriods) { + refetchByTab(tabKey); + } + }, [selectedPeriods, refetchByTab]); + // 加载核心财务数据（初始加载：stockInfo + metrics + comparison） const loadCoreFinancialData = useCallback(async () => { if (!stockCode || stockCode.length !== 6) { @@ -243,7 +267,10 @@ export const useFinancialData = ( // 设置数据 if (stockInfoRes.success) setStockInfo(stockInfoRes.data); - if (metricsRes.success) setFinancialMetrics(metricsRes.data); + if (metricsRes.success) { + setFinancialMetrics(metricsRes.data); + dataPeriodsRef.current.metrics = selectedPeriods; + } if (comparisonRes.success) setComparison(comparisonRes.data); if (businessRes.success) setMainBusiness(businessRes.data); @@ -277,6 +304,23 @@ export const useFinancialData = ( // 初始加载（仅股票代码变化时全量加载） useEffect(() => { if (stockCode) { + // 立即清空所有旧数据，触发骨架屏 + setStockInfo(null); + setBalanceSheet([]); + setIncomeStatement([]); + setCashflow([]); + setFinancialMetrics([]); + setMainBusiness(null); + setComparison([]); + + // 重置期数记录 + dataPeriodsRef.current = { + balance: 0, + income: 0, + cashflow: 0, + metrics: 0, + }; + loadAllFinancialData(); isInitialLoad.current = false; } @@ -319,6 +363,7 @@ export const useFinancialData = ( setStockCode, setSelectedPeriods, setActiveTab, + handleTabChange, // 当前参数 currentStockCode: stockCode, diff --git a/src/views/Company/components/FinancialPanorama/index.tsx b/src/views/Company/components/FinancialPanorama/index.tsx index 1ab72aa6..ed569d9c 100644 --- a/src/views/Company/components/FinancialPanorama/index.tsx +++ b/src/views/Company/components/FinancialPanorama/index.tsx @@ -90,15 +90,15 @@ const FinancialPanorama: React.FC = ({ stockCode: propSt refetchByTab, selectedPeriods, setSelectedPeriods, - setActiveTab, + handleTabChange: handleTabChangeWithPeriodCheck, activeTab, } = useFinancialData({ stockCode: propStockCode }); - // 处理 Tab 切换 + // 处理 Tab 切换（使用 hook 提供的带期数检查的函数） const handleTabChange = useCallback((index: number, tabKey: string) => { const dataTypeKey = TAB_KEY_MAP[index] || (tabKey as DataTypeKey); - setActiveTab(dataTypeKey); - }, [setActiveTab]); + handleTabChangeWithPeriodCheck(dataTypeKey); + }, [handleTabChangeWithPeriodCheck]); // 处理刷新 - 只刷新当前 Tab const handleRefresh = useCallback(() => {