---
description: "移动端股票图表检查指令"
---

此指令用于在修改移动端股票图表组件前提供完整的上下文检查，包括组件结构、依赖关系、API接口和关键实现细节。

## 当前组件结构

### 1. 主要文件结构
```
src/client/mobile/components/stock/
├── stock_main.tsx              # 主入口组件
├── hooks/
│   └── useStockSocketClient.ts # WebSocket连接hook
├── components/
│   └── stock-chart/            # 股票图表核心组件
│       ├── mod.ts              # 模块导出文件
│       └── src/
│           ├── components/     # UI组件
│           │   ├── StockChart.tsx      # 主图表组件
│           │   ├── MemoToggle.tsx      # 备忘录显示切换
│           │   ├── TradePanel.tsx      # 交易面板
│           │   ├── ProfitDisplay.tsx   # 收益显示
│           │   └── DrawingToolbar.tsx  # 画线工具栏
│           ├── hooks/          # 自定义hooks
│           │   ├── useStockQueries.ts      # 数据查询hook
│           │   ├── useTradeRecords.ts      # 交易记录hook
│           │   ├── useProfitCalculator.ts  # 收益计算hook
│           │   └── useStockDataFilter.ts   # 数据过滤hook
│           ├── lib/            # 核心库
│           │   ├── index.ts                # 主库入口
│           │   ├── StockChart.ts           # 图表逻辑
│           │   ├── DateMemoHandler.ts      # 日期备忘录处理
│           │   ├── config/ChartBaseConfig.ts # 图表配置
│           │   ├── drawing/                # 绘图工具
│           │   └── data/DataProcessor.ts   # 数据处理
│           └── types/          # 类型定义
│               └── index.ts    # 所有类型定义
└── types/
    └── exam.ts                 # 考试相关类型
```

### 2. 核心组件依赖关系

**StockMain (主组件) → 依赖:**
- useStockSocket: WebSocket连接
- useStockQueries: 数据查询
- useStockDataFilter: 数据过滤
- useTradeRecords: 交易记录
- useProfitCalculator: 收益计算
- StockChart: 主图表显示
- TradePanel: 交易操作
- ProfitDisplay: 收益显示
- DrawingToolbar: 画线工具

### 3. 关键技术栈
- **图表库**: ECharts
- **状态管理**: React Query (TanStack Query)
- **路由**: React Router
- **样式**: Tailwind CSS
- **WebSocket**: Socket.io-client
- **表单**: React Hook Form
- **通知**: React Toastify

## 关键实现细节

### 1. 数据流架构
```typescript
// 数据获取流程
useStockQueries → RPC API调用 → 数据转换 → StockChart渲染

// 交易流程
TradePanel → useTradeRecords → 状态更新 → ProfitDisplay更新

// WebSocket流程
useStockSocket → 连接建立 → 数据推送 → 答题卡功能
```

### 2. 主要API接口
- **股票历史数据**: `GET /api/v1/stock-data/history/{code}`
- **日期备忘录**: `GET /api/v1/date-notes`
- **WebSocket连接**: `/socket.io` (答题卡功能)

### 3. 核心类型定义
```typescript
interface StockData {
  o: string; // 开盘价
  c: string; // 收盘价
  h: string; // 最高价
  l: string; // 最低价
  v: string; // 成交量
  d: string; // 日期
  zd: string; // 涨跌幅
}

interface TradeRecord {
  type: 'BUY' | 'SELL';
  price: number;
  timestamp: number;
  date: string;
}

interface ProfitSummary {
  totalProfit: number;
  dailyStats: {
    date: string;
    open: number;
    high: number;
    close: number;
    low: number;
    change: number;
  };
}
```

### 4. 绘图功能支持
- **水平线绘制**: ActiveType.HORIZONTAL
- **趋势线绘制**: ActiveType.TREND
- **扩展趋势线**: ActiveType.TREND_EXTENDED
- **线条管理**: 显示/隐藏/清除

### 5. 快捷键支持
- `B` - 买入
- `S` - 卖出  
- `→` - 下一天
- `ESC` - 取消当前操作

## 修改前检查清单

### ✅ 架构一致性检查
- [ ] 是否遵循现有的组件分层结构？
- [ ] 是否保持类型定义的完整性？
- [ ] 是否兼容现有的数据流模式？

### ✅ 功能影响评估
- [ ] 修改是否会影响交易功能？
- [ ] 修改是否会影响图表渲染？
- [ ] 修改是否会影响WebSocket连接？

### ✅ 性能考虑
- [ ] 修改是否引入不必要的重渲染？
- [ ] 修改是否影响图表性能？
- [ ] 修改是否增加内存使用？

### ✅ 兼容性检查
- [ ] 修改是否向后兼容？
- [ ] 修改是否影响移动端适配？
- [ ] 修改是否影响现有的快捷键功能？

## 常见修改场景

### 1. 添加新的图表类型
- 需要在 `StockChartLib` 中添加新的系列配置
- 更新 `types/index.ts` 中的类型定义
- 修改 `StockChart.tsx` 中的渲染逻辑

### 2. 添加新的交易功能
- 在 `useTradeRecords` 中添加新的交易类型
- 更新 `TradePanel` 组件
- 修改 `ProfitDisplay` 显示逻辑

### 3. 优化性能
- 使用 `React.memo` 包装纯组件
- 优化 `useEffect` 依赖数组
- 使用 `useCallback` 和 `useMemo`

## 错误处理规范

### 1. API错误处理
```typescript
// 使用React Query的错误处理
const { error } = useQuery({
  queryKey: ['stockData'],
  queryFn: fetchData,
  onError: (error) => {
    toast.error(`数据加载失败: ${error.message}`);
  }
});
```

### 2. WebSocket错误处理
```typescript
// WebSocket连接错误
socket.on('error', (err) => {
  console.error('Socket error:', err);
  setError(err);
});
```

### 3. 用户输入验证
```typescript
// 股票代码验证
if (!stockCode || stockCode.trim().length !== 6) {
  toast.error('请输入有效的6位股票代码');
  return;
}
```