file-starter/.claude/commands/check-移动端股票图表检查.md

---

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. 数据流架构

// 数据获取流程
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. 核心类型定义

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错误处理

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

2. WebSocket错误处理

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

3. 用户输入验证

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