2
0
Просмотр исходного кода

📝 docs(mobile-exam-card): add mobile exam card component documentation

- create component documentation for mobile exam card
- document core file structure and main features
- detail state management and Socket event handling
- list potential modification risk points and testing considerations
- provide usage instructions for check command
yourname 6 месяцев назад
Родитель
Сommit
190cf814b9
1 измененных файлов с 176 добавлено и 0 удалено
  1. 176 0
      .roo/commands/check-移动端答题卡检查.md

+ 176 - 0
.roo/commands/check-移动端答题卡检查.md

@@ -0,0 +1,176 @@
+# 移动端答题卡组件检查指令
+
+## 描述
+此指令用于在修改移动端答题卡组件前提供完整的上下文信息,包括组件结构、关键功能、依赖关系和潜在风险点。
+
+## 使用方式
+- `/check mobile-exam-card` - 检查移动端答题卡组件状态
+- `/check mobile-exam-card --detail` - 显示详细组件信息
+- `/check mobile-exam-card --dependencies` - 检查依赖关系
+
+## 组件概述
+
+### 1. 核心文件结构
+```
+src/client/mobile/components/Exam/
+├── ExamCard.tsx          # 答题卡主组件
+├── ExamAdmin.tsx         # 答题卡管理组件  
+├── ExamIndex.tsx         # 答题卡入口页面
+├── types.ts              # 类型定义
+└── hooks/
+    └── useSocketClient.ts # Socket连接Hook
+```
+
+### 2. 主要功能特性
+
+#### ExamCard.tsx 核心功能:
+- **用户答题界面**:A/B选项选择(持股/持币)
+- **实时数据同步**:通过Socket.io连接服务器
+- **收益计算**:自动计算累计收益率
+- **历史记录显示**:展示用户答题历史
+- **状态管理**:训练开始/结束状态控制
+
+#### 关键状态变量:
+```typescript
+const [currentDate, setCurrentDate] = useState('');        // 当前训练日期
+const [currentPrice, setCurrentPrice] = useState('0');     // 当前价格
+const [holdingStock, setHoldingStock] = useState('0');     // 持股状态
+const [holdingCash, setHoldingCash] = useState('0');       // 持币状态
+const [isStarted, setIsStarted] = useState(false);         // 训练开始状态
+const [answerRecords, setAnswerRecords] = useState<AnswerRecord[]>([]); // 答题记录
+const [totalProfitRate, setTotalProfitRate] = useState(0); // 累计收益率
+```
+
+### 3. Socket事件处理
+
+#### 监听的事件:
+- `exam:question` - 新问题推送
+- `exam:cleaned` - 训练重置
+- `exam:settle` - 结算处理
+
+#### 发送的事件:
+- 通过 `answerManagement.storeAnswer()` 提交答案
+- 通过 Socket 连接状态管理
+
+### 4. 依赖关系检查
+
+#### 前端依赖:
+```typescript
+import React, { useState, useCallback, useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useSearchParams, useNavigate } from "react-router";
+import dayjs from 'dayjs';
+import { useSocketClient } from './hooks/useSocketClient';
+import { classroomDataClient } from '@/client/api';
+import { useAuth } from '@/client/mobile/hooks/AuthProvider';
+import { ClassroomStatus } from '@/server/modules/classroom/classroom-data.schema';
+import { toast } from 'react-toastify';
+```
+
+#### API客户端:
+- `classroomDataClient` - 教室数据查询
+- Socket客户端 - 实时通信
+
+### 5. 关键业务逻辑
+
+#### 答案提交逻辑:
+```typescript
+const handleChooseA = useCallback(async () => {
+  setHoldingStock('1');
+  setHoldingCash('0');
+  
+  if (classroom && user?.username && currentDate) {
+    const answer = {
+      date: currentDate,
+      holdingStock: '1',
+      holdingCash: '0',
+      userId: user.id,
+      username: user.username,
+      price: currentPrice
+    };
+    
+    await answerManagement.storeAnswer(...);
+  }
+}, [classroom, user, currentDate, currentPrice, answerManagement]);
+```
+
+#### 收益计算:
+```typescript
+// 计算累计收益率(单日涨幅相加)
+const totalRate = answers.reduce((sum, answer) => sum + (answer.profitPercent || 0), 0);
+setTotalProfitRate(totalRate);
+```
+
+### 6. UI组件结构
+
+#### 主要UI区块:
+1. **连接状态提示** - Socket连接状态显示
+2. **选择按钮区域** - A/B选项按钮
+3. **信息显示区域** - 用户信息和累计收益
+4. **历史记录表格** - 答题历史记录展示
+
+#### 样式类名:
+- 使用Tailwind CSS类名
+- 响应式设计:`max-w-2xl`, `grid grid-cols-6`
+- 状态颜色:红色(持股)、绿色(持币)
+
+### 7. 潜在修改风险点
+
+#### 高风险区域:
+1. **Socket事件处理** - 修改可能影响实时通信
+2. **状态管理** - 多个useState需要保持同步
+3. **收益计算逻辑** - 影响用户收益显示
+
+#### 中等风险区域:
+1. **UI布局** - 修改可能影响移动端显示
+2. **API调用** - 教室数据获取逻辑
+
+#### 低风险区域:
+1. **样式调整** - 颜色、间距等视觉修改
+2. **文本内容** - 提示信息修改
+
+### 8. 测试要点
+
+#### 功能测试:
+- [ ] A/B选项选择功能
+- [ ] Socket连接状态显示
+- [ ] 收益计算准确性
+- [ ] 历史记录显示正确性
+- [ ] 训练开始/结束状态切换
+
+#### 兼容性测试:
+- [ ] 移动端浏览器兼容性
+- [ ] 不同屏幕尺寸适配
+- [ ] Socket连接稳定性
+
+### 9. 部署注意事项
+
+1. **Socket服务器**:确保Socket.io服务器正常运行
+2. **API服务**:教室数据API可用性
+3. **移动端优化**:触摸事件处理和性能优化
+
+## 修改建议
+
+### 安全修改:
+- 样式调整(颜色、字体、间距)
+- 文本内容国际化
+- 添加loading状态显示
+
+### 需要谨慎修改:
+- Socket事件处理逻辑
+- 状态管理逻辑
+- 收益计算算法
+
+### 需要测试验证:
+- 任何涉及Socket通信的修改
+- 状态管理的变更
+- UI布局的重大调整
+
+## 版本历史
+- v1.0.0 (2024-01-01): 初始版本,基础答题卡功能
+- v1.1.0 (2024-02-01): 添加收益计算和历史记录
+
+## 相关文档
+- [Socket通信协议](../docs/socket-protocol.md)
+- [API接口文档](../docs/api.md)
+- [移动端开发规范](../docs/mobile-dev-guide.md)