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

## 环境要求

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

## 本地开发

### 1. 安装依赖

```bash
cd /mnt/okcomputer/output/app
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

### 3. 构建生产版本

```bash
npm run build
```

## 核心组件详解

### KLineChart 组件

**文件**: `src/components/KLineChart.tsx`

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

**Props**:
```typescript
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（期货品种）

```typescript
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线数据）

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

### MACDData（MACD数据）

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

## 模拟数据生成

### K线数据生成

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

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

### MACD数据生成

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

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

## 样式规范

### 颜色系统

```css
/* 主色调 */
--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 处理大量计算