From 4b7782a50fdc22cd77e686128d4f2bfa5f58df07 Mon Sep 17 00:00:00 2001
From: Zyronon <Zyronon@163.com>
Date: Thu, 25 Sep 2025 01:02:38 +0800
Subject: [PATCH] save

---
 src/assets/css/style.scss                     | 17 ++++
 src/components/icon/VolumeIcon.vue            |  9 +-
 src/hooks/article.ts                          | 37 +++++++--
 src/pages/article/BatchEditArticlePage.vue    | 20 +----
 src/pages/article/PracticeArticles.vue        |  5 +-
 .../article/components/TypingArticle.vue      | 41 +++------
 src/pages/setting/Setting.vue                 |  5 +-
 src/pages/word/PracticeWords.vue              | 69 ++++++++++-----
 src/pages/word/WordsPage.vue                  | 49 +++++++----
 src/pages/word/components/TypeWord.vue        | 83 +++++++++++++------
 src/types/types.ts                            |  6 --
 src/utils/const.ts                            |  5 ++
 src/utils/index.ts                            |  2 +
 13 files changed, 219 insertions(+), 129 deletions(-)

diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 61c5e6b0..a9c4615e 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -444,4 +444,21 @@ a {
 
 .red-point {
   @apply bg-red w-3 h-3 rounded-full absolute right-3;
+}
+
+.cursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 1.8rem;
+  animation: underline 1s infinite steps(1, start);
+}
+
+@keyframes underline {
+  0%, 100% {
+    border-left: .1rem solid var(--color-article);
+  }
+  50% {
+    border-left: .1rem solid transparent;
+  }
 }
