From 1606d58a04034d821b4455be9b8eca02bece8a44 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 6 Sep 2023 18:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=96=B0=E8=AE=BE=E8=AE=A1=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        |  40 +---
 src/assets/css/style.scss          |   4 +-
 src/components/Footer2.vue         |  12 +-
 src/components/Practice.vue        |  24 +++
 src/components/Toolbar/Toolbar.vue |   2 +-
 src/components/Type.vue            |  15 ++
 src/components/Type2.vue           | 281 +++++++++++++++++++++++++++++
 src/components/TypeArticle.vue     | 137 +++++++-------
 src/hooks/useSound.ts              |   2 +-
 src/stores/base.ts                 |   3 +
 10 files changed, 406 insertions(+), 114 deletions(-)
 create mode 100644 src/components/Practice.vue
 create mode 100644 src/components/Type2.vue

diff --git a/src/App.vue b/src/App.vue
index b9f33869..76fa4610 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,10 @@
 <script setup lang="ts">
 
-import Toolbar from "@/components/Toolbar/Toolbar.vue";
-import Type from "@/components/Type.vue";
-import Side from "@/components/Side.vue";
 import Statistics from "@/components/Modal/Statistics.vue";
-import Backgorund from "@/components/Backgorund.vue";
 import {onMounted, watch} from "vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {SaveKey} from "@/types.ts"
-import Footer from "@/components/Footer.vue"
-import TypeArticle from "@/components/TypeArticle.vue"
+import Practice from "@/components/Practice.vue"
 
 const store = useBaseStore()
 // 查询当前系统主题颜色
