fix: refine answer display in purpose practice

src/components/practice/InputArea.tsx

@@ -14,6 +14,7 @@ interface InputAreaProps {
   onCompositionStart: (index: number) => void
   onCompositionEnd: (index: number, value: string) => void
   onPaste: (e: React.ClipboardEvent) => void
+  showLockedHint?: boolean
 }
 
 export function InputArea({
@@ -26,6 +27,7 @@ export function InputArea({
   onCompositionStart,
   onCompositionEnd,
   onPaste,
+  showLockedHint = true,
 }: InputAreaProps) {
   const inputRefs = useRef<(HTMLInputElement | null)[]>([])
 
@@ -167,7 +169,7 @@ export function InputArea({
 
       {/* 输入锁定提示 */}
       <AnimatePresence>
-        {inputLocked && (
+        {showLockedHint && inputLocked && (
           <motion.div
             initial={{ opacity: 0, y: -10 }}
             animate={{ opacity: 1, y: 0 }}

src/components/practice/ProficientInputArea.tsx

@@ -10,6 +10,7 @@ interface ProficientInputAreaProps {
   onChange: (value: string) => void
   onCompositionStart: () => void
   onCompositionEnd: (value: string) => void
+  showLockedHint?: boolean
 }
 
 export function ProficientInputArea({
@@ -20,6 +21,7 @@ export function ProficientInputArea({
   onChange,
   onCompositionStart,
   onCompositionEnd,
+  showLockedHint = true,
 }: ProficientInputAreaProps) {
   const inputRef = useRef<HTMLInputElement | null>(null)
 
@@ -55,7 +57,7 @@ export function ProficientInputArea({
       />
 
       <AnimatePresence>
-        {inputLocked && (
+        {showLockedHint && inputLocked && (
           <motion.div
             initial={{ opacity: 0, y: -6 }}
             animate={{ opacity: 1, y: 0 }}

src/pages/ProcessPurposePracticePage.tsx

@@ -464,6 +464,24 @@ export default function ProcessPurposePracticePage() {
           </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">
             <div className="text-2xl font-bold text-gray-900 dark:text-gray-100">
@@ -500,6 +518,7 @@ export default function ProcessPurposePracticePage() {
                     }}
                     onCompositionStart={() => handleCompositionStart()}
                     onCompositionEnd={(value) => handleCompositionEnd(value)}
+                    showLockedHint={false}
                   />
                 ) : (
                   <InputArea
@@ -512,6 +531,7 @@ export default function ProcessPurposePracticePage() {
                     onCompositionStart={handleCompositionStart}
                     onCompositionEnd={(index, value) => handleCompositionEnd(index, value)}
                     onPaste={handlePaste}
+                    showLockedHint={false}
                   />
                 )}
 
@@ -542,34 +562,8 @@ export default function ProcessPurposePracticePage() {
               </AnimatePresence>
             </div>
 
-            <div className="max-h-40 overflow-y-auto px-4 py-3">
-              <AnimatePresence mode="wait">
-                {showAnswer ? (
-                  <motion.div
-                    key="answer"
-                    initial={{ opacity: 0, y: -6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                  >
-                    <h3 className="mb-2 text-base font-semibold text-gray-900 dark:text-gray-100">
-                      答案
-                    </h3>
-                    <p className="text-base leading-relaxed text-gray-700 dark:text-gray-300">
-                      {currentItem.name}
-                    </p>
-                  </motion.div>
-                ) : (
-                  <motion.div
-                    key="hint"
-                    initial={{ opacity: 0, y: -6 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -6 }}
-                    className="text-sm text-gray-500 dark:text-gray-400"
-                  >
+            <div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
               Ctrl + H 查看答案
-                  </motion.div>
-                )}
-              </AnimatePresence>
             </div>
           </div>
         </div>