# FinancialPanorama 组件

财务全景模块，展示公司财务报表和指标分析。

## 目录结构

```
FinancialPanorama/
├── index.tsx                 # 主组件入口
├── types.ts                  # 类型定义
├── constants.ts              # 常量配置（指标定义、颜色等）
├── README.md                 # 本文档
│
├── hooks/
│   ├── index.ts              # Hooks 导出
│   └── useFinancialData.ts   # 财务数据获取 Hook
│
├── components/               # 子组件
│   ├── index.ts              # 统一导出
│   ├── PeriodSelector.tsx    # 期数选择器
│   ├── StockInfoHeader.tsx   # 股票信息头部
│   ├── KeyMetricsOverview.tsx # 关键指标概览
│   ├── FinancialOverviewPanel.tsx # 财务概览面板
│   ├── IncomeStatementTable.tsx # 利润表（memo 优化）
│   ├── BalanceSheetTable.tsx # 资产负债表（memo 优化）
│   ├── CashflowTable.tsx     # 现金流量表（memo 优化）
│   ├── FinancialMetricsTable.tsx # 财务指标表
│   ├── MetricChartModal.tsx  # 指标图表弹窗（新增）
│   ├── MainBusinessAnalysis.tsx # 主营业务分析
│   ├── IndustryRankingView.tsx # 行业排名视图
│   ├── StockComparison.tsx   # 股票对比
│   └── ComparisonAnalysis.tsx # 对比分析
│
├── tabs/                     # Tab 页面（全部 memo 优化）
│   ├── index.ts              # 统一导出
│   ├── MetricsCategoryTab.tsx # 指标分类 Tab（含 7 个分类子组件）
│   ├── BalanceSheetTab.tsx   # 资产负债表 Tab
│   ├── IncomeStatementTab.tsx # 利润表 Tab
│   ├── CashflowTab.tsx       # 现金流量表 Tab
│   └── FinancialMetricsTab.tsx # 财务指标 Tab
│
└── utils/
    ├── index.ts              # 工具函数导出
    ├── calculations.ts       # 计算函数
    ├── chartOptions.ts       # 图表配置
    └── tableTheme.ts         # 共享表格主题（新增）
```

## 功能模块

| 模块 | 说明 |
|------|------|
| 盈利能力 | ROE、ROA、毛利率、净利率等 |
| 每股指标 | EPS、每股净资产、每股现金流等 |
| 成长能力 | 营收增速、利润增速等 |
| 运营效率 | 周转率、应收账款周转等 |
| 偿债能力 | 资产负债率、流动比率等 |
| 费用率 | 销售费用率、管理费用率等 |
| 现金流指标 | 现金流比率、自由现金流等 |
| 资产负债表 | 资产、负债、权益结构 |
| 利润表 | 营收、利润、费用等损益数据 |
| 现金流量表 | 经营、投资、筹资现金流 |

## 性能优化（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
├── FinancialOverviewPanel    # 财务概览（三列布局）
├── ComparisonAnalysis        # 营收与利润趋势
├── MainBusinessAnalysis      # 主营业务分析
├── SubTabContainer           # Tab 容器（10 个 Tab）
│   ├── ProfitabilityTab      # 盈利能力
│   ├── PerShareTab           # 每股指标
│   ├── GrowthTab             # 成长能力
│   ├── OperationalTab        # 运营效率
│   ├── SolvencyTab           # 偿债能力
│   ├── ExpenseTab            # 费用率
│   ├── CashflowMetricsTab    # 现金流指标
│   ├── BalanceSheetTab       # 资产负债表
│   │   └── BalanceSheetTable
│   ├── IncomeStatementTab    # 利润表
│   │   └── IncomeStatementTable
│   └── CashflowTab           # 现金流量表
│       └── CashflowTable
└── MetricChartModal          # 指标图表弹窗
```

## 使用示例

```tsx
import FinancialPanorama from '@views/Company/components/FinancialPanorama';

<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 实现懒加载