From 4a2ac81c243e0726d3a43812b1155db5bcb7b614 Mon Sep 17 00:00:00 2001
From: Zyronon <zyronon@163.com>
Date: Mon, 5 Jan 2026 10:28:11 +0800
Subject: [PATCH] fix:unable to type chinese

---
 src/pages/word/components/TypeWord.vue | 337 +++++++++++++++----------
 1 file changed, 200 insertions(+), 137 deletions(-)

diff --git a/src/pages/word/components/TypeWord.vue b/src/pages/word/components/TypeWord.vue
index ea747bf4..9e5e314d 100644
--- a/src/pages/word/components/TypeWord.vue
+++ b/src/pages/word/components/TypeWord.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { ShortcutKey, Word, WordPracticeType } from "@/types/types.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import { useSettingStore } from "@/stores/setting.ts";
-import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio } from "@/hooks/sound.ts";
-import { emitter, EventKey, useEvents } from "@/utils/eventBus.ts";
-import { onMounted, onUnmounted, watch } from "vue";
-import SentenceHightLightWord from "@/pages/word/components/SentenceHightLightWord.vue";
-import { usePracticeStore } from "@/stores/practice.ts";
-import { getDefaultWord } from "@/types/func.ts";
-import { _nextTick, last } from "@/utils";
-import BaseButton from "@/components/BaseButton.vue";
-import Space from "@/pages/article/components/Space.vue";
-import Toast from "@/components/base/toast/Toast.ts";
-import Tooltip from "@/components/base/Tooltip.vue";
+import { ShortcutKey, Word, WordPracticeStage, WordPracticeType } from '@/types/types.ts'
+import VolumeIcon from '@/components/icon/VolumeIcon.vue'
+import { useSettingStore } from '@/stores/setting.ts'
+import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio } from '@/hooks/sound.ts'
+import { emitter, EventKey, useEvents } from '@/utils/eventBus.ts'
+import { onMounted, onUnmounted, watch } from 'vue'
+import SentenceHightLightWord from '@/pages/word/components/SentenceHightLightWord.vue'
+import { usePracticeStore } from '@/stores/practice.ts'
+import { getDefaultWord } from '@/types/func.ts'
+import { _nextTick, last } from '@/utils'
+import BaseButton from '@/components/BaseButton.vue'
+import Space from '@/pages/article/components/Space.vue'
+import Toast from '@/components/base/toast/Toast.ts'
+import Tooltip from '@/components/base/Tooltip.vue'
 
 interface IProps {
-  word: Word,
+  word: Word
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -23,9 +23,9 @@ const props = withDefaults(defineProps<IProps>(), {
 })
 
 const emit = defineEmits<{
-  complete: [],
-  wrong: [],
-  know: [],
+  complete: []
+  wrong: []
+  know: []
 }>()
 
 let input = $ref('')
@@ -63,8 +63,8 @@ function updateCurrentWordInfo() {
     word: props.word.word,
     input: input,
     inputLock: inputLock,
-    containsSpace: props.word.word.includes(' ')
-  };
+    containsSpace: props.word.word.includes(' '),
+  }
 }
 
 watch(() => props.word, reset, { deep: true })
@@ -73,25 +73,28 @@ function reset() {
   wrong = input = ''
   wordRepeatCount = 0
   showWordResult = inputLock = false
-  wordCompletedTime = 0  // 重置时间戳
+  wordCompletedTime = 0 // 重置时间戳
   if (settingStore.wordSound) {
     if (settingStore.wordPracticeType !== WordPracticeType.Dictation) {
       volumeIconRef?.play(400, true)
     }
   }
   // 更新当前单词信息
-  updateCurrentWordInfo();
+  updateCurrentWordInfo()
   checkCursorPosition()
 }
 
 // 监听输入变化，更新当前单词信息