\ No newline at end of file
diff --git a/src/components/icon/VolumeIcon.vue b/src/components/icon/VolumeIcon.vue
index 83bbfdec..aae73d2f 100644
--- a/src/components/icon/VolumeIcon.vue
+++ b/src/components/icon/VolumeIcon.vue
@@ -4,6 +4,7 @@ import BaseIcon from "@/components/BaseIcon.vue";
 const props = withDefaults(defineProps<{
   time?: number,
   simple?: boolean
+  title?: string
   cb?: Function
 }>(), {
   time: 300,
@@ -49,7 +50,9 @@ defineExpose({play})
 
 <template>
   <template v-if="props.simple">
-    <BaseIcon @click.stop="click"
+    <BaseIcon
+        :title="title"
+        @click.stop="click"
               no-bg
     >
       <IconBxVolume v-if="step === 0"/>
@@ -58,7 +61,9 @@ defineExpose({play})
     </BaseIcon>
   </template>
   <template v-else>
-    <BaseIcon @click.stop="click"
+    <BaseIcon
+        :title="title"
+        @click.stop="click"
     >
       <IconBxVolume v-if="step === 0"/>
       <IconBxVolumeLow v-if="step === 1"/>
diff --git a/src/hooks/article.ts b/src/hooks/article.ts
index 9ab93c50..707d6954 100644
--- a/src/hooks/article.ts
+++ b/src/hooks/article.ts
@@ -1,11 +1,12 @@
-import {Article, ArticleWord, Sentence} from "@/types/types.ts";
-import {cloneDeep} from "@/utils";
+import { Article, ArticleWord, DictId, Sentence } from "@/types/types.ts";
+import { _nextTick, cloneDeep } from "@/utils";
 import nlp from "compromise/one";
-import {usePlayWordAudio} from "@/hooks/sound.ts";
-import {getSentenceAllText, getSentenceAllTranslateText} from "@/hooks/translate.ts";
-import {getDefaultArticleWord, getDefaultWord} from "@/types/func.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import Toast from "@/components/base/toast/Toast.ts";
+import { usePlayWordAudio } from "@/hooks/sound.ts";
+import { getSentenceAllText, getSentenceAllTranslateText } from "@/hooks/translate.ts";
+import { getDefaultArticleWord } from "@/types/func.ts";
+import { useSettingStore } from "@/stores/setting.ts";
+import { useBaseStore } from "@/stores/base.ts";
+import { useRuntimeStore } from "@/stores/runtime.ts";
 
 interface KeyboardMap {
   Period: string,
@@ -25,7 +26,6 @@ export const EnKeyboardMap: KeyboardMap = {
   QuoteRight: `'`,
 }
 
-
 function parseSentence(sentence: string) {
   // 先统一一些常见的“智能引号” -> 直引号，避免匹配问题
   sentence = sentence
@@ -468,3 +468,24 @@ export function usePlaySentenceAudio() {
     playSentenceAudio
   }
 }
+
+//todo 考虑与syncDictInMyStudyList、changeDict方法合并
+export function syncBookInMyStudyList(study = false) {
+  _nextTick(() => {
+    const base = useBaseStore()
+    const runtimeStore = useRuntimeStore()
+    let rIndex = base.article.bookList.findIndex(v => v.id === runtimeStore.editDict.id)
+    let temp = cloneDeep(runtimeStore.editDict);
+    if (!temp.custom && temp.id !== DictId.articleCollect) {
+      temp.custom = true
+    }
+    temp.length = temp.articles.length
+    if (rIndex > -1) {
+      base.article.bookList[rIndex] = temp
+      if (study) base.article.studyIndex = rIndex
+    } else {
+      base.article.bookList.push(temp)
+      if (study) base.article.studyIndex = base.article.bookList.length - 1
+    }
+  }, 100)
+}
\ No newline at end of file
diff --git a/src/pages/article/BatchEditArticlePage.vue b/src/pages/article/BatchEditArticlePage.vue
index bcf6bb13..56c76384 100644
--- a/src/pages/article/BatchEditArticlePage.vue
+++ b/src/pages/article/BatchEditArticlePage.vue
@@ -16,6 +16,7 @@ import BackIcon from "@/components/BackIcon.vue";
 import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {onMounted} from "vue";
 import {Origin} from "@/config/ENV.ts";
+import {syncBookInMyStudyList} from "@/hooks/article.ts";
 
 const base = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -106,25 +107,6 @@ function saveArticle(val: Article): boolean {
   return true
 }
 
-//todo 考虑与syncDictInMyStudyList、changeDict方法合并
-function syncBookInMyStudyList(study = false) {
-  _nextTick(() => {
-    let rIndex = base.article.bookList.findIndex(v => v.id === runtimeStore.editDict.id)
-    let temp = cloneDeep(runtimeStore.editDict);
-    if (!temp.custom && temp.id !== DictId.articleCollect) {
-      temp.custom = true
-    }
-    temp.length = temp.articles.length
-    if (rIndex > -1) {
-      base.article.bookList[rIndex] = temp
-      if (study) base.article.studyIndex = rIndex
-    } else {
-      base.article.bookList.push(temp)
-      if (study) base.article.studyIndex = base.article.bookList.length - 1
-    }
-  }, 100)
-}
-
 function saveAndNext(val: Article) {
   if (saveArticle(val)) {
     add()
diff --git a/src/pages/article/PracticeArticles.vue b/src/pages/article/PracticeArticles.vue
index 4efbd418..322a9a3f 100644
--- a/src/pages/article/PracticeArticles.vue
+++ b/src/pages/article/PracticeArticles.vue
@@ -11,7 +11,7 @@ import Toast from '@/components/base/toast/Toast.ts'
 import {_getDictDataByUrl, cloneDeep, msToHourMinute, msToMinute, total} from "@/utils";
 import {usePracticeStore} from "@/stores/practice.ts";
 import {useArticleOptions} from "@/hooks/dict.ts";
-import {genArticleSectionData, usePlaySentenceAudio} from "@/hooks/article.ts";
+import {genArticleSectionData, syncBookInMyStudyList, usePlaySentenceAudio} from "@/hooks/article.ts";
 import {getDefaultArticle, getDefaultDict, getDefaultWord} from "@/types/func.ts";
 import TypingArticle from "@/pages/article/components/TypingArticle.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
@@ -204,6 +204,7 @@ function saveArticle(val: Article) {
     store.sbook.articles[rIndex] = cloneDeep(val)
   }
   setArticle(val)
+  store.sbook.custom = true
 }
 
 function edit(val: Article = articleData.article) {
@@ -376,7 +377,7 @@ const currentPractice = $computed(() => {
           <div class="flex justify-between items-center gap-2">
             <div class="stat">
               <div class="row">
-                <div class="num">{{ currentPractice.length }}次/{{ msToMinute(total(currentPractice, 'spend'))}}</div>
+                <div class="num">{{ currentPractice.length }}次/{{ msToMinute(total(currentPractice, 'spend')) }}</div>
                 <div class="line"></div>
                 <div class="name">记录</div>
               </div>
diff --git a/src/pages/article/components/TypingArticle.vue b/src/pages/article/components/TypingArticle.vue
index 5ebb7360..ee3206c2 100644
--- a/src/pages/article/components/TypingArticle.vue
+++ b/src/pages/article/components/TypingArticle.vue
@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import {onMounted, onUnmounted, watch} from "vue"
-import {Article, ArticleWord, Sentence, Word} from "@/types/types.ts";
-import {useBaseStore} from "@/stores/base.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio} from "@/hooks/sound.ts";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import {_nextTick} from "@/utils";
+import { onMounted, onUnmounted, watch } from "vue"
+import { Article, ArticleWord, Sentence, Word } from "@/types/types.ts";
+import { useBaseStore } from "@/stores/base.ts";
+import { useSettingStore } from "@/stores/setting.ts";
+import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio } from "@/hooks/sound.ts";
+import { emitter, EventKey } from "@/utils/eventBus.ts";
+import { _nextTick } from "@/utils";
 import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
-import {getTranslateText} from "@/hooks/article.ts";
+import { getTranslateText } from "@/hooks/article.ts";
 import BaseButton from "@/components/BaseButton.vue";
 import QuestionForm from "@/pages/article/components/QuestionForm.vue";
-import {getDefaultArticle, getDefaultWord} from "@/types/func.ts";
+import { getDefaultArticle, getDefaultWord } from "@/types/func.ts";
 import Toast from '@/components/base/toast/Toast.ts'
 import TypingWord from "@/pages/article/components/TypingWord.vue";
 import Space from "@/pages/article/components/Space.vue";
-import {useWordOptions} from "@/hooks/dict.ts";
+import { useWordOptions } from "@/hooks/dict.ts";
 import nlp from "compromise/three";
-import {nanoid} from "nanoid";
+import { nanoid } from "nanoid";
 
 interface IProps {
   article: Article,
@@ -76,7 +76,6 @@ const currentIndex = $computed(() => {
 const playBeep = usePlayBeep()
 const playCorrect = usePlayCorrect()
 const playKeyboardAudio = usePlayKeyboardAudio()
-const playWordAudio = usePlayWordAudio()
 const {
   toggleWordCollect,
 } = useWordOptions()
@@ -855,22 +854,4 @@ $article-lh: 2.4;
     }
   }
 }
-
-.cursor {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 1.8rem;
-  animation: underline 1s infinite steps(1, start);
-}
-
-@keyframes underline {
-  0%, 100% {
-    border-left: .1rem solid var(--color-article);
-  }
-  50% {
-    border-left: .1rem solid transparent;
-  }
-}
-
 </style>
diff --git a/src/pages/setting/Setting.vue b/src/pages/setting/Setting.vue
index de231728..46c1b894 100644
--- a/src/pages/setting/Setting.vue
+++ b/src/pages/setting/Setting.vue
@@ -139,7 +139,6 @@ function getShortcutKeyName(key: string): string {
     'ShowWord': '显示单词',
     'EditArticle': '编辑文章',
     'Next': '下一个',
-    'Replay': '重播',
     'Previous': '上一个',
     'ToggleSimple': '切换已掌握状态',
     'ToggleCollect': '切换收藏状态',
@@ -350,14 +349,14 @@ function importOldData() {
           </SettingItem>
 
           <SettingItem title="允许默写模式下显示提示"
-                       :desc="`开启后，可以通过鼠标 hover 单词或者按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示正确答案`"
+                       :desc="`开启后，可以通过将鼠标移动到单词上或者按快捷键 ${settingStore.shortcutKeyMap[ShortcutKey.ShowWord]} 显示正确答案`"
           >
             <Switch v-model="settingStore.allowWordTip"/>
           </SettingItem>
 
           <div class="line"></div>
           <SettingItem title="简单词过滤"
-                       desc="开启后，练习单词中不会包含简单词；文章统计的总词数中不会包含简单词"
+                       desc="开启后，练习的单词中不会包含简单词；文章统计的总词数中不会包含简单词"
           >
             <Switch v-model="settingStore.ignoreSimpleWord"/>
           </SettingItem>
diff --git a/src/pages/word/PracticeWords.vue b/src/pages/word/PracticeWords.vue
index acefa44e..b67a14bb 100644
--- a/src/pages/word/PracticeWords.vue
+++ b/src/pages/word/PracticeWords.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
 
-import {onMounted, provide, watch} from "vue";
+import { onMounted, provide, watch } from "vue";
 
 import Statistics from "@/pages/word/Statistics.vue";
-import {emitter, EventKey, useEvents} from "@/utils/eventBus.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import {Dict, ShortcutKey, StudyData, Word} from "@/types/types.ts";
-import {useDisableEventListener, useOnKeyboardEventListener, useStartKeyboardEventListener} from "@/hooks/event.ts";
+import { emitter, EventKey, useEvents } from "@/utils/eventBus.ts";
+import { useSettingStore } from "@/stores/setting.ts";
+import { useRuntimeStore } from "@/stores/runtime.ts";
+import { Dict, ShortcutKey, StudyData, Word } from "@/types/types.ts";
+import { useDisableEventListener, useOnKeyboardEventListener, useStartKeyboardEventListener } from "@/hooks/event.ts";
 import useTheme from "@/hooks/theme.ts";
-import {getCurrentStudyWord, useWordOptions} from "@/hooks/dict.ts";
-import {_getDictDataByUrl, cloneDeep, shuffle} from "@/utils";
-import {useRoute, useRouter} from "vue-router";
+import { getCurrentStudyWord, useWordOptions } from "@/hooks/dict.ts";
+import { _getDictDataByUrl, cloneDeep, shuffle } from "@/utils";
+import { useRoute, useRouter } from "vue-router";
 import Footer from "@/pages/word/components/Footer.vue";
 import Panel from "@/components/Panel.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
@@ -19,13 +19,14 @@ import Tooltip from "@/components/base/Tooltip.vue";
 import WordList from "@/components/list/WordList.vue";
 import TypeWord from "@/pages/word/components/TypeWord.vue";
 import Empty from "@/components/Empty.vue";
-import {useBaseStore} from "@/stores/base.ts";
-import {usePracticeStore} from "@/stores/practice.ts";
+import { useBaseStore } from "@/stores/base.ts";
+import { usePracticeStore } from "@/stores/practice.ts";
 import Toast from '@/components/base/toast/Toast.ts'
-import {getDefaultDict, getDefaultWord} from "@/types/func.ts";
+import { getDefaultDict, getDefaultWord } from "@/types/func.ts";
 import ConflictNotice from "@/components/ConflictNotice.vue";
 import dict_list from "@/assets/dict-list.json";
 import PracticeLayout from "@/components/PracticeLayout.vue";
+import { PracticeSaveKey } from "@/utils/const.ts";
 
 interface IProps {
   new: Word[],
@@ -92,9 +93,28 @@ watch(() => store.load, (n) => {
   if (n && loading) init()
 }, {immediate: true})
 
+function checkSaveData() {
+  let d = localStorage.getItem(PracticeSaveKey.Word)
+  if (d) {
+    try {
+      let obj = JSON.parse(d)
+      console.log('obj', obj)
+      studyData = obj.studyData
+      data = obj.practiceData
+      return true
+    } catch (e) {
+      localStorage.removeItem(PracticeSaveKey.Word)
+    }
+  }
+  return false
+}
+
 onMounted(() => {
+  //如果是从单词学习主页过来的，就直接使用；否则等待加载
   if (runtimeStore.routeData) {
-    studyData = runtimeStore.routeData
+    if (!checkSaveData()) {
+      studyData = runtimeStore.routeData
+    }
   } else {
     loading = true
   }
@@ -168,6 +188,8 @@ function next(isTyping: boolean = true) {
         statStore.spend = Date.now() - statStore.startDate
         console.log('全完学完了')
         showStatDialog = true
+        localStorage.removeItem(PracticeSaveKey.Word)
+        return;
         // emit('complete', {})
       }
 
@@ -180,8 +202,8 @@ function next(isTyping: boolean = true) {
           data.words = shuffle(studyData.write)
           data.index = 0
         } else {
-          console.log('开始默认所有单词-无单词路过')
-          next()
+          console.log('开始默认所有单词-无单词略过')
+          return next()
         }
       }
 
@@ -194,8 +216,8 @@ function next(isTyping: boolean = true) {
           data.words = shuffle(studyData.review)
           data.index = 0
         } else {
-          console.log('开始默写昨日-无单词路过')
-          next()
+          console.log('开始默写昨日-无单词略过')
+          return next()
         }
       }
 
@@ -208,8 +230,8 @@ function next(isTyping: boolean = true) {
           data.words = shuffle(studyData.review)
           data.index = 0
         } else {
-          console.log('开始复习昨日-无单词路过')
-          next()
+          console.log('开始复习昨日-无单词略过')
+          return next()
         }
       }
 
@@ -230,8 +252,15 @@ function next(isTyping: boolean = true) {
   } else {
     data.index++
     isTyping && statStore.inputWordNumber++
-    console.log('这个词完了')
+    // console.log('这个词完了')
   }
+
+  localStorage.setItem(PracticeSaveKey.Word, JSON.stringify({
+    studyData,
+    practiceData: data,
+    statStoreData: statStore.$state,
+  }))
+  console.log('wordPracticeData',)
 }
 
 function onTypeWrong() {
diff --git a/src/pages/word/WordsPage.vue b/src/pages/word/WordsPage.vue
index a082fa8d..000e0b40 100644
--- a/src/pages/word/WordsPage.vue
+++ b/src/pages/word/WordsPage.vue
@@ -1,25 +1,26 @@
 <script setup lang="ts">
-import {useBaseStore} from "@/stores/base.ts";
-import {useRouter} from "vue-router";
+import { useBaseStore } from "@/stores/base.ts";
+import { useRouter } from "vue-router";
 import BaseIcon from "@/components/BaseIcon.vue";
-import {_getAccomplishDate, _getDictDataByUrl, useNav} from "@/utils";
+import { _getAccomplishDate, _getDictDataByUrl, useNav } from "@/utils";
 import BasePage from "@/components/BasePage.vue";
-import {DictResource} from "@/types/types.ts";
-import {watch} from "vue";
-import {getCurrentStudyWord} from "@/hooks/dict.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
+import { DictResource } from "@/types/types.ts";
+import { watch } from "vue";
+import { getCurrentStudyWord } from "@/hooks/dict.ts";
+import { useRuntimeStore } from "@/stores/runtime.ts";
 import Book from "@/components/Book.vue";
 import PopConfirm from "@/components/PopConfirm.vue";
 import Progress from '@/components/base/Progress.vue';
 import Toast from '@/components/base/toast/Toast.ts';
 import BaseButton from "@/components/BaseButton.vue";
-import {getDefaultDict} from "@/types/func.ts";
+import { getDefaultDict } from "@/types/func.ts";
 import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 import PracticeSettingDialog from "@/pages/word/components/PracticeSettingDialog.vue";
 import ChangeLastPracticeIndexDialog from "@/pages/word/components/ChangeLastPracticeIndexDialog.vue";
-import {useSettingStore} from "@/stores/setting.ts";
+import { useSettingStore } from "@/stores/setting.ts";
 import recommendDictList from "@/assets/recommend-dict-list.json";
 import CollectNotice from "@/components/CollectNotice.vue";
+import { PracticeSaveKey } from "@/utils/const.ts";
 
 
 const store = useBaseStore()
@@ -28,6 +29,7 @@ const router = useRouter()
 const {nav} = useNav()
 const runtimeStore = useRuntimeStore()
 let loading = $ref(true)
+let isSaveData = $ref(false)
 let currentStudy = $ref({
   new: [],
   review: [],
@@ -46,7 +48,19 @@ async function init() {
   }
   // console.log(store.sdict)
   if (!currentStudy.new.length && store.sdict.words.length) {
-    currentStudy = getCurrentStudyWord()
+    let d = localStorage.getItem(PracticeSaveKey.Word)
+    if (d) {
+      try {
+        let data = JSON.parse(d)
+        currentStudy = data.studyData
+        isSaveData = true
+      } catch (e) {
+        localStorage.removeItem(PracticeSaveKey.Word)
+        currentStudy = getCurrentStudyWord()
+      }
+    } else {
+      currentStudy = getCurrentStudyWord()
+    }
   }
   loading = false
 }
@@ -71,7 +85,6 @@ function startPractice() {
   }
 }
 
-
 let showPracticeSettingDialog = $ref(false)
 let showChangeLastPracticeIndexDialog = $ref(false)
 
@@ -162,7 +175,7 @@ function check(cb: Function) {
       </div>
 
       <div class="w-3/10 flex flex-col justify-evenly">
-        <div class="center text-xl">今日任务</div>
+        <div class="center text-xl">{{ isSaveData ? '上次学习任务' : '今日任务' }}</div>
         <div class="flex">
           <div class="flex-1 flex flex-col items-center">
             <div class="text-4xl font-bold">{{ currentStudy.new.length }}</div>
@@ -196,7 +209,7 @@ function check(cb: Function) {
                     :loading="loading"
                     @click="startPractice">
           <div class="flex items-center gap-2">
-            <span class="line-height-[2]">开始学习</span>
+            <span class="line-height-[2]">{{ isSaveData ? '继续上次学习' : '开始学习' }}</span>
             <IconFluentArrowCircleRight16Regular class="text-xl"/>
           </div>
         </BaseButton>
@@ -246,7 +259,15 @@ function check(cb: Function) {
 
   <PracticeSettingDialog
       :show-left-option="false"
-      v-model="showPracticeSettingDialog" @ok="currentStudy = getCurrentStudyWord()"/>
+      v-model="showPracticeSettingDialog"
+      @ok="()=>{
+        if(isSaveData) {
+          Toast.success('修改成功，完成当前任务后生效')
+         }else {
+          Toast.success('修改成功')
+          currentStudy = getCurrentStudyWord()
+         }
+      }"/>
 
   <ChangeLastPracticeIndexDialog
       v-model="showChangeLastPracticeIndexDialog"
diff --git a/src/pages/word/components/TypeWord.vue b/src/pages/word/components/TypeWord.vue
index a373676b..18fddb7e 100644
--- a/src/pages/word/components/TypeWord.vue
+++ b/src/pages/word/components/TypeWord.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import {ShortcutKey, Word} from "@/types/types.ts";
+import { ShortcutKey, Word } from "@/types/types.ts";
 import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {useSettingStore} from "@/stores/setting.ts";
-import {usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio} from "@/hooks/sound.ts";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import {nextTick, onMounted, onUnmounted, watch} from "vue";
+import { useSettingStore } from "@/stores/setting.ts";
+import { usePlayBeep, usePlayCorrect, usePlayKeyboardAudio, usePlayWordAudio, useTTsPlayAudio } from "@/hooks/sound.ts";
+import { emitter, EventKey } from "@/utils/eventBus.ts";
+import { nextTick, onMounted, onUnmounted, watch } from "vue";
 import Tooltip from "@/components/base/Tooltip.vue";
 import SentenceHightLightWord from "@/pages/word/components/SentenceHightLightWord.vue";
-import {usePracticeStore} from "@/stores/practice.ts";
-import {getDefaultWord} from "@/types/func.ts";
-import {sleep} from "@/utils";
+import { usePracticeStore } from "@/stores/practice.ts";
+import { getDefaultWord } from "@/types/func.ts";
+import { _nextTick, sleep } from "@/utils";
 
 interface IProps {
   word: Word,
@@ -30,7 +30,12 @@ let showFullWord = $ref(false)
 //输入锁定，因为跳转到下一个单词有延时，如果重复在延时期间内重复输入，导致会跳转N次
 let inputLock = false
 let wordRepeatCount = 0
+let cursor = $ref({
+  top: 0,
+  left: 0,
+})
 const settingStore = useSettingStore()
+const statStore = usePracticeStore()
 
 const playBeep = usePlayBeep()
 const playCorrect = usePlayCorrect()
@@ -38,6 +43,7 @@ const playKeyboardAudio = usePlayKeyboardAudio()
 const playWordAudio = usePlayWordAudio()
 // const ttsPlayAudio = useTTsPlayAudio()
 const volumeIconRef: any = $ref()
+const typingWordRef = $ref<HTMLDivElement>()
 // const volumeTranslateIconRef: any = $ref()
 
 let displayWord = $computed(() => {
@@ -63,6 +69,7 @@ watch(() => props.word, () => {
   }
   // 更新当前单词信息
   updateCurrentWordInfo();
+  checkCursorPosition()
 }, {deep: true})
 
 // 监听输入变化，更新当前单词信息
@@ -73,7 +80,7 @@ watch(() => input, () => {
 onMounted(() => {
   // 初始化当前单词信息
   updateCurrentWordInfo();
-  
+
   emitter.on(EventKey.resetWord, () => {
     wrong = input = ''
     updateCurrentWordInfo();
@@ -110,22 +117,22 @@ async function onTyping(e: KeyboardEvent) {
   }
   let letter = e.key
   inputLock = true
-  
+
   // 检查当前单词是否包含空格
   const wordContainsSpace = props.word.word.includes(' ')
-  
+
   // 如果是空格键，需要判断是作为输入还是切换单词
   if (letter === ' ' || e.code === 'Space') {
     // 如果当前单词包含空格
     if (wordContainsSpace && props.word.word[input.length] === ' ') {
       letter = ' '
-    } 
+    }
     // 如果当前单词不包含空格，且已经输入完成，则视为切换单词的信号
     else if (!wordContainsSpace && input.toLowerCase() === props.word.word.toLowerCase()) {
       return emit('complete')
     }
   }
-  
+
   let isTypingRight = false
   if (settingStore.ignoreCase) {
     isTypingRight = letter.toLowerCase() === props.word.word[input.length].toLowerCase()
@@ -171,6 +178,7 @@ async function onTyping(e: KeyboardEvent) {
   } else {
     inputLock = false
   }
+  checkCursorPosition()
 }
 
 function del() {
@@ -182,12 +190,11 @@ function del() {
   } else {
     input = input.slice(0, -1)
   }
-  
+
   // 更新当前单词信息
   updateCurrentWordInfo();
 }
 
-const statStore = usePracticeStore()
 
 function showWord() {
   if (settingStore.allowWordTip) {
@@ -226,7 +233,7 @@ function hideWordInTranslation(text: string, word: string): string {
   if (!text || !word) {
     return text
   }
-  
+
   // 创建正则表达式，匹配单词本身及其常见变形（如复数、过去式等）
   const wordBase = word.toLowerCase()
   const patterns = [
@@ -236,13 +243,13 @@ function hideWordInTranslation(text: string, word: string): string {
     `\\b${escapeRegExp(wordBase)}ed\\b`, // 过去式
     `\\b${escapeRegExp(wordBase)}ing\\b`, // 进行时
   ]
-  
+
   let result = text
   patterns.forEach(pattern => {
     const regex = new RegExp(pattern, 'gi')
     result = result.replace(regex, match => `<span class="word-shadow">${match}</span>`)
   })
-  
+
   return result
 }
 
@@ -251,10 +258,37 @@ function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
+watch(() => input, checkCursorPosition)
+
+//检测光标位置
+function checkCursorPosition() {
+  _nextTick(() => {
+    // 选中目标元素
+    const cursorEl = document.querySelector(`.cursor`);
+    const input = document.querySelector(`.input`);
+    const typingWordRect = typingWordRef.getBoundingClientRect();
+
+    if (input) {
+      let inputRect = input.getBoundingClientRect();
+      cursor = {
+        top: inputRect.top + inputRect.height - cursorEl.clientHeight - typingWordRect.top,
+        left: inputRect.right - typingWordRect.left - 3,
+      };
+    } else {
+      const letter = document.querySelector(`.letter`);
+      let letterRect = letter.getBoundingClientRect();
+      cursor = {
+        top: letterRect.top + letterRect.height - cursorEl.clientHeight - typingWordRect.top,
+        left: letterRect.left - typingWordRect.left - 3,
+      };
+    }
+  },)
+}
+
 </script>
 
 <template>
-  <div class="typing-word">
+  <div class="typing-word" ref="typingWordRef">
     <div class="flex flex-col items-center">
       <div class="flex gap-1 mt-26">
         <div class="phonetic" v-if="settingStore.soundType === 'us' && word.phonetic0">[{{
@@ -265,12 +299,9 @@ function escapeRegExp(string: string): string {
             (settingStore.dictation && !showFullWord) ? '_'.repeat(word.phonetic1.length) : word.phonetic1
           }}]
         </div>
-
-        <Tooltip
+        <VolumeIcon
             :title="`发音(${settingStore.shortcutKeyMap[ShortcutKey.PlayWordPronunciation]})`"
-        >
-          <VolumeIcon ref="volumeIconRef" :simple="true" :cb="() => playWordAudio(word.word)"/>
-        </Tooltip>
+            ref="volumeIconRef" :simple="true" :cb="() => playWordAudio(word.word)"/>
       </div>
 
       <div class="word my-1"
@@ -318,7 +349,7 @@ function escapeRegExp(string: string): string {
         <div class="tabs">
           <div @click="tab = 0" class="tab" :class="tab === 0 && 'active'">短语</div>
           <div @click="tab = 1" class="tab" :class="tab === 1 && 'active'">同近义词</div>
-<!--          <div @click="tab = 2" class="tab" :class="tab === 2 && 'active'">同根词</div>-->
+          <!--          <div @click="tab = 2" class="tab" :class="tab === 2 && 'active'">同根词</div>-->
           <div @click="tab = 3" class="tab" :class="tab === 3 && 'active'">词源</div>
         </div>
       </template>
@@ -361,6 +392,8 @@ function escapeRegExp(string: string): string {
         </div>
       </template>
     </div>
+    <div class="cursor"
+         :style="{top:cursor.top+'px',left:cursor.left+'px',height: settingStore.fontSize.wordForeignFontSize +'px'}"></div>
   </div>
 </template>
 
diff --git a/src/types/types.ts b/src/types/types.ts
index 28ae87fa..e74c02e0 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -104,18 +104,14 @@ export enum ShortcutKey {
   ShowWord = 'ShowWord',
   EditArticle = 'EditArticle',
   Next = 'Next',
-  Replay = 'Replay',
   Previous = 'Previous',
   ToggleSimple = 'ToggleSimple',
   ToggleCollect = 'ToggleCollect',
-  //todo 这里还用老的Chapter，要改
   NextChapter = 'NextChapter',
   PreviousChapter = 'PreviousChapter',
   RepeatChapter = 'RepeatChapter',
-  //todo 废弃
   DictationChapter = 'DictationChapter',
   PlayWordPronunciation = 'PlayWordPronunciation',
-  // PlayTranslatePronunciation = 'PlayTranslatePronunciation',
   ToggleShowTranslate = 'ToggleShowTranslate',
   ToggleDictation = 'ToggleDictation',
   ToggleTheme = 'ToggleTheme',
@@ -128,7 +124,6 @@ export const DefaultShortcutKeyMap = {
   [ShortcutKey.ShowWord]: 'Escape',
   [ShortcutKey.Previous]: 'Alt+⬅',
   [ShortcutKey.Next]: 'Tab',
-  [ShortcutKey.Replay]: 'Tab',
   [ShortcutKey.ToggleSimple]: '`',
   [ShortcutKey.ToggleCollect]: 'Enter',
   [ShortcutKey.PreviousChapter]: 'Ctrl+⬅',
@@ -136,7 +131,6 @@ export const DefaultShortcutKeyMap = {
   [ShortcutKey.RepeatChapter]: 'Ctrl+Enter',
   [ShortcutKey.DictationChapter]: 'Alt+Enter',
   [ShortcutKey.PlayWordPronunciation]: 'Ctrl+P',
-  // [ShortcutKey.PlayTranslatePronunciation]: 'Ctrl+O',
   [ShortcutKey.ToggleShowTranslate]: 'Ctrl+Z',
   [ShortcutKey.ToggleDictation]: 'Ctrl+I',
   [ShortcutKey.ToggleTheme]: 'Ctrl+Q',
diff --git a/src/utils/const.ts b/src/utils/const.ts
index 642faa6e..2d1ad305 100644
--- a/src/utils/const.ts
+++ b/src/utils/const.ts
@@ -27,3 +27,8 @@ export const EXPORT_DATA_KEY = {
 
 export const LOCAL_FILE_KEY = 'typing-word-files'
 
+export enum PracticeSaveKey {
+  Word = 'PracticeSaveWordKey',
+  Article = 'PracticeSaveArticleKey',
+}
+
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 93001017..20531f63 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -222,6 +222,8 @@ export function checkAndUpgradeSaveSetting(val: any) {
       state.load = false
       let version = Number(data.version)
       if (version === SAVE_SETTING_KEY.version) {
+        checkRiskKey(defaultState.shortcutKeyMap, state.shortcutKeyMap)
+        delete state.shortcutKeyMap
         checkRiskKey(defaultState, state)
         return defaultState
       } else {