feat: refine performance domain practice flow

src/pages/PerformanceDomainPracticePage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Link } from 'react-router-dom'
 import clsx from 'clsx'
@@ -15,7 +15,10 @@ import {
   Workflow,
 } from 'lucide-react'
 import { CelebrationAnimation } from '@/components/practice/CelebrationAnimation'
-import { performanceDomains } from '@/data/performance-domains'
+import {
+  performanceDomains,
+  performanceDomainMap,
+} from '@/data/performance-domains'
 
 type QuestionKind = 'expectedGoal' | 'keyPoint'
 type PracticeScope = 'all' | QuestionKind
@@ -23,21 +26,37 @@ type PracticeScope = 'all' | QuestionKind
 interface PracticeQuestion {
   id: string
   domainId: string
-  domainName: string
-  domainDescription: string
   kind: QuestionKind
   text: string
 }
 
 interface PracticeProgress {
   scope: PracticeScope
-  order: string[]
-  currentIndex: number
+  queue: string[]
+  completedIds: string[]
+  totalCount: number
   correctCount: number
   wrongCount: number
 }
 
-const STORAGE_KEY = 'performance-domain-practice-progress'
+interface AnswerState {
+  selectedDomainId: string
+  correctDomainId: string
+  isCorrect: boolean
+}
+
+interface CircularProgressProps {
+  value: number
+  total: number
+  size: number
+  strokeWidth: number
+  className?: string
+  children?: ReactNode
+}
+
+const STORAGE_KEY = 'performance-domain-practice-progress-v2'
+const CORRECT_DELAY = 900
+const WRONG_DELAY = 1800
 
 const scopeOptions: Array<{ value: PracticeScope; label: string }> = [
   { value: 'all', label: '全部' },
@@ -62,14 +81,14 @@ const iconMap = {
 } as const
 
 const desktopPositions = [
-  'left-10 top-12',
-  'left-1/2 top-0 -translate-x-1/2',
-  'right-10 top-12',
-  'right-0 top-1/2 -translate-y-[120%]',
-  'right-10 bottom-12',
-  'left-1/2 bottom-0 -translate-x-1/2',
-  'left-10 bottom-12',
-  'left-0 top-1/2 translate-y-[20%]',
+  'left-6 top-10',
+  'left-1/2 top-1 -translate-x-1/2',
+  'right-6 top-10',
+  'right-1 top-1/2 -translate-y-[118%]',
+  'right-6 bottom-10',
+  'left-1/2 bottom-1 -translate-x-1/2',
+  'left-6 bottom-10',
+  'left-1 top-1/2 translate-y-[18%]',
 ] as const
 
 function shuffleArray<T>(items: T[]): T[] {
@@ -89,8 +108,6 @@ function buildQuestionBank(): PracticeQuestion[] {
     const expectedGoalQuestions = detail.expectedGoals.map((text, index) => ({
       id: `${domain.id}-goal-${index}`,
       domainId: domain.id,
-      domainName: domain.name,
-      domainDescription: domain.description,
       kind: 'expectedGoal' as const,
       text,
     }))
@@ -98,8 +115,6 @@ function buildQuestionBank(): PracticeQuestion[] {
     const keyPointQuestions = detail.keyPoints.map((text, index) => ({
       id: `${domain.id}-point-${index}`,
       domainId: domain.id,
-      domainName: domain.name,
-      domainDescription: domain.description,
       kind: 'keyPoint' as const,
       text,
     }))
@@ -112,28 +127,32 @@ function createProgress(
   scope: PracticeScope,
   questions: PracticeQuestion[]
 ): PracticeProgress {
-  const filteredQuestions = questions.filter((question) =>
-    scope === 'all' ? true : question.kind === scope
-  )
+  const filteredIds = questions
+    .filter((question) => (scope === 'all' ? true : question.kind === scope))
+    .map((question) => question.id)
 
   return {
     scope,
-    order: shuffleArray(filteredQuestions.map((question) => question.id)),
-    currentIndex: 0,
+    queue: shuffleArray(filteredIds),
+    completedIds: [],
+    totalCount: filteredIds.length,
     correctCount: 0,
     wrongCount: 0,
   }
 }
 
 function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
-  const questionMap = new Map(questions.map((question) => [question.id, question]))
+  const questionIdSet = new Set(questions.map((question) => question.id))
 
   try {
     const saved = localStorage.getItem(STORAGE_KEY)
     if (!saved) return createProgress('all', questions)
 
     const parsed = JSON.parse(saved) as Partial<PracticeProgress>
-    const scope = parsed.scope === 'expectedGoal' || parsed.scope === 'keyPoint' || parsed.scope === 'all'
+    const scope =
+      parsed.scope === 'all' ||
+      parsed.scope === 'expectedGoal' ||
+      parsed.scope === 'keyPoint'
         ? parsed.scope
         : 'all'
 
@@ -141,18 +160,35 @@ function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
       .filter((question) => (scope === 'all' ? true : question.kind === scope))
       .map((question) => question.id)
     const validIdSet = new Set(filteredIds)
-    const storedOrder = Array.isArray(parsed.order)
-      ? parsed.order.filter((id): id is string => validIdSet.has(String(id)) && questionMap.has(String(id)))
-      : []
-    const missingIds = filteredIds.filter((id) => !storedOrder.includes(id))
-    const order = [...storedOrder, ...shuffleArray(missingIds)]
 
-    if (order.length === 0) return createProgress(scope, questions)
+    const completedIds = Array.isArray(parsed.completedIds)
+      ? parsed.completedIds.filter(
+          (id, index, array): id is string =>
+            questionIdSet.has(String(id)) &&
+            validIdSet.has(String(id)) &&
+            array.indexOf(id) === index
+        )
+      : []
+
+    const queue = Array.isArray(parsed.queue)
+      ? parsed.queue.filter(
+          (id): id is string =>
+            questionIdSet.has(String(id)) &&
+            validIdSet.has(String(id)) &&
+            !completedIds.includes(String(id))
+        )
+      : []
+
+    const missingIds = filteredIds.filter(
+      (id) => !completedIds.includes(id) && !queue.includes(id)
+    )
+    const mergedQueue = [...queue, ...shuffleArray(missingIds)]
 
     return {
       scope,
-      order,
-      currentIndex: Math.min(Math.max(Number(parsed.currentIndex) || 0, 0), order.length),
+      queue: mergedQueue,
+      completedIds,
+      totalCount: filteredIds.length,
       correctCount: Math.max(Number(parsed.correctCount) || 0, 0),
       wrongCount: Math.max(Number(parsed.wrongCount) || 0, 0),
     }
@@ -162,41 +198,97 @@ function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
   }
 }
 
+function CircularProgress({
+  value,
+  total,
+  size,
+  strokeWidth,
+  className,
+  children,
+}: CircularProgressProps) {
+  const clampedTotal = total > 0 ? total : 1
+  const ratio = Math.min(Math.max(value / clampedTotal, 0), 1)
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const dashOffset = circumference * (1 - ratio)
+
+  return (
+    <div
+      className={clsx(
+        'relative flex items-center justify-center',
+        className
+      )}
+      style={{ width: size, height: size }}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        className="-rotate-90"
+      >
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          fill="none"
+          className="text-white/70 dark:text-gray-700"
+        />
+        <motion.circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          fill="none"
+          strokeDasharray={circumference}
+          animate={{ strokeDashoffset: dashOffset }}
+          transition={{ duration: 0.35, ease: 'easeOut' }}
+          className="text-indigo-500 dark:text-indigo-400"
+        />
+      </svg>
+      {children && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function PerformanceDomainPracticePage() {
   const questionBank = useMemo(() => buildQuestionBank(), [])
   const questionMap = useMemo(
     () => new Map(questionBank.map((question) => [question.id, question])),
     [questionBank]
   )
+  const autoNextTimerRef = useRef<number | null>(null)
+
   const [progress, setProgress] = useState<PracticeProgress>(() =>
     getStoredProgress(questionBank)
   )
-  const [selectedDomainId, setSelectedDomainId] = useState<string | null>(null)
+  const [answerState, setAnswerState] = useState<AnswerState | null>(null)
   const [showCelebration, setShowCelebration] = useState(false)
 
-  const questions = useMemo(
-    () =>
-      progress.order
-        .map((id) => questionMap.get(id))
-        .filter((question): question is PracticeQuestion => Boolean(question)),
-    [progress.order, questionMap]
-  )
-
-  const currentQuestion = questions[progress.currentIndex] ?? null
+  const currentQuestionId = progress.queue[0] ?? null
+  const currentQuestion = currentQuestionId
+    ? questionMap.get(currentQuestionId) ?? null
+    : null
   const currentDomain = currentQuestion
-    ? performanceDomains.find((domain) => domain.id === currentQuestion.domainId) ?? null
+    ? performanceDomainMap.get(currentQuestion.domainId) ?? null
     : null
-  const answeredCount = Math.min(progress.currentIndex, questions.length)
-  const isFinished = progress.currentIndex >= questions.length
-  const accuracy = answeredCount > 0
-    ? Math.round((progress.correctCount / answeredCount) * 100)
-    : 0
-  const answerState = currentQuestion && selectedDomainId
-    ? {
-        isCorrect: selectedDomainId === currentQuestion.domainId,
-        correctDomainId: currentQuestion.domainId,
-      }
+  const selectedDomain = answerState
+    ? performanceDomainMap.get(answerState.selectedDomainId) ?? null
     : null
+  const isFinished = progress.totalCount > 0 && progress.queue.length === 0
+  const displayCompletedCount =
+    progress.completedIds.length + (answerState?.isCorrect ? 1 : 0)
+  const remainingCount = Math.max(progress.totalCount - displayCompletedCount, 0)
+  const accuracyBase = progress.correctCount + progress.wrongCount
+  const accuracy =
+    accuracyBase > 0 ? Math.round((progress.correctCount / accuracyBase) * 100) : 0
 
   useEffect(() => {
     try {
@@ -206,24 +298,89 @@ export default function PerformanceDomainPracticePage() {
     }
   }, [progress])
 
+  useEffect(() => {
+    if (isFinished) {
+      setShowCelebration(true)
+    }
+  }, [isFinished])
+
+  useEffect(() => {
+    return () => {
+      if (autoNextTimerRef.current) {
+        window.clearTimeout(autoNextTimerRef.current)
+      }
+    }
+  }, [])
+
+  const clearAutoNextTimer = () => {
+    if (autoNextTimerRef.current) {
+      window.clearTimeout(autoNextTimerRef.current)
+      autoNextTimerRef.current = null
+    }
+  }
+
   const restartPractice = (scope = progress.scope) => {
+    clearAutoNextTimer()
     setProgress(createProgress(scope, questionBank))
-    setSelectedDomainId(null)
+    setAnswerState(null)
     setShowCelebration(false)
   }
 
   const switchScope = (scope: PracticeScope) => {
     if (scope === progress.scope) return
-    setProgress(createProgress(scope, questionBank))
-    setSelectedDomainId(null)
-    setShowCelebration(false)
+    restartPractice(scope)
   }
 
+  const advanceToNext = (isCorrect: boolean) => {
+    if (!currentQuestionId) return
+
+    clearAutoNextTimer()
+    setAnswerState(null)
+
+    setProgress((prev) => {
+      if (prev.queue[0] !== currentQuestionId) return prev
+
+      const [, ...restQueue] = prev.queue
+
+      if (isCorrect) {
+        return {
+          ...prev,
+          queue: restQueue,
+          completedIds: prev.completedIds.includes(currentQuestionId)
+            ? prev.completedIds
+            : [...prev.completedIds, currentQuestionId],
+        }
+      }
+
+      return {
+        ...prev,
+        queue: [...restQueue, currentQuestionId],
+      }
+    })
+  }
+
+  useEffect(() => {
+    if (!answerState) return
+
+    clearAutoNextTimer()
+    autoNextTimerRef.current = window.setTimeout(() => {
+      advanceToNext(answerState.isCorrect)
+    }, answerState.isCorrect ? CORRECT_DELAY : WRONG_DELAY)
+
+    return () => {
+      clearAutoNextTimer()
+    }
+  }, [answerState, currentQuestionId])
+
   const handleSelect = (domainId: string) => {
     if (!currentQuestion || answerState) return
 
     const isCorrect = domainId === currentQuestion.domainId
-    setSelectedDomainId(domainId)
+    setAnswerState({
+      selectedDomainId: domainId,
+      correctDomainId: currentQuestion.domainId,
+      isCorrect,
+    })
     setProgress((prev) => ({
       ...prev,
       correctCount: prev.correctCount + (isCorrect ? 1 : 0),
@@ -231,46 +388,35 @@ export default function PerformanceDomainPracticePage() {
     }))
   }
 
-  const handleNext = () => {
-    if (!answerState) return
-
-    setSelectedDomainId(null)
-    setProgress((prev) => {
-      const nextIndex = prev.currentIndex + 1
-      if (nextIndex >= prev.order.length) {
-        setShowCelebration(true)
-      }
-      return {
-        ...prev,
-        currentIndex: nextIndex,
-      }
-    })
-  }
-
   const renderOptionButton = (domainId: string, className?: string) => {
-    const domain = performanceDomains.find((item) => item.id === domainId)
+    const domain = performanceDomainMap.get(domainId)
     if (!domain) return null
 
     const Icon = iconMap[domain.id as keyof typeof iconMap]
-    const isSelected = selectedDomainId === domain.id
-    const isCorrect = answerState?.correctDomainId === domain.id
-    const isWrongSelection = Boolean(answerState) && isSelected && !answerState?.isCorrect
+    const isAnswerShown = Boolean(answerState)
+    const isSelected = answerState?.selectedDomainId === domain.id
+    const isCorrectDomain = answerState?.correctDomainId === domain.id
+    const isCorrectSelected = isAnswerShown && isSelected && answerState?.isCorrect
+    const isWrongSelected = isAnswerShown && isSelected && !answerState?.isCorrect
+    const shouldHighlightCorrect = isAnswerShown && isCorrectDomain
 
     return (
       <motion.button
         key={domain.id}
         type="button"
-        whileHover={!answerState ? { y: -2 } : undefined}
-        whileTap={!answerState ? { scale: 0.98 } : undefined}
+        whileHover={!isAnswerShown ? { y: -2 } : undefined}
+        whileTap={!isAnswerShown ? { scale: 0.98 } : undefined}
         onClick={() => handleSelect(domain.id)}
-        disabled={Boolean(answerState)}
+        disabled={isAnswerShown}
         className={clsx(
-          'group w-full rounded-2xl border bg-white/95 px-4 py-3 text-left shadow-sm transition-all backdrop-blur-sm dark:bg-gray-800/95',
+          'w-full rounded-2xl border bg-white/95 px-4 py-3 text-left shadow-sm transition-all backdrop-blur-sm dark:bg-gray-800/95',
           'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600',
-          answerState && 'cursor-default',
-          isSelected && !answerState && 'border-indigo-400 ring-2 ring-indigo-100 dark:ring-indigo-900/50',
-          isCorrect && 'border-emerald-300 bg-emerald-50 shadow-md dark:border-emerald-700 dark:bg-emerald-950/40',
-          isWrongSelection && 'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/40',
+          isAnswerShown && 'cursor-default',
+          !isAnswerShown && 'hover:shadow-md',
+          shouldHighlightCorrect &&
+            'border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-950/40',
+          isWrongSelected &&
+            'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/40',
           className
         )}
       >
@@ -281,7 +427,7 @@ export default function PerformanceDomainPracticePage() {
           >
             <Icon size={18} />
           </div>
-          <div className="min-w-0">
+          <div className="min-w-0 flex-1">
             <div className="text-sm font-semibold text-gray-900 dark:text-white">
               {domain.name}
             </div>
@@ -290,6 +436,26 @@ export default function PerformanceDomainPracticePage() {
             </div>
           </div>
         </div>
+
+        {isAnswerShown && (
+          <div className="mt-3 flex flex-wrap gap-2">
+            {isCorrectSelected && (
+              <span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
+                正确
+              </span>
+            )}
+            {isWrongSelected && (
+              <span className="rounded-full bg-rose-100 px-2.5 py-1 text-xs font-medium text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">
+                你的选择
+              </span>
+            )}
+            {shouldHighlightCorrect && !isCorrectSelected && (
+              <span className="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">
+                正确答案
+              </span>
+            )}
+          </div>
+        )}
       </motion.button>
     )
   }
@@ -303,14 +469,19 @@ export default function PerformanceDomainPracticePage() {
       <div className="flex flex-wrap items-center justify-between gap-3">
         <div className="space-y-1">
           <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            <Link to="/performance-domains" className="hover:text-indigo-600 dark:hover:text-indigo-400">
+            <Link
+              to="/performance-domains"
+              className="hover:text-indigo-600 dark:hover:text-indigo-400"
+            >
               绩效域
             </Link>
             <span>/</span>
             <span className="text-gray-900 dark:text-white">练习</span>
           </nav>
           <div>
-            <h1 className="text-xl font-bold text-gray-900 dark:text-white">八大绩效域练习</h1>
+            <h1 className="text-xl font-bold text-gray-900 dark:text-white">
+              八大绩效域练习
+            </h1>
             <p className="text-sm text-gray-500 dark:text-gray-400">
               根据预期目标和绩效要点，判断对应的绩效域。
             </p>
@@ -348,20 +519,30 @@ export default function PerformanceDomainPracticePage() {
         })}
       </div>
 
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
-          <div className="text-sm text-gray-500 dark:text-gray-400">练习进度</div>
-          <div className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">
-            {Math.min(answeredCount + (answerState ? 1 : 0), questions.length)} / {questions.length}
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 rounded-2xl bg-white px-4 py-3 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
+        <div className="text-sm text-gray-600 dark:text-gray-300">
+          已完成
+          <span className="ml-2 font-semibold text-gray-900 dark:text-white">
+            {displayCompletedCount} / {progress.totalCount}
+          </span>
         </div>
+        <div className="text-sm text-gray-600 dark:text-gray-300">
+          剩余
+          <span className="ml-2 font-semibold text-gray-900 dark:text-white">
+            {remainingCount}
+          </span>
         </div>
-        <div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
-          <div className="text-sm text-gray-500 dark:text-gray-400">当前正确率</div>
-          <div className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{accuracy}%</div>
+        <div className="text-sm text-gray-600 dark:text-gray-300">
+          正确率
+          <span className="ml-2 font-semibold text-gray-900 dark:text-white">
+            {accuracy}%
+          </span>
         </div>
-        <div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
-          <div className="text-sm text-gray-500 dark:text-gray-400">已答对</div>
-          <div className="mt-2 text-2xl font-bold text-gray-900 dark:text-white">{progress.correctCount}</div>
+        <div className="text-sm text-gray-600 dark:text-gray-300">
+          错误次数
+          <span className="ml-2 font-semibold text-gray-900 dark:text-white">
+            {progress.wrongCount}
+          </span>
         </div>
       </div>
 
@@ -378,25 +559,28 @@ export default function PerformanceDomainPracticePage() {
             </div>
             <h2 className="mt-4 text-3xl font-bold">八大绩效域练习已完成</h2>
             <p className="mt-2 text-sm text-white/80">
-              本轮共答对 {progress.correctCount} 题，答错 {progress.wrongCount} 题。
+              共完成 {progress.totalCount} 题，错误 {progress.wrongCount} 次。
             </p>
           </div>
 
           <div className="grid gap-4 px-6 py-6 md:grid-cols-3">
             <div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
               <div className="text-sm text-gray-500 dark:text-gray-400">总题数</div>
-              <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{questions.length}</div>
+              <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
+                {progress.totalCount}
+              </div>
             </div>
             <div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
               <div className="text-sm text-gray-500 dark:text-gray-400">正确率</div>
               <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
-                {questions.length > 0 ? Math.round((progress.correctCount / questions.length) * 100) : 0}%
+                {accuracy}%
               </div>
             </div>
             <div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
               <div className="text-sm text-gray-500 dark:text-gray-400">当前范围</div>
               <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">
-                {scopeOptions.find((option) => option.value === progress.scope)?.label ?? '全部'}
+                {scopeOptions.find((option) => option.value === progress.scope)?.label ??
+                  '全部'}
               </div>
             </div>
           </div>
@@ -420,24 +604,29 @@ export default function PerformanceDomainPracticePage() {
         </motion.div>
       ) : currentQuestion ? (
         <div className="overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-50 via-white to-cyan-50 p-4 shadow-sm ring-1 ring-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 dark:ring-gray-700 lg:p-6">
-          <div className="mb-4 flex flex-wrap items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <span className="rounded-full bg-white/80 px-3 py-1 text-sm font-medium text-gray-600 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700">
-                第 {progress.currentIndex + 1} 题
-              </span>
-              <span className="rounded-full bg-indigo-600 px-3 py-1 text-sm font-medium text-white">
-                {kindLabelMap[currentQuestion.kind]}
-              </span>
+          <div className="lg:hidden">
+            <div className="mb-4 flex items-center gap-4 rounded-3xl bg-white/85 px-4 py-4 shadow-sm ring-1 ring-gray-100 backdrop-blur-sm dark:bg-gray-800/85 dark:ring-gray-700">
+              <CircularProgress value={displayCompletedCount} total={progress.totalCount} size={82} strokeWidth={8}>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-gray-900 dark:text-white">
+                    {displayCompletedCount}
+                  </div>
+                  <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                    / {progress.totalCount}
+                  </div>
+                </div>
+              </CircularProgress>
+
+              <div className="space-y-2">
+                <div className="inline-flex rounded-full bg-indigo-600 px-3 py-1 text-sm font-medium text-white">
+                  {kindLabelMap[currentQuestion.kind]}
+                </div>
+                <div className="text-sm text-gray-500 dark:text-gray-400">
+                  剩余 {remainingCount} 题
                 </div>
-            <div className="h-2 w-full max-w-xs overflow-hidden rounded-full bg-white/70 ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700">
-              <div
-                className="h-full rounded-full bg-gradient-to-r from-indigo-500 to-cyan-500 transition-all duration-300"
-                style={{ width: `${questions.length > 0 ? (progress.currentIndex / questions.length) * 100 : 0}%` }}
-              />
               </div>
             </div>
 
-          <div className="lg:hidden">
             <AnimatePresence mode="wait">
               <motion.div
                 key={currentQuestion.id}
@@ -446,62 +635,15 @@ export default function PerformanceDomainPracticePage() {
                 exit={{ opacity: 0, y: -16 }}
                 className="rounded-3xl bg-white px-5 py-6 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700"
               >
-                <div className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
-                  {kindLabelMap[currentQuestion.kind]}
-                </div>
-                <p className="mt-4 text-xl font-semibold leading-9 text-gray-900 dark:text-white">
+                <p className="text-xl font-semibold leading-9 text-gray-900 dark:text-white">
                   {currentQuestion.text}
                 </p>
               </motion.div>
             </AnimatePresence>
 
-            <div className="mt-4 grid gap-3 sm:grid-cols-2">
-              {performanceDomains.map((domain) => renderOptionButton(domain.id))}
-            </div>
-          </div>
-
-          <div className="hidden lg:block">
-            <div className="relative mx-auto h-[36rem] max-w-6xl overflow-hidden rounded-[2rem]">
-              <div className="absolute left-1/2 top-1/2 h-[32rem] w-[32rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-white/80 dark:border-gray-700" />
-              <div className="absolute left-1/2 top-1/2 h-[25rem] w-[25rem] -translate-x-1/2 -translate-y-1/2 rounded-full border border-indigo-100 dark:border-gray-700/80" />
-              <div className="absolute left-1/2 top-1/2 h-60 w-60 -translate-x-1/2 -translate-y-1/2 rounded-full bg-indigo-200/30 blur-3xl dark:bg-indigo-900/20" />
-
-              <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 px-4">
-                <AnimatePresence mode="wait">
-                  <motion.div
-                    key={currentQuestion.id}
-                    initial={{ opacity: 0, scale: 0.96, y: 16 }}
-                    animate={{ opacity: 1, scale: 1, y: 0 }}
-                    exit={{ opacity: 0, scale: 0.96, y: -16 }}
-                    className="rounded-[2rem] bg-white/95 px-6 py-7 text-center shadow-xl ring-1 ring-gray-100 backdrop-blur-sm dark:bg-gray-800/95 dark:ring-gray-700"
-                  >
-                    <div className="inline-flex rounded-full bg-indigo-50 px-3 py-1 text-sm font-medium text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300">
-                      {kindLabelMap[currentQuestion.kind]}
-                    </div>
-                    <p className="mt-5 text-2xl font-semibold leading-10 text-gray-900 dark:text-white">
-                      {currentQuestion.text}
-                    </p>
-                  </motion.div>
-                </AnimatePresence>
-              </div>
-
-              {performanceDomains.map((domain, index) => (
-                <div
-                  key={domain.id}
-                  className={clsx(
-                    'absolute w-56',
-                    desktopPositions[index]
-                  )}
-                >
-                  {renderOptionButton(domain.id)}
-                </div>
-              ))}
-            </div>
-          </div>
-
             <motion.div
               initial={false}
-            animate={{ opacity: answerState ? 1 : 0.92 }}
+              animate={{ opacity: answerState ? 1 : 0.96 }}
               className={clsx(
                 'mt-4 rounded-2xl border px-4 py-4 shadow-sm',
                 answerState?.isCorrect
@@ -513,33 +655,138 @@ export default function PerformanceDomainPracticePage() {
             >
               {answerState && currentDomain ? (
                 <div className="flex flex-wrap items-center justify-between gap-3">
-                <div>
-                  <div className={clsx(
+                  <div className="space-y-1">
+                    <div
+                      className={clsx(
                         'text-sm font-semibold',
                         answerState.isCorrect
                           ? 'text-emerald-700 dark:text-emerald-300'
                           : 'text-amber-700 dark:text-amber-300'
-                  )}>
-                    {answerState.isCorrect ? '回答正确' : `正确答案是 ${currentDomain.name}`}
+                      )}
+                    >
+                      {answerState.isCorrect
+                        ? '回答正确'
+                        : `你选了 ${selectedDomain?.name ?? ''}，正确答案是 ${currentDomain.name}`}
                     </div>
-                  <p className="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-300">
-                    {currentDomain.description}
+                    <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
+                      {answerState.isCorrect
+                        ? currentDomain.description
+                        : '这题已放到后面，稍后会再出现。'}
                     </p>
                   </div>
                   <button
                     type="button"
-                  onClick={handleNext}
-                  className="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
+                    onClick={() => advanceToNext(answerState.isCorrect)}
+                    className="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
                   >
-                  {progress.currentIndex === questions.length - 1 ? '查看结果' : '下一题'}
+                    下一个
                   </button>
                 </div>
               ) : (
                 <p className="text-sm text-gray-600 dark:text-gray-300">
-                从语义上判断这句话最贴近哪个绩效域。
+                  选中后会自动进入下一个。
                 </p>
               )}
             </motion.div>
+
+            <div className="mt-4 grid gap-3 sm:grid-cols-2">
+              {performanceDomains.map((domain) => renderOptionButton(domain.id))}
+            </div>
+          </div>
+
+          <div className="hidden lg:block">
+            <div className="relative mx-auto h-[38rem] max-w-6xl overflow-hidden rounded-[2rem]">
+              <CircularProgress
+                value={displayCompletedCount}
+                total={progress.totalCount}
+                size={430}
+                strokeWidth={16}
+                className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-indigo-500"
+              />
+
+              <div className="absolute left-1/2 top-1/2 w-full max-w-md -translate-x-1/2 -translate-y-1/2 px-4">
+                <div className="mb-4 flex items-center justify-center gap-3">
+                  <span className="rounded-full bg-white/90 px-3 py-1 text-sm font-medium text-gray-700 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-700">
+                    已完成 {displayCompletedCount} / {progress.totalCount}
+                  </span>
+                  <span className="rounded-full bg-indigo-600 px-3 py-1 text-sm font-medium text-white">
+                    {kindLabelMap[currentQuestion.kind]}
+                  </span>
+                </div>
+
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={currentQuestion.id}
+                    initial={{ opacity: 0, scale: 0.96, y: 16 }}
+                    animate={{ opacity: 1, scale: 1, y: 0 }}
+                    exit={{ opacity: 0, scale: 0.96, y: -16 }}
+                    className="rounded-[2rem] bg-white/95 px-6 py-7 text-center shadow-xl ring-1 ring-gray-100 backdrop-blur-sm dark:bg-gray-800/95 dark:ring-gray-700"
+                  >
+                    <p className="text-2xl font-semibold leading-10 text-gray-900 dark:text-white">
+                      {currentQuestion.text}
+                    </p>
+                  </motion.div>
+                </AnimatePresence>
+
+                <motion.div
+                  initial={false}
+                  animate={{ opacity: answerState ? 1 : 0.96 }}
+                  className={clsx(
+                    'mt-4 rounded-2xl border px-4 py-4 shadow-sm',
+                    answerState?.isCorrect
+                      ? 'border-emerald-200 bg-emerald-50/95 dark:border-emerald-800 dark:bg-emerald-950/40'
+                      : answerState
+                        ? 'border-amber-200 bg-amber-50/95 dark:border-amber-800 dark:bg-amber-950/40'
+                        : 'border-white/70 bg-white/85 dark:border-gray-700 dark:bg-gray-800/85'
+                  )}
+                >
+                  {answerState && currentDomain ? (
+                    <div className="flex items-center justify-between gap-4">
+                      <div className="space-y-1">
+                        <div
+                          className={clsx(
+                            'text-sm font-semibold',
+                            answerState.isCorrect
+                              ? 'text-emerald-700 dark:text-emerald-300'
+                              : 'text-amber-700 dark:text-amber-300'
+                          )}
+                        >
+                          {answerState.isCorrect
+                            ? '回答正确'
+                            : `你选了 ${selectedDomain?.name ?? ''}，正确答案是 ${currentDomain.name}`}
+                        </div>
+                        <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
+                          {answerState.isCorrect
+                            ? currentDomain.description
+                            : '这题已放到后面，稍后会再出现。'}
+                        </p>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => advanceToNext(answerState.isCorrect)}
+                        className="shrink-0 rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
+                      >
+                        下一个
+                      </button>
+                    </div>
+                  ) : (
+                    <p className="text-center text-sm text-gray-600 dark:text-gray-300">
+                      选中后会自动进入下一个。
+                    </p>
+                  )}
+                </motion.div>
+              </div>
+
+              {performanceDomains.map((domain, index) => (
+                <div
+                  key={domain.id}
+                  className={clsx('absolute w-56', desktopPositions[index])}
+                >
+                  {renderOptionButton(domain.id)}
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       ) : null}
     </div>