From f3fff002381fa186e736c179937c3858090456c9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Mon, 6 Nov 2023 18:50:57 +0800
Subject: [PATCH] fix bug

---
 components.d.ts                               |  3 -
 src/components/Practice/Options.vue           | 18 ++--
 src/components/Practice/Practice.vue          | 97 +++++++++++++++++--
 .../Practice/PracticeWord/PracticeWord.vue    | 38 +-------
 .../Practice/PracticeWord/Typing.vue          |  6 +-
 .../Practice/PracticeWord/TypingWord.vue      | 17 +++-
 src/components/Practice/Statistics.vue        | 46 ++++-----
 src/components/Toolbar/Toolbar.vue            | 22 +++--
 src/components/Toolbar/TranslateSetting.vue   |  5 +-
 src/components/VolumeIcon.vue                 | 23 +++--
 src/stores/runtime.ts                         |  2 +
 src/stores/setting.ts                         |  8 +-
 src/types.ts                                  | 18 +++-
 src/utils/eventBus.ts                         |  1 -
 14 files changed, 201 insertions(+), 103 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 3ee47ed0..a61d2f4f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -23,9 +23,6 @@ declare module 'vue' {
     EditArticle: typeof import('./src/components/Article/EditArticle.vue')['default']
     EditBatchArticleModal: typeof import('./src/components/Article/EditBatchArticleModal.vue')['default']
     EditSingleArticleModal: typeof import('./src/components/Article/EditSingleArticleModal.vue')['default']
-    ElButton: typeof import('element-plus/es')['ElButton']
-    ElForm: typeof import('element-plus/es')['ElForm']
-    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
diff --git a/src/components/Practice/Options.vue b/src/components/Practice/Options.vue
index 5bbd1a51..b559b552 100644
--- a/src/components/Practice/Options.vue
+++ b/src/components/Practice/Options.vue
@@ -5,6 +5,8 @@ import IconWrapper from "@/components/IconWrapper.vue";
 import {Icon} from "@iconify/vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useWordOptions} from "@/hooks/dict.ts";
+import {useSettingStore} from "@/stores/setting.ts";
+import {ShortcutKey} from "@/types.ts";
 
 defineProps<{
   showEdit?: boolean,
@@ -19,11 +21,13 @@ const emit = defineEmits<{
   skip: [],
 }>()
 
+const settingStore = useSettingStore()
+
 </script>
 
 <template>
   <div class="options">
-    <Tooltip v-if="showEdit" title="编辑(快捷键：Ctrl + E)">
+    <Tooltip v-if="showEdit" :title="`编辑(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.Edit]})`">
       <IconWrapper>
         <Icon icon="tabler:edit" class="menu"
               @click="emit('edit')"/>
@@ -34,29 +38,31 @@ const emit = defineEmits<{
         v-if="!isSimple"
         class-name="collect"
         @click="$emit('toggleSimple')"
-        title="标记为简单词(快捷键：`)"
+        :title="`标记为简单词(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`"
         icon="material-symbols:check-circle-outline-rounded"/>
     <BaseIcon
         v-else
         class-name="fill"
         @click="$emit('toggleSimple')"
-        title="取消标记简单词(快捷键：`)"
+        :title="`取消标记简单词(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleSimple]})`"
         icon="material-symbols:check-circle-rounded"/>
 
     <BaseIcon
         v-if="!isCollect"
         class-name="collect"
         @click="$emit('toggleCollect')"
-        title="收藏(快捷键：Enter)"
+        :title="`收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
         icon="ph:star"/>
     <BaseIcon
         v-else
         class-name="fill"
         @click="$emit('toggleCollect')"
-        title="取消收藏(快捷键：Enter)"
+        :title="`取消收藏(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleCollect]})`"
         icon="ph:star-fill"/>
 
-    <Tooltip title="跳过(快捷键：Tab)">
+    <Tooltip
+        :title="`跳过(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.Skip]})`"
+    >
       <IconWrapper>
         <Icon icon="icon-park-outline:go-ahead" class="menu"
               @click="emit('skip')"/>
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index 9db0a05b..e0cb2560 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 
 import Toolbar from "@/components/Toolbar/Toolbar.vue"
-import {onMounted, watch} from "vue";
+import {onMounted, onUnmounted, watch} from "vue";
 import {usePracticeStore} from "@/stores/practice.ts";
 import Footer from "@/components/Practice/Footer.vue";
 import {useBaseStore} from "@/stores/base.ts";
@@ -9,18 +9,19 @@ import {$ref} from "vue/macros";
 import Statistics from "@/components/Practice/Statistics.vue";
 import {emitter, EventKey} from "@/utils/eventBus";
 import {useSettingStore} from "@/stores/setting";
-import {cloneDeep} from "lodash-es";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import PracticeArticle from "@/components/Practice/PracticeArticle/PracticeArticle.vue";
 import PracticeWord from "@/components/Practice/PracticeWord/PracticeWord.vue";
-import VolumeSetting from "@/components/Toolbar/VolumeSetting.vue";
+import {ShortcutKey} from "@/types.ts";
+import useTheme from "@/hooks/useTheme.ts";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
 const settingStore = useSettingStore()
 const runtimeStore = useRuntimeStore()
-
+const practiceRef: any = $ref()
+const {toggleTheme} = useTheme()
 
 watch(practiceStore, () => {
   if (practiceStore.inputWordNumber < 1) {
@@ -44,13 +45,97 @@ function test() {
         console.log('cencal')
       })
 }
+
+function write() {
+  // console.log('write')
+  settingStore.dictation = true
+  repeat()
+}
+
+//TODO 需要判断是否已忽略
+function repeat() {
+  // console.log('repeat')
+  emitter.emit(EventKey.resetWord)
+  practiceRef.getCurrentPractice()
+}
+
+function next() {
+  // console.log('next')
+  if (store.isArticle) {
+    if (store.currentDict.chapterIndex >= store.currentDict.articles.length - 1) {
+      store.currentDict.chapterIndex = 0
+    } else store.currentDict.chapterIndex++
+  } else {
+    if (store.currentDict.chapterIndex >= store.currentDict.chapterWords.length - 1) {
+      store.currentDict.chapterIndex = 0
+    } else store.currentDict.chapterIndex++
+  }
+
+  repeat()
+}
+
+function toggleShowTranslate() {
+  settingStore.translate = !settingStore.translate
+}
+
+function toggleDictation() {
+  settingStore.dictation = !settingStore.dictation
+}
+
+function openSetting() {
+  runtimeStore.showSettingModal = true
+}
+
+function openDictDetail() {
+  runtimeStore.showDictModal = true
+}
+
+function toggleConciseMode(){
+  settingStore.showToolbar = !settingStore.showToolbar
+  settingStore.showPanel = !settingStore.showPanel
+}
+
+onMounted(() => {
+  emitter.on(EventKey.next, next)
+  emitter.on(EventKey.write, write)
+  emitter.on(EventKey.repeat, repeat)
+
+  emitter.on(ShortcutKey.NextChapter, next)
+  emitter.on(ShortcutKey.RepeatChapter, repeat)
+  emitter.on(ShortcutKey.DictationChapter, write)
+  emitter.on(ShortcutKey.ToggleShowTranslate, toggleShowTranslate)
+  emitter.on(ShortcutKey.ToggleDictation, toggleDictation)
+  emitter.on(ShortcutKey.OpenSetting, openSetting)
+  emitter.on(ShortcutKey.OpenDictDetail, openDictDetail)
+  emitter.on(ShortcutKey.ToggleTheme, toggleTheme)
+  emitter.on(ShortcutKey.ToggleConciseMode, toggleConciseMode)
+  practiceRef.getCurrentPractice()
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.next, next)
+  emitter.off(EventKey.write, write)
+  emitter.off(EventKey.repeat, repeat)
+
+  emitter.off(ShortcutKey.NextChapter, next)
+  emitter.off(ShortcutKey.RepeatChapter, repeat)
+  emitter.off(ShortcutKey.DictationChapter, write)
+  emitter.off(ShortcutKey.ToggleShowTranslate, toggleShowTranslate)
+  emitter.off(ShortcutKey.ToggleDictation, toggleDictation)
+  emitter.off(ShortcutKey.OpenSetting, openSetting)
+  emitter.off(ShortcutKey.OpenDictDetail, openDictDetail)
+  emitter.off(ShortcutKey.ToggleTheme, toggleTheme)
+  emitter.off(ShortcutKey.ToggleConciseMode, toggleConciseMode)
+
+})
+
 </script>
 <template>
   <div class="practice">
     <Toolbar/>
     <!--    <BaseButton @click="test">test</BaseButton>-->
-    <PracticeArticle v-if="store.isArticle"/>
-    <PracticeWord v-else/>
+    <PracticeArticle ref="practiceRef" v-if="store.isArticle"/>
+    <PracticeWord ref="practiceRef" v-else/>
     <Footer/>
   </div>
   <Statistics/>
diff --git a/src/components/Practice/PracticeWord/PracticeWord.vue b/src/components/Practice/PracticeWord/PracticeWord.vue
index 7ba7d2dc..a1d31d65 100644
--- a/src/components/Practice/PracticeWord/PracticeWord.vue
+++ b/src/components/Practice/PracticeWord/PracticeWord.vue
@@ -39,44 +39,8 @@ function getCurrentPractice() {
   // console.log('wordData', wordData)
 }
 
-function write() {
-  // console.log('write')
-  settingStore.dictation = true
-  repeat()
-}
+defineExpose({getCurrentPractice})
 
-//TODO 需要判断是否已忽略
-function repeat() {
-  // console.log('repeat')
-  emitter.emit(EventKey.resetWord)
-  getCurrentPractice()
-}
-
-function next() {
-  // console.log('next')
-  store.currentDict.chapterIndex++
-  repeat()
-}
-
-function restart() {
-  store.currentDict.chapterIndex = 0
-  repeat()
-}
-
-onMounted(() => {
-  emitter.on(EventKey.next, next)
-  emitter.on(EventKey.write, write)
-  emitter.on(EventKey.repeat, repeat)
-  emitter.on(EventKey.restart, restart)
-  getCurrentPractice()
-})
-
-onUnmounted(() => {
-  emitter.off(EventKey.next, next)
-  emitter.off(EventKey.write, write)
-  emitter.off(EventKey.repeat, repeat)
-  emitter.off(EventKey.restart, restart)
-})
 </script>
 
 <template>
diff --git a/src/components/Practice/PracticeWord/Typing.vue b/src/components/Practice/PracticeWord/Typing.vue
index a3154c61..5eac6db9 100644
--- a/src/components/Practice/PracticeWord/Typing.vue
+++ b/src/components/Practice/PracticeWord/Typing.vue
@@ -142,7 +142,11 @@ function hideWord() {
   showFullWord = false
 }
 
-defineExpose({del, showWord, hideWord})
+function play() {
+  volumeIconRef?.play()
+}
+
+defineExpose({del, showWord, hideWord, play})
 </script>
 
 <template>
diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue
index 99a9018e..86160350 100644
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -17,6 +17,7 @@ import IconWrapper from "@/components/IconWrapper.vue";
 import WordList from "@/components/WordList.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
 
 interface IProps {
   words: Word[],
@@ -40,6 +41,7 @@ const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
 const practiceStore = usePracticeStore()
 const settingStore = useSettingStore()
+const playWordAudio = usePlayWordAudio()
 
 const {
   isWordCollect,
@@ -130,7 +132,6 @@ function prev() {
   data.index--
 }
 
-
 function onKeyUp(e: KeyboardEvent) {
   typingRef.hideWord()
 }
@@ -172,17 +173,23 @@ function collect(e: KeyboardEvent) {
 function toggleWordSimpleWrapper() {
   if (!isWordSimple(word)) {
     toggleWordSimple(word)
-    next(false)
+    //延迟一下，不知道为什么不延迟会导致当前条目不自动定位到列表中间
+    setTimeout(() => next(false))
   } else {
     toggleWordSimple(word)
   }
 }
 
+function play() {
+  typingRef.play()
+}
+
 onMounted(() => {
   emitter.on(ShortcutKey.Show, show)
   emitter.on(ShortcutKey.Skip, skip)
   emitter.on(ShortcutKey.ToggleCollect, collect)
   emitter.on(ShortcutKey.ToggleSimple, toggleWordSimpleWrapper)
+  emitter.on(ShortcutKey.PlaySound, play)
 })
 
 onUnmounted(() => {
@@ -190,6 +197,7 @@ onUnmounted(() => {
   emitter.off(ShortcutKey.Skip, skip)
   emitter.off(ShortcutKey.ToggleCollect, collect)
   emitter.off(ShortcutKey.ToggleSimple, toggleWordSimpleWrapper)
+  emitter.off(ShortcutKey.PlaySound, play)
 })
 
 </script>
@@ -243,8 +251,9 @@ onUnmounted(() => {
                   <div class="title">
                     {{ store.dictTitle }}
                   </div>
-                  <Tooltip title="下一章"
-                           v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1 && !store.isArticle">
+                  <Tooltip
+                      :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
+                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1 && !store.isArticle">
                     <IconWrapper>
                       <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
                     </IconWrapper>
diff --git a/src/components/Practice/Statistics.vue b/src/components/Practice/Statistics.vue
index f3078f74..8dd4fb0b 100644
--- a/src/components/Practice/Statistics.vue
+++ b/src/components/Practice/Statistics.vue
@@ -5,14 +5,17 @@ import Ring from "@/components/Ring.vue";
 import Tooltip from "@/components/Tooltip.vue";
 import Fireworks from "@/components/Fireworks.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {DefaultDisplayStatistics, DisplayStatistics} from "@/types.ts";
+import {DefaultDisplayStatistics, DisplayStatistics, ShortcutKey} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {onMounted, reactive} from "vue";
 import {cloneDeep} from "lodash-es";
 import {Icon} from '@iconify/vue';
 import {$computed, $ref} from "vue/macros";
+import BaseIcon from "@/components/BaseIcon.vue";
+import {useSettingStore} from "@/stores/setting.ts";
 
 const store = useBaseStore()
+const settingStore = useSettingStore()
 let statModalIsOpen = $ref(false)
 let currentStat = reactive<DisplayStatistics>(cloneDeep(DefaultDisplayStatistics))
 
@@ -26,7 +29,7 @@ onMounted(() => {
 
 let optionType = $ref('')
 
-function options(emitType: 'write' | 'repeat' | 'next' | 'restart') {
+function options(emitType: 'write' | 'repeat' | 'next') {
   statModalIsOpen = false
   optionType = emitType
   emitter.emit(EventKey[emitType])
@@ -40,7 +43,7 @@ const isEnd = $computed(() => {
 
 function onClose() {
   if (!optionType) {
-    options(isEnd ? 'restart' : 'next')
+    options('next')
   }
   optionType = ''
 }
@@ -96,28 +99,21 @@ function onClose() {
         </div>
       </div>
       <div class="footer">
-        <template v-if="isEnd">
-          <BaseButton keyboard="Ctrl + Enter" @click="options('write')">
-            默写本章
-          </BaseButton>
-          <BaseButton keyboard="Alt + Enter" @click="options('repeat')">
-            重复本章
-          </BaseButton>
-          <BaseButton keyboard="Tab" @click="options('restart')">
-            重新练习
-          </BaseButton>
-        </template>
-        <template v-else>
-          <BaseButton keyboard="Ctrl + Enter" @click="options('write')">
-            默写本章
-          </BaseButton>
-          <BaseButton keyboard="Alt + Enter" @click="options('repeat')">
-            重复本章
-          </BaseButton>
-          <BaseButton keyboard="Tab" @click="options('next')">
-            下一章
-          </BaseButton>
-        </template>
+        <BaseButton
+            :keyboard="settingStore.shortcutKeyMap[ShortcutKey.DictationChapter]"
+            @click="options('write')">
+          默写本章
+        </BaseButton>
+        <BaseButton
+            :keyboard="settingStore.shortcutKeyMap[ShortcutKey.RepeatChapter]"
+            @click="options('repeat')">
+          重复本章
+        </BaseButton>
+        <BaseButton
+            :keyboard="settingStore.shortcutKeyMap[ShortcutKey.NextChapter]"
+            @click="options('next')">
+          {{ isEnd ? '重新练习' : '下一章' }}
+        </BaseButton>
       </div>
     </div>
   </Modal>
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index 5fb7c167..1e613b0d 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/src/components/Toolbar/Toolbar.vue
@@ -19,6 +19,8 @@ import {useSettingStore} from "@/stores/setting.ts";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {$ref} from "vue/macros";
+import {ShortcutKey} from "@/types.ts";
+import BaseIcon from "@/components/BaseIcon.vue";
 
 const {toggleTheme} = useTheme()
 const store = useBaseStore()
@@ -27,7 +29,6 @@ const runtimeStore = useRuntimeStore()
 const practiceStore = usePracticeStore()
 
 const showFeedbackModal = $ref(false)
-const showSettingModal = $ref(false)
 const headerRef = $ref<HTMLDivElement>(null)
 const moreOptionsRef = $ref<HTMLDivElement>(null)
 
@@ -64,7 +65,8 @@ watch(() => store.load, n => {
 <template>
   <header ref="headerRef">
     <div class="content">
-      <Tooltip title="词典详情">
+      <Tooltip
+          :title="`词典详情(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.OpenDictDetail]})`">
         <div class="info hvr-grow" @click="runtimeStore.showDictModal = true">
           {{ store.dictTitle }} {{ practiceStore.repeatNumber ? '  复习错词' : '' }}
         </div>
@@ -79,7 +81,9 @@ watch(() => store.load, n => {
             </IconWrapper>
           </Tooltip>
 
-          <Tooltip title="开关默写模式">
+          <Tooltip
+              :title="`开关默写模式(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleShowTranslate]})`"
+          >
             <IconWrapper>
               <Icon icon="majesticons:eye-off-line"
                     v-if="settingStore.dictation"
@@ -104,7 +108,9 @@ watch(() => store.load, n => {
             </IconWrapper>
           </Tooltip>
 
-          <Tooltip title="切换主题">
+          <Tooltip
+              :title="`切换主题(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleTheme]})`"
+           >
             <IconWrapper>
               <Icon icon="ep:moon" v-if="settingStore.theme === 'dark'"
                     @click="toggleTheme"/>
@@ -114,9 +120,11 @@ watch(() => store.load, n => {
         </div>
 
         <div class="with-bg anim">
-          <Tooltip title="设置">
+          <Tooltip
+              :title="`设置(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.OpenSetting]})`"
+          >
             <IconWrapper>
-              <Icon icon="uil:setting" @click="showSettingModal = true"/>
+              <Icon icon="uil:setting" @click="runtimeStore.showSettingModal = true"/>
             </IconWrapper>
           </Tooltip>
           <!--        <div class="base-button" @click="emitter.emit(EventKey.openStatModal)">ok</div>-->
@@ -139,7 +147,7 @@ watch(() => store.load, n => {
     </Tooltip>
   </header>
   <DictModal :model-value="runtimeStore.showDictModal" @close="runtimeStore.showDictModal = false"/>
-  <SettingModal v-if="showSettingModal" @close="showSettingModal = false"/>
+  <SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <FeedbackModal v-if="showFeedbackModal" @close="showFeedbackModal = false"/>
 </template>
 
diff --git a/src/components/Toolbar/TranslateSetting.vue b/src/components/Toolbar/TranslateSetting.vue
index 369191d8..4882153d 100644
--- a/src/components/Toolbar/TranslateSetting.vue
+++ b/src/components/Toolbar/TranslateSetting.vue
@@ -10,6 +10,7 @@ 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";
+import {ShortcutKey} from "@/types.ts";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -40,7 +41,9 @@ function save() {
 
 <template>
   <div class="setting" @click.stop="null">
-    <Tooltip title="开关释义显示">
+    <Tooltip
+        :title="`开关释义显示(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.ToggleDictation]})`"
+    >
       <IconWrapper>
         <Icon v-if="settingStore.translate" icon="mdi:translate"
               @click="toggle"
diff --git a/src/components/VolumeIcon.vue b/src/components/VolumeIcon.vue
index e5925a1f..100d51f4 100644
--- a/src/components/VolumeIcon.vue
+++ b/src/components/VolumeIcon.vue
@@ -2,18 +2,23 @@
 import {Icon} from "@iconify/vue";
 import {$ref} from "vue/macros";
 import IconWrapper from "@/components/IconWrapper.vue";
+import Tooltip from "@/components/Tooltip.vue";
+import {ShortcutKey} from "@/types.ts";
+import {useSettingStore} from "@/stores/setting.ts";
 
 const props = withDefaults(defineProps<{
   time?: number,
   simple?: boolean
   cb?: Function
 }>(), {
-  time: 400,
+  time: 300,
   simple: false
 })
+const emit = defineEmits(['click'])
+const settingStore = useSettingStore()
+
 let step = $ref(2)
 let count = $ref(0)
-const emit = defineEmits(['click'])
 
 function play(time = props.time, reset = false) {
   if (reset) {
@@ -48,11 +53,15 @@ defineExpose({play})
 </script>
 
 <template>
-  <div class="center" @click.stop="click" v-if="props.simple">
-    <Icon v-if="step === 0" icon="bx:volume"/>
-    <Icon v-if="step === 1" icon="bx:volume-low"/>
-    <Icon v-if="step === 2" icon="bx:volume-full"/>
-  </div>
+  <Tooltip v-if="props.simple"
+           :title="`发音(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.PlaySound]})`"
+  >
+    <div class="center" @click.stop="click">
+      <Icon v-if="step === 0" icon="bx:volume"/>
+      <Icon v-if="step === 1" icon="bx:volume-low"/>
+      <Icon v-if="step === 2" icon="bx:volume-full"/>
+    </div>
+  </Tooltip>
   <IconWrapper @click.stop="click" v-else>
     <div class="center">
       <Icon v-if="step === 0" icon="bx:volume"/>
diff --git a/src/stores/runtime.ts b/src/stores/runtime.ts
index 339ca287..cff12f72 100644
--- a/src/stores/runtime.ts
+++ b/src/stores/runtime.ts
@@ -7,6 +7,7 @@ export interface RuntimeState {
   editDict: Dict
   translateWordList: Word[]
   showDictModal: boolean
+  showSettingModal: boolean
 }
 
 export const useRuntimeStore = defineStore('runtime', {
@@ -17,6 +18,7 @@ export const useRuntimeStore = defineStore('runtime', {
       editDict: {...DefaultDict},
       translateWordList: [],
       showDictModal: false,
+      showSettingModal: false,
     }
   },
 })
\ No newline at end of file
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index f52d7d41..adc02b82 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -98,10 +98,16 @@ export const useSettingStore = defineStore('setting', {
               setDefaultConfig()
             } else {
               if (obj.version !== SaveConfig.version) {
-                setDefaultConfig()
+                debugger
+                for (const [key, value] of Object.entries(this.shortcutKeyMap)) {
+                  if (obj.val.shortcutKeyMap[key]) this.shortcutKeyMap[key] = obj.val.shortcutKeyMap[key]
+                }
+                delete obj.val.shortcutKeyMap
+                this.setState(obj.val)
               } else {
                 this.setState(obj.val)
               }
+              localStorage.setItem(SaveConfig.key, JSON.stringify({val: this.$state, version: SaveConfig.version}))
             }
           } catch (e) {
             setDefaultConfig()
diff --git a/src/types.ts b/src/types.ts
index 323402fd..96f7eb5e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -24,7 +24,7 @@ export const SaveDict = {
 }
 export const SaveConfig = {
   key: 'typing-word-config',
-  version: 1
+  version: 6
 }
 
 export const PronunciationApi = 'https://dict.youdao.com/dictvoice?audio='
@@ -173,28 +173,38 @@ export const ShortcutKeyMap = {
 
 export enum ShortcutKey {
   Show = 'Show',
+  Edit = 'Edit',
   Skip = 'Skip',
   ToggleSimple = 'ToggleSimple',
   ToggleCollect = 'ToggleCollect',
   NextChapter = 'NextChapter',
-  ReplayChapter = 'ReplayChapter',
+  RepeatChapter = 'RepeatChapter',
   DictationChapter = 'DictationChapter',
   PlaySound = 'PlaySound',
   ToggleShowTranslate = 'ToggleShowTranslate',
   ToggleDictation = 'ToggleDictation',
+  OpenSetting = 'OpenSetting',
+  OpenDictDetail = 'OpenDictDetail',
+  ToggleTheme = 'ToggleTheme',
+  ToggleConciseMode = 'ToggleConciseMode',
 }
 
 export const DefaultShortcutKeyMap = {
+  [ShortcutKey.Edit]: 'Ctrl+E',
   [ShortcutKey.Show]: 'Escape',
   [ShortcutKey.Skip]: 'Tab',
   [ShortcutKey.ToggleSimple]: '`',
   [ShortcutKey.ToggleCollect]: 'Enter',
   [ShortcutKey.NextChapter]: 'Ctrl+➡',
-  [ShortcutKey.ReplayChapter]: 'Ctrl+Enter',
+  [ShortcutKey.RepeatChapter]: 'Ctrl+Enter',
   [ShortcutKey.DictationChapter]: 'Alt+Enter',
   [ShortcutKey.PlaySound]: 'Ctrl+P',
-  [ShortcutKey.ToggleShowTranslate]: 'Ctrl+T',
+  [ShortcutKey.ToggleShowTranslate]: 'Ctrl+Z',
   [ShortcutKey.ToggleDictation]: 'Ctrl+I',
+  [ShortcutKey.OpenSetting]: 'Ctrl+S',
+  [ShortcutKey.ToggleTheme]: 'Ctrl+Q',
+  [ShortcutKey.OpenDictDetail]: 'Ctrl+J',
+  [ShortcutKey.ToggleConciseMode]: 'Ctrl+M',
 }
 
 
diff --git a/src/utils/eventBus.ts b/src/utils/eventBus.ts
index c8972d30..710e9233 100644
--- a/src/utils/eventBus.ts
+++ b/src/utils/eventBus.ts
@@ -13,5 +13,4 @@ export const EventKey = {
   repeat: 'repeat',
   next: 'next',
   write: 'write',
-  restart: 'restart'
 }
\ No newline at end of file