fix(练习): 修复输入法组合期间焦点跳转导致字母分散问题

- 组合输入期间禁止useEffect自动聚焦到下一个空输入框
- onCompositionEnd直接传入index和value,不再扫描数组查找
- 确保拼音字母留在同一输入框,确认后正确分散成中文

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

Co-Authored-By: HAPI <noreply@hapi.run>

src/components/practice/InputArea.tsx

@@ -11,8 +11,8 @@ interface InputAreaProps {
   inputLocked: boolean
   lastErrorTimestamp: number | null
   onInputChange: (newInput: string[]) => void
-  onCompositionStart: () => void
-  onCompositionEnd: () => void
+  onCompositionStart: (index: number) => void
+  onCompositionEnd: (index: number, value: string) => void
   onPaste: (e: React.ClipboardEvent) => void
 }
 
@@ -31,11 +31,12 @@ export function InputArea({
 
   // 自动聚焦到第一个空输入框
   useEffect(() => {
+    if (isComposing || inputLocked) return
     const firstEmptyIndex = userInput.findIndex((char) => !char)
     if (firstEmptyIndex !== -1 && inputRefs.current[firstEmptyIndex]) {
       inputRefs.current[firstEmptyIndex]?.focus()
     }
-  }, [userInput])
+  }, [userInput, isComposing, inputLocked])
 
   const handleCharInput = (
     index: number,
@@ -137,8 +138,10 @@ export function InputArea({
                 value={char}
                 onChange={(e) => handleCharInput(index, e)}
                 onKeyDown={(e) => handleKeyDown(index, e)}
-                onCompositionStart={onCompositionStart}
-                onCompositionEnd={onCompositionEnd}
+                onCompositionStart={() => onCompositionStart(index)}
+                onCompositionEnd={(e) =>
+                  onCompositionEnd(index, e.currentTarget.value)
+                }
                 onPaste={onPaste}
                 disabled={inputLocked}
                 className={clsx(