fix: simplify performance domain practice layout

src/pages/PerformanceDomainPracticePage.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { motion } from 'framer-motion'
 import { Link } from 'react-router-dom'
 import clsx from 'clsx'
 import {
   AlertTriangle,
   BarChart3,
+  CheckCircle2,
   GitBranch,
   GraduationCap,
   Handshake,
@@ -13,6 +14,7 @@ import {
   Target,
   Users,
   Workflow,
+  XCircle,
 } from 'lucide-react'
 import { CelebrationAnimation } from '@/components/practice/CelebrationAnimation'
 import {
@@ -45,16 +47,7 @@ interface AnswerState {
   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 STORAGE_KEY = 'performance-domain-practice-progress-v3'
 
 const scopeOptions: Array<{ value: PracticeScope; label: string }> = [
   { value: 'all', label: '全部' },
@@ -78,17 +71,6 @@ const iconMap = {
   PD08: AlertTriangle,
 } as const
 
-const desktopPositions = [
-  '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[] {
   const result = [...items]
   for (let i = result.length - 1; i > 0; i -= 1) {
@@ -180,11 +162,10 @@ function getStoredProgress(questions: PracticeQuestion[]): PracticeProgress {
     const missingIds = filteredIds.filter(
       (id) => !completedIds.includes(id) && !queue.includes(id)
     )
-    const mergedQueue = [...queue, ...shuffleArray(missingIds)]
 
     return {
       scope,
-      queue: mergedQueue,
+      queue: [...queue, ...shuffleArray(missingIds)],
       completedIds,
       totalCount: filteredIds.length,
       correctCount: Math.max(Number(parsed.correctCount) || 0, 0),
@@ -196,66 +177,6 @@ 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(
@@ -280,12 +201,11 @@ export default function PerformanceDomainPracticePage() {
     ? 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 completedCount = progress.completedIds.length + (answerState?.isCorrect ? 1 : 0)
+  const remainingCount = Math.max(progress.totalCount - completedCount, 0)
   const accuracyBase = progress.correctCount + progress.wrongCount
-  const accuracy =
-    accuracyBase > 0 ? Math.round((progress.correctCount / accuracyBase) * 100) : 0
+  const accuracy = accuracyBase > 0 ? Math.round((progress.correctCount / accuracyBase) * 100) : 0
+  const progressPercent = progress.totalCount > 0 ? (completedCount / progress.totalCount) * 100 : 0
 
   useEffect(() => {
     try {
@@ -296,9 +216,7 @@ export default function PerformanceDomainPracticePage() {
   }, [progress])
 
   useEffect(() => {
-    if (isFinished) {
-      setShowCelebration(true)
-    }
+    if (isFinished) setShowCelebration(true)
   }, [isFinished])
 
   const restartPractice = (scope = progress.scope) => {
@@ -316,12 +234,10 @@ export default function PerformanceDomainPracticePage() {
     if (!currentQuestionId) return
 
     setAnswerState(null)
-
     setProgress((prev) => {
       if (prev.queue[0] !== currentQuestionId) return prev
 
       const [, ...restQueue] = prev.queue
-
       if (isCorrect) {
         return {
           ...prev,
@@ -355,7 +271,7 @@ export default function PerformanceDomainPracticePage() {
     }))
   }
 
-  const renderOptionButton = (domainId: string, className?: string) => {
+  const renderOptionButton = (domainId: string) => {
     const domain = performanceDomainMap.get(domainId)
     if (!domain) return null
 
@@ -371,64 +287,51 @@ export default function PerformanceDomainPracticePage() {
       <motion.button
         key={domain.id}
         type="button"
-        whileHover={!isAnswerShown ? { y: -2 } : undefined}
         whileTap={!isAnswerShown ? { scale: 0.98 } : undefined}
         onClick={() => handleSelect(domain.id)}
         disabled={isAnswerShown}
         className={clsx(
-          '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',
-          isAnswerShown && 'cursor-default',
-          !isAnswerShown && 'hover:shadow-md',
+          'relative flex min-h-[84px] items-center gap-3 rounded-xl border bg-white p-3 text-left shadow-sm transition-colors dark:bg-gray-800',
+          '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-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-950/40',
+            'border-emerald-300 bg-emerald-50 dark:border-emerald-700 dark:bg-emerald-950/30',
           isWrongSelected &&
-            'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/40',
-          className
+            'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/30'
         )}
       >
-        <div className="flex items-center gap-3">
-          <div
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white shadow-sm"
-            style={{ backgroundColor: domain.color }}
-          >
-            <Icon size={18} />
+        <div
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-white"
+          style={{ backgroundColor: domain.color }}
+        >
+          <Icon size={20} />
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-semibold text-gray-900 dark:text-white">
+            {domain.name}
           </div>
-          <div className="min-w-0 flex-1">
-            <div className="text-sm font-semibold text-gray-900 dark:text-white">
-              {domain.name}
-            </div>
-            <div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
-              {domain.nameEn}
-            </div>
+          <div className="mt-0.5 truncate text-xs text-gray-500 dark:text-gray-400">
+            {domain.nameEn}
           </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>
+        {isCorrectSelected && (
+          <CheckCircle2 className="absolute right-3 top-3 text-emerald-500" size={18} />
+        )}
+        {isWrongSelected && (
+          <XCircle className="absolute right-3 top-3 text-rose-500" size={18} />
+        )}
+        {shouldHighlightCorrect && !isCorrectSelected && (
+          <span className="absolute right-3 top-3 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300">
+            正确
+          </span>
         )}
       </motion.button>
     )
   }
 
   return (
-    <div className="space-y-5">
+    <div className="mx-auto max-w-6xl space-y-4">
       {showCelebration && (
         <CelebrationAnimation onComplete={() => setShowCelebration(false)} />
       )}
@@ -436,19 +339,14 @@ 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>
@@ -465,89 +363,75 @@ export default function PerformanceDomainPracticePage() {
         </button>
       </div>
 
-      <div className="flex flex-wrap gap-2">
-        {scopeOptions.map((option) => {
-          const isActive = option.value === progress.scope
-          return (
-            <button
-              key={option.value}
-              type="button"
-              onClick={() => switchScope(option.value)}
-              className={clsx(
-                'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
-                isActive
-                  ? 'bg-indigo-600 text-white'
-                  : 'bg-white text-gray-600 shadow-sm ring-1 ring-gray-200 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 dark:hover:bg-gray-700'
-              )}
-            >
-              {option.label}
-            </button>
-          )
-        })}
-      </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="flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap gap-2">
+            {scopeOptions.map((option) => {
+              const isActive = option.value === progress.scope
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => switchScope(option.value)}
+                  className={clsx(
+                    'rounded-full px-3 py-1.5 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-indigo-600 text-white'
+                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600'
+                  )}
+                >
+                  {option.label}
+                </button>
+              )
+            })}
+          </div>
 
-      <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 className="flex flex-wrap gap-x-5 gap-y-1 text-sm text-gray-600 dark:text-gray-300">
+            <span>已完成 <b className="text-gray-900 dark:text-white">{completedCount}/{progress.totalCount}</b></span>
+            <span>剩余 <b className="text-gray-900 dark:text-white">{remainingCount}</b></span>
+            <span>正确率 <b className="text-gray-900 dark:text-white">{accuracy}%</b></span>
+            <span>错误 <b className="text-gray-900 dark:text-white">{progress.wrongCount}</b></span>
+          </div>
         </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="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="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 className="mt-4 h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700">
+          <div
+            className="h-full rounded-full bg-indigo-600 transition-all duration-300"
+            style={{ width: `${progressPercent}%` }}
+          />
         </div>
       </div>
 
       {isFinished ? (
         <motion.div
-          initial={{ opacity: 0, y: 12 }}
+          initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
-          className="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700"
+          className="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700"
         >
-          <div className="bg-gradient-to-r from-indigo-500 via-violet-500 to-cyan-500 px-6 py-8 text-white">
+          <div className="bg-indigo-600 px-6 py-7 text-white">
             <div className="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm">
               <GraduationCap size={16} />
               本轮完成
             </div>
-            <h2 className="mt-4 text-3xl font-bold">八大绩效域练习已完成</h2>
+            <h2 className="mt-4 text-2xl font-bold">八大绩效域练习已完成</h2>
             <p className="mt-2 text-sm text-white/80">
               共完成 {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="rounded-xl 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">
-                {progress.totalCount}
-              </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="rounded-xl 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">
-                {accuracy}%
-              </div>
+              <div className="mt-2 text-3xl font-bold text-gray-900 dark:text-white">{accuracy}%</div>
             </div>
-            <div className="rounded-2xl bg-gray-50 px-4 py-4 dark:bg-gray-900/40">
+            <div className="rounded-xl 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>
@@ -570,178 +454,71 @@ export default function PerformanceDomainPracticePage() {
           </div>
         </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="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>
+        <div className="grid gap-4 xl:grid-cols-[1fr_1.45fr]">
+          <section className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
+            <div className="flex items-center justify-between gap-3">
+              <span className="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]}
+              </span>
+              <span className="text-sm text-gray-500 dark:text-gray-400">
+                {completedCount + 1} / {progress.totalCount}
+              </span>
             </div>
 
-            <div 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="flex min-h-[160px] items-center">
-                <p className="text-xl font-semibold leading-9 text-gray-900 dark:text-white">
-                  {currentQuestion.text}
-                </p>
-              </div>
+            <div className="flex min-h-[180px] items-center py-6 md:min-h-[220px] xl:min-h-[300px]">
+              <p className="text-2xl font-semibold leading-relaxed text-gray-900 dark:text-white md:text-3xl">
+                {currentQuestion.text}
+              </p>
             </div>
 
-            <motion.div
-              initial={false}
-              animate={{ opacity: answerState ? 1 : 0.96 }}
+            <div
               className={clsx(
-                'mt-4 min-h-[124px] rounded-2xl border px-4 py-4 shadow-sm',
+                'min-h-[104px] rounded-xl border px-4 py-3 transition-colors',
                 answerState?.isCorrect
                   ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950/30'
                   : answerState
-                    ? 'border-amber-200 bg-amber-50 dark:border-amber-800 dark:bg-amber-950/30'
-                    : 'border-white/70 bg-white/80 dark:border-gray-700 dark:bg-gray-800/80'
+                    ? 'border-rose-200 bg-rose-50 dark:border-rose-800 dark:bg-rose-950/30'
+                    : 'border-gray-100 bg-gray-50 dark:border-gray-700 dark:bg-gray-900/30'
               )}
             >
               {answerState && currentDomain ? (
                 <div className="flex h-full flex-col justify-between gap-3">
-                  <div className="space-y-1">
+                  <div>
                     <div
                       className={clsx(
-                        'text-sm font-semibold',
+                        'flex items-center gap-2 text-sm font-semibold',
                         answerState.isCorrect
                           ? 'text-emerald-700 dark:text-emerald-300'
-                          : 'text-amber-700 dark:text-amber-300'
+                          : 'text-rose-700 dark:text-rose-300'
                       )}
                     >
+                      {answerState.isCorrect ? <CheckCircle2 size={17} /> : <XCircle size={17} />}
                       {answerState.isCorrect
-                        ? '回答正确'
-                        : `你选了 ${selectedDomain?.name ?? ''}，正确答案是 ${currentDomain.name}`}
+                        ? `正确：${currentDomain.name}`
+                        : `错误：你选了 ${selectedDomain?.name ?? ''}`}
                     </div>
-                    <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
-                      {answerState.isCorrect
-                        ? '这题已答对。'
-                        : '这题已放到后面，稍后会再出现。'}
-                    </p>
+                    {!answerState.isCorrect && (
+                      <p className="mt-1 text-sm text-gray-700 dark:text-gray-300">
+                        正确答案：{currentDomain.name}。这题会放到后面再练。
+                      </p>
+                    )}
                   </div>
-                  <div className="flex justify-center">
-                    <button
-                      type="button"
-                      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"
-                    >
-                      下一个
-                    </button>
-                  </div>
-                </div>
-              ) : (
-                <div className="h-full" />
-              )}
-            </motion.div>
 
-            <div className="mt-4 grid gap-3 sm:grid-cols-2">
-              {performanceDomains.map((domain) => renderOptionButton(domain.id))}
+                  <button
+                    type="button"
+                    onClick={() => advanceToNext(answerState.isCorrect)}
+                    className="self-start rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-500"
+                  >
+                    下一个
+                  </button>
+                </div>
+              ) : null}
             </div>
-          </div>
+          </section>
 
-          <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>
-
-                <div 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="flex min-h-[220px] items-center justify-center">
-                    <p className="text-2xl font-semibold leading-10 text-gray-900 dark:text-white">
-                      {currentQuestion.text}
-                    </p>
-                  </div>
-                </div>
-
-                <motion.div
-                  initial={false}
-                  animate={{ opacity: answerState ? 1 : 0.96 }}
-                  className={clsx(
-                    'mt-4 min-h-[132px] 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 h-full flex-col justify-between gap-3">
-                      <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
-                            ? '这题已答对。'
-                            : '这题已放到后面，稍后会再出现。'}
-                        </p>
-                      </div>
-                      <div className="flex justify-center">
-                        <button
-                          type="button"
-                          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"
-                        >
-                          下一个
-                        </button>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="h-full" />
-                  )}
-                </motion.div>
-              </div>
-
-              {performanceDomains.map((domain, index) => (
-                <div
-                  key={domain.id}
-                  className={clsx('absolute w-56', desktopPositions[index])}
-                >
-                  {renderOptionButton(domain.id)}
-                </div>
-              ))}
-            </div>
-          </div>
+          <section className="grid gap-3 sm:grid-cols-2">
+            {performanceDomains.map((domain) => renderOptionButton(domain.id))}
+          </section>
         </div>
       ) : null}
     </div>