AlphaFuturesProMax/docs/02-开发文档.md

智能期货期权分析系统 - 开发文档

环境要求

• Node.js 20+
• npm 10+
• 现代浏览器（Chrome/Firefox/Safari/Edge）

本地开发

1. 安装依赖

cd /mnt/okcomputer/output/app
npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

核心组件详解

KLineChart 组件

文件: src/components/KLineChart.tsx

功能: 绘制K线图、成交量、MACD指标

Props:

interface KLineChartProps {
  klineData: KLineData[];      // K线数据
  macdData: MACDData[];        // MACD数据
  resistance: number[];        // 压力位
  support: number[];           // 支撑位
  height?: number;             // 图表高度
}

实现要点:

• 使用 ECharts 绘制三图联动（K线+成交量+MACD）
• 支持鼠标悬停十字光标
• 压力位/支撑位水平线标注
• 移动平均线计算与绘制

MarketOverview 组件

文件: src/components/MarketOverview.tsx

功能: 展示市场核心指标卡片

特性:

• 数字滚动动画
• 迷你趋势图
• 涨跌颜色区分

HotEvents 组件

文件: src/components/HotEvents.tsx

功能: 热点事件列表与智能分析

特性:

• 事件列表与详情面板联动
• 影响等级星级显示
• 利多/利空/中性标签

ProductCard 组件

文件: src/components/ProductCard.tsx

功能: 品种卡片展示

特性:

• 多周期趋势标签
• 成功率进度条
• 关键点位显示
• 交易建议标签

ProductDetail 组件

文件: src/components/ProductDetail.tsx

功能: 品种详细分析页面

特性:

• 周期切换（5/15/30/60分钟）
• K线图展示
• 技术指标汇总
• 交易建议
• 多周期一致性分析

数据类型定义

FuturesProduct（期货品种）

interface FuturesProduct {
  id: string;
  name: string;           // 品种名称
  code: string;           // 品种代码
  category: string;       // 分类
  price: number;          // 当前价格
  change: number;         // 涨跌额
  changePercent: number;  // 涨跌幅
  trendScore: number;     // 趋势评分
  successRate: number;    // 成功率
  cycles: {               // 各周期趋势
    m5: TrendDirection;
    m15: TrendDirection;
    m30: TrendDirection;
    m60: TrendDirection;
  };
  keyLevels: {            // 关键点位
    resistance: number[];
    support: number[];
  };
  recommendation: 'long' | 'short' | 'wait';
  recommendationReason: string;
}

KLineData（K线数据）

interface KLineData {
  time: string;   // 时间
  open: number;   // 开盘价
  high: number;   // 最高价
  low: number;    // 最低价
  close: number;  // 收盘价
  volume: number; // 成交量
}

MACDData（MACD数据）

interface MACDData {
  time: string;
  dif: number;
  dea: number;
  macd: number;   // 柱状图值
}

模拟数据生成

K线数据生成

function generateKLineData(basePrice: number, count: number = 100): KLineData[]

算法:

1. 基于基础价格生成随机波动
2. 波动幅度为基础价格的0.8%
3. 生成高开低收四价

MACD数据生成

function generateMACDData(klineData: KLineData[]): MACDData[]

算法:

1. 计算EMA12和EMA26
2. DIF = EMA12 - EMA26
3. DEA = EMA(DIF, 9)
4. MACD = (DIF - DEA) × 2

样式规范

颜色系统

/* 主色调 */
--bg-primary: #09090b;      /* 背景色 */
--color-primary: #7dd75a;    /* 主色（绿） */
--color-secondary: #0d5d1b;  /* 次色（深绿） */
--color-accent: #e6e6e6;     /* 强调色 */

/* 功能色 */
--color-up: #7dd75a;         /* 上涨/利多 */
--color-down: #ef4444;       /* 下跌/利空 */
--color-neutral: #a1a1aa;    /* 中性 */
--color-warning: #f59e0b;    /* 警告 */

字体规范

• 主字体: Inter, sans-serif
• 数字字体: JetBrains Mono, monospace
• 正文: 16px
• 标题: 20-40px
• 小字: 14px

性能优化

已实现

1. 组件懒加载: 图表组件按需加载
2. 动画优化: CSS动画优先，减少JS计算
3. 数据缓存: 模拟数据本地缓存

建议优化

1. 虚拟滚动（长列表）
2. 图表数据分页加载
3. Web Worker 处理大量计算