feat:fix dictation mode

components.d.ts

@@ -29,9 +29,6 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTableV2: typeof import('element-plus/es')['ElTableV2']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
-    ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Empty: typeof import('./src/components/Empty.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/assets/css/style.scss

@@ -386,7 +386,7 @@ footer {
     $c: #E6A23C;
 
     .phonetic, .item-sub-title {
-      color: var(--color-gray) !important;
+      //color: var(--color-gray) !important;
     }
 
     .volume, .collect, .easy, .fill {
@@ -394,7 +394,6 @@ footer {
     }
   }
 
-
   .item-title {
     display: flex;
     align-items: center;

src/pages/pc/article/practice-article/index.vue

@@ -2,7 +2,6 @@
 import TypingArticle from "./TypingArticle.vue";
 import {Article, ArticleItem, ArticleWord, DisplayStatistics, getDefaultArticle, ShortcutKey, Word} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import TypingWord from "@/pages/pc/word/components/TypingWord.vue";
 import Panel from "../../components/Panel.vue";
 import {onMounted, onUnmounted} from "vue";
 import {useBaseStore} from "@/stores/base.ts";
@@ -405,8 +404,6 @@ const {playSentenceAudio} = usePlaySentenceAudio()
 
               <TranslateSetting/>
 
-              <VolumeSetting/>
-
               <BaseIcon
                   :title="`编辑(${settingStore.shortcutKeyMap[ShortcutKey.EditArticle]})`"
                   icon="tabler:edit"

src/pages/pc/components/Typing.vue

@@ -202,7 +202,7 @@ let tab = $ref(2)
       <div class="line-white my-4"></div>
       <div class="sentences" v-if="word.sentences && word.sentences.length">
         <div class="sentence my-2" v-for="item in word.sentences">
-          <SentenceHightLightWord class="text-lg" :text="item.c" :word="word.word"/>
+          <SentenceHightLightWord class="text-lg" :text="item.c" :word="word.word" :dictation="settingStore.dictation"/>
           <div class="text-md">{{ item.cn }}</div>
         </div>
       </div>
@@ -215,7 +215,7 @@ let tab = $ref(2)
       </div>
       <template v-if="tab === 0">
         <div class="my-2" v-for="item in word.phrases">
-          <div class="text-lg">{{ item.c }}</div>
+          <SentenceHightLightWord class="text-lg" :text="item.c" :word="word.word" :high-light="false" :dictation="settingStore.dictation"/>
           <div class="text-md">{{ item.cn }}</div>
         </div>
       </template>

src/pages/pc/components/WordItem.vue

@@ -21,7 +21,7 @@ const playWordAudio = usePlayWordAudio()
 </script>
 
 <template>
-  <div class="word-item"
+  <div class="common-list-item"
        :class="{hiddenOptionIcon}"
   >
     <div class="left">
@@ -45,92 +45,5 @@ const playWordAudio = usePlayWordAudio()
 
 
 <style scoped lang="scss">
-.word-item {
-  cursor: pointer;
-  width: 100%;
-  box-sizing: border-box;
-  background: var(--color-item-bg);
-  color: var(--color-font-1);
-  font-size: 1.1rem;
-  border-radius: .5rem;
-  display: flex;
-  justify-content: space-between;
-  transition: all .3s;
-  padding: .6rem;
-  gap: .6rem;
-  border: 1px solid var(--color-item-border);
 
-  .left {
-    display: flex;
-    gap: .6rem;
-
-    .title-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: .2rem;
-      word-break: break-word;
-    }
-  }
-
-  .right {
-    display: flex;
-    flex-direction: column;
-    gap: .3rem;
-    transition: all .3s;
-  }
-
-  .volume {
-    opacity: 0;
-  }
-
-  .item-title {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    color: var(--color-font-1);
-
-    .word {
-      font-size: 1.2rem;
-      display: flex;
-    }
-
-    .phonetic {
-      font-size: .9rem;
-      color: gray;
-    }
-  }
-
-  .item-sub-title {
-    font-size: 1rem;
-    color: gray;
-  }
-
-  &:hover {
-    background: var(--color-item-hover);
-
-    .volume, :deep(.option-icon) {
-      opacity: 1;
-    }
-  }
-
-  &.hiddenOptionIcon {
-    :deep(.option-icon) {
-      opacity: 0;
-    }
-  }
-
-  &.active {
-    background: var(--color-item-active);
-    $c: #E6A23C;
-
-    .phonetic, .item-sub-title {
-      color: var(--color-gray) !important;
-    }
-
-    .volume, .collect, .easy, .fill {
-      color: $c;
-    }
-  }
-}
-
-</style>
+</style>

src/pages/pc/word/components/SentenceHightLightWord.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
-const props = defineProps<{
+interface IProps {
   text: string
+  dictation: boolean
+  highLight?: boolean
   word: string
-}>()
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  text: '',
+  dictation: false,
+  highLight: true,
+  word: ''
+})
 
 // 计算属性：将句子中的目标单词高亮显示
 const highlightedText = computed(() => {
@@ -17,7 +26,7 @@ const highlightedText = computed(() => {
 
   // 将匹配的单词用span标签包裹
   return props.text.replace(regex, (match) => {
-    return `<span class="highlight-word">${match}</span>`
+    return `<span class="${props.highLight && 'highlight-word'} ${props.dictation && 'word-shadow'}">${match}</span>`
   })
 })