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:
105
src/views/Company/components/MarketDataView/README.md
Normal file
105
src/views/Company/components/MarketDataView/README.md
Normal 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" />
|
||||
```
|
||||
Reference in New Issue
Block a user