docs(Company): 添加组件模块总览 README

新增 Company/components/README.md:
- 组件概览表格(7 个核心组件)
- 完整目录结构说明
- 组件层级关系图
- 技术栈和主题系统说明
- 使用示例

🤖 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 13:44:03 +08:00
parent ce4da40ef6
commit 4e71623477

View File

@@ -0,0 +1,130 @@
# Company 组件模块
公司详情页的核心组件集合,提供全面的上市公司分析功能。
## 组件概览
| 组件 | 说明 | 文档 |
|------|------|------|
| [CompanyHeader](./CompanyHeader/) | 公司头部信息(名称、代码、搜索) | [README](./CompanyHeader/README.md) |
| [StockQuoteCard](./StockQuoteCard/) | 股票行情卡片(价格、涨跌、指标) | [README](./StockQuoteCard/README.md) |
| [CompanyOverview](./CompanyOverview/) | 公司概览(基本信息、深度分析) | [README](./CompanyOverview/README.md) |
| [DeepAnalysis](./DeepAnalysis/) | 深度分析(战略、业务、产业链) | [README](./DeepAnalysis/README.md) |
| [MarketDataView](./MarketDataView/) | 市场数据K线、融资、大宗交易 | [README](./MarketDataView/README.md) |
| [FinancialPanorama](./FinancialPanorama/) | 财务全景(三大报表、指标分析) | [README](./FinancialPanorama/README.md) |
| [ForecastReport](./ForecastReport/) | 盈利预测EPS、增长率、估值 | [README](./ForecastReport/README.md) |
## 目录结构
```
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 主题
## 使用示例
```tsx
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} />
```