docs(Company): 添加组件目录结构文档

为 Company 模块下的主要组件添加 README.md:
- CompanyHeader: 搜索栏组件
- CompanyOverview: 公司概览(基本信息 + 深度分析)
- FinancialPanorama: 财务全景
- ForecastReport: 盈利预测
- MarketDataView: 市场数据
- StockQuoteCard: 股票行情卡片

🤖 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:22:43 +08:00
parent 92019ca92d
commit 9ef206a9e7
6 changed files with 477 additions and 0 deletions

View File

@@ -0,0 +1,105 @@
# MarketDataView 组件
市场数据视图模块,展示交易数据、资金流向、大宗交易等市场信息。
## 目录结构
```
MarketDataView/
├── index.tsx # 主组件入口
├── types.ts # 类型定义
├── constants.ts # 常量配置(黑金主题)
├── README.md # 本文档
├── hooks/
│ └── useMarketData.ts # 市场数据获取
├── services/
│ └── marketService.ts # API 服务层
├── components/
│ ├── index.ts # 统一导出
│ ├── ThemedCard.tsx # 主题卡片
│ ├── AnalysisModal.tsx # 分析弹窗
│ ├── MarkdownRenderer.tsx # Markdown 渲染
│ │
│ ├── shared/ # 共享组件
│ │ ├── index.ts # 统一导出
│ │ ├── styles.ts # 共享样式
│ │ ├── DarkGoldCard.tsx # 黑金卡片容器
│ │ ├── DarkGoldBadge.tsx # 黑金徽章
│ │ └── EmptyState.tsx # 空状态组件
│ │
│ ├── panels/ # 数据面板
│ │ ├── index.ts # 统一导出
│ │ ├── TradeDataPanel/ # 交易数据面板
│ │ │ ├── index.tsx # 面板入口
│ │ │ ├── KLineModule.tsx # K线模块
│ │ │ └── MetricOverlaySearch.tsx # 指标叠加搜索
│ │ ├── FundingPanel.tsx # 资金流向面板
│ │ ├── BigDealPanel.tsx # 大宗交易面板
│ │ ├── UnusualPanel.tsx # 异动信息面板
│ │ └── PledgePanel.tsx # 股权质押面板
│ │
│ └── StockSummaryCard/ # 股票摘要卡片
│ ├── index.tsx # 卡片入口
│ ├── utils.ts # 工具函数
│ ├── StockHeaderCard.tsx # 头部卡片
│ ├── MetricCard.tsx # 指标卡片
│ └── atoms/ # 原子组件
│ ├── DarkGoldCard.tsx
│ ├── PriceDisplay.tsx
│ ├── MetricValue.tsx
│ ├── StatusTag.tsx
│ └── CardTitle.tsx
└── utils/
├── formatUtils.ts # 格式化工具
└── chartOptions.ts # 图表配置
```
## 功能模块
| 模块 | 说明 |
|------|------|
| 交易数据 | K线图、分时图、成交量 |
| 资金流向 | 主力资金、北向资金、融资融券 |
| 大宗交易 | 大宗交易记录、成交统计 |
| 异动信息 | 涨跌停、龙虎榜、异常波动 |
| 股权质押 | 质押比例、质押明细 |
## 主题系统
使用 `darkGoldTheme` 黑金主题:
```typescript
const darkGoldTheme = {
bgCard: 'rgba(26, 32, 44, 0.95)',
border: 'rgba(212, 175, 55, 0.3)',
gold: '#D4AF37',
green: '#00C851',
red: '#FF4444',
// ...
};
```
## 组件层级
```
MarketDataView
├── SubTabContainer # Tab 容器
│ ├── TradeDataPanel # 交易数据
│ │ └── KLineModule
│ ├── FundingPanel # 资金流向
│ ├── BigDealPanel # 大宗交易
│ ├── UnusualPanel # 异动信息
│ └── PledgePanel # 股权质押
```
## 使用示例
```tsx
import MarketDataView from '@views/Company/components/MarketDataView';
<MarketDataView stockCode="600000" />
```