From 23e0da456add0deef1379479fbf045fc68529fd2 Mon Sep 17 00:00:00 2001
From: didyhu <didyhu@gmail.com>
Date: Thu, 14 May 2026 09:45:06 +0800
Subject: [PATCH] fix: prevent hidden-word flicker when switching practice
 words

---
 apps/vscode-web/src/z-polyfill/TypeWord.vue   | 21 +++++++++++++----
 .../core/src/components/word/TypeWord.vue     | 23 +++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/apps/vscode-web/src/z-polyfill/TypeWord.vue b/apps/vscode-web/src/z-polyfill/TypeWord.vue
index 2bb51c8a4..12cc6e93f 100644
--- a/apps/vscode-web/src/z-polyfill/TypeWord.vue
+++ b/apps/vscode-web/src/z-polyfill/TypeWord.vue
@@ -92,6 +92,15 @@ let isWordTest = $computed(() => {
   )
 })
 
+let shouldHideWordByDefault = $computed(() => {
+  return [
+    WordPracticeType.Spell,
+    WordPracticeType.Listen,
+    WordPracticeType.Dictation,
+    WordPracticeType.Identify,
+  ].includes(settingStore.wordPracticeType)
+})
+
 // 在全局对象中存储当前单词信息，以便其他模块可以访问
 function updateCurrentWordInfo() {
   window.__CURRENT_WORD_INFO__ = {
@@ -102,7 +111,11 @@ function updateCurrentWordInfo() {
   }
 }
 
-watch(() => props.word, reset, { deep: true })
+watch(
+  () => props.word,
+  reset,
+  { flush: 'sync' }
+)
 
 function reset() {
   clearJumpTimer()
@@ -624,7 +637,7 @@ const isCollect = $computed(() => isWordCollect(props.word))
       <div class="flex gap-space items-end mb-2">
         <Tooltip
           :title="
-            settingStore.dictation ? `可以按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示单词` : ''
+            shouldHideWordByDefault ? `可以按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示单词` : ''
           "
         >
           <div id="word" class="word" :class="wrong && 'is-wrong'" @mouseenter="showWord" @mouseleave="mouseleave">
@@ -648,7 +661,7 @@ const isCollect = $computed(() => isWordCollect(props.word))
             <template v-else>
               <span class="input" v-if="input">{{ input }}</span>
               <span class="wrong" v-if="wrong">{{ wrong }}</span>
-              <span class="letter" v-if="settingStore.dictation && !showFullWord">
+              <span class="letter" v-if="shouldHideWordByDefault && !showFullWord">
                 {{
                   displayWord
                     .split('')
@@ -728,7 +741,7 @@ const isCollect = $computed(() => isWordCollect(props.word))
           <span class="shrink-0 mr-1" :class="v.pos ? 'en-article-family' : ''">
             {{ v.pos }}
           </span>
-          <span v-if="!settingStore.dictation || showWordResult || showFullWord">{{ v.cn }}</span>
+          <span v-if="!shouldHideWordByDefault || showWordResult || showFullWord">{{ v.cn }}</span>
           <SentenceHightLightWord v-else :text="v.cn" :word="word.word" :dictation="true" :high-light="false" />
         </div>
       </div>
diff --git a/packages/core/src/components/word/TypeWord.vue b/packages/core/src/components/word/TypeWord.vue
index d1ac43b3f..ce9425e4b 100644
--- a/packages/core/src/components/word/TypeWord.vue
+++ b/packages/core/src/components/word/TypeWord.vue
@@ -121,6 +121,15 @@ let isWordTest = $computed(() => {
   )
 })
 
+let shouldHideWordByDefault = $computed(() => {
+  return [
+    WordPracticeType.Spell,
+    WordPracticeType.Listen,
+    WordPracticeType.Dictation,
+    WordPracticeType.Identify,
+  ].includes(settingStore.wordPracticeType)
+})
+
 // 在全局对象中存储当前单词信息，以便其他模块可以访问
 function updateCurrentWordInfo() {
   window.__CURRENT_WORD_INFO__ = {
@@ -131,7 +140,11 @@ function updateCurrentWordInfo() {
   }
 }
 
-watch(() => props.word, reset, { deep: true })
+watch(
+  () => props.word,
+  reset,
+  { flush: 'sync' }
+)
 
 function reset() {
   clearJumpTimer()
@@ -696,7 +709,9 @@ const isCollect = $computed(() => isWordCollect(props.word))
       </div>
 
       <Tooltip
-        :title="settingStore.dictation ? `快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示单词` : ''"
+        :title="
+          shouldHideWordByDefault ? `快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示单词` : ''
+        "
       >
         <div
           id="word"
@@ -728,7 +743,7 @@ const isCollect = $computed(() => isWordCollect(props.word))
             <div v-if="currentPracticeSentenceIndex === -1">
               <span class="input" v-if="input">{{ input }}</span>
               <span class="wrong" v-if="wrong">{{ wrong }}</span>
-              <span class="letter" v-if="settingStore.dictation && !showFullWord">
+              <span class="letter" v-if="shouldHideWordByDefault && !showFullWord">
                 {{
                   displayWord
                     .split('')
@@ -835,7 +850,7 @@ const isCollect = $computed(() => isWordCollect(props.word))
           fontSize: settingStore.fontSize.wordTranslateFontSize + 'px',
         }"
       >
-        <TranslationList :word="word" :showFull="!settingStore.dictation || showWordResult || showFullWord" />
+        <TranslationList :word="word" :showFull="!shouldHideWordByDefault || showWordResult || showFullWord" />
       </div>
     </div>