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

#### 关键状态变量：
```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. **文本内容** - 提示信息修改