@@ -38,15 +33,8 @@ onMounted(() => {
 <template>
   <!--    <Backgorund/>-->
   <div class="main-page">
-    <div class="center">
-      <Toolbar/>
-      <div class="content">
-<!--                <Type/>-->
-        <TypeArticle/>
-      </div>
-      <Footer/>
-      <Side/>
-    </div>
+    <Practice/>
+    <!--      <Side/>-->
     <Statistics></Statistics>
   </div>
 </template>
@@ -57,32 +45,12 @@ onMounted(() => {
 .main-page {
   position: absolute;
   z-index: 1;
-  width: 100vw;
+  width: 100%;
   height: 100%;
   overflow: hidden;
   font-size: 14rem;
   display: flex;
   justify-content: center;
   background-color: var(--color-main-bg);
-
-  .center {
-    width: var(--toolbar-width);
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    //border: 1px solid gray;
-    position: relative;
-
-    .content {
-      width: 100%;
-      position: relative;
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-    }
-  }
 }
 </style>
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 1713d6bd..bada4f94 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -17,8 +17,8 @@
   --color-item-hover: white;
   --color-item-active: rgb(75, 110, 175);
   --color-main-active: rgb(12,140,233);
-  //--toolbar-width: 700rem;
-  --toolbar-width: 50vw;
+  --toolbar-width: 700rem;
+  //--toolbar-width: 50vw;
 }
 
 html[data-theme='dark'] {
diff --git a/src/components/Footer2.vue b/src/components/Footer2.vue
index 8d566c72..d831b309 100644
--- a/src/components/Footer2.vue
+++ b/src/components/Footer2.vue
@@ -16,7 +16,7 @@ interface IProps {
 
 const props = withDefaults(defineProps<IProps>(), {
   total: 0,
-  startDate: Date.now,
+  startDate: Date.now(),
   inputNumber: 0,
   wrongNumber: 0,
   correctRate: 0,
@@ -24,8 +24,8 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const store = useBaseStore()
 
-function format(val: number, suffix: string = '') {
-  return val === 0 ? '-' : (val + suffix)
+function format(val: number, suffix: string = '', check: number = -1) {
+  return val === check ? '-' : (val + suffix)
 }
 
 const progress = $computed(() => {
@@ -72,12 +72,12 @@ onUnmounted(() => {
           <div class="name">单词总数</div>
         </div>
         <div class="row">
-          <div class="num">{{ inputNumber }}</div>
+          <div class="num">{{ format(inputNumber, '', 0) }}</div>
           <div class="line"></div>
           <div class="name">输入数</div>
         </div>
         <div class="row">
-          <div class="num">{{ format(props.wrongNumber) }}</div>
+          <div class="num">{{ format(props.wrongNumber, '', 0) }}</div>
           <div class="line"></div>
           <div class="name">错误数</div>
         </div>
@@ -100,7 +100,7 @@ onUnmounted(() => {
 @import "@/assets/css/colors.scss";
 
 .footer {
-  width: 100%;
+  width: var(--toolbar-width);
   margin-bottom: 30rem;
   transition: all .3s;
   position: relative;
diff --git a/src/components/Practice.vue b/src/components/Practice.vue
new file mode 100644
index 00000000..fcaba0c9
--- /dev/null
+++ b/src/components/Practice.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+
+import Toolbar from "@/components/Toolbar/Toolbar.vue"
+import TypeArticle from "@/components/TypeArticle.vue"
+</script>
+
+<template>
+  <div class="practice">
+    <Toolbar/>
+    <TypeArticle/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.practice {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index d7b50427..36d3b52b 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -130,9 +130,9 @@ watch(() => store.setting.showToolbar, n => {
 @import "@/assets/css/colors.scss";
 
 header {
+  width: var(--toolbar-width);
   margin-top: 10rem;
   min-height: 60rem;
-  width: 100%;
   background: var(--color-header-bg);
   display: flex;
   justify-content: space-between;
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 7796fcd5..609f4cd4 100644
--- a/src/components/Type.vue
+++ b/src/components/Type.vue
@@ -39,6 +39,21 @@ const [playCorrect] = useSound([correct], 1)
 const [playAudio] = usePlayWordAudio()
 
 
+interface IProps {
+  total: number,
+  startDate: number
+  inputNumber: number
+  wrongNumber: number
+  correctRate: number
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  total: 0,
+  startDate: Date.now(),
+  inputNumber: 0,
+  wrongNumber: 0,
+  correctRate: 0,
+})
 
 const resetWord = $computed(() => {
   return store.word.name.slice(input.length + wrong.length)
diff --git a/src/components/Type2.vue b/src/components/Type2.vue
new file mode 100644
index 00000000..6ff39343
--- /dev/null
+++ b/src/components/Type2.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import {computed, onMounted, onUnmounted, provide, watch} 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'
+import 老式机械 from '../assets/sound/key-sounds/老式机械.mp3'
+import 机械0 from '../assets/sound/key-sounds/jixie/机械0.mp3'
+import 机械1 from '../assets/sound/key-sounds/jixie/机械1.mp3'
+import 机械2 from '../assets/sound/key-sounds/jixie/机械2.mp3'
+import 机械3 from '../assets/sound/key-sounds/jixie/机械3.mp3'
+import beep from '../assets/sound/beep.wav'
+import correct from '../assets/sound/correct.wav'
+import {$computed, $ref} from "vue/macros"
+import {useSound} from "@/hooks/useSound.ts"
+import {useBaseStore} from "@/stores/base.ts"
+import {DictType, SaveKey, ShortKeyMap, Statistics, Word} from "../types";
+import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
+import useTheme from "@/hooks/useTheme.ts";
+import Tooltip from "@/components/Tooltip.vue";
+import BaseButton from "@/components/BaseButton.vue";
+import {
+  Down,
+  Delete,
+} from "@icon-park/vue-next"
+import {emitter, EventKey} from "@/utils/eventBus.ts"
+import {cloneDeep} from "lodash"
+
+let input = $ref('')
+let wrong = $ref('')
+let showFullWord = $ref(false)
+let activeIndex = $ref(-1)
+const store = useBaseStore()
+
+// const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
+// const [playKeySound, setAudio] = useSound([老式机械], 3)
+const [playKeySound, setAudio] = useSound([电话打字的声音Mp3], 3)
+const [playBeep] = useSound([beep], 1)
+const [playCorrect] = useSound([correct], 1)
+const [playAudio] = usePlayWordAudio()
+
+interface IProps {
+  words: Word[],
+  index: number,
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  words: [],
+  index: -1
+})
+let data = $ref({
+  index: props.index,
+  words: props.words,
+  wrongWords: [],
+  originWrongWords: [],
+  repeatNumber: 0,
+  startDate: Date.now(),
+  correctRate: -1,
+})
+let word = $computed(() => {
+  return data.words[data.index] ?? {
+    trans: [],
+    name: '',
+    usphone: '',
+    ukphone: '',
+  }
+})
+let resetWord = $computed(() => {
+  return word.name.slice(input.length + wrong.length)
+})
+
+watch(data, () => {
+  if (data.index < 1) {
+    return data.correctRate = -1
+  }
+  if (data.wrongWords.length > data.index) {
+    return data.correctRate = 0
+  }
+  data.correctRate = 100 - Math.trunc((data.wrongWords.length / data.index) * 100)
+})
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeyDown)
+  window.addEventListener('keyup', onKeyUp)
+
+  emitter.on(EventKey.resetWord, () => {
+    input = ''
+  })
+})
+
+onUnmounted(() => {
+  // console.log('onUnmounted')
+  window.removeEventListener('keydown', onKeyDown)
+  window.removeEventListener('keyup', onKeyUp)
+})
+
+function next() {
+  if (data.index === props.words.length - 1) {
+    if (data.wrongWords.length) {
+      data.words = cloneDeep(data.wrongWords)
+      if (!data.originWrongWords.length) {
+        data.originWrongWords = cloneDeep(data.wrongWords)
+      }
+      data.index = 0
+      data.repeatNumber++
+      data.wrongWords = []
+    } else {
+      console.log('这本书完了')
+      emitter.emit(EventKey.openStatModal)
+    }
+  } else {
+    data.index++
+    console.log('这个词完了')
+    if ([DictType.customDict, DictType.innerDict].includes(store.current.dictType)
+        && store.skipWordNames.includes(word.name.toLowerCase())) {
+      next()
+    }
+  }
+
+  wrong = input = ''
+}
+
+function onKeyUp(e: KeyboardEvent) {
+  showFullWord = false
+}
+
+async function onKeyDown(e: KeyboardEvent) {
+  //TODO 还有横杠
+  if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
+    let letter = e.key
+    if ((input + letter).toLowerCase() === word.name.toLowerCase().slice(0, input.length + 1)) {
+      input += letter
+      wrong = ''
+      playKeySound()
+    } else {
+      if (!store.wrongWordDict.originWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) {
+        store.wrongWordDict.originWords.push(word)
+        store.wrongWordDict.words.push(word)
+        store.wrongWordDict.chapterWords = [store.wrongWordDict.words]
+      }
+      if (!data.wrongWords.find((v: Word) => v.name.toLowerCase() === word.name.toLowerCase())) {
+        data.wrongWords.push(word)
+      }
+      wrong = letter
+      playKeySound()
+      playBeep()
+      setTimeout(() => {
+        wrong = ''
+      }, 500)
+    }
+    if (input.toLowerCase() === word.name.toLowerCase()) {
+      playCorrect()
+      setTimeout(next, 300)
+    }
+  } else {
+    // console.log('e', e)
+    switch (e.key) {
+      case 'Backspace':
+        if (wrong) {
+          wrong = ''
+        } else {
+          input = input.slice(0, -1)
+        }
+        break
+      case ShortKeyMap.Collect:
+        if (!store.newWordDict.originWords.find((v: Word) => v.name === word.name)) {
+          store.newWordDict.originWords.push(word)
+          store.newWordDict.words.push(word)
+          store.newWordDict.chapterWords = [store.newWordDict.words]
+        }
+        activeIndex = 1
+        break
+      case ShortKeyMap.Remove:
+        if (!store.skipWordNames.includes(word.name)) {
+          store.skipWordDict.originWords.push(word)
+          store.skipWordDict.words.push(word)
+          store.skipWordDict.chapterWords = [store.skipWordDict.words]
+        }
+        activeIndex = 0
+        next()
+        break
+      case ShortKeyMap.Ignore:
+        e.preventDefault()
+        activeIndex = 2
+        next()
+        break
+      case ShortKeyMap.Show:
+        showFullWord = true
+        break
+    }
+    setTimeout(() => {
+      activeIndex = -1
+    }, 200)
+  }
+}
+</script>
+
+<template>
+  <div class="type-word">
+    <div class="translate">{{ word.trans.join('；') }}</div>
+    <div class="word-wrapper">
+      <div class="word" :class="wrong && 'is-wrong'">
+        <span class="input" v-if="input">{{ input }}</span>
+        <span class="wrong" v-if="wrong">{{ wrong }}</span>
+        <template v-if="store.isDictation">
+          <span class="letter" v-if="!showFullWord"
+                @mouseenter="showFullWord = true">{{ resetWord.split('').map(v => '_').join('') }}</span>
+          <span class="letter" v-else @mouseleave="showFullWord = false">{{ resetWord }}</span>
+        </template>
+        <span class="letter" v-else>{{ resetWord }}</span>
+      </div>
+      <div class="audio" @click="playAudio(word.name)">播放</div>
+    </div>
+    <div class="phonetic">{{ word.usphone }}</div>
+    <div class="options">
+      <BaseButton keyboard="`" :active="activeIndex === 0">
+        忽略
+      </BaseButton>
+      <BaseButton keyboard="Enter" :active="activeIndex === 1">
+        收藏
+      </BaseButton>
+      <BaseButton keyboard="Tab" :active="activeIndex === 2">
+        下一个
+      </BaseButton>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+@import "@/assets/css/colors.scss";
+
+.type-word {
+  display: flex;
+  //display: none;
+
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 14rem;
+  color: gray;
+  gap: 2rem;
+
+  .options {
+    margin-top: 10rem;
+    display: flex;
+    gap: 15rem;
+    font-size: 18rem;
+  }
+
+  .phonetic, .translate {
+    font-size: 20rem;
+    margin-left: -30rem;
+  }
+
+  .word-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+
+    .word {
+      font-size: 48rem;
+      line-height: 1;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+      letter-spacing: 5rem;
+
+      .input {
+        color: rgb(22, 163, 74);
+      }
+
+      .wrong {
+        color: rgba(red, 0.6);
+      }
+
+      &.is-wrong {
+        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+      }
+    }
+  }
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/TypeArticle.vue b/src/components/TypeArticle.vue
index e5fada8d..3bdecbe7 100644
--- a/src/components/TypeArticle.vue
+++ b/src/components/TypeArticle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import {usePlayWordAudio} from "@/hooks/usePlayWordAudio.ts"
-import {computed, nextTick, onMounted, reactive} from "vue"
+import {computed, nextTick, onMounted, reactive, watch} from "vue"
 import {cloneDeep} from "lodash"
 import 快速打字的机械键盘声音Mp3 from '../assets/sound/key-sounds/快速打字的机械键盘声音.mp3'
 import 键盘快速打字的声音Mp3 from '../assets/sound/key-sounds/键盘快速打字的声音.mp3'
@@ -18,6 +18,7 @@ import {CnKeyboardMap, useSplitArticle} from "@/hooks/useSplitArticle";
 import {$computed, $ref} from "vue/macros";
 import {Article, DictType, SaveKey, Sentence, ShortKeyMap, Word} from "@/types";
 import {useBaseStore} from "@/stores/base";
+import Footer2 from "@/components/Footer2.vue"
 
 let article1 = `How does the older investor differ in his approach to investment from the younger investor?
 There is no shortage of tipsters around offering 'get-rich-quick' opportunities. But if you are a serious private investor, leave the Las Vegas mentality to those with money to fritter. The serious investor needs a proper 'portfolio' -- a well-planned selection of investments, with a definite structure and a clear aim. But exactly how does a newcomer to the stock market go about achieving that?
@@ -56,7 +57,6 @@ const [playCorrect] = useSound([correct], 1)
 
 const store = useBaseStore()
 
-
 let sectionIndex = $ref(0)
 let sentenceIndex = $ref(0)
 let wordIndex = $ref(6)
@@ -64,12 +64,20 @@ let index = $ref(0)
 let input = $ref('')
 let wrong = $ref('')
 let isSpace = $ref(false)
-let isDictation = $ref(false)
+let isDictation = $ref(true)
 let showFullWord = $ref(false)
 let hoverIndex = $ref({
   sectionIndex: 0,
   sentenceIndex: 0,
 })
+let statistics = $ref({
+  wrongWords: [],
+  total: 0,
+  startDate: 0,
+  inputNumber: 0,
+  wrongNumber: 0,
+  correctRate: -1,
+})
 
 let article = reactive<Article>({
   article: article1,
@@ -81,39 +89,30 @@ let article = reactive<Article>({
   translate: [],
 })
 
+watch(statistics, () => {
+  if (statistics.inputNumber < 1) {
+    return statistics.correctRate = -1
+  }
+  if (statistics.wrongNumber > statistics.inputNumber) {
+    return statistics.correctRate = 0
+  }
+  statistics.correctRate = 100 - Math.trunc(((statistics.wrongNumber) / (statistics.inputNumber)) * 100)
+})
 onMounted(() => {
   let sections = useSplitArticle(article.article)
   let wordNumber = 0
   sections.map(v => {
     v.map(w => {
-      w.words.map(s=>{
-        if (!store.skipWordNames.includes(s.toLowerCase())){
+      w.words.map(s => {
+        if (!store.skipWordNamesWithSimpleWords.includes(s.toLowerCase())) {
           wordNumber++
         }
       })
     })
   })
-  console.log('sections', sections)
-  console.log('wordNumber', wordNumber)
+  statistics.total = wordNumber
+  statistics.startDate = Date.now()
 
-  setTimeout(() => {
-    store.current = {
-      dictType: DictType.innerDict,
-      words: [],
-      index: wordIndex,
-      wrongWords: [],
-      originWrongWords: [],
-      repeatNumber: 0,
-      statistics: {
-        startDate: Date.now(),
-        endDate: -1,
-        spend: -1,
-        wordNumber: wordNumber,
-        correctRate: -1,
-        wrongWordNumber: -1,
-      }
-    }
-  }, 1000)
   let temp = useSplitArticle(article.articleTranslate, 'cn', CnKeyboardMap)
   temp.map((v, i) => {
     v.map((w, j) => {
@@ -187,7 +186,9 @@ function onKeyDown(e: KeyboardEvent) {
       isSpace = false
       index = 0
       wordIndex++
-      store.current.index++
+      if (!store.skipWordNamesWithSimpleWords.includes(currentWord.toLowerCase())) {
+        statistics.inputNumber++
+      }
 
       playCorrect()
       if (!currentSentence.words[wordIndex]) {
@@ -257,21 +258,23 @@ function onKeyDown(e: KeyboardEvent) {
           ukphone: '',
           trans: []
         }
-        if (!store.wrongWordDict.originWords.find((v: Word) => v.name === currentWord)) {
+        if (!store.wrongWordDict.originWords.find((v: Word) => v.name.toLowerCase() === currentWord.toLowerCase())) {
           store.wrongWordDict.originWords.push(word)
           store.wrongWordDict.words.push(word)
           store.wrongWordDict.chapterWords = [store.wrongWordDict.words]
         }
-        if (!store.current.wrongWords.find((v: Word) => v.name === currentWord)) {
-          store.current.wrongWords.push(word)
+
+        if (!store.skipWordNamesWithSimpleWords.includes(currentWord.toLowerCase())) {
+          if (!statistics.wrongWords.find((v) => v.toLowerCase() === currentWord.toLowerCase())) {
+            statistics.wrongWords.push(currentWord)
+            statistics.wrongNumber++
+          }
         }
-        store.current.statistics.correctRate = Math.trunc(((store.current.index + 1 - store.current.wrongWords.length) / (store.current.index + 1)) * 100)
 
         wrong = letter
         playBeep()
         setTimeout(() => {
           wrong = ''
-          // wrong = input = ''
         }, 500)
         console.log('未匹配')
       }
@@ -321,7 +324,6 @@ function onKeyUp() {
   }
 }
 
-
 function playWord(word: string) {
   playAudio(word)
 }
@@ -370,14 +372,11 @@ function otherWord(word: string, i: number, i2: number, i3: number) {
 
 <template>
   <div class="type-wrapper">
-    <div class="trans">
-      <span>翻译：</span>
-      <span class="text">上周我去看戏了</span>
-    </div>
-    <div class="article-wrapper" ref="articleWrapperRef">
-      <article @click="focus">
-        <div class="section"
-             v-for="(section,indexI) in article.sections">
+    <div class="content">
+      <div class="article-wrapper" ref="articleWrapperRef">
+        <article @click="focus">
+          <div class="section"
+               v-for="(section,indexI) in article.sections">
         <span class="sentence"
               :class="[
                   sectionIndex === indexI && sentenceIndex === indexJ ?'isDictation':''
@@ -416,22 +415,30 @@ function otherWord(word: string, i: number, i2: number, i3: number) {
                 ]">&nbsp;</span>
           </span>
         </span>
-        </div>
-      </article>
-      <div class="translate">
-        <div class="row"
-             :class="`translate${item.location}`"
-             v-for="item in article.translate">
-          <span class="space"></span>
-          <span class="text">{{ item.sentence }}</span>
+          </div>
+        </article>
+        <div class="translate">
+          <div class="row"
+               :class="`translate${item.location}`"
+               v-for="item in article.translate">
+            <span class="space"></span>
+            <span class="text">{{ item.sentence }}</span>
+          </div>
         </div>
       </div>
+      <input ref="inputRef"
+             class="inputEl"
+             type="text"
+             @keyup="onKeyUp"
+             @keydown="onKeyDown">
     </div>
-    <input ref="inputRef"
-           class="inputEl"
-           type="text"
-           @keyup="onKeyUp"
-           @keydown="onKeyDown">
+    <Footer2
+        :total="statistics.total"
+        :startDate="statistics.startDate"
+        :inputNumber="statistics.inputNumber"
+        :wrongNumber="statistics.wrongNumber"
+        :correctRate="statistics.correctRate"
+    />
   </div>
 </template>
 
@@ -444,22 +451,16 @@ function otherWord(word: string, i: number, i2: number, i3: number) {
 }
 
 .type-wrapper {
-  height: 100%;
-  overflow: auto;
-  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-  .trans {
-    height: 40rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    display: none;
-
-    .text {
-      color: var(--color-font-1);
-
-      font-size: 22rem;
-    }
+  .content {
+    width: 60%;
+    flex: 1;
+    overflow: auto;
+    position: relative;
   }
 
   article {
diff --git a/src/hooks/useSound.ts b/src/hooks/useSound.ts
index 65fabced..ade71ddd 100644
--- a/src/hooks/useSound.ts
+++ b/src/hooks/useSound.ts
@@ -19,7 +19,7 @@ export function useSound(srcList?: string[], num?: number) {
   })
 
   let index = $ref(0)
-  const play = () => {
+  const play: Function = () => {
     index++
     if (audioList.length > 1 && audioList.length !== audioLength) {
       audioList[index % audioList.length].play()
diff --git a/src/stores/base.ts b/src/stores/base.ts
index d63b7333..cfdb44d3 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -98,6 +98,9 @@ export const useBaseStore = defineStore('base', {
   },
   getters: {
     skipWordNames: (state: State) => {
+      return state.skipWordDict.originWords.map(v => v.name.toLowerCase())
+    },
+    skipWordNamesWithSimpleWords: (state: State) => {
       return state.skipWordDict.originWords.map(v => v.name.toLowerCase()).concat(state.simpleWords)
     },
     currentDict(state: State): Dict {