diff --git a/src/views/Company/components/README.md b/src/views/Company/components/README.md new file mode 100644 index 00000000..78f52504 --- /dev/null +++ b/src/views/Company/components/README.md @@ -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 页面中组合使用 + + + + +```