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