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
41
src/views/Company/components/CompanyHeader/README.md
Normal file
41
src/views/Company/components/CompanyHeader/README.md
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
# CompanyHeader 组件
|
||||||
|
|
||||||
|
Company 页面顶部搜索栏组件，采用 FUI 科幻风格。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
CompanyHeader/
|
||||||
|
├── index.tsx # 主组件入口
|
||||||
|
├── constants.ts # 样式常量配置
|
||||||
|
└── README.md # 本文档
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能说明
|
||||||
|
|
||||||
|
- 股票代码/名称搜索（AutoComplete）
|
||||||
|
- 搜索结果下拉展示
|
||||||
|
- 支持拼音缩写搜索
|
||||||
|
|
||||||
|
## 组件结构
|
||||||
|
|
||||||
|
```
|
||||||
|
CompanyHeader
|
||||||
|
└── SearchBox # 搜索框子组件
|
||||||
|
└── AutoComplete (antd) # 自动完成输入
|
||||||
|
└── Input # 搜索输入框
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import CompanyHeader from '@views/Company/components/CompanyHeader';
|
||||||
|
|
||||||
|
<CompanyHeader onStockChange={(code) => handleStockChange(code)} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
| 属性 | 类型 | 必填 | 说明 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| `onStockChange` | `(code: string) => void` | 是 | 股票切换回调 |
|
||||||
105
src/views/Company/components/CompanyOverview/README.md
Normal file
105
src/views/Company/components/CompanyOverview/README.md
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
# CompanyOverview 组件
|
||||||
|
|
||||||
|
公司概览模块，包含基本信息和深度分析两个主要 Tab。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
CompanyOverview/
|
||||||
|
├── index.tsx # 主组件入口
|
||||||
|
├── types.ts # 类型定义
|
||||||
|
├── utils.ts # 工具函数
|
||||||
|
├── README.md # 本文档
|
||||||
|
│
|
||||||
|
├── hooks/ # 数据获取 Hooks
|
||||||
|
│ ├── useBasicInfo.ts # 公司基本信息
|
||||||
|
│ ├── useShareholderData.ts # 股东数据
|
||||||
|
│ ├── useManagementData.ts # 管理层数据
|
||||||
|
│ ├── useBranchesData.ts # 分支机构数据
|
||||||
|
│ ├── useAnnouncementsData.ts # 公告数据
|
||||||
|
│ └── useDisclosureData.ts # 披露日程数据
|
||||||
|
│
|
||||||
|
├── BasicInfoTab/ # 基本信息 Tab
|
||||||
|
│ ├── index.tsx # Tab 入口
|
||||||
|
│ ├── config.ts # 配置
|
||||||
|
│ ├── utils.ts # 工具函数
|
||||||
|
│ └── components/ # 子组件
|
||||||
|
│ ├── BusinessInfoPanel.tsx # 工商信息面板
|
||||||
|
│ ├── ShareholderPanel.tsx # 股东信息面板
|
||||||
|
│ ├── AnnouncementsPanel.tsx # 公告面板
|
||||||
|
│ ├── BranchesPanel.tsx # 分支机构面板
|
||||||
|
│ ├── DisclosureSchedulePanel.tsx # 披露日程面板
|
||||||
|
│ ├── LoadingState.tsx # 加载状态
|
||||||
|
│ └── management/ # 管理层组件
|
||||||
|
│ ├── ManagementPanel.tsx # 管理层面板
|
||||||
|
│ ├── ManagementCard.tsx # 管理层卡片
|
||||||
|
│ ├── CategorySection.tsx # 分类区块
|
||||||
|
│ └── types.ts # 类型定义
|
||||||
|
│
|
||||||
|
├── DeepAnalysisTab/ # 深度分析 Tab
|
||||||
|
│ ├── index.tsx # Tab 入口
|
||||||
|
│ ├── types.ts # 类型定义
|
||||||
|
│ ├── atoms/ # 原子组件
|
||||||
|
│ │ ├── ScoreBar.tsx # 评分条
|
||||||
|
│ │ ├── KeyFactorCard.tsx # 关键因素卡片
|
||||||
|
│ │ ├── BusinessTreeItem.tsx # 业务树节点
|
||||||
|
│ │ ├── ProcessNavigation.tsx # 流程导航
|
||||||
|
│ │ ├── ValueChainFilterBar.tsx # 产业链筛选栏
|
||||||
|
│ │ └── DisclaimerBox.tsx # 免责声明
|
||||||
|
│ ├── components/ # 分子组件
|
||||||
|
│ │ ├── CorePositioningCard/ # 核心定位卡片
|
||||||
|
│ │ ├── BusinessStructureCard.tsx # 业务结构
|
||||||
|
│ │ ├── BusinessSegmentsCard.tsx # 业务板块
|
||||||
|
│ │ ├── CompetitiveAnalysisCard.tsx # 竞争分析
|
||||||
|
│ │ ├── StrategyAnalysisCard.tsx # 战略分析
|
||||||
|
│ │ ├── KeyFactorsCard.tsx # 关键因素
|
||||||
|
│ │ ├── TimelineCard.tsx # 时间线
|
||||||
|
│ │ └── ValueChainCard.tsx # 产业链
|
||||||
|
│ ├── organisms/ # 有机体组件
|
||||||
|
│ │ ├── TimelineComponent/ # 时间线组件
|
||||||
|
│ │ └── ValueChainNodeCard/ # 产业链节点
|
||||||
|
│ ├── tabs/ # 子 Tab
|
||||||
|
│ │ ├── BusinessTab.tsx # 业务分析
|
||||||
|
│ │ ├── StrategyTab.tsx # 战略分析
|
||||||
|
│ │ ├── ValueChainTab.tsx # 产业链分析
|
||||||
|
│ │ └── DevelopmentTab.tsx # 发展历程
|
||||||
|
│ └── utils/
|
||||||
|
│ └── chartOptions.ts # 图表配置
|
||||||
|
│
|
||||||
|
└── components/ # 共享组件
|
||||||
|
└── shareholder/ # 股东相关
|
||||||
|
├── ShareholdersTable.tsx # 股东表格
|
||||||
|
├── ConcentrationCard.tsx # 股权集中度
|
||||||
|
└── ActualControlCard.tsx # 实际控制人
|
||||||
|
```
|
||||||
|
|
||||||
|
## 组件层级
|
||||||
|
|
||||||
|
```
|
||||||
|
CompanyOverview
|
||||||
|
├── SubTabContainer # Tab 容器
|
||||||
|
│ ├── BasicInfoTab # 基本信息
|
||||||
|
│ │ ├── BusinessInfoPanel
|
||||||
|
│ │ ├── ShareholderPanel
|
||||||
|
│ │ │ ├── ShareholdersTable
|
||||||
|
│ │ │ ├── ConcentrationCard
|
||||||
|
│ │ │ └── ActualControlCard
|
||||||
|
│ │ ├── ManagementPanel
|
||||||
|
│ │ ├── AnnouncementsPanel
|
||||||
|
│ │ ├── BranchesPanel
|
||||||
|
│ │ └── DisclosureSchedulePanel
|
||||||
|
│ │
|
||||||
|
│ └── DeepAnalysisTab # 深度分析
|
||||||
|
│ ├── BusinessTab
|
||||||
|
│ ├── StrategyTab
|
||||||
|
│ ├── ValueChainTab
|
||||||
|
│ └── DevelopmentTab
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import CompanyOverview from '@views/Company/components/CompanyOverview';
|
||||||
|
|
||||||
|
<CompanyOverview stockCode="600000" />
|
||||||
|
```
|
||||||
81
src/views/Company/components/FinancialPanorama/README.md
Normal file
81
src/views/Company/components/FinancialPanorama/README.md
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
# FinancialPanorama 组件
|
||||||
|
|
||||||
|
财务全景模块，展示公司财务报表和指标分析。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
FinancialPanorama/
|
||||||
|
├── index.tsx # 主组件入口
|
||||||
|
├── types.ts # 类型定义
|
||||||
|
├── constants.ts # 常量配置
|
||||||
|
├── README.md # 本文档
|
||||||
|
│
|
||||||
|
├── hooks/
|
||||||
|
│ ├── index.ts # Hooks 导出
|
||||||
|
│ └── useFinancialData.ts # 财务数据获取
|
||||||
|
│
|
||||||
|
├── components/ # 子组件
|
||||||
|
│ ├── index.ts # 统一导出
|
||||||
|
│ ├── PeriodSelector.tsx # 期数选择器
|
||||||
|
│ ├── StockInfoHeader.tsx # 股票信息头部
|
||||||
|
│ ├── KeyMetricsOverview.tsx # 关键指标概览
|
||||||
|
│ ├── FinancialOverviewPanel.tsx # 财务概览面板
|
||||||
|
│ ├── FinancialTable.tsx # 财务表格基础组件
|
||||||
|
│ ├── IncomeStatementTable.tsx # 利润表
|
||||||
|
│ ├── BalanceSheetTable.tsx # 资产负债表
|
||||||
|
│ ├── CashflowTable.tsx # 现金流量表
|
||||||
|
│ ├── FinancialMetricsTable.tsx # 财务指标表
|
||||||
|
│ ├── MainBusinessAnalysis.tsx # 主营业务分析
|
||||||
|
│ ├── IndustryRankingView.tsx # 行业排名视图
|
||||||
|
│ ├── StockComparison.tsx # 股票对比
|
||||||
|
│ └── ComparisonAnalysis.tsx # 对比分析
|
||||||
|
│
|
||||||
|
├── tabs/ # Tab 页面
|
||||||
|
│ ├── index.ts # 统一导出
|
||||||
|
│ ├── IncomeStatementTab.tsx # 利润表 Tab
|
||||||
|
│ ├── BalanceSheetTab.tsx # 资产负债表 Tab
|
||||||
|
│ ├── CashflowTab.tsx # 现金流量表 Tab
|
||||||
|
│ ├── FinancialMetricsTab.tsx # 财务指标 Tab
|
||||||
|
│ └── MetricsCategoryTab.tsx # 指标分类 Tab
|
||||||
|
│
|
||||||
|
└── utils/
|
||||||
|
├── index.ts # 工具函数导出
|
||||||
|
├── calculations.ts # 计算函数
|
||||||
|
└── chartOptions.ts # 图表配置
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能模块
|
||||||
|
|
||||||
|
| 模块 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| 利润表 | 营收、利润、费用等损益数据 |
|
||||||
|
| 资产负债表 | 资产、负债、权益结构 |
|
||||||
|
| 现金流量表 | 经营、投资、筹资现金流 |
|
||||||
|
| 财务指标 | ROE、毛利率、周转率等 |
|
||||||
|
| 主营分析 | 业务构成、地区分布 |
|
||||||
|
| 行业排名 | 同行业公司对比排名 |
|
||||||
|
|
||||||
|
## 组件层级
|
||||||
|
|
||||||
|
```
|
||||||
|
FinancialPanorama
|
||||||
|
├── PeriodSelector # 期数选择
|
||||||
|
├── SubTabContainer # Tab 容器
|
||||||
|
│ ├── IncomeStatementTab # 利润表
|
||||||
|
│ │ └── IncomeStatementTable
|
||||||
|
│ ├── BalanceSheetTab # 资产负债表
|
||||||
|
│ │ └── BalanceSheetTable
|
||||||
|
│ ├── CashflowTab # 现金流量表
|
||||||
|
│ │ └── CashflowTable
|
||||||
|
│ └── FinancialMetricsTab # 财务指标
|
||||||
|
│ └── FinancialMetricsTable
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import FinancialPanorama from '@views/Company/components/FinancialPanorama';
|
||||||
|
|
||||||
|
<FinancialPanorama stockCode="600000" />
|
||||||
|
```
|
||||||
54
src/views/Company/components/ForecastReport/README.md
Normal file
54
src/views/Company/components/ForecastReport/README.md
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
# ForecastReport 组件
|
||||||
|
|
||||||
|
盈利预测模块，展示券商研报预测数据和图表分析。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
ForecastReport/
|
||||||
|
├── index.tsx # 主组件入口
|
||||||
|
├── types.ts # 类型定义
|
||||||
|
├── constants.ts # 常量配置
|
||||||
|
├── README.md # 本文档
|
||||||
|
│
|
||||||
|
└── components/ # 子组件
|
||||||
|
├── index.ts # 统一导出
|
||||||
|
├── ChartCard.tsx # 图表卡片容器
|
||||||
|
├── DetailTable.tsx # 详情表格
|
||||||
|
├── EpsChart.tsx # EPS 预测图表
|
||||||
|
├── GrowthChart.tsx # 增长率图表
|
||||||
|
├── IncomeProfitChart.tsx # 营收利润图表
|
||||||
|
├── IncomeProfitGrowthChart.tsx # 营收利润增长图表
|
||||||
|
└── PePegChart.tsx # PE/PEG 估值图表
|
||||||
|
```
|
||||||
|
|
||||||
|
## 功能模块
|
||||||
|
|
||||||
|
| 模块 | 说明 |
|
||||||
|
|------|------|
|
||||||
|
| EPS 预测 | 每股收益预测趋势 |
|
||||||
|
| 增长预测 | 营收、利润增速预测 |
|
||||||
|
| 估值分析 | PE、PEG 动态估值 |
|
||||||
|
| 详情表格 | 各机构预测明细 |
|
||||||
|
|
||||||
|
## 组件层级
|
||||||
|
|
||||||
|
```
|
||||||
|
ForecastReport
|
||||||
|
├── ChartCard
|
||||||
|
│ ├── EpsChart # EPS 图表
|
||||||
|
│ ├── GrowthChart # 增长图表
|
||||||
|
│ ├── IncomeProfitChart # 营收利润
|
||||||
|
│ ├── IncomeProfitGrowthChart # 增长率
|
||||||
|
│ └── PePegChart # 估值图表
|
||||||
|
│
|
||||||
|
└── DetailTable # 预测明细表
|
||||||
|
```
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import ForecastReport from '@views/Company/components/ForecastReport';
|
||||||
|
|
||||||
|
<ForecastReport stockCode="600000" />
|
||||||
|
```
|
||||||
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" />
|
||||||
|
```
|
||||||
91
src/views/Company/components/StockQuoteCard/README.md
Normal file
91
src/views/Company/components/StockQuoteCard/README.md
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
# StockQuoteCard 组件
|
||||||
|
|
||||||
|
股票行情卡片组件，采用深空 FUI 设计风格（Glassmorphism + Ash Thorp + James Turrell）。
|
||||||
|
|
||||||
|
## 目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
StockQuoteCard/
|
||||||
|
├── index.tsx # 主组件入口 (180行)
|
||||||
|
├── types.ts # 类型定义
|
||||||
|
├── README.md # 本文档
|
||||||
|
│
|
||||||
|
├── components/ # 子组件
|
||||||
|
│ ├── index.ts # 统一导出
|
||||||
|
│ ├── theme.ts # 深空主题配置 (DEEP_SPACE_THEME)
|
||||||
|
│ ├── formatters.ts # 格式化工具函数
|
||||||
|
│ │
|
||||||
|
│ ├── StockHeader.tsx # 头部：股票名称、代码、行业标签、操作按钮
|
||||||
|
│ ├── PriceDisplay.tsx # 价格区域：当前价格、涨跌幅 Badge
|
||||||
|
│ ├── SecondaryQuote.tsx # 次要行情：今开、昨收、最高、最低
|
||||||
|
│ ├── MetricRow.tsx # 指标行：标签 + 值的单行展示
|
||||||
|
│ ├── GlassSection.tsx # 玻璃容器：包装数据区块
|
||||||
|
│ ├── MainForceInfo.tsx # 主力动态：资金流向、机构持仓
|
||||||
|
│ ├── LoadingSkeleton.tsx # 加载骨架屏
|
||||||
|
│ │
|
||||||
|
│ ├── CompareStockInput.tsx # 股票对比输入框
|
||||||
|
│ └── StockCompareModal.tsx # 股票对比弹窗
|
||||||
|
│
|
||||||
|
└── hooks/ # 自定义 Hooks
|
||||||
|
├── index.ts # 统一导出
|
||||||
|
├── useStockQuoteData.ts # 获取股票行情数据
|
||||||
|
└── useStockCompare.ts # 股票对比逻辑
|
||||||
|
```
|
||||||
|
|
||||||
|
## 组件层级
|
||||||
|
|
||||||
|
```
|
||||||
|
StockQuoteCard
|
||||||
|
├── LoadingSkeleton # 加载中状态
|
||||||
|
│
|
||||||
|
└── Box (glassCardStyle) # 玻璃态容器
|
||||||
|
├── CardGlow # 装饰光效 (@components/FUI)
|
||||||
|
│
|
||||||
|
└── VStack # 内容区域
|
||||||
|
├── StockHeader # 头部
|
||||||
|
├── PriceDisplay # 价格
|
||||||
|
├── SecondaryQuote # 次要行情
|
||||||
|
│
|
||||||
|
└── Flex # 三列数据区块
|
||||||
|
├── GlassSection # 估值指标
|
||||||
|
│ └── MetricRow × 3
|
||||||
|
├── GlassSection # 市值股本
|
||||||
|
│ └── MetricRow × 3
|
||||||
|
└── GlassSection # 主力动态
|
||||||
|
└── MainForceInfo
|
||||||
|
```
|
||||||
|
|
||||||
|
## 主题系统
|
||||||
|
|
||||||
|
使用 `DEEP_SPACE_THEME` 深空主题：
|
||||||
|
|
||||||
|
| 类别 | 变量 | 说明 |
|
||||||
|
|------|------|------|
|
||||||
|
| 背景 | `bgGlass` | 玻璃态半透明背景 |
|
||||||
|
| 边框 | `borderGold` | 金色边框 |
|
||||||
|
| 文字 | `textPrimary` | 主文字（亮金色） |
|
||||||
|
| 涨跌 | `upColor` / `downColor` | 红涨绿跌 |
|
||||||
|
| 强调 | `gold` / `cyan` / `purple` | 强调色 |
|
||||||
|
| 发光 | `upGlow` / `downGlow` | 涨跌发光效果 |
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import StockQuoteCard from '@views/Company/components/StockQuoteCard';
|
||||||
|
|
||||||
|
<StockQuoteCard
|
||||||
|
stockCode="600000"
|
||||||
|
isInWatchlist={true}
|
||||||
|
isWatchlistLoading={false}
|
||||||
|
onWatchlistToggle={() => handleToggle()}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
| 属性 | 类型 | 必填 | 说明 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| `stockCode` | `string` | 是 | 股票代码 |
|
||||||
|
| `isInWatchlist` | `boolean` | 否 | 是否在自选股中 |
|
||||||
|
| `isWatchlistLoading` | `boolean` | 否 | 自选股操作加载中 |
|
||||||
|
| `onWatchlistToggle` | `() => void` | 否 | 切换自选股回调 |
|
||||||
Reference in New Issue
Block a user