docs(FinancialPanorama): 更新组件文档

- 更新目录结构说明
- 新增性能优化章节(memo、共享主题、组件提取等)
- 更新组件层级图
- 新增数据流图
- 新增懒加载策略说明

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-19 14:45:08 +08:00
parent 11ca0e7a99
commit 2cc16be585

View File

@@ -8,12 +8,12 @@
FinancialPanorama/ FinancialPanorama/
├── index.tsx # 主组件入口 ├── index.tsx # 主组件入口
├── types.ts # 类型定义 ├── types.ts # 类型定义
├── constants.ts # 常量配置 ├── constants.ts # 常量配置(指标定义、颜色等)
├── README.md # 本文档 ├── README.md # 本文档
├── hooks/ ├── hooks/
│ ├── index.ts # Hooks 导出 │ ├── index.ts # Hooks 导出
│ └── useFinancialData.ts # 财务数据获取 │ └── useFinancialData.ts # 财务数据获取 Hook
├── components/ # 子组件 ├── components/ # 子组件
│ ├── index.ts # 统一导出 │ ├── index.ts # 统一导出
@@ -21,55 +21,94 @@ FinancialPanorama/
│ ├── StockInfoHeader.tsx # 股票信息头部 │ ├── StockInfoHeader.tsx # 股票信息头部
│ ├── KeyMetricsOverview.tsx # 关键指标概览 │ ├── KeyMetricsOverview.tsx # 关键指标概览
│ ├── FinancialOverviewPanel.tsx # 财务概览面板 │ ├── FinancialOverviewPanel.tsx # 财务概览面板
│ ├── FinancialTable.tsx # 财务表格基础组件 │ ├── IncomeStatementTable.tsx # 利润表memo 优化)
│ ├── IncomeStatementTable.tsx # 利润表 │ ├── BalanceSheetTable.tsx # 资产负债表memo 优化)
│ ├── BalanceSheetTable.tsx # 资产负债表 │ ├── CashflowTable.tsx # 现金流量表memo 优化)
│ ├── CashflowTable.tsx # 现金流量表
│ ├── FinancialMetricsTable.tsx # 财务指标表 │ ├── FinancialMetricsTable.tsx # 财务指标表
│ ├── MetricChartModal.tsx # 指标图表弹窗(新增)
│ ├── MainBusinessAnalysis.tsx # 主营业务分析 │ ├── MainBusinessAnalysis.tsx # 主营业务分析
│ ├── IndustryRankingView.tsx # 行业排名视图 │ ├── IndustryRankingView.tsx # 行业排名视图
│ ├── StockComparison.tsx # 股票对比 │ ├── StockComparison.tsx # 股票对比
│ └── ComparisonAnalysis.tsx # 对比分析 │ └── ComparisonAnalysis.tsx # 对比分析
├── tabs/ # Tab 页面 ├── tabs/ # Tab 页面(全部 memo 优化)
│ ├── index.ts # 统一导出 │ ├── index.ts # 统一导出
│ ├── IncomeStatementTab.tsx # 利润表 Tab │ ├── MetricsCategoryTab.tsx # 指标分类 Tab含 7 个分类子组件)
│ ├── BalanceSheetTab.tsx # 资产负债表 Tab │ ├── BalanceSheetTab.tsx # 资产负债表 Tab
│ ├── IncomeStatementTab.tsx # 利润表 Tab
│ ├── CashflowTab.tsx # 现金流量表 Tab │ ├── CashflowTab.tsx # 现金流量表 Tab
── FinancialMetricsTab.tsx # 财务指标 Tab ── FinancialMetricsTab.tsx # 财务指标 Tab
│ └── MetricsCategoryTab.tsx # 指标分类 Tab
└── utils/ └── utils/
├── index.ts # 工具函数导出 ├── index.ts # 工具函数导出
├── calculations.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 FinancialPanorama
├── PeriodSelector # 期数选择 ├── FinancialOverviewPanel # 财务概览(三列布局)
├── SubTabContainer # Tab 容器 ├── ComparisonAnalysis # 营收与利润趋势
│ ├── IncomeStatementTab # 利润表 ├── MainBusinessAnalysis # 主营业务分析
└── IncomeStatementTable ├── SubTabContainer # Tab 容器10 个 Tab
│ ├── ProfitabilityTab # 盈利能力
│ ├── PerShareTab # 每股指标
│ ├── GrowthTab # 成长能力
│ ├── OperationalTab # 运营效率
│ ├── SolvencyTab # 偿债能力
│ ├── ExpenseTab # 费用率
│ ├── CashflowMetricsTab # 现金流指标
│ ├── BalanceSheetTab # 资产负债表 │ ├── BalanceSheetTab # 资产负债表
│ │ └── BalanceSheetTable │ │ └── BalanceSheetTable
│ ├── CashflowTab # 现金流量 │ ├── IncomeStatementTab # 利润
│ │ └── CashflowTable │ │ └── IncomeStatementTable
│ └── FinancialMetricsTab # 财务指标 │ └── CashflowTab # 现金流量表
│ └── FinancialMetricsTable │ └── CashflowTable
└── MetricChartModal # 指标图表弹窗
``` ```
## 使用示例 ## 使用示例
@@ -79,3 +118,28 @@ import FinancialPanorama from '@views/Company/components/FinancialPanorama';
<FinancialPanorama stockCode="600000" /> <FinancialPanorama stockCode="600000" />
``` ```
## 数据流
```
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 实现懒加载