vf_react/src/views/Company/components

Company 组件模块

公司详情页的核心组件集合，提供全面的上市公司分析功能。

组件概览

组件	说明	文档
CompanyHeader	公司头部信息（名称、代码、搜索）	README
StockQuoteCard	股票行情卡片（价格、涨跌、指标）	README
CompanyOverview	公司概览（基本信息、深度分析）	README
DeepAnalysis	深度分析（战略、业务、产业链）	README
MarketDataView	市场数据（K线、融资、大宗交易）	README
FinancialPanorama	财务全景（三大报表、指标分析）	README
ForecastReport	盈利预测（EPS、增长率、估值）	README

目录结构

components/
├── README.md                 # 本文档
│
├── CompanyHeader/            # 公司头部
│   ├── index.tsx
│   └── README.md
│
├── StockQuoteCard/           # 行情卡片
│   ├── index.tsx
│   ├── components/           # 子组件（PriceDisplay, StockHeader, MetricRow）
│   └── README.md
│
├── CompanyOverview/          # 公司概览
│   ├── index.tsx
│   ├── BasicInfoTab/         # 基本信息 Tab
│   ├── DeepAnalysisTab/      # 深度分析 Tab（展示组件）
│   └── README.md
│
├── DeepAnalysis/             # 深度分析（独立模块）
│   ├── index.tsx             # 主组件（memo 优化）
│   ├── types.ts              # 类型定义
│   ├── hooks/                # 数据获取 Hook
│   └── README.md
│
├── MarketDataView/           # 市场数据
│   ├── index.tsx
│   ├── hooks/                # 数据获取
│   ├── services/             # API 服务
│   ├── components/           # 子组件（面板、卡片）
│   └── README.md
│
├── FinancialPanorama/        # 财务全景
│   ├── index.tsx
│   ├── hooks/                # 财务数据获取
│   ├── components/           # 表格、图表组件
│   ├── tabs/                 # Tab 页面
│   └── README.md
│
├── ForecastReport/           # 盈利预测
│   ├── index.tsx
│   ├── components/           # 图表组件
│   └── README.md
│
├── CompanyTabs/              # Tab 容器配置
├── DynamicTracking/          # 动态追踪
├── EChartsWrapper.tsx        # ECharts 封装
└── LoadingState.tsx          # 加载状态组件

组件关系

Company Page (src/views/Company/index.tsx)
│
├── CompanyHeader             # 顶部搜索栏
│
├── StockQuoteCard            # 行情概览卡片
│
└── CompanyTabs               # 主内容 Tab 切换
    ├── CompanyOverview       # 公司概览
    │   ├── BasicInfoTab      # 基本信息
    │   └── DeepAnalysisTab   # 深度分析（展示）
    │
    ├── DeepAnalysis          # 深度分析（独立模块）
    │
    ├── MarketDataView        # 市场数据
    │   ├── TradeDataPanel    # 交易数据（K线）
    │   ├── FundingPanel      # 融资融券
    │   ├── BigDealPanel      # 大宗交易
    │   ├── UnusualPanel      # 龙虎榜
    │   └── PledgePanel       # 股权质押
    │
    ├── FinancialPanorama     # 财务全景
    │   ├── IncomeStatementTab
    │   ├── BalanceSheetTab
    │   ├── CashflowTab
    │   └── FinancialMetricsTab
    │
    └── ForecastReport        # 盈利预测

技术栈

技术	用途
TypeScript	类型安全（渐进迁移中）
Chakra UI	布局、主题
Ant Design	表格、表单
ECharts	K线图、财务图表
React.memo	性能优化

主题系统

• StockQuoteCard: DEEP_SPACE_THEME（深空主题）
• MarketDataView: darkGoldTheme（黑金主题）
• 其他组件: 标准 Chakra UI 主题

使用示例

import CompanyHeader from '@views/Company/components/CompanyHeader';
import StockQuoteCard from '@views/Company/components/StockQuoteCard';
import MarketDataView from '@views/Company/components/MarketDataView';
import DeepAnalysis from '@views/Company/components/DeepAnalysis';

// 在 Company 页面中组合使用
<CompanyHeader stockCode={stockCode} onStockChange={handleChange} />
<StockQuoteCard stockCode={stockCode} />
<DeepAnalysis stockCode={stockCode} />
<MarketDataView stockCode={stockCode} />