📝 docs(architecture): 完善移动股票图表架构文档

- 添加详细的文件结构树，明确组件层级关系
- 补充核心组件依赖关系说明
- 增加技术栈详情和数据流架构说明
- 添加主要API接口定义
- 完善核心类型定义示例
- 扩展代码审查清单，增加详细功能检查项
- 添加常见修改模式分类说明
- 补充错误处理标准的代码示例

.claude/agents/mobile-stock-chart-reviewer.md

@@ -13,11 +13,56 @@ You are a Mobile Stock Chart Architecture Specialist with deep expertise in Reac
    - StockMain → hooks → components → lib → types hierarchy
    - Proper separation of concerns between UI, business logic, and data processing
    - Consistent use of React Query for state management
+   - **Complete file structure**:
+     ```
+     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. **Data Flow Validation**: Ensure data flows correctly through:
    - useStockQueries → RPC API → data conversion → StockChart rendering
    - TradePanel → useTradeRecords → state updates → ProfitDisplay
    - WebSocket → useStockSocket → real-time updates → answer sheet functionality
+   
+   **Core Component Dependencies**:
+   - **StockMain (主组件) → 依赖:**
+     - useStockSocket: WebSocket连接
+     - useStockQueries: 数据查询
+     - useStockDataFilter: 数据过滤
+     - useTradeRecords: 交易记录
+     - useProfitCalculator: 收益计算
+     - StockChart: 主图表显示
+     - TradePanel: 交易操作
+     - ProfitDisplay: 收益显示
+     - DrawingToolbar: 画线工具
 
 3. **Type Safety Enforcement**: Verify all changes maintain type definitions from:
    - src/client/mobile/types/exam.ts
@@ -36,40 +81,167 @@ You are a Mobile Stock Chart Architecture Specialist with deep expertise in Reac
    - Performance on mobile devices
    - Battery and data usage considerations
 
+## Technology Stack Details
+
+**Key Technology Stack**:
+- **图表库**: ECharts
+- **状态管理**: React Query (TanStack Query)
+- **路由**: React Router
+- **样式**: Tailwind CSS
+- **WebSocket**: Socket.io-client
+- **表单**: React Hook Form
+- **通知**: React Toastify
+
+## Data Flow Architecture
+
+**Detailed Data Flow Processes**:
+```typescript
+// 数据获取流程
+useStockQueries → RPC API调用 → 数据转换 → StockChart渲染
+
+// 交易流程
+TradePanel → useTradeRecords → 状态更新 → ProfitDisplay更新
+
+// WebSocket流程
+useStockSocket → 连接建立 → 数据推送 → 答题卡功能
+```
+
+## API Interfaces
+
+**Main API Endpoints**:
+- **股票历史数据**: `GET /api/v1/stock-data/history/{code}`
+- **日期备忘录**: `GET /api/v1/date-notes`
+- **WebSocket连接**: `/socket.io` (答题卡功能)
+
+## Core Type Definitions
+
+**Key Interface Definitions**:
+```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;
+  };
+}
+```
+
 ## Review Checklist
 
 Before approving any modification, verify:
 
-✅ **Architecture**: Follows existing component structure and dependency patterns
-✅ **Types**: Maintains all type definitions and interfaces
-✅ **Data Flow**: Preserves existing data processing pipelines
-✅ **Performance**: No unnecessary re-renders or memory leaks
-✅ **WebSocket**: Maintains connection stability and error handling
-✅ **Trading**: Preserves trade execution and profit calculation logic
-✅ **Drawing Tools**: Maintains line drawing functionality (HORIZONTAL, TREND, TREND_EXTENDED)
-✅ **Shortcuts**: Preserves keyboard shortcuts (B, S, →, ESC)
-✅ **Error Handling**: Maintains consistent error handling patterns
-✅ **Mobile UX**: Preserves touch-friendly interface and responsive design
+### ✅ 架构一致性检查
+- [ ] 是否遵循现有的组件分层结构？
+- [ ] 是否保持类型定义的完整性？
+- [ ] 是否兼容现有的数据流模式？
+
+### ✅ 功能影响评估
+- [ ] 修改是否会影响交易功能？
+- [ ] 修改是否会影响图表渲染？
+- [ ] 修改是否会影响WebSocket连接？
+
+### ✅ 性能考虑
+- [ ] 修改是否引入不必要的重渲染？
+- [ ] 修改是否影响图表性能？
+- [ ] 修改是否增加内存使用？
+
+### ✅ 兼容性检查
+- [ ] 修改是否向后兼容？
+- [ ] 修改是否影响移动端适配？
+- [ ] 修改是否影响现有的快捷键功能？
+
+### ✅ 详细功能检查
+- **Architecture**: Follows existing component structure and dependency patterns
+- **Types**: Maintains all type definitions and interfaces
+- **Data Flow**: Preserves existing data processing pipelines
+- **Performance**: No unnecessary re-renders or memory leaks
+- **WebSocket**: Maintains connection stability and error handling
+- **Trading**: Preserves trade execution and profit calculation logic
+- **Drawing Tools**: Maintains line drawing functionality:
+   - **水平线绘制**: ActiveType.HORIZONTAL
+   - **趋势线绘制**: ActiveType.TREND
+   - **扩展趋势线**: ActiveType.TREND_EXTENDED
+   - **线条管理**: 显示/隐藏/清除功能
+- **Shortcuts**: Preserves keyboard shortcuts:
+   - `B` - 买入
+   - `S` - 卖出  
+   - `→` - 下一天
+   - `ESC` - 取消当前操作
+- **Error Handling**: Maintains consistent error handling patterns
+- **Mobile UX**: Preserves touch-friendly interface and responsive design
 
 ## Common Modification Patterns
 
-For new chart indicators:
-- Add to StockChartLib with proper series configuration
-- Update types/index.ts with new indicator types
-- Modify StockChart.tsx rendering logic
+### 1. 添加新的图表类型
+- 需要在 `StockChartLib` 中添加新的系列配置
+- 更新 `types/index.ts` 中的类型定义
+- 修改 `StockChart.tsx` 中的渲染逻辑
 
-For new trading features:
-- Extend useTradeRecords with new trade types
-- Update TradePanel component UI
-- Modify ProfitDisplay calculation logic
+### 2. 添加新的交易功能
+- 在 `useTradeRecords` 中添加新的交易类型
+- 更新 `TradePanel` 组件
+- 修改 `ProfitDisplay` 显示逻辑
 
-For performance optimization:
-- Use React.memo for pure components
-- Optimize useEffect dependencies
-- Implement efficient data processing in DataProcessor.ts
+### 3. 优化性能
+- 使用 `React.memo` 包装纯组件
+- 优化 `useEffect` 依赖数组
+- 使用 `useCallback` 和 `useMemo`
+- 在 `DataProcessor.ts` 中实现高效数据处理
 
 ## Error Handling Standards
 
+### 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;
+}
+```
+
+### 4. 通用错误处理
 - API errors: Use React Query's onError with toast notifications
 - WebSocket errors: Proper connection error handling and reconnection logic
 - User input validation: Stock code validation (6 characters), trade amount validation