From 2cc16be585288f8e8794b9b1025faa68319587c2 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 19 Dec 2025 14:45:08 +0800 Subject: [PATCH] =?UTF-8?q?docs(FinancialPanorama):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新目录结构说明 - 新增性能优化章节（memo、共享主题、组件提取等） - 更新组件层级图 - 新增数据流图 - 新增懒加载策略说明 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../components/FinancialPanorama/README.md | 110 ++++++++++++++---- 1 file changed, 87 insertions(+), 23 deletions(-) diff --git a/src/views/Company/components/FinancialPanorama/README.md b/src/views/Company/components/FinancialPanorama/README.md index f7a95d23..de9873b0 100644 --- a/src/views/Company/components/FinancialPanorama/README.md +++ b/src/views/Company/components/FinancialPanorama/README.md @@ -8,12 +8,12 @@ FinancialPanorama/ ├── index.tsx # 主组件入口 ├── types.ts # 类型定义 -├── constants.ts # 常量配置 +├── constants.ts # 常量配置（指标定义、颜色等） ├── README.md # 本文档 │ ├── hooks/ │ ├── index.ts # Hooks 导出 -│ └── useFinancialData.ts # 财务数据获取 +│ └── useFinancialData.ts # 财务数据获取 Hook │ ├── components/ # 子组件 │ ├── index.ts # 统一导出 @@ -21,55 +21,94 @@ FinancialPanorama/ │ ├── StockInfoHeader.tsx # 股票信息头部 │ ├── KeyMetricsOverview.tsx # 关键指标概览 │ ├── FinancialOverviewPanel.tsx # 财务概览面板 -│ ├── FinancialTable.tsx # 财务表格基础组件 -│ ├── IncomeStatementTable.tsx # 利润表 -│ ├── BalanceSheetTable.tsx # 资产负债表 -│ ├── CashflowTable.tsx # 现金流量表 +│ ├── IncomeStatementTable.tsx # 利润表（memo 优化） +│ ├── BalanceSheetTable.tsx # 资产负债表（memo 优化） +│ ├── CashflowTable.tsx # 现金流量表（memo 优化） │ ├── FinancialMetricsTable.tsx # 财务指标表 +│ ├── MetricChartModal.tsx # 指标图表弹窗（新增） │ ├── MainBusinessAnalysis.tsx # 主营业务分析 │ ├── IndustryRankingView.tsx # 行业排名视图 │ ├── StockComparison.tsx # 股票对比 │ └── ComparisonAnalysis.tsx # 对比分析 │ -├── tabs/ # Tab 页面 +├── tabs/ # Tab 页面（全部 memo 优化） │ ├── index.ts # 统一导出 -│ ├── IncomeStatementTab.tsx # 利润表 Tab +│ ├── MetricsCategoryTab.tsx # 指标分类 Tab（含 7 个分类子组件） │ ├── BalanceSheetTab.tsx # 资产负债表 Tab +│ ├── IncomeStatementTab.tsx # 利润表 Tab │ ├── CashflowTab.tsx # 现金流量表 Tab -│ ├── FinancialMetricsTab.tsx # 财务指标 Tab -│ └── MetricsCategoryTab.tsx # 指标分类 Tab +│ └── FinancialMetricsTab.tsx # 财务指标 Tab │ └── utils/ ├── index.ts # 工具函数导出 ├── calculations.ts # 计算函数 - └── chartOptions.ts # 图表配置 + ├── chartOptions.ts # 图表配置 + └── tableTheme.ts # 共享表格主题（新增） ``` ## 功能模块 | 模块 | 说明 | |------|------| -| 利润表 | 营收、利润、费用等损益数据 | +| 盈利能力 | ROE、ROA、毛利率、净利率等 | +| 每股指标 | EPS、每股净资产、每股现金流等 | +| 成长能力 | 营收增速、利润增速等 | +| 运营效率 | 周转率、应收账款周转等 | +| 偿债能力 | 资产负债率、流动比率等 | +| 费用率 | 销售费用率、管理费用率等 | +| 现金流指标 | 现金流比率、自由现金流等 | | 资产负债表 | 资产、负债、权益结构 | +| 利润表 | 营收、利润、费用等损益数据 | | 现金流量表 | 经营、投资、筹资现金流 | -| 财务指标 | ROE、毛利率、周转率等 | -| 主营分析 | 业务构成、地区分布 | -| 行业排名 | 同行业公司对比排名 | + +## 性能优化（2024-12） + +### 1. React.memo 优化 +- 所有 Tab 组件已使用 `memo` 包装，避免不必要的重渲染 +- 表格组件（BalanceSheetTable、IncomeStatementTable、CashflowTable）已使用 `memo` +- MetricsCategoryTab 的 7 个子组件都已 memo 化 + +### 2. 共享主题配置 +- 提取 `utils/tableTheme.ts` 共享 Ant Design 黑金主题 +- `BLACK_GOLD_TABLE_THEME`: ConfigProvider 主题配置 +- `getTableStyles()`: CSS 样式工厂函数 +- `calculateYoY()`: 同比计算共享函数 + +### 3. 组件提取 +- `MetricChartModal`: 从 index.tsx 提取的独立指标图表弹窗 +- 减少主组件约 100 行代码 + +### 4. Props 传递优化 +- componentProps 使用 `useMemo` 缓存 +- 颜色常量直接展开，不在依赖数组中 +- showMetricChart 使用 `useCallback` 优化 + +### 5. Hook 简化 +- 移除未使用的 `forecast` 和 `industryRank` 状态 +- 简化返回值类型定义 ## 组件层级 ``` FinancialPanorama -├── PeriodSelector # 期数选择 -├── SubTabContainer # Tab 容器 -│ ├── IncomeStatementTab # 利润表 -│ │ └── IncomeStatementTable +├── FinancialOverviewPanel # 财务概览（三列布局） +├── ComparisonAnalysis # 营收与利润趋势 +├── MainBusinessAnalysis # 主营业务分析 +├── SubTabContainer # Tab 容器（10 个 Tab） +│ ├── ProfitabilityTab # 盈利能力 +│ ├── PerShareTab # 每股指标 +│ ├── GrowthTab # 成长能力 +│ ├── OperationalTab # 运营效率 +│ ├── SolvencyTab # 偿债能力 +│ ├── ExpenseTab # 费用率 +│ ├── CashflowMetricsTab # 现金流指标 │ ├── BalanceSheetTab # 资产负债表 │ │ └── BalanceSheetTable -│ ├── CashflowTab # 现金流量表 -│ │ └── CashflowTable -│ └── FinancialMetricsTab # 财务指标 -│ └── FinancialMetricsTable +│ ├── IncomeStatementTab # 利润表 +│ │ └── IncomeStatementTable +│ └── CashflowTab # 现金流量表 +│ └── CashflowTable +└── MetricChartModal # 指标图表弹窗 ``` ## 使用示例 @@ -79,3 +118,28 @@ import FinancialPanorama from '@views/Company/components/FinancialPanorama'; ``` + +## 数据流 + +``` +stockCode (props) + ↓ +useFinancialData (Hook) + ├── stockInfo (基本信息) + ├── financialMetrics (财务指标) + ├── comparison (营收利润对比) + ├── mainBusiness (主营业务) + ├── balanceSheet (资产负债表) + ├── incomeStatement (利润表) + └── cashflow (现金流量表) + ↓ +componentProps (useMemo) + ↓ +SubTabContainer → Tab 组件 → Table 组件 +``` + +## 懒加载策略 + +- 初始加载：stockInfo + financialMetrics + comparison + mainBusiness +- Tab 切换时按需加载：balance/income/cashflow 数据 +- 使用 `isLazy` 配置 SubTabContainer 实现懒加载