From 426a7b0327de72d252d53d9be8e25ea13fde9732 Mon Sep 17 00:00:00 2001
From: ittoview <ittoview@example.com>
Date: Mon, 2 Mar 2026 01:15:52 +0000
Subject: [PATCH] =?UTF-8?q?fix(=E7=BB=83=E4=B9=A0):=20=E4=BF=AE=E5=A4=8DWi?=
 =?UTF-8?q?ndows=E5=B9=B3=E5=8F=B0=E4=B8=AD=E6=96=87=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=B3=95=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 输入法组合期间阻止自动跳转和字符分散
- 输入法确认后将组合字符正确分散到多个输入框
- 确保中文输入正常工作

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

Co-Authored-By: HAPI <noreply@hapi.run>
---
 src/components/practice/InputArea.tsx |  7 +++++++
 src/pages/ProcessPracticePage.tsx     | 24 ++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/practice/InputArea.tsx b/src/components/practice/InputArea.tsx
index 92c0562..0d8ab19 100644
--- a/src/components/practice/InputArea.tsx
+++ b/src/components/practice/InputArea.tsx
@@ -42,6 +42,13 @@ export function InputArea({
 
     const newInput = [...userInput]
 
+    // 输入法组合期间,只更新当前输入框的值,不做任何跳转
+    if (isComposing) {
+      newInput[index] = value
+      onInputChange(newInput)
+      return
+    }
+
     // 处理多字符输入（连续输入或粘贴）
     if (value.length > 1) {
       const chars = value.split('')
diff --git a/src/pages/ProcessPracticePage.tsx b/src/pages/ProcessPracticePage.tsx
index a25e3a2..7430f87 100644
--- a/src/pages/ProcessPracticePage.tsx
+++ b/src/pages/ProcessPracticePage.tsx
@@ -212,9 +212,29 @@ export default function ProcessPracticePage() {
 
   const handleCompositionEnd = useCallback(() => {
     setIsComposing(false)
-    // 输入法确认后根据最新快照重新验证
+    // 输入法确认后,需要将当前输入框中的所有字符分散到后续输入框
     requestAnimationFrame(() => {
-      validateInput(latestInputRef.current)
+      const currentInput = latestInputRef.current
+      // 找到第一个有内容且长度>1的输入框(输入法组合的结果)
+      const composedIndex = currentInput.findIndex((char) => char.length > 1)
+
+      if (composedIndex !== -1) {
+        const composedText = currentInput[composedIndex]
+        const chars = composedText.split('')
+        const newInput = [...currentInput]
+
+        // 将组合的字符分散到后续输入框
+        for (let i = 0; i < chars.length && composedIndex + i < newInput.length; i++) {
+          newInput[composedIndex + i] = chars[i]
+        }
+
+        latestInputRef.current = newInput
+        setUserInput(newInput)
+        validateInput(newInput)
+      } else {
+        // 没有多字符组合,直接验证当前输入
+        validateInput(currentInput)
+      }
     })
   }, [validateInput])