docs(FinancialPanorama): 更新组件文档
- 更新目录结构说明 - 新增性能优化章节(memo、共享主题、组件提取等) - 更新组件层级图 - 新增数据流图 - 新增懒加载策略说明 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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 实现懒加载
|
||||||
|
|||||||
Reference in New Issue
Block a user