file-starter/.claude/commands/check-移动端答题卡检查.md

---

description: "移动端答题卡组件检查指令"

此指令用于在修改移动端答题卡组件前提供完整的上下文信息，包括组件结构、关键功能、依赖关系和潜在风险点。

组件概述

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连接服务器
• 收益计算：自动计算累计收益率
• 历史记录显示：展示用户答题历史
• 状态管理：训练开始/结束状态控制

关键状态变量：

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. 依赖关系检查

前端依赖：

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. 关键业务逻辑

答案提交逻辑：

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]);

收益计算：

// 计算累计收益率（单日涨幅相加）
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. 文本内容 - 提示信息修改