vf_react/src/views/Company/components/FinancialPanorama

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          # 指标图表弹窗

使用示例

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