diff --git a/src/pages/PerformanceDomainPracticePage.tsx b/src/pages/PerformanceDomainPracticePage.tsx index 191407a..20eefdd 100644 --- a/src/pages/PerformanceDomainPracticePage.tsx +++ b/src/pages/PerformanceDomainPracticePage.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { motion } from 'framer-motion' import { Link } from 'react-router-dom' import clsx from 'clsx' @@ -48,6 +48,7 @@ interface AnswerState { } const STORAGE_KEY = 'performance-domain-practice-progress-v3' +const CORRECT_AUTO_NEXT_DELAY = 1000 const scopeOptions: Array<{ value: PracticeScope; label: string }> = [ { value: 'all', label: '全部' }, @@ -189,6 +190,7 @@ export default function PerformanceDomainPracticePage() { ) const [answerState, setAnswerState] = useState(null) const [showCelebration, setShowCelebration] = useState(false) + const autoNextTimerRef = useRef(null) const currentQuestionId = progress.queue[0] ?? null const currentQuestion = currentQuestionId @@ -219,7 +221,30 @@ export default function PerformanceDomainPracticePage() { if (isFinished) setShowCelebration(true) }, [isFinished]) + useEffect(() => { + if (!answerState?.isCorrect) return + + if (autoNextTimerRef.current) { + window.clearTimeout(autoNextTimerRef.current) + } + + autoNextTimerRef.current = window.setTimeout(() => { + advanceToNext(true) + }, CORRECT_AUTO_NEXT_DELAY) + + return () => { + if (autoNextTimerRef.current) { + window.clearTimeout(autoNextTimerRef.current) + autoNextTimerRef.current = null + } + } + }, [answerState]) + const restartPractice = (scope = progress.scope) => { + if (autoNextTimerRef.current) { + window.clearTimeout(autoNextTimerRef.current) + autoNextTimerRef.current = null + } setProgress(createProgress(scope, questionBank)) setAnswerState(null) setShowCelebration(false) @@ -233,6 +258,10 @@ export default function PerformanceDomainPracticePage() { const advanceToNext = (isCorrect: boolean) => { if (!currentQuestionId) return + if (autoNextTimerRef.current) { + window.clearTimeout(autoNextTimerRef.current) + autoNextTimerRef.current = null + } setAnswerState(null) setProgress((prev) => { if (prev.queue[0] !== currentQuestionId) return prev @@ -295,7 +324,7 @@ export default function PerformanceDomainPracticePage() { 'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20', isAnswerShown && 'cursor-default hover:bg-white dark:hover:bg-gray-800', shouldHighlightCorrect && - 'border-emerald-400 bg-emerald-50 ring-2 ring-emerald-300/80 dark:border-emerald-500 dark:bg-emerald-950/30 dark:ring-emerald-700/70', + 'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]', isWrongSelected && 'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/30' )}