-watch(() => input, () => {
-  updateCurrentWordInfo();
-})
+watch(
+  () => input,
+  () => {
+    updateCurrentWordInfo()
+  }
+)
 
 onMounted(() => {
   // 初始化当前单词信息
-  updateCurrentWordInfo();
+  updateCurrentWordInfo()
 
   emitter.on(EventKey.resetWord, reset)
   emitter.on(EventKey.onTyping, onTyping)
@@ -229,7 +232,7 @@ async function onTyping(e: KeyboardEvent) {
     input += letter
     wrong = ''
     playKeyboardAudio()
-    updateCurrentWordInfo();
+    updateCurrentWordInfo()
     inputLock = false
   } else if (settingStore.wordPracticeType === WordPracticeType.Identify && !showWordResult) {
     //当自测模式下，按1和2会单独处理，如果按其他键则自动默认为不认识
@@ -245,37 +248,41 @@ async function onTyping(e: KeyboardEvent) {
     } else {
       right = letter === word[input.length]
     }
+    console.log(word[input.length], e.code, e.shiftKey)
     //针对中文的特殊判断
-    if (e.shiftKey && (
-        '！' === word[input.length] && e.code === 'Digit1' ||
-        '￥' === word[input.length] && e.code === 'Digit4' ||
-        '…' === word[input.length] && e.code === 'Digit6' ||
-        '（' === word[input.length] && e.code === 'Digit9' ||
-        '—' === word[input.length] && e.code === 'Minus' ||
-        '？' === word[input.length] && e.code === 'Slash' ||
-        '》' === word[input.length] && e.code === 'Period' ||
-        '《' === word[input.length] && e.code === 'Comma' ||
-        '“' === word[input.length] && e.code === 'Quote' ||
-        '：' === word[input.length] && e.code === 'Semicolon' ||
-        '）' === word[input.length] && e.code === 'Digit0')
+    if (
+      e.shiftKey &&
+      (('！' === word[input.length] && e.code === 'Digit1') ||
+        ('￥' === word[input.length] && e.code === 'Digit4') ||
+        ('…' === word[input.length] && e.code === 'Digit6') ||
+        ('—' === word[input.length] && e.code === 'Minus') ||
+        ('？' === word[input.length] && e.code === 'Slash') ||
+        ('》' === word[input.length] && e.code === 'Period') ||
+        ('《' === word[input.length] && e.code === 'Comma') ||
+        ('“' === word[input.length] && e.code === 'Quote') ||
+        ('”' === word[input.length] && e.code === 'Quote') ||
+        ('：' === word[input.length] && e.code === 'Semicolon') ||
+        ('）' === word[input.length] && e.code === 'Digit0') ||
+        ('（' === word[input.length] && e.code === 'Digit9'))
     ) {
       right = true
       letter = word[input.length]
     }
-    if (!e.shiftKey && (
-        '【' === word[input.length] && e.code === 'BracketLeft' ||
-        '、' === word[input.length] && e.code === 'Slash' ||
-        '。' === word[input.length] && e.code === 'Period' ||
-        '，' === word[input.length] && e.code === 'Comma' ||
-        '‘' === word[input.length] && e.code === 'Quote' ||
-        '；' === word[input.length] && e.code === 'Semicolon' ||
-        '【' === word[input.length] && e.code === 'BracketLeft' ||
-        '】' === word[input.length] && e.code === 'BracketRight'
-    )) {
+    if (
+      !e.shiftKey &&
+      (('、' === word[input.length] && e.code === 'Slash') ||
+        ('。' === word[input.length] && e.code === 'Period') ||
+        ('，' === word[input.length] && e.code === 'Comma') ||
+        ('‘' === word[input.length] && e.code === 'Quote') ||
+        ('’' === word[input.length] && e.code === 'Quote') ||
+        ('；' === word[input.length] && e.code === 'Semicolon') ||
+        ('【' === word[input.length] && e.code === 'BracketLeft') ||
+        ('】' === word[input.length] && e.code === 'BracketRight'))
+    ) {
       right = true
       letter = word[input.length]
     }
-    console.log('e', e, e.code, e.shiftKey, word[input.length])
+    // console.log('e', e, e.code, e.shiftKey, word[input.length])
 
     if (right) {
       input += letter
@@ -292,12 +299,15 @@ async function onTyping(e: KeyboardEvent) {
       }, 500)
     }
     // 更新当前单词信息
-    updateCurrentWordInfo();
+    updateCurrentWordInfo()
     //不需要把inputLock设为false，输入完成不能再输入了，只能删除，删除会打开锁
     if (input.toLowerCase() === word.toLowerCase()) {
-      wordCompletedTime = Date.now()  // 记录单词完成的时间戳
+      wordCompletedTime = Date.now() // 记录单词完成的时间戳
       playCorrect()
-      if ([WordPracticeType.Listen, WordPracticeType.Identify].includes(settingStore.wordPracticeType) && !showWordResult) {
+      if (
+        [WordPracticeType.Listen, WordPracticeType.Identify].includes(settingStore.wordPracticeType) &&
+        !showWordResult
+      ) {
         showWordResult = true
       }
       if ([WordPracticeType.FollowWrite, WordPracticeType.Spell].includes(settingStore.wordPracticeType)) {
@@ -337,7 +347,7 @@ function del() {
     }
   }
   // 更新当前单词信息
-  updateCurrentWordInfo();
+  updateCurrentWordInfo()
 }
 
 function showWord() {
@@ -347,16 +357,8 @@ function showWord() {
     }
     showFullWord = true
     //系统设定的默认模式情况下，如果看了单词统计到错词里面去
-    switch (statStore.step) {
-      case 1:
-      case 2:
-      case 4:
-      case 5:
-      case 7:
-      case 8:
-      case 10:
-        emit('wrong')
-        break
+    if (statStore.stage !== WordPracticeStage.FollowWriteNewWord) {
+      emit('wrong')
     }
   }
 }
@@ -389,7 +391,7 @@ function hideWordInTranslation(text: string, word: string): string {
   // 创建正则表达式，匹配单词本身及其常见变形（如复数、过去式等）
   const wordBase = word.toLowerCase()
   const patterns = [
-    `\\b${escapeRegExp(wordBase)}\\b`,  // 单词本身
+    `\\b${escapeRegExp(wordBase)}\\b`, // 单词本身
     `\\b${escapeRegExp(wordBase)}s\\b`, // 复数形式
     `\\b${escapeRegExp(wordBase)}es\\b`, // 复数形式
     `\\b${escapeRegExp(wordBase)}ed\\b`, // 过去式
@@ -416,32 +418,32 @@ watch([() => input, () => showFullWord, () => settingStore.dictation], checkCurs
 function checkCursorPosition() {
   _nextTick(() => {
     // 选中目标元素
-    const cursorEl = document.querySelector(`.cursor`);
-    const inputList = document.querySelectorAll(`.l`);
-    if (!typingWordRef) return;
-    const typingWordRect = typingWordRef.getBoundingClientRect();
+    const cursorEl = document.querySelector(`.cursor`)
+    const inputList = document.querySelectorAll(`.l`)
+    if (!typingWordRef) return
+    const typingWordRect = typingWordRef.getBoundingClientRect()
 
     if (inputList.length) {
-      let inputRect = last(Array.from(inputList)).getBoundingClientRect();
+      let inputRect = last(Array.from(inputList)).getBoundingClientRect()
       cursor = {
         top: inputRect.top + inputRect.height - cursorEl.clientHeight - typingWordRect.top,
         left: inputRect.right - typingWordRect.left - 3,
-      };
+      }
     } else {
-      const dictation = document.querySelector(`.dictation`);
+      const dictation = document.querySelector(`.dictation`)
       let elRect
       if (dictation) {
-        elRect = dictation.getBoundingClientRect();
+        elRect = dictation.getBoundingClientRect()
       } else {
-        const letter = document.querySelector(`.letter`);
-        elRect = letter.getBoundingClientRect();
+        const letter = document.querySelector(`.letter`)
+        elRect = letter.getBoundingClientRect()
       }
       cursor = {
         top: elRect.top + elRect.height - cursorEl.clientHeight - typingWordRect.top,
         left: elRect.left - typingWordRect.left - 3,
-      };
+      }
     }
-  },)
+  })
 }
 
 useEvents([
@@ -454,42 +456,64 @@ useEvents([
   <div class="typing-word" ref="typingWordRef" v-if="word.word.length">
     <div class="flex flex-col items-center">
       <div class="flex gap-1 mt-30">
-        <div class="phonetic"
-             :class="!(!settingStore.dictation || showFullWord || showWordResult) && 'word-shadow'"
-             v-if="settingStore.soundType === 'uk' && word.phonetic0">[{{ word.phonetic0 }}]
+        <div
+          class="phonetic"
+          :class="!(!settingStore.dictation || showFullWord || showWordResult) && 'word-shadow'"
+          v-if="settingStore.soundType === 'uk' && word.phonetic0"
+        >
+          [{{ word.phonetic0 }}]
         </div>
-        <div class="phonetic"
-             :class="((settingStore.dictation || [WordPracticeType.Spell,WordPracticeType.Listen,WordPracticeType.Dictation].includes(settingStore.wordPracticeType)) && !showFullWord && !showWordResult) && 'word-shadow'"
-             v-if="settingStore.soundType === 'us' && word.phonetic1">[{{ word.phonetic1 }}]
+        <div
+          class="phonetic"
+          :class="
+            (settingStore.dictation ||
+              [WordPracticeType.Spell, WordPracticeType.Listen, WordPracticeType.Dictation].includes(
+                settingStore.wordPracticeType
+              )) &&
+            !showFullWord &&
+            !showWordResult &&
+            'word-shadow'
+          "
+          v-if="settingStore.soundType === 'us' && word.phonetic1"
+        >
+          [{{ word.phonetic1 }}]
         </div>
         <VolumeIcon
-            :title="`发音(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
-            ref="volumeIconRef" :simple="true" :cb="() => playWordAudio(word.word)"/>
+          :title="`发音(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
+          ref="volumeIconRef"
+          :simple="true"
+          :cb="() => playWordAudio(word.word)"
+        />
       </div>
 
       <Tooltip
-          :title="(settingStore.dictation)
-          ? `可以按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示正确答案`
-          : ''
-">
-        <div id="word" class="word my-1"
-             :class="wrong && 'is-wrong'"
-             :style="{fontSize: settingStore.fontSize.wordForeignFontSize +'px'}"
-             @mouseenter="showWord"
-             @mouseleave="mouseleave"
+        :title="
+          settingStore.dictation ? `可以按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示正确答案` : ''
+        "
+      >
+        <div
+          id="word"
+          class="word my-1"
+          :class="wrong && 'is-wrong'"
+          :style="{ fontSize: settingStore.fontSize.wordForeignFontSize + 'px' }"
+          @mouseenter="showWord"
+          @mouseleave="mouseleave"
         >
           <div v-if="settingStore.wordPracticeType === WordPracticeType.Dictation">
-            <div class="letter text-align-center w-full inline-block"
-                 v-opacity="!settingStore.dictation || showWordResult || showFullWord">
+            <div
+              class="letter text-align-center w-full inline-block"
+              v-opacity="!settingStore.dictation || showWordResult || showFullWord"
+            >
               {{ word.word }}
             </div>
             <div
-                class="mt-2 w-120 dictation"
-                :style="{minHeight: settingStore.fontSize.wordForeignFontSize +'px'}"
-                :class="showWordResult ? (right ? 'right' : 'wrong') : ''">
+              class="mt-2 w-120 dictation"
+              :style="{ minHeight: settingStore.fontSize.wordForeignFontSize + 'px' }"
+              :class="showWordResult ? (right ? 'right' : 'wrong') : ''"
+            >
               <template v-for="i in input">
                 <span class="l" v-if="i !== ' '">{{ i }}</span>
-                <Space class="l" v-else :is-wrong="showWordResult ? (!right) : false" :is-wait="!showWordResult"/>
+                <Space class="l" v-else :is-wrong="showWordResult ? !right : false" :is-wait="!showWordResult" />
               </template>
             </div>
           </div>
@@ -497,46 +521,72 @@ useEvents([
             <span class="input" v-if="input">{{ input }}</span>
             <span class="wrong" v-if="wrong">{{ wrong }}</span>
             <span class="letter" v-if="settingStore.dictation && !showFullWord">
-                  {{ displayWord.split('').map((v) => (v === ' ' ? '&nbsp;' : '_')).join('') }}
-          </span>
+              {{
+                displayWord
+                  .split('')
+                  .map(v => (v === ' ' ? '&nbsp;' : '_'))
+                  .join('')
+              }}
+            </span>
             <span class="letter" v-else>{{ displayWord }}</span>
           </template>
         </div>
       </Tooltip>
 
-      <div class="mt-4 flex gap-4"
-           v-if="settingStore.wordPracticeType === WordPracticeType.Identify && !showWordResult">
+      <div
+        class="mt-4 flex gap-4"
+        v-if="settingStore.wordPracticeType === WordPracticeType.Identify && !showWordResult"
+      >
         <BaseButton
-            :keyboard="`快捷键(${settingStore.shortcutKeyMap[ShortcutKey.KnowWord]})`"
-            size="large" @click="know">我认识
+          :keyboard="`快捷键(${settingStore.shortcutKeyMap[ShortcutKey.KnowWord]})`"
+          size="large"
+          @click="know"
+          >我认识
         </BaseButton>
         <BaseButton
-            :keyboard="`快捷键(${settingStore.shortcutKeyMap[ShortcutKey.UnknownWord]})`"
-            size="large" @click="unknown">不认识
+          :keyboard="`快捷键(${settingStore.shortcutKeyMap[ShortcutKey.UnknownWord]})`"
+          size="large"
+          @click="unknown"
+          >不认识
         </BaseButton>
       </div>
 
-      <div class="translate  flex flex-col gap-2 my-3"
-           v-opacity="settingStore.translate || showWordResult || showFullWord"
-           :style="{
-      fontSize: settingStore.fontSize.wordTranslateFontSize +'px',
-    }"
+      <div
+        class="translate flex flex-col gap-2 my-3"
+        v-opacity="settingStore.translate || showWordResult || showFullWord"
+        :style="{
+          fontSize: settingStore.fontSize.wordTranslateFontSize + 'px',
+        }"
       >
         <div class="flex" v-for="v in word.trans">
-          <div class="shrink-0" :class="v.pos ? 'w-12 en-article-family' : '-ml-3'">{{ v.pos }}</div>
+          <div class="shrink-0" :class="v.pos ? 'w-12 en-article-family' : '-ml-3'">
+            {{ v.pos }}
+          </div>
           <span v-if="!settingStore.dictation || showWordResult || showFullWord">{{ v.cn }}</span>
           <span v-else v-html="hideWordInTranslation(v.cn, word.word)"></span>
         </div>
       </div>
     </div>
-    <div class="other anim"
-         v-opacity="![WordPracticeType.Listen,WordPracticeType.Dictation,WordPracticeType.Identify].includes(settingStore.wordPracticeType) || showFullWord || showWordResult">
+    <div
+      class="other anim"
+      v-opacity="
+        ![WordPracticeType.Listen, WordPracticeType.Dictation, WordPracticeType.Identify].includes(
+          settingStore.wordPracticeType
+        ) ||
+        showFullWord ||
+        showWordResult
+      "
+    >
       <div class="line-white my-3"></div>
       <template v-if="word?.sentences?.length">
         <div class="flex flex-col gap-3">
           <div class="sentence" v-for="item in word.sentences">
-            <SentenceHightLightWord class="text-xl" :text="item.c" :word="word.word"
-                                    :dictation="!(!settingStore.dictation || showFullWord || showWordResult)"/>
+            <SentenceHightLightWord
+              class="text-xl"
+              :text="item.c"
+              :word="word.word"
+              :dictation="!(!settingStore.dictation || showFullWord || showWordResult)"
+            />
             <div class="text-base anim" v-opacity="settingStore.translate || showFullWord || showWordResult">
               {{ item.cn }}
             </div>
@@ -550,8 +600,12 @@ useEvents([
           <div class="label">短语</div>
           <div class="flex flex-col">
             <div class="flex items-center gap-4" v-for="item in word.phrases">
-              <SentenceHightLightWord class="en" :text="item.c" :word="word.word"
-                                      :dictation="!(!settingStore.dictation || showFullWord || showWordResult)"/>
+              <SentenceHightLightWord
+                class="en"
+                :text="item.c"
+                :word="word.word"
+                :dictation="!(!settingStore.dictation || showFullWord || showWordResult)"
+              />
               <div class="cn anim" v-opacity="settingStore.translate || showFullWord || showWordResult">
                 {{ item.cn }}
               </div>
@@ -560,11 +614,11 @@ useEvents([
         </div>
       </template>
 
-      <template v-if="(settingStore.translate || !settingStore.dictation)">
+      <template v-if="settingStore.translate || !settingStore.dictation">
         <template v-if="word?.synos?.length">
           <div class="line-white my-3"></div>
           <div class="flex">
-            <div class='label'>同近义词</div>
+            <div class="label">同近义词</div>
             <div class="flex flex-col gap-3">
               <div class="flex" v-for="item in word.synos">
                 <div class="pos line-height-1.4rem!">{{ item.pos }}</div>
@@ -573,7 +627,7 @@ useEvents([
                     {{ item.cn }}
                   </div>
                   <div class="anim" v-opacity="!settingStore.dictation || showFullWord || showWordResult">
-                    <span class="en" v-for="(i,j) in item.ws">
+                    <span class="en" v-for="(i, j) in item.ws">
                       {{ i }} {{ j !== item.ws.length - 1 ? ' / ' : '' }}
                     </span>
                   </div>
@@ -584,8 +638,10 @@ useEvents([
         </template>
       </template>
 
-      <div class="anim"
-           v-opacity="(settingStore.translate && !settingStore.dictation) || showFullWord || showWordResult">
+      <div
+        class="anim"
+        v-opacity="(settingStore.translate && !settingStore.dictation) || showFullWord || showWordResult"
+      >
         <template v-if="word?.etymology?.length">
           <div class="line-white my-3"></div>
 
@@ -622,26 +678,32 @@ useEvents([
         </template>
       </div>
     </div>
-    <div class="cursor"
-         :style="{top:cursor.top+'px',left:cursor.left+'px',height: settingStore.fontSize.wordForeignFontSize +'px'}"></div>
+    <div
+      class="cursor"
+      :style="{
+        top: cursor.top + 'px',
+        left: cursor.left + 'px',
+        height: settingStore.fontSize.wordForeignFontSize + 'px',
+      }"
+    ></div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .dictation {
-  border-bottom: 2px solid black;
+  border-bottom: 2px solid gray;
 }
 
 .typing-word {
   width: 100%;
   flex: 1;
-  overflow: auto;
+  //overflow: auto;
   word-break: break-word;
   position: relative;
   color: var(--color-font-2);
-  padding-bottom: 8rem;
 
-  .phonetic, .translate {
+  .phonetic,
+  .translate {
     font-size: 1.2rem;
   }
 
@@ -654,10 +716,10 @@ useEvents([
     font-size: 3rem;
     line-height: 1;
     font-family: var(--en-article-family);
-    letter-spacing: .3rem;
+    letter-spacing: 0.3rem;
 
-
-    .input, .right {
+    .input,
+    .right {
       color: rgb(22, 163, 74);
     }
 
@@ -706,7 +768,6 @@ useEvents([
 
 // 移动端适配
 @media (max-width: 768px) {
-
   .typing-word {
     padding: 0 0.5rem 12rem;
 
@@ -716,7 +777,8 @@ useEvents([
       margin: 0.5rem 0;
     }
 
-    .phonetic, .translate {
+    .phonetic,
+    .translate {
       font-size: 1rem;
     }
 
@@ -792,7 +854,8 @@ useEvents([
       margin: 0.3rem 0;
     }
 
-    .phonetic, .translate {
+    .phonetic,
+    .translate {
       font-size: 0.9rem;
     }