perf: 优化各 Tab 数据加载为按需请求
MarketDataView (股票行情): - 初始只加载 summary + tradeData(2个接口) - funding/bigDeal/unusual/pledge 数据在切换 Tab 时按需加载 - 新增 loadDataByType 方法支持懒加载 FinancialPanorama (财务全景): - 初始只加载 stockInfo + metrics + comparison + mainBusiness(4个接口) - 从9个接口优化到4个接口 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -179,8 +179,8 @@ export const useFinancialData = (
|
||||
setSelectedPeriodsState(periods);
|
||||
}, []);
|
||||
|
||||
// 加载所有财务数据(初始加载)
|
||||
const loadAllFinancialData = useCallback(async () => {
|
||||
// 加载核心财务数据(初始加载:stockInfo + metrics + comparison)
|
||||
const loadCoreFinancialData = useCallback(async () => {
|
||||
if (!stockCode || stockCode.length !== 6) {
|
||||
logger.warn('useFinancialData', '无效的股票代码', { stockCode });
|
||||
toast({
|
||||
@@ -191,55 +191,45 @@ export const useFinancialData = (
|
||||
return;
|
||||
}
|
||||
|
||||
logger.debug('useFinancialData', '开始加载全部财务数据', { stockCode, selectedPeriods });
|
||||
logger.debug('useFinancialData', '开始加载核心财务数据', { stockCode, selectedPeriods });
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// 并行加载所有数据
|
||||
// 只加载核心数据(概览面板需要的)
|
||||
const [
|
||||
stockInfoRes,
|
||||
balanceRes,
|
||||
incomeRes,
|
||||
cashflowRes,
|
||||
metricsRes,
|
||||
businessRes,
|
||||
forecastRes,
|
||||
rankRes,
|
||||
comparisonRes,
|
||||
businessRes,
|
||||
] = await Promise.all([
|
||||
financialService.getStockInfo(stockCode),
|
||||
financialService.getBalanceSheet(stockCode, selectedPeriods),
|
||||
financialService.getIncomeStatement(stockCode, selectedPeriods),
|
||||
financialService.getCashflow(stockCode, selectedPeriods),
|
||||
financialService.getFinancialMetrics(stockCode, selectedPeriods),
|
||||
financialService.getMainBusiness(stockCode, 4),
|
||||
financialService.getForecast(stockCode),
|
||||
financialService.getIndustryRank(stockCode, 4),
|
||||
financialService.getPeriodComparison(stockCode, selectedPeriods),
|
||||
financialService.getMainBusiness(stockCode, 4),
|
||||
]);
|
||||
|
||||
// 设置数据
|
||||
if (stockInfoRes.success) setStockInfo(stockInfoRes.data);
|
||||
if (balanceRes.success) setBalanceSheet(balanceRes.data);
|
||||
if (incomeRes.success) setIncomeStatement(incomeRes.data);
|
||||
if (cashflowRes.success) setCashflow(cashflowRes.data);
|
||||
if (metricsRes.success) setFinancialMetrics(metricsRes.data);
|
||||
if (businessRes.success) setMainBusiness(businessRes.data);
|
||||
if (forecastRes.success) setForecast(forecastRes.data);
|
||||
if (rankRes.success) setIndustryRank(rankRes.data);
|
||||
if (comparisonRes.success) setComparison(comparisonRes.data);
|
||||
if (businessRes.success) setMainBusiness(businessRes.data);
|
||||
|
||||
logger.info('useFinancialData', '全部财务数据加载成功', { stockCode });
|
||||
logger.info('useFinancialData', '核心财务数据加载成功', { stockCode });
|
||||
} catch (err) {
|
||||
const errorMessage = err instanceof Error ? err.message : '未知错误';
|
||||
setError(errorMessage);
|
||||
logger.error('useFinancialData', 'loadAllFinancialData', err, { stockCode, selectedPeriods });
|
||||
logger.error('useFinancialData', 'loadCoreFinancialData', err, { stockCode, selectedPeriods });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [stockCode, selectedPeriods, toast]);
|
||||
|
||||
// 加载所有财务数据(用于刷新)
|
||||
const loadAllFinancialData = useCallback(async () => {
|
||||
await loadCoreFinancialData();
|
||||
}, [loadCoreFinancialData]);
|
||||
|
||||
// 监听 props 中的 stockCode 变化
|
||||
useEffect(() => {
|
||||
if (initialStockCode && initialStockCode !== stockCode) {
|
||||
|
||||
@@ -122,8 +122,8 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
|
||||
// 颜色配置
|
||||
const { bgColor, hoverBg, positiveColor, negativeColor } = COLORS;
|
||||
|
||||
// 点击指标行显示图表
|
||||
const showMetricChart = (
|
||||
// 点击指标行显示图表(使用 useCallback 避免不必要的重渲染)
|
||||
const showMetricChart = useCallback((
|
||||
metricName: string,
|
||||
_metricKey: string,
|
||||
data: Array<{ period: string; [key: string]: unknown }>,
|
||||
@@ -221,7 +221,7 @@ const FinancialPanorama: React.FC<FinancialPanoramaProps> = ({ stockCode: propSt
|
||||
</Box>
|
||||
);
|
||||
onOpen();
|
||||
};
|
||||
}, [onOpen, positiveColor, negativeColor]);
|
||||
|
||||
// Tab 配置 - 财务指标分类 + 三大财务报表
|
||||
const tabConfigs: SubTabConfig[] = useMemo(
|
||||
|
||||
Reference in New Issue
Block a user