feat: 错题练习模式添加重新答题功能

- 在QuestionCard组件中添加重新答题按钮
- 仅在错题练习模式(mode=wrong)且答案错误时显示
- 点击后重置当前题目状态,清空答案,允许重新作答
- 添加ReloadOutlined图标提升用户体验

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
燕陇琪 2025-11-12 22:07:35 +08:00
parent 72d3ca0660
commit 42c54ec90a
2 changed files with 41 additions and 3 deletions

View File

@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'
import { Space, Tag, Typography, Radio, Checkbox, Input, Button } from 'antd'
import { ReloadOutlined } from '@ant-design/icons'
import type { Question, AnswerResult as AnswerResultType } from '../types/question'
import AnswerResult from './AnswerResult'
import styles from '../pages/Question.module.less'
@ -17,6 +18,8 @@ interface QuestionCardProps {
onAnswerChange: (answer: string | string[]) => void
onSubmit: () => void
onNext: () => void
onRetry?: () => void // 新增:重新答题回调
mode?: string // 新增:答题模式(用于判断是否是错题练习)
}
const QuestionCard: React.FC<QuestionCardProps> = ({
@ -29,6 +32,8 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
onAnswerChange,
onSubmit,
onNext,
onRetry,
mode,
}) => {
const [fillAnswers, setFillAnswers] = useState<string[]>([])
@ -187,9 +192,23 @@ const QuestionCard: React.FC<QuestionCardProps> = ({
</Button>
) : (
<Space direction="vertical" style={{ width: '100%' }} size="middle">
{/* 如果是错题练习模式且答案错误,显示重新答题按钮 */}
{mode === 'wrong' && !answerResult?.correct && onRetry && (
<Button
type="default"
size="large"
block
icon={<ReloadOutlined />}
onClick={onRetry}
>
</Button>
)}
<Button type="primary" size="large" block onClick={onNext} loading={autoNextLoading}>
{autoNextLoading ? '正在跳转到下一题...' : '下一题'}
</Button>
</Space>
)}
</div>
</div>

View File

@ -452,6 +452,23 @@ const QuestionPage: React.FC = () => {
loadQuestions(typeParam || undefined);
};
// 重新答题(错题练习模式)
const handleRetryQuestion = () => {
// 重置当前题目的答题状态
setShowResult(false);
setAnswerResult(null);
// 重置答案
if (currentQuestion) {
setSelectedAnswer(
currentQuestion.type === "multiple-selection" ? [] : ""
);
}
// 滚动到页面顶部
window.scrollTo({ top: 0, behavior: 'smooth' });
};
return (
<div className={styles.container}>
{/* 固定顶栏:包含导航和进度 */}
@ -503,6 +520,8 @@ const QuestionPage: React.FC = () => {
onAnswerChange={setSelectedAnswer}
onSubmit={handleSubmit}
onNext={handleNext}
onRetry={handleRetryQuestion}
mode={searchParams.get("mode") || undefined}
/>
)}
</div>