vf_react/src/views/Company/components/MarketDataView

MarketDataView 组件

市场数据视图模块，展示交易数据、资金流向、大宗交易等市场信息。

目录结构

MarketDataView/
├── index.tsx                 # 主组件入口
├── types.ts                  # 类型定义
├── constants.ts              # 常量配置（黑金主题）
├── README.md                 # 本文档
│
├── hooks/
│   └── useMarketData.ts      # 市场数据获取（含 AbortController）
│
├── 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/   # 交易数据面板（K线模块）
│   │   │   ├── index.tsx     # 统一导出
│   │   │   ├── KLineModule.tsx # K线主模块（157行，memo优化）
│   │   │   ├── constants.ts  # 指标选项常量
│   │   │   ├── styles.ts     # 按钮样式常量
│   │   │   ├── MetricOverlaySearch.tsx # 指标叠加搜索
│   │   │   └── components/   # 子组件
│   │   │       ├── index.ts  # 统一导出
│   │   │       ├── KLineToolbar.tsx # 工具栏（模式切换、指标选择）
│   │   │       ├── DailyKLineChart.tsx # 日K图表（useMemo缓存）
│   │   │       └── MinuteChartWithOrderBook.tsx # 分时图+五档盘口
│   │   │
│   │   ├── FundingPanel.tsx  # 融资融券面板（memo优化）
│   │   ├── BigDealPanel.tsx  # 大宗交易面板（memo优化）
│   │   ├── UnusualPanel.tsx  # 龙虎榜面板（memo优化）
│   │   └── PledgePanel.tsx   # 股权质押面板（memo优化）
│   │
│   └── 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 黑金主题：

const darkGoldTheme = {
  bgCard: 'rgba(26, 32, 44, 0.95)',
  border: 'rgba(212, 175, 55, 0.3)',
  gold: '#D4AF37',
  green: '#00C851',
  red: '#FF4444',
  // ...
};

组件层级

MarketDataView
├── StockSummaryCard          # 股票概览
└── SubTabContainer           # Tab 容器
    ├── TradeDataPanel        # 交易数据
    │   └── KLineModule
    │       ├── KLineToolbar           # 工具栏
    │       ├── DailyKLineChart        # 日K图表
    │       └── MinuteChartWithOrderBook # 分时+盘口
    ├── FundingPanel          # 融资融券
    ├── BigDealPanel          # 大宗交易
    ├── UnusualPanel          # 龙虎榜
    └── PledgePanel           # 股权质押

性能优化

已实现的优化

优化项	说明
React.memo	所有 Panel 和子组件使用 memo 包装
useMemo	图表配置缓存，避免重复计算技术指标
useCallback	事件处理函数稳定化
AbortController	请求取消，防止内存泄漏
Tab 懒加载	切换 Tab 时按需加载数据

TradeDataPanel 重构

KLineModule 从 611 行精简至 157 行，拆分为独立子组件：

子组件	职责	行数
KLineToolbar	模式切换、指标选择、时间范围	275
DailyKLineChart	日K图表渲染、useMemo缓存	85
MinuteChartWithOrderBook	分时图、实时行情、五档盘口	212

使用示例

import MarketDataView from '@views/Company/components/MarketDataView';

<MarketDataView stockCode="600000" />

单独使用 K 线模块

import { KLineModule } from '@views/Company/components/MarketDataView/components/panels/TradeDataPanel';

<KLineModule
  tradeData={tradeData}
  minuteData={minuteData}
  analysisMap={analysisMap}
  onLoadMinuteData={loadMinuteData}
  onChartClick={handleChartClick}
  selectedPeriod={60}
  onPeriodChange={setPeriod}
  stockCode="600000"
/>

单独使用子组件

import {
  KLineToolbar,
  DailyKLineChart,
  MinuteChartWithOrderBook,
} from '@views/Company/components/MarketDataView/components/panels/TradeDataPanel';

// 仅工具栏
<KLineToolbar mode="daily" onModeChange={setMode} ... />

// 仅日K图表
<DailyKLineChart tradeData={data} analysisMap={map} subIndicator="MACD" ... />

// 仅分时图+盘口
<MinuteChartWithOrderBook minuteData={data} stockCode="600000" showOrderBook />