diff --git a/src/views/Company/components/CompanyHeader/README.md b/src/views/Company/components/CompanyHeader/README.md new file mode 100644 index 00000000..bdf7afac --- /dev/null +++ b/src/views/Company/components/CompanyHeader/README.md @@ -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'; + + handleStockChange(code)} /> +``` + +## Props + +| 属性 | 类型 | 必填 | 说明 | +|------|------|------|------| +| `onStockChange` | `(code: string) => void` | 是 | 股票切换回调 | diff --git a/src/views/Company/components/CompanyOverview/README.md b/src/views/Company/components/CompanyOverview/README.md new file mode 100644 index 00000000..5ad026f6 --- /dev/null +++ b/src/views/Company/components/CompanyOverview/README.md @@ -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'; + + +``` diff --git a/src/views/Company/components/FinancialPanorama/README.md b/src/views/Company/components/FinancialPanorama/README.md new file mode 100644 index 00000000..f7a95d23 --- /dev/null +++ b/src/views/Company/components/FinancialPanorama/README.md @@ -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'; + + +``` diff --git a/src/views/Company/components/ForecastReport/README.md b/src/views/Company/components/ForecastReport/README.md new file mode 100644 index 00000000..981c6c3e --- /dev/null +++ b/src/views/Company/components/ForecastReport/README.md @@ -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'; + + +``` diff --git a/src/views/Company/components/MarketDataView/README.md b/src/views/Company/components/MarketDataView/README.md new file mode 100644 index 00000000..6d3a38cb --- /dev/null +++ b/src/views/Company/components/MarketDataView/README.md @@ -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'; + + +``` diff --git a/src/views/Company/components/StockQuoteCard/README.md b/src/views/Company/components/StockQuoteCard/README.md new file mode 100644 index 00000000..36bf8d4e --- /dev/null +++ b/src/views/Company/components/StockQuoteCard/README.md @@ -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'; + + handleToggle()} +/> +``` + +## Props + +| 属性 | 类型 | 必填 | 说明 | +|------|------|------|------| +| `stockCode` | `string` | 是 | 股票代码 | +| `isInWatchlist` | `boolean` | 否 | 是否在自选股中 | +| `isWatchlistLoading` | `boolean` | 否 | 自选股操作加载中 | +| `onWatchlistToggle` | `() => void` | 否 | 切换自选股回调 |