|
@@ -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)
|