From 83a3791f25b22d3d6256c9ad7d36eb8274fcfc0b Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Mon, 2 Mar 2026 07:39:24 +0000
Subject: [PATCH] =?UTF-8?q?fix(=E8=BF=87=E7=A8=8B=E8=AF=A6=E6=83=85):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=83=E4=B9=A0=E6=A8=A1=E5=BC=8F=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=97=A0=E6=B3=95=E8=BE=93=E5=85=A5=E5=8F=8A?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E7=AD=94=E6=A1=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 切换练习项后延迟聚焦第一个输入框，修复横线不能输入问题
- 查看答案改为点击图标按钮，3秒后自动隐藏，参照process-practice实现

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>
---
 src/pages/ProcessDetailPage.tsx | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/pages/ProcessDetailPage.tsx b/src/pages/ProcessDetailPage.tsx
index 42a560f..356587f 100644
--- a/src/pages/ProcessDetailPage.tsx
+++ b/src/pages/ProcessDetailPage.tsx
@@ -124,7 +124,7 @@ export function ProcessDetailPage() {
     return () => { clearLongPressTimer(); clearAutoAdvanceTimer() }
   }, [clearLongPressTimer, clearAutoAdvanceTimer])
 
-  // 切换到某个练习项时重置输入状态
+  // 切换到某个练习项时重置输入状态，并聚焦第一个输入框
   useEffect(() => {
     if (!isPracticeMode || !currentPracticeItem) return
     setUserInput(new Array(currentPracticeItem.name.length).fill(''))
@@ -132,6 +132,13 @@ export function ProcessDetailPage() {
     setLastErrorTimestamp(null)
     setShowAnswer(false)
     setInputLocked(false)
+    // 延迟聚焦，等 DOM 更新后再聚焦第一个输入框
+    setTimeout(() => {
+      const firstInput = document.querySelector(
+        '.practice-input-area input'
+      ) as HTMLInputElement
+      firstInput?.focus()
+    }, 150)
   }, [isPracticeMode, currentPracticeItem])
 
   useEffect(() => { latestInputRef.current = userInput }, [userInput])
@@ -643,13 +650,23 @@ export function ProcessDetailPage() {
             />
             <button
               type="button"
-              onPointerDown={(e) => { e.preventDefault(); handleLongPressStart() }}
-              onPointerUp={handleLongPressEnd}
-              onPointerLeave={handleLongPressEnd}
-              onPointerCancel={handleLongPressEnd}
-              className="shrink-0 px-3 py-2 rounded-lg text-xs font-medium text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600 hover:border-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-300 transition-colors select-none"
+              onClick={() => {
+                setShowAnswer(true)
+                setInputLocked(true)
+                // 3秒后自动隐藏
+                setTimeout(() => {
+                  setShowAnswer(false)
+                  setInputLocked(false)
+                  const firstInput = document.querySelector('.practice-input-area input') as HTMLInputElement
+                  firstInput?.focus()
+                }, 3000)
+              }}
+              title="查看答案"
+              className="shrink-0 p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
             >
-              按住看答案
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
             </button>
           </div>
         </div>