From 834fb37616546eac90702f0690bfbf5d5da17b8e Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Sun, 10 May 2026 15:52:14 +0100
Subject: [PATCH] fix: refine purpose practice feedback

---
 src/pages/ProcessPurposePracticePage.tsx | 55 +++++++++---------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/src/pages/ProcessPurposePracticePage.tsx b/src/pages/ProcessPurposePracticePage.tsx
index ca58ef3..466d0eb 100644
--- a/src/pages/ProcessPurposePracticePage.tsx
+++ b/src/pages/ProcessPurposePracticePage.tsx
@@ -450,37 +450,36 @@ export default function ProcessPurposePracticePage() {
       </div>
 
       <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-8 pb-48">
-        <section className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-800">
-          <div className="mb-4 flex items-center justify-between gap-4">
+        <section
+          className={`rounded-2xl border bg-white p-6 shadow-sm transition-all duration-200 dark:bg-gray-800 ${
+            correctFeedback
+              ? 'border-green-300 ring-2 ring-green-100 dark:border-green-700 dark:ring-green-900/40'
+              : 'border-gray-200 dark:border-gray-700'
+          }`}
+        >
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-4">
             <span className="rounded-full bg-blue-50 px-3 py-1 text-sm font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-200">
               第 {Math.min(progress.currentIndex + 1, totalCount)} / {totalCount} 题
             </span>
-            <span className="text-sm text-gray-400 dark:text-gray-500">
-              主要作用
-            </span>
+            <AnimatePresence mode="wait">
+              {showAnswer ? (
+                <motion.span
+                  key="answer"
+                  initial={{ opacity: 0, y: -4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  className="rounded-2xl border-2 border-indigo-300 bg-indigo-50 px-5 py-2 shadow-sm shadow-indigo-100 text-xl font-bold text-indigo-800 dark:border-indigo-500/70 dark:bg-indigo-950/50 dark:text-indigo-100 dark:shadow-none"
+                >
+                  {currentItem.name}
+                </motion.span>
+              ) : null}
+            </AnimatePresence>
           </div>
           <p className="text-xl leading-9 text-gray-900 dark:text-gray-100">
             {currentItem.purpose}
           </p>
         </section>
 
-        <AnimatePresence>
-          {showAnswer && !isFinished && (
-            <motion.section
-              initial={{ opacity: 0, y: 8 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 8 }}
-              className="mt-6 rounded-2xl border border-indigo-100 bg-indigo-50/80 p-5 shadow-sm dark:border-indigo-800 dark:bg-indigo-900/20"
-            >
-              <div className="mb-2 text-sm font-medium text-indigo-600 dark:text-indigo-300">
-                答案
-              </div>
-              <div className="text-2xl font-semibold text-gray-900 dark:text-gray-100">
-                {currentItem.name}
-              </div>
-            </motion.section>
-          )}
-        </AnimatePresence>
 
         {isFinished && (
           <section className="mt-6 rounded-2xl border border-gray-200 bg-white p-10 text-center shadow-sm dark:border-gray-700 dark:bg-gray-800">
@@ -548,18 +547,6 @@ export default function ProcessPurposePracticePage() {
                 </button>
               </div>
 
-              <AnimatePresence>
-                {correctFeedback && (
-                  <motion.div
-                    initial={{ opacity: 0, y: -6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    className="mt-3 text-center text-sm font-medium text-green-600 dark:text-green-300"
-                  >
-                    回答正确
-                  </motion.div>
-                )}
-              </AnimatePresence>
             </div>
 
             <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">