📝 docs(commands): add mobile stock chart check documentation

- create new documentation for mobile stock chart component context checking
- include component structure, dependency relationships and key implementation details
- add modification checklist and common modification scenarios
- document testing points and error handling specifications
- provide deployment considerations and version history information

.roo/commands/check-移动端股票图表检查.md

@@ -0,0 +1,273 @@
+# 移动端股票图表检查指令
+
+## 描述
+
+此指令用于在修改移动端股票图表组件前提供完整的上下文检查，包括组件结构、依赖关系、API接口和关键实现细节。
+
+## 使用方式
+
+在修改移动端股票图表相关代码前运行此指令，获取完整的上下文信息：
+
+```bash
+# 检查整个移动端股票图表结构
+/check mobile-stock-chart
+
+# 检查特定组件
+/check mobile-stock-chart component StockChart
+```
+
+## 当前组件结构
+
+### 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   # 数据处理
+│           ├── services/       # API服务
+│           │   └── api.ts      # API客户端
+│           └── 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 → 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`
+
+### 4. 添加新的API集成
+- 在 `services/api.ts` 中添加新的客户端方法
+- 创建对应的hook（如 `useXXXQueries`）
+- 更新类型定义
+
+## 测试要点
+
+### 单元测试覆盖
+- [ ] 图表渲染正确性
+- [ ] 交易逻辑正确性  
+- [ ] 收益计算准确性
+- [ ] WebSocket连接稳定性
+
+### 集成测试
+- [ ] 组件间数据流
+- [ ] 用户交互流程
+- [ ] 错误处理机制
+
+### 性能测试
+- [ ] 大数据量下的图表性能
+- [ ] 频繁交易时的响应速度
+- [ ] WebSocket消息处理效率
+
+## 错误处理规范
+
+### 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;
+}
+```
+
+## 部署注意事项
+
+### 1. 环境变量配置
+- `VITE_API_BASE_URL`: API基础地址
+- `VITE_WS_URL`: WebSocket服务器地址
+
+### 2. 构建优化
+- ECharts按需引入
+- 代码分割和懒加载
+- 图片和资源优化
+
+### 3. 监控和日志
+- 错误边界处理
+- 性能监控
+- 用户行为跟踪
+
+## 版本历史
+
+### v1.0.0 (当前版本)
+- 基础K线图表功能
+- 交易买卖功能
+- 收益计算显示
+- 画线工具支持
+- WebSocket答题卡集成
+
+## 相关文档
+
+- [ECharts配置文档](https://echarts.apache.org/zh/option.html)
+- [React Query使用指南](https://tanstack.com/query/latest)
+- [Socket.io客户端文档](https://socket.io/docs/v4/client-api)
+- [Tailwind CSS类名参考](https://tailwindcss.com/docs)
+
+## 支持联系方式
+
+如遇问题或需要进一步的技术支持，请联系：
+- 前端开发团队
+- 技术负责人
+- 项目文档维护者