# 答题组件说明

本目录包含答题功能的子组件，从原来的 `Question.tsx` 大组件拆分而来。

## 组件列表

### 1. QuestionProgress.tsx
**功能**: 显示答题进度条和统计信息

**Props**:
- `currentIndex`: number - 当前题目索引
- `totalQuestions`: number - 总题目数
- `correctCount`: number - 正确题目数
- `wrongCount`: number - 错误题目数

**职责**:
- 显示当前答题进度（百分比和题号）
- 显示正确和错误的统计数量
- 使用渐变色进度条增强视觉效果

---

### 2. QuestionCard.tsx
**功能**: 显示单个题目的卡片，包含题目内容、选项和答案提交

**Props**:
- `question`: Question - 题目对象
- `selectedAnswer`: string | string[] - 选中的答案
- `showResult`: boolean - 是否显示答题结果
- `answerResult`: AnswerResult | null - 答题结果
- `loading`: boolean - 提交加载状态
- `autoNextLoading`: boolean - 自动下一题加载状态
- `onAnswerChange`: (answer: string | string[]) => void - 答案变更回调
- `onSubmit`: () => void - 提交答案回调
- `onNext`: () => void - 下一题回调

**职责**:
- 根据题目类型渲染不同的答题界面（单选、多选、填空、简答、判断）
- 处理填空题的特殊渲染逻辑
- 显示题目编号和分类标签
- 显示答案结果（使用 AnswerResult 组件）
- 提供提交和下一题按钮

---

### 3. AnswerResult.tsx
**功能**: 显示答题结果的Alert组件

**Props**:
- `answerResult`: AnswerResult - 答题结果对象
- `selectedAnswer`: string | string[] - 用户选择的答案
- `questionType`: string - 题目类型

**职责**:
- 显示正确或错误的提示图标和颜色
- 显示用户答案和正确答案
- 显示答案解析（如果有）
- 特殊处理判断题的答案显示（true/false → 正确/错误）

---

### 4. CompletionSummary.tsx
**功能**: 完成所有题目后的统计摘要弹窗

**Props**:
- `visible`: boolean - 弹窗是否可见
- `totalQuestions`: number - 总题目数
- `correctCount`: number - 正确数
- `wrongCount`: number - 错误数
- `category`: string | undefined - 题目类型分类
- `onClose`: () => void - 关闭回调（返回首页）
- `onRetry`: () => void - 重新开始回调

**职责**:
- 显示完成奖杯图标
- 展示本次答题的完整统计数据
- 计算并显示正确率（根据正确率显示不同颜色）
- 提供返回首页和重新开始两个操作

---

## 组件拆分的优势

1. **单一职责**: 每个组件只负责一个特定的功能
2. **可维护性**: 更容易定位和修改问题
3. **可测试性**: 每个组件可以独立测试
4. **可复用性**: 组件可以在其他页面复用
5. **代码清晰**: 主组件 Question.tsx 从 600+ 行缩减到 300 行左右

## 主组件 Question.tsx

**保留职责**:
- 状态管理（题目、答案、进度等）
- 业务逻辑（加载题目、提交答案、保存进度等）
- API 调用
- 组件组合和布局

**文件大小变化**:
- 重构前: ~605 行
- 重构后: ~303 行
- 减少: ~50%

## 使用示例

```tsx
// 在 Question.tsx 中使用
<QuestionProgress
  currentIndex={currentIndex}
  totalQuestions={allQuestions.length}
  correctCount={correctCount}
  wrongCount={wrongCount}
/>

<QuestionCard
  question={currentQuestion}
  selectedAnswer={selectedAnswer}
  showResult={showResult}
  answerResult={answerResult}
  loading={loading}
  autoNextLoading={autoNextLoading}
  onAnswerChange={setSelectedAnswer}
  onSubmit={handleSubmit}
  onNext={handleNext}
/>

<CompletionSummary
  visible={showSummary}
  totalQuestions={allQuestions.length}
  correctCount={correctCount}
  wrongCount={wrongCount}
  category={currentQuestion?.category}
  onClose={() => navigate("/")}
  onRetry={handleRetry}
/>
```