debug

src/pages/practice/Panel.vue

@@ -303,7 +303,7 @@ $header-height: 50rem;
         font-size: 16rem;
 
         &.active {
-          color: rgb(36, 127, 255);
+          color: var(--color-main-active);
           font-weight: bold;
         }
       }

src/pages/practice/practice-article/TypingArticle.vue

@@ -82,18 +82,6 @@ watch(() => settingStore.dictation, () => {
   calcTranslateLocation()
 })
 
-onMounted(() => {
-  emitter.on(EventKey.resetWord, () => {
-    wrong = input = ''
-  })
-  emitter.on(EventKey.onTyping, onTyping)
-})
-
-onUnmounted(() => {
-  emitter.off(EventKey.resetWord,)
-  emitter.off(EventKey.onTyping, onTyping)
-})
-
 function nextSentence() {
   // wordData.words = [
   //   {"name": "pharmacy", "trans": ["药房；配药学，药剂学；制药业；一批备用药品"], "usphone": "'fɑrməsi", "ukphone": "'fɑːməsɪ"},
@@ -218,7 +206,6 @@ function onTyping(e: KeyboardEvent) {
     playKeyboardAudio()
   }
   e.preventDefault()
-
 }
 
 function calcTranslateLocation() {
@@ -247,7 +234,9 @@ function calcTranslateLocation() {
 }
 
 function play() {
-  return playWordAudio('article1')
+  let currentSection = props.article.sections[sectionIndex]
+
+  return playWordAudio(currentSection[sentenceIndex].text)
   if (isPlay) {
     isPlay = false
     return window.speechSynthesis.pause();
@@ -262,55 +251,14 @@ function play() {
   window.speechSynthesis.speak(msg);
 }
 
-function onKeyDown(e: KeyboardEvent) {
-  if (!props.active) return
-  switch (e.key) {
-    case 'Backspace':
-      if (wrong) {
-        wrong = ''
-      } else {
-        input = input.slice(0, -1)
-      }
-      break
-    case ShortcutKeyMap.Collect:
-
-      break
-    case ShortcutKeyMap.Remove:
-      break
-    case ShortcutKeyMap.Ignore:
-      nextSentence()
-      break
-    case ShortcutKeyMap.Show:
-      if (settingStore.allowWordTip) {
-        hoverIndex = {
-          sectionIndex: sectionIndex,
-          sentenceIndex: sentenceIndex,
-        }
-      }
-      break
-  }
-
-  // console.log(
-  //     'sectionIndex', sectionIndex,
-  //     'sentenceIndex', sentenceIndex,
-  //     'wordIndex', wordIndex,
-  //     'stringIndex', stringIndex,
-  // )
-  e.preventDefault()
-}
-
-function onKeyUp() {
-  hoverIndex = {
-    sectionIndex: -1,
-    sentenceIndex: -1,
+function del() {
+  if (wrong) {
+    wrong = ''
+  } else {
+    input = input.slice(0, -1)
   }
 }
 
-useOnKeyboardEventListener(onKeyDown, onKeyUp)
-
-// useEventListener('keydown', onKeyDown)
-// useEventListener('keyup', onKeyUp)
-
 function playWord(word: ArticleWord) {
   playWordAudio(word.name)
 }
@@ -366,6 +314,30 @@ const {
   toggleArticleCollect
 } = useArticleOptions()
 
+
+function showSentence(i1: number = sectionIndex, i2: number = sentenceIndex) {
+  hoverIndex = {sectionIndex: i1, sentenceIndex: i2}
+}
+
+function hideSentence() {
+  hoverIndex = {sectionIndex: -1, sentenceIndex: -1}
+}
+
+onMounted(() => {
+  emitter.on(EventKey.resetWord, () => {
+    wrong = input = ''
+  })
+  emitter.on(EventKey.onTyping, onTyping)
+
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.resetWord,)
+  emitter.off(EventKey.onTyping, onTyping)
+})
+
+defineExpose({showSentence, play, del,hideSentence,nextSentence})
+
 </script>
 
 <template>
@@ -408,8 +380,8 @@ const {
                           sectionIndex === indexI && sentenceIndex === indexJ && settingStore.dictation
                           ?'dictation':''
                       ]"
-                      @mouseenter="settingStore.allowWordTip && (hoverIndex = {sectionIndex : indexI,sentenceIndex :indexJ})"
-                      @mouseleave="hoverIndex = {sectionIndex : -1,sentenceIndex :-1}"
+                      @mouseenter="settingStore.allowWordTip && showSentence(indexI,indexJ)"
+                      @mouseleave="hideSentence"
                       @click="playWordAudio(sentence.text)"
                       v-for="(sentence,indexJ) in section">
                   <span

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {$ref} from "vue/macros";
+import {$computed, $ref} from "vue/macros";
 import TypingArticle from "./TypingArticle.vue";
 import {
   Article,
@@ -29,6 +29,7 @@ import {useSettingStore} from "@/stores/setting.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {syncMyDictList, useArticleOptions} from "@/hooks/dict.ts";
 import ArticleList from "@/components/list/ArticleList.vue";
+import {useOnKeyboardEventListener} from "@/hooks/event.ts";
 
 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -48,9 +49,12 @@ let articleData = $ref({
   stringIndex: 0,
 })
 let showEditArticle = $ref(false)
+let typingArticleRef = $ref<any>()
 let editArticle = $ref<Article>(cloneDeep(DefaultArticle))
+let articleIsActive = $computed(() => tabIndex === 0)
 
 function next() {
+  if (!articleIsActive) return
   if (store.currentDict.chapterIndex >= articleData.articles.length - 1) {
     store.currentDict.chapterIndex = 0
   } else store.currentDict.chapterIndex++
@@ -59,19 +63,6 @@ function next() {
   getCurrentPractice()
 }
 
-onMounted(() => {
-  init()
-  emitter.on(EventKey.changeDict, init)
-  emitter.on(EventKey.next, next)
-  emitter.on(ShortcutKey.NextChapter, next)
-})
-
-onUnmounted(() => {
-  emitter.off(EventKey.changeDict, init)
-  emitter.off(EventKey.next, next)
-  emitter.off(ShortcutKey.NextChapter, next)
-})
-
 function init() {
   if (!store.currentDict.articles.length) return
   articleData.articles = cloneDeep(store.currentDict.articles)
@@ -180,7 +171,8 @@ function saveArticle(val: Article) {
   setArticle(val)
 }
 
-function edit(val: Article) {
+function edit(val: Article = articleData.article) {
+  if (!articleIsActive)return
   // tabIndex = 1
   // wordData.words = [
   //   {
@@ -256,6 +248,71 @@ function sort(list: Word[]) {
   wordData.index = 0
 }
 
+function play() {
+  if (!articleIsActive) return
+  typingArticleRef?.play()
+}
+
+function show() {
+  if (!articleIsActive) return
+  typingArticleRef?.showSentence()
+}
+
+
+function onKeyUp(e: KeyboardEvent) {
+  typingArticleRef.hideSentence()
+}
+
+async function onKeyDown(e: KeyboardEvent) {
+  // console.log('e', e)
+  switch (e.key) {
+    case 'Backspace':
+      typingArticleRef.del()
+      break
+  }
+}
+
+useOnKeyboardEventListener(onKeyDown, onKeyUp)
+
+function skip() {
+  if (!articleIsActive) return
+  typingArticleRef?.nextSentence()
+}
+
+function collect(e: KeyboardEvent) {
+  if (!articleIsActive) return
+  toggleArticleCollect(articleData.article)
+}
+
+//包装一遍，因为快捷建的默认参数是Event
+function shortcutKeyEdit(){
+  edit()
+}
+
+onMounted(() => {
+  init()
+  emitter.on(EventKey.changeDict, init)
+  emitter.on(EventKey.next, next)
+
+  emitter.on(ShortcutKey.NextChapter, next)
+  emitter.on(ShortcutKey.PlayWordPronunciation, play)
+  emitter.on(ShortcutKey.ShowWord, show)
+  emitter.on(ShortcutKey.Next, skip)
+  emitter.on(ShortcutKey.ToggleCollect, collect)
+  emitter.on(ShortcutKey.EditArticle, shortcutKeyEdit)
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.changeDict, init)
+  emitter.off(EventKey.next, next)
+  emitter.off(ShortcutKey.NextChapter, next)
+  emitter.off(ShortcutKey.PlayWordPronunciation, play)
+  emitter.off(ShortcutKey.ShowWord, show)
+  emitter.off(ShortcutKey.Next, skip)
+  emitter.off(ShortcutKey.ToggleCollect, collect)
+  emitter.off(ShortcutKey.EditArticle, shortcutKeyEdit)
+})
+
 defineExpose({getCurrentPractice})
 
 </script>
@@ -266,10 +323,11 @@ defineExpose({getCurrentPractice})
       <div class="swiper-list" :class="`step${tabIndex}`">
         <div class="swiper-item">
           <TypingArticle
+              ref="typingArticleRef"
               :active="tabIndex === 0"
               @edit="edit"
               @wrong="wrong"
-              @over="over"
+              @over="skip"
               @nextWord="nextWord"
               :article="articleData.article"
           />

src/pages/practice/practice-word/TypingWord.vue

@@ -147,10 +147,6 @@ function next(isTyping: boolean = true) {
   }
 }
 
-function onKeyUp(e: KeyboardEvent) {
-  typingRef.hideWord()
-}
-
 function wordWrong() {
   if (!store.wrong.originWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) {
     store.wrong.originWords.push(word)
@@ -161,6 +157,10 @@ function wordWrong() {
   }
 }
 
+function onKeyUp(e: KeyboardEvent) {
+  typingRef.hideWord()
+}
+
 async function onKeyDown(e: KeyboardEvent) {
   // console.log('e', e)
   switch (e.key) {