de8480a328
主要改动： 1. 组件拆分：将Question.tsx(605行)拆分为4个子组件(303行) - QuestionProgress: 进度条和统计显示 - QuestionCard: 题目卡片和答题界面 - AnswerResult: 答案结果展示 - CompletionSummary: 完成统计摘要 2. 新增功能： - 答题进度条：显示当前进度、正确数、错误数 - 进度保存：使用localStorage持久化答题进度 - 完成统计：答完所有题目后显示统计摘要和正确率 - 从第一题开始：改为顺序答题而非随机 3. UI优化： - 移除右上角统计按钮 - 移除底部随机题目、题目列表、筛选按钮 - 移除"开始xxx答题"提示消息 - 简化页面布局 4. 代码优化： - 提高代码可维护性和可测试性 - 单一职责原则，每个组件负责一个特定功能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
136 lines
3.7 KiB
Markdown
136 lines
3.7 KiB
Markdown
# 答题组件说明
|
||
|
||
本目录包含答题功能的子组件，从原来的 `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}
|
||
/>
|
||
```
|