fix(练习): 使用nativeEvent.isComposing同步判断输入法状态

- 在InputArea中读取nativeEvent.isComposing同步判断组合状态
- 添加isComposingRef避免状态更新时序问题
- 确保输入法组合期间不触发自动跳转和字符分散

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

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

src/components/practice/InputArea.tsx

@@ -37,13 +37,23 @@ export function InputArea({
     }
   }, [userInput])
 
-  const handleCharInput = (index: number, value: string) => {
+  const handleCharInput = (
+    index: number,
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
     if (inputLocked) return
 
+    const value = e.target.value
+    const nativeIsComposing =
+      typeof (e.nativeEvent as InputEvent).isComposing === 'boolean'
+        ? (e.nativeEvent as InputEvent).isComposing
+        : false
+    const composing = isComposing || nativeIsComposing
+
     const newInput = [...userInput]
 
     // 输入法组合期间,只更新当前输入框的值,不做任何跳转
-    if (isComposing) {
+    if (composing) {
       newInput[index] = value
       onInputChange(newInput)
       return
@@ -125,7 +135,7 @@ export function InputArea({
                 ref={(el) => (inputRefs.current[index] = el)}
                 type="text"
                 value={char}
-                onChange={(e) => handleCharInput(index, e.target.value)}
+                onChange={(e) => handleCharInput(index, e)}
                 onKeyDown={(e) => handleKeyDown(index, e)}
                 onCompositionStart={onCompositionStart}
                 onCompositionEnd={onCompositionEnd}