修改数据结构

src/components/Practice/TypeArticle.vue

@@ -70,6 +70,7 @@ let input = $ref('')
 let wrong = $ref('')
 let isSpace = $ref(false)
 let isDictation = $ref(true)
+let isTranslate = $ref(false)
 let showFullWord = $ref(false)
 let hoverIndex = $ref({
   sectionIndex: 0,
@@ -93,33 +94,34 @@ let article = reactive<Article>({
 
 onMounted(() => {
   let sections = useSplitArticle(article.article)
-  practiceStore.total = 0
-  sections.map(v => {
-    v.map(w => {
-      w.words.map(s => {
-        if (!store.skipWordNamesWithSimpleWords.includes(s.toLowerCase())) {
-          practiceStore.total++
-        }
-      })
-    })
-  })
-  practiceStore.startDate = Date.now()
-
-  let temp = useSplitArticle(article.articleTranslate, 'cn', CnKeyboardMap)
-  temp.map((v, i) => {
-    v.map((w, j) => {
-      article.translate.push({
-        sentence: w.sentence,
-        location: i + '-' + j
-      })
-    })
-  })
-  article.sections = sections
-  console.log(cloneDeep(article))
-  calcTranslateLocation()
+  // practiceStore.total = 0
+  // sections.map(v => {
+  //   v.map(w => {
+  //     w.words.map(s => {
+  //       if (!store.skipWordNamesWithSimpleWords.includes(s.toLowerCase())) {
+  //         practiceStore.total++
+  //       }
+  //     })
+  //   })
+  // })
+  // practiceStore.startDate = Date.now()
+  //
+  // let temp = useSplitArticle(article.articleTranslate, 'cn', CnKeyboardMap)
+  // temp.map((v, i) => {
+  //   v.map((w, j) => {
+  //     article.translate.push({
+  //       sentence: w.sentence,
+  //       location: i + '-' + j
+  //     })
+  //   })
+  // })
+  // article.sections = sections
+  console.log(cloneDeep(sections))
+  // calcTranslateLocation()
 })
 
 function calcTranslateLocation() {
+  if (!isTranslate) return
   nextTick(() => {
     setTimeout(() => {
       let articleRect = articleWrapperRef.getBoundingClientRect()

src/components/Practice/TypeWord.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, onMounted, onUnmounted, provide, watch} from "vue"
+import {computed, onMounted, onUnmounted, provide, watch, watchEffect} from "vue"
 import 快速打字的机械键盘声音Mp3 from '../../assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from '../../assets/sound/key-sounds/键盘快速打字的声音.mp3'
 import 电话打字的声音Mp3 from '../../assets/sound/key-sounds/电话打字的声音.mp3'
@@ -44,26 +44,6 @@ let data = $ref({
   originWrongWords: [],
 })
 
-watch(() => props.words, (n: Word[]) => {
-  data.words = n
-  data.index = n.length ? 0 : -1
-  practiceStore.inputNumber = 0
-  practiceStore.wrongNumber = 0
-  practiceStore.repeatNumber = 0
-  practiceStore.total = n.length
-  practiceStore.wrongWords = []
-  practiceStore.startDate = Date.now()
-})
-
-
-let word = $computed(() => {
-  return data.words[data.index] ?? {
-    trans: [],
-    name: '',
-    usphone: '',
-    ukphone: '',
-  }
-})
 
 let input = $ref('')
 let wrong = $ref('')
@@ -80,10 +60,32 @@ const [playAudio] = usePlayWordAudio()
 
 const practiceStore = usePracticeStore()
 
+watchEffect(() => {
+  data.words = props.words
+  data.index = props.words.length ? 0 : -1
+  practiceStore.inputNumber = 0
+  practiceStore.wrongNumber = 0
+  practiceStore.repeatNumber = 0
+  practiceStore.total =  props.words.length
+  practiceStore.wrongWords = []
+  practiceStore.startDate = Date.now()
+})
+
+
+let word = $computed(() => {
+  return data.words[data.index] ?? {
+    trans: [],
+    name: '',
+    usphone: '',
+    ukphone: '',
+  }
+})
+
 let resetWord = $computed(() => {
   return word.name.slice(input.length + wrong.length)
 })
 
+
 onMounted(() => {
   emitter.on(EventKey.resetWord, () => {
     input = ''

src/components/Toolbar/Toolbar.vue

@@ -145,6 +145,7 @@ header {
   box-sizing: border-box;
   transition: all .3s;
   gap: 10rem;
+  opacity: 0;
 
   .info {
     font-size: 16rem;