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