|
|
|
|
|
# 智能期货期权分析系统 - 开发文档
|
|
|
|
|
|
|
|
|
|
|
|
## 环境要求
|
|
|
|
|
|
|
|
|
|
|
|
- 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 处理大量计算
|
