chore: change store data

2023-09-19 12:35:03 +08:00
parent b82fffc883
commit cbbb760eac
17 changed files with 1308 additions and 2315 deletions
--- a/components.d.ts
+++ b/components.d.ts
@@ -38,7 +38,7 @@ declare module 'vue' {
    Ring: typeof import('./src/components/Ring.vue')['default']
    SettingModal: typeof import('./src/components/Toolbar/SettingModal.vue')['default']
    Side: typeof import('./src/components/Side.vue')['default']
-    Statistics: typeof import('./src/components/Modal/Statistics.vue')['default']
+    Statistics: typeof import('./src/components/Practice/Statistics.vue')['default']
    Toolbar: typeof import('./src/components/Toolbar/Toolbar.vue')['default']
    Tooltip: typeof import('./src/components/Tooltip.vue')['default']
    TranslateSetting: typeof import('./src/components/Toolbar/TranslateSetting.vue')['default']
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">

-import Statistics from "@/components/Modal/Statistics.vue";
 import {onMounted, watch} from "vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {SaveKey} from "@/types.ts"
@@ -37,7 +36,6 @@ onMounted(() => {
    <Practice/>
    <!--    <AddArticle/>-->
    <!--      <Side/>-->
-    <Statistics></Statistics>
  </div>
 </template>

--- a/src/components/Practice/Footer.vue
+++ b/src/components/Practice/Footer.vue
@@ -6,8 +6,10 @@ import {useBaseStore} from "@/stores/base.ts"
 import Tooltip from "@/components/Tooltip.vue"
 import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts";
 import {Icon} from "@iconify/vue";
+import {useSettingStore} from "@/stores/setting.ts";

 const practiceStore = usePracticeStore()
+const settingStore = useSettingStore()
 const store = useBaseStore()

 function format(val: number, suffix: string = '', check: number = -1) {
@@ -35,12 +37,12 @@ onUnmounted(() => {
 </script>

 <template>
-  <div class="footer" :class="!store.setting.showToolbar && 'hide'">
-    <Tooltip :title="store.setting.showToolbar?'收起':'展开'">
+  <div class="footer" :class="!settingStore.showToolbar && 'hide'">
+    <Tooltip :title="settingStore.showToolbar?'收起':'展开'">
      <Icon icon="icon-park-outline:down"
-            @click="store.setting.showToolbar = !store.setting.showToolbar"
+            @click="settingStore.showToolbar = !settingStore.showToolbar"
            class="arrow"
-            :class="!store.setting.showToolbar && 'down'"
+            :class="!settingStore.showToolbar && 'down'"
            width="24" color="#999"/>
    </Tooltip>
    <div class="bottom">
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
--- a/src/components/Practice/Statistics.vue
+++ b/src/components/Practice/Statistics.vue
@@ -10,10 +10,14 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {onMounted, reactive} from "vue";
 import {cloneDeep} from "lodash-es";
 import {Icon} from '@iconify/vue';
+import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts";
+import {useSettingStore} from "@/stores/setting.ts";

 const store = useBaseStore()
+const settingStore = useSettingStore()
 let statModalIsOpen = $ref(false)
 let currentStat = reactive<Statistics>(cloneDeep(DefaultStatistics))
+const practiceStore = usePracticeStore()

 onMounted(() => {
  emitter.on(EventKey.openStatModal, () => {
@@ -23,7 +27,7 @@ onMounted(() => {
 })

 function write() {
-  store.setting.dictation = true
+  settingStore.dictation = true
  repeat()
 }

--- a/src/components/Practice/TypeArticle.vue
+++ b/src/components/Practice/TypeArticle.vue
--- a/src/components/Practice/TypeWord.vue
+++ b/src/components/Practice/TypeWord.vue
@@ -22,6 +22,7 @@ import {emitter, EventKey} from "@/utils/eventBus.ts"
 import {cloneDeep} from "lodash-es"
 import {usePracticeStore} from "@/components/Practice/usePracticeStore.ts"
 import {useEventListener} from "@/hooks/useEvent.ts";
+import {useSettingStore} from "@/stores/setting.ts";

 interface IProps {
  words: Word[],
@@ -44,8 +45,10 @@ let data = $ref({
 let input = $ref('')
 let wrong = $ref('')
 let showFullWord = $ref(false)
-let activeIndex = $ref(-1)
+let activeBtnIndex = $ref(-1)
 const store = useBaseStore()
+const practiceStore = usePracticeStore()
+const settingStore = useSettingStore()

 // const [playKeySound, setAudio] = useSound([机械0, 机械1, 机械2, 机械3], 1)
 // const [playKeySound, setAudio] = useSound([老式机械], 3)
@@ -54,7 +57,6 @@ const [playBeep] = useSound([beep], 1)
 const [playCorrect] = useSound([correct], 1)
 const [playAudio] = usePlayWordAudio()

-const practiceStore = usePracticeStore()

 watchEffect(() => {
  data.words = props.words
@@ -130,7 +132,7 @@ async function onKeyDown(e: KeyboardEvent) {
  if ((e.keyCode >= 65 && e.keyCode <= 90) || e.code === 'Space') {
    let letter = e.key
    let isWrong = false
-    if (store.setting.ignoreCase) {
+    if (settingStore.ignoreCase) {
      isWrong = (input + letter).toLowerCase() === word.name.toLowerCase().slice(0, input.length + 1)
    } else {
      isWrong = (input + letter) === word.name.slice(0, input.length + 1)
@@ -158,7 +160,7 @@ async function onKeyDown(e: KeyboardEvent) {
    }
    if (input.toLowerCase() === word.name.toLowerCase()) {
      playCorrect()
-      setTimeout(next, store.setting.waitTimeForChangeWord)
+      setTimeout(next, settingStore.waitTimeForChangeWord)
    }
  } else {
    // console.log('e', e)
@@ -176,7 +178,7 @@ async function onKeyDown(e: KeyboardEvent) {
          store.newWordDict.words.push(word)
          store.newWordDict.chapterWords = [store.newWordDict.words]
        }
-        activeIndex = 1
+        activeBtnIndex = 1
        break
      case ShortKeyMap.Remove:
        if (!store.skipWordNames.includes(word.name.toLowerCase())) {
@@ -184,22 +186,22 @@ async function onKeyDown(e: KeyboardEvent) {
          store.skipWordDict.words.push(word)
          store.skipWordDict.chapterWords = [store.skipWordDict.words]
        }
-        activeIndex = 0
+        activeBtnIndex = 0
        next()
        break
      case ShortKeyMap.Ignore:
        e.preventDefault()
-        activeIndex = 2
+        activeBtnIndex = 2
        next()
        break
      case ShortKeyMap.Show:
-        if (store.setting.allowWordTip) {
+        if (settingStore.allowWordTip) {
          showFullWord = true
        }
        break
    }
    setTimeout(() => {
-      activeIndex = -1
+      activeBtnIndex = -1
    }, 200)
  }
 }
@@ -208,19 +210,19 @@ async function onKeyDown(e: KeyboardEvent) {
 <template>
  <div class="type-word">
    <div class="translate"
-         :style="{fontSize: store.setting.foreignLanguageFontSize +'rem'}"
+         :style="{fontSize: settingStore.foreignLanguageFontSize +'rem'}"
    >{{ word.trans.join('；') }}
    </div>
    <div class="word-wrapper">
      <div class="word"
           :class="wrong && 'is-wrong'"
-           :style="{fontSize: store.setting.translateLanguageFontSize +'rem'}"
+           :style="{fontSize: settingStore.translateLanguageFontSize +'rem'}"
      >
        <span class="input" v-if="input">{{ input }}</span>
        <span class="wrong" v-if="wrong">{{ wrong }}</span>
-        <template v-if="store.setting.dictation">
+        <template v-if="settingStore.dictation">
          <span class="letter" v-if="!showFullWord"
-                @mouseenter="store.setting.allowWordTip && (showFullWord = true)">{{
+                @mouseenter="settingStore.allowWordTip && (showFullWord = true)">{{
              resetWord.split('').map(v => '_').join('')
            }}</span>
          <span class="letter" v-else @mouseleave="showFullWord = false">{{ resetWord }}</span>
@@ -231,13 +233,13 @@ async function onKeyDown(e: KeyboardEvent) {
    </div>
    <div class="phonetic">{{ word.usphone }}</div>
    <div class="options">
-      <BaseButton keyboard="`" :active="activeIndex === 0">
+      <BaseButton keyboard="`" :active="activeBtnIndex === 0">
        忽略
      </BaseButton>
-      <BaseButton keyboard="Enter" :active="activeIndex === 1">
+      <BaseButton keyboard="Enter" :active="activeBtnIndex === 1">
        收藏
      </BaseButton>
-      <BaseButton keyboard="Tab" :active="activeIndex === 2">
+      <BaseButton keyboard="Tab" :active="activeBtnIndex === 2">
        下一个
      </BaseButton>
    </div>
--- a/src/components/Toolbar/Add.vue
+++ b/src/components/Toolbar/Add.vue
@@ -28,7 +28,9 @@ function toggle() {
        />
      </IconWrapper>
    </Tooltip>
-    <AddArticle v-if="show" @close="show = false"/>
+    <AddArticle v-if="show"
+                @close="show = false"
+    />
  </div>
 </template>

--- a/src/components/Toolbar/RepeatSetting.vue
+++ b/src/components/Toolbar/RepeatSetting.vue
@@ -8,8 +8,11 @@ import {useBaseStore} from "@/stores/base.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {onMounted} from "vue";
+import {useSettingStore} from "@/stores/setting.ts";

 const store = useBaseStore()
+const settingStore = useSettingStore()
+
 let show = $ref(false)
 let radio1 = $ref('1')
 useWindowClick(() => show = false)
@@ -36,16 +39,16 @@ onMounted(() => {
        style="width: 230rem;"
    >
      <div class="title">选择单词的循环次数</div>
-      <el-radio-group v-model="store.setting.repeatCount">
+      <el-radio-group v-model="settingStore.repeatCount">
        <el-radio :label="1" size="default">1</el-radio>
        <el-radio :label="2" size="default">2</el-radio>
        <el-radio :label="3" size="default">3</el-radio>
        <el-radio :label="5" size="default">5</el-radio>
        <el-radio :label="100" size="default">自定义</el-radio>
      </el-radio-group>
-      <div class="mini-row" v-if="store.setting.repeatCount === 100">
+      <div class="mini-row" v-if="settingStore.repeatCount === 100">
        <label class="item-title">自定义循环次数</label>
-        <el-input-number  v-model="store.setting.repeatCustomCount"
+        <el-input-number  v-model="settingStore.repeatCustomCount"
                  :min="6"
                  :max="100"
                  type="number"
--- a/src/components/Toolbar/SettingModal.vue
+++ b/src/components/Toolbar/SettingModal.vue
@@ -3,9 +3,10 @@ import Modal from "@/components/Modal/Modal.vue"
 import {useBaseStore} from "@/stores/base.ts"
 import {Icon} from '@iconify/vue';
 import {watch, ref} from "vue";
+import {useSettingStore} from "@/stores/setting.ts";

 const tabIndex = $ref(0)
-const store = useBaseStore()
+const settingStore = useSettingStore()

 interface IProps {
  modelValue: boolean,
@@ -22,10 +23,10 @@ const emit = defineEmits([
 let allSound = $ref<boolean>(true)

 watch([
-  () => store.setting.wordSound,
-  () => store.setting.keyboardSound,
-  () => store.setting.translateSound,
-  () => store.setting.effectSound,
+  () => settingStore.wordSound,
+  () => settingStore.keyboardSound,
+  () => settingStore.translateSound,
+  () => settingStore.effectSound,
 ], (n) => {
  if (n.some(v => v)) {
    allSound = true
@@ -36,10 +37,10 @@ watch([

 function changAllSound(e: boolean) {
  allSound = e
-  store.setting.wordSound = e
-  store.setting.keyboardSound = e
-  store.setting.translateSound = e
-  store.setting.effectSound = e
+  settingStore.wordSound = e
+  settingStore.keyboardSound = e
+  settingStore.translateSound = e
+  settingStore.effectSound = e
 }

 </script>
@@ -77,7 +78,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="item-title">单词发音</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.wordSound"
+              <el-switch v-model="settingStore.wordSound"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -87,22 +88,22 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="sub-title">音量</label>
            <div class="wrapper">
-              <el-slider v-model="store.setting.wordSoundVolume"/>
-              <span>{{ store.setting.wordSoundVolume }}%</span>
+              <el-slider v-model="settingStore.wordSoundVolume"/>
+              <span>{{ settingStore.wordSoundVolume }}%</span>
            </div>
          </div>
          <div class="row">
            <label class="sub-title">倍速</label>
            <div class="wrapper">
-              <el-slider v-model="store.setting.wordSoundSpeed" :step="0.1" :min="1" :max="4"/>
-              <span>{{ store.setting.wordSoundSpeed }}</span>
+              <el-slider v-model="settingStore.wordSoundSpeed" :step="0.1" :min="1" :max="4"/>
+              <span>{{ settingStore.wordSoundSpeed }}</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="row">
            <label class="item-title">按键音</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.keyboardSound"
+              <el-switch v-model="settingStore.keyboardSound"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -112,15 +113,15 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="sub-title">音量</label>
            <div class="wrapper">
-              <el-slider v-model="store.setting.keyboardSoundVolume"/>
-              <span>{{ store.setting.keyboardSoundVolume }}%</span>
+              <el-slider v-model="settingStore.keyboardSoundVolume"/>
+              <span>{{ settingStore.keyboardSoundVolume }}%</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="row">
            <label class="item-title">释义发音</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.translateSound"
+              <el-switch v-model="settingStore.translateSound"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -130,15 +131,15 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="sub-title">音量</label>
            <div class="wrapper">
-              <el-slider v-model="store.setting.translateSoundVolume"/>
-              <span>{{ store.setting.translateSoundVolume }}%</span>
+              <el-slider v-model="settingStore.translateSoundVolume"/>
+              <span>{{ settingStore.translateSoundVolume }}%</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="row">
            <label class="item-title">效果音（章节结算页烟花音效）</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.effectSound"
+              <el-switch v-model="settingStore.effectSound"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -148,8 +149,8 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="sub-title">音量</label>
            <div class="wrapper">
-              <el-slider v-model="store.setting.effectSoundVolume"/>
-              <span>{{ store.setting.effectSoundVolume }}%</span>
+              <el-slider v-model="settingStore.effectSoundVolume"/>
+              <span>{{ settingStore.effectSoundVolume }}%</span>
            </div>
          </div>
        </div>
@@ -157,7 +158,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="item-title">章节乱序</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.value1"
+              <el-switch v-model="settingStore.value1"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -171,7 +172,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="item-title">练习时展示上一个/下一个单词</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.showNearWord"
+              <el-switch v-model="settingStore.showNearWord"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -185,7 +186,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="item-title">是否忽略大小写</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.ignoreCase"
+              <el-switch v-model="settingStore.ignoreCase"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -199,7 +200,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="item-title">是否允许默写模式下显示提示</label>
            <div class="wrapper">
-              <el-switch v-model="store.setting.allowWordTip"
+              <el-switch v-model="settingStore.allowWordTip"
                         inline-prompt
                         active-text="开"
                         inactive-text="关"
@@ -219,8 +220,8 @@ function changAllSound(e: boolean) {
              <el-slider
                  :min="10"
                  :max="100"
-                  v-model="store.setting.foreignLanguageFontSize"/>
-              <span>{{ store.setting.foreignLanguageFontSize }}</span>
+                  v-model="settingStore.foreignLanguageFontSize"/>
+              <span>{{ settingStore.foreignLanguageFontSize }}</span>
            </div>
          </div>
          <div class="row">
@@ -229,8 +230,8 @@ function changAllSound(e: boolean) {
              <el-slider
                  :min="10"
                  :max="100"
-                  v-model="store.setting.translateLanguageFontSize"/>
-              <span>{{ store.setting.translateLanguageFontSize }}</span>
+                  v-model="settingStore.translateLanguageFontSize"/>
+              <span>{{ settingStore.translateLanguageFontSize }}</span>
            </div>
          </div>

@@ -241,7 +242,7 @@ function changAllSound(e: boolean) {
          <div class="row">
            <label class="sut-title">切换下一个单词时间</label>
            <div class="wrapper">
-              <el-input-number v-model="store.setting.waitTimeForChangeWord"
+              <el-input-number v-model="settingStore.waitTimeForChangeWord"
                               :min="6"
                               :max="100"
                               type="number"
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -15,15 +15,18 @@ import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
 import RepeatSetting from "@/components/Toolbar/RepeatSetting.vue";
 import TranslateSetting from "@/components/Toolbar/TranslateSetting.vue";
 import Add from "@/components/Toolbar/Add.vue";
+import {useSettingStore} from "@/stores/setting.ts";

 const {toggle} = useTheme()
 const store = useBaseStore()
+const settingStore = useSettingStore()
+
 const showFeedbackModal = $ref(false)
 const showSettingModal = $ref(false)
 const showDictModal = $ref(false)
 const headerRef = $ref<HTMLDivElement>(null)

-watch(() => store.setting.showToolbar, n => {
+watch(() => settingStore.showToolbar, n => {
  if (headerRef) {
    if (n) {
      headerRef.style.marginTop = '10rem'
@@ -57,11 +60,11 @@ watch(() => store.setting.showToolbar, n => {
        <Tooltip title="开关默写模式">
          <IconWrapper>
            <Icon icon="majesticons:eye-off-line"
-                  v-if="store.setting.dictation"
-                  @click="store.setting.dictation = false"/>
+                  v-if="settingStore.dictation"
+                  @click="settingStore.dictation = false"/>
            <Icon icon="mdi:eye-outline"
                  v-else
-                  @click="store.setting.dictation = true"/>
+                  @click="settingStore.dictation = true"/>
          </IconWrapper>
        </Tooltip>

@@ -88,11 +91,11 @@ watch(() => store.setting.showToolbar, n => {
        </Tooltip>
      </div>
    </div>
-    <Tooltip :title="store.setting.showToolbar?'收起':'展开'">
+    <Tooltip :title="settingStore.showToolbar?'收起':'展开'">
      <Icon icon="icon-park-outline:down"
-            @click="store.setting.showToolbar = !store.setting.showToolbar"
+            @click="settingStore.showToolbar = !settingStore.showToolbar"
            class="arrow"
-            :class="!store.setting.showToolbar && 'down'"
+            :class="!settingStore.showToolbar && 'down'"
            width="24"
            color="#999"/>
    </Tooltip>
--- a/src/components/Toolbar/TranslateSetting.vue
+++ b/src/components/Toolbar/TranslateSetting.vue
@@ -9,8 +9,11 @@ import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import Modal from "@/components/Modal/Modal.vue";
+import {useSettingStore} from "@/stores/setting.ts";

 const store = useBaseStore()
+const settingStore = useSettingStore()
+
 let show = $ref(false)
 let showCustomTranslateModal = $ref(false)

@@ -39,7 +42,7 @@ function save() {
  <div class="setting" @click.stop="null">
    <Tooltip title="开关释义显示">
      <IconWrapper>
-        <Icon v-if="store.setting.translate" icon="mdi:translate"
+        <Icon v-if="settingStore.translate" icon="mdi:translate"
              @click="toggle"
        />
        <Icon v-else icon="mdi:translate-off"
@@ -53,7 +56,7 @@ function save() {
      <div class="mini-row">
        <label class="item-title">显示翻译</label>
        <div class="wrapper">
-          <el-switch v-model="store.setting.translate"
+          <el-switch v-model="settingStore.translate"
                     inline-prompt
                     active-text="开"
                     inactive-text="关"
--- a/src/components/Toolbar/VolumeSetting.vue
+++ b/src/components/Toolbar/VolumeSetting.vue
@@ -7,8 +7,11 @@ import Tooltip from "@/components/Tooltip.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
+import {useSettingStore} from "@/stores/setting.ts";

 const store = useBaseStore()
+const settingStore = useSettingStore()
+
 let show = $ref(false)

 useWindowClick(() => show = false)
@@ -32,7 +35,7 @@ function toggle() {
      <div class="mini-row">
        <label class="item-title">单词发音</label>
        <div class="wrapper">
-          <el-switch v-model="store.setting.wordSound"
+          <el-switch v-model="settingStore.wordSound"
                     inline-prompt
                     active-text="开"
                     inactive-text="关"
@@ -42,7 +45,7 @@ function toggle() {
      <div class="mini-row">
        <label class="item-title">释义发音</label>
        <div class="wrapper">
-          <el-switch v-model="store.setting.translateSound"
+          <el-switch v-model="settingStore.translateSound"
                     inline-prompt
                     active-text="开"
                     inactive-text="关"
@@ -52,7 +55,7 @@ function toggle() {
      <div class="mini-row">
        <label class="item-title">按键音</label>
        <div class="wrapper">
-          <el-switch v-model="store.setting.keyboardSound"
+          <el-switch v-model="settingStore.keyboardSound"
                     inline-prompt
                     active-text="开"
                     inactive-text="关"
@@ -62,7 +65,7 @@ function toggle() {
      <div class="mini-row">
        <label class="item-title">效果音</label>
        <div class="wrapper">
-          <el-switch v-model="store.setting.effectSound"
+          <el-switch v-model="settingStore.effectSound"
                     inline-prompt
                     active-text="开"
                     inactive-text="关"
--- a/src/hooks/sound.ts
+++ b/src/hooks/sound.ts
@@ -0,0 +1,42 @@
+import {onMounted} from "vue"
+import {useBaseStore} from "@/stores/base.ts";
+
+export function useSound(srcList?: string[], num?: number) {
+  let audioList: HTMLAudioElement[] = $ref([])
+  let audioLength = $ref(1)
+  const setAudio = (srcList2: string[], num2?: number) => {
+    if (num2) audioLength = num2
+    audioList = []
+    for (let i = 0; i < audioLength; i++) {
+      srcList2.map(src => {
+        audioList.push(new Audio(src))
+      })
+    }
+    index = 0
+  }
+
+  onMounted(() => {
+    if (srcList) setAudio(srcList, num)
+  })
+
+  let index = $ref(0)
+  const play: Function = () => {
+    index++
+    if (audioList.length > 1 && audioList.length !== audioLength) {
+      audioList[index % audioList.length].play()
+    } else {
+      audioList[index % audioLength].play()
+    }
+  }
+
+  return [
+    play,
+    setAudio
+  ]
+}
+
+export function playKeyboardSound() {
+  const store = useBaseStore()
+
+
+}
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia'
-import {Dict, DictType, Sort, State, Word} from "../types.ts"
+import {Dict, DictType, Sort, State, Statistics, Word} from "../types.ts"
 import {chunk, cloneDeep} from "lodash-es";
 import {emitter, EventKey} from "@/utils/eventBus.ts"

@@ -81,36 +81,6 @@ export const useBaseStore = defineStore('base', {
      },
      sideIsOpen: false,
      isDictation: true,
-      setting: {
-        showToolbar: true,
-        show: false,
-
-        wordSound: true,
-        wordSoundVolume: 100,
-        wordSoundSpeed: 1,
-        keyboardSound: true,
-        keyboardSoundVolume: 100,
-        translateSound: true,
-        translateSoundVolume: 100,
-        effectSound: true,
-        effectSoundVolume: 100,
-        repeatCount: 1,
-        repeatCustomCount: null,
-        dictation: true,
-        translate: true,
-
-        showNearWord: true,
-        ignoreCase: true,
-        allowWordTip: true,
-        foreignLanguageFontSize: 48,
-        translateLanguageFontSize: 20,
-        waitTimeForChangeWord: 300,
-
-        value1: false,
-        value2: 50,
-        value3: 1,
-        value4: false,
-      },
      simpleWords: [
        'a', 'an', 'of', 'and',
        'i', 'my', 'you', 'your',
@@ -214,8 +184,8 @@ export const useBaseStore = defineStore('base', {
        })
      }
    },
-    saveStatistics() {
-      let currentStat = cloneDeep(this.current.statistics)
+    saveStatistics(statistics: Statistics) {
+      let currentStat = cloneDeep(statistics)
      currentStat.endDate = Date.now()
      currentStat.spend = Date.now() - currentStat.startDate
      currentStat.wrongWordNumber = this.current.originWrongWords.length
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -0,0 +1,68 @@
+import {defineStore} from "pinia"
+
+export interface SettingState {
+  showToolbar: boolean,
+  show: boolean,
+
+  wordSound: boolean,
+  wordSoundVolume: number,
+  wordSoundSpeed: number,
+  keyboardSound: boolean,
+  keyboardSoundVolume: number,
+  keyboardSoundFile: string,
+  translateSound: boolean,
+  translateSoundVolume: number,
+  effectSound: boolean,
+  effectSoundVolume: number,
+  repeatCount: number,
+  repeatCustomCount?: number,
+  dictation: boolean,
+  translate: boolean,
+  showNearWord: boolean
+  ignoreCase: boolean
+  allowWordTip: boolean
+  waitTimeForChangeWord: number
+  foreignLanguageFontSize: number,
+  translateLanguageFontSize: number,
+
+  value1: boolean,
+  value2: number,
+  value3: number,
+  value4: boolean,
+}
+
+export const useSettingStore = defineStore('setting', {
+  state: (): SettingState => {
+    return {
+      showToolbar: true,
+      show: false,
+
+      wordSound: true,
+      wordSoundVolume: 100,
+      wordSoundSpeed: 1,
+      keyboardSound: true,
+      keyboardSoundVolume: 100,
+      keyboardSoundFile: '老式机械.mp3',
+      translateSound: true,
+      translateSoundVolume: 100,
+      effectSound: true,
+      effectSoundVolume: 100,
+      repeatCount: 1,
+      repeatCustomCount: null,
+      dictation: true,
+      translate: true,
+
+      showNearWord: true,
+      ignoreCase: true,
+      allowWordTip: true,
+      foreignLanguageFontSize: 48,
+      translateLanguageFontSize: 20,
+      waitTimeForChangeWord: 300,
+
+      value1: false,
+      value2: 50,
+      value3: 1,
+      value4: false,
+    }
+  },
+})
--- a/src/types.ts
+++ b/src/types.ts
@@ -185,35 +185,6 @@ export interface State {
  sideIsOpen: boolean,
  isDictation: boolean,
  theme: string,
-  setting: {
-    showToolbar: boolean,
-    show: boolean,
-
-    wordSound: boolean,
-    wordSoundVolume: number,
-    wordSoundSpeed: number,
-    keyboardSound: boolean,
-    keyboardSoundVolume: number,
-    translateSound: boolean,
-    translateSoundVolume: number,
-    effectSound: boolean,
-    effectSoundVolume: number,
-    repeatCount: number,
-    repeatCustomCount?: number,
-    dictation: boolean,
-    translate: boolean,
-    showNearWord: boolean
-    ignoreCase: boolean
-    allowWordTip: boolean
-    waitTimeForChangeWord: number
-    foreignLanguageFontSize: number,
-    translateLanguageFontSize: number,
-
-    value1: boolean,
-    value2: number,
-    value3: number,
-    value4: boolean,
-  },
  load: boolean
 }