优化ui

src/components/Toolbar/DictModal.vue

@@ -12,26 +12,35 @@ import Modal from "@/components/Modal/Modal.vue";
 import BaseButton from "@/components/BaseButton.vue";
 
 const store = useBaseStore()
-let currentSelectDict: Dict = $ref({
-  name: '新概念英语-2',
-  chapterList: [],
-  chapterIndex: -1,
-} as any)
+
+interface IProps {
+  modelValue: boolean,
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  modelValue: true,
+})
+
+const emit = defineEmits([
+  'update:modelValue',
+])
+
+let currentSelectDict: Dict = $ref(store.currentDict)
 let step = $ref(0)
 
 const currentSelectChapter: Word[] = $computed(() => {
   return currentSelectDict.chapterList?.[currentSelectDict.chapterIndex] ?? []
 })
 
-watch(store.currentDict, (n: Dict) => {
-  currentSelectDict = n
+watch(() => props.modelValue, (n: Dict) => {
+  currentSelectDict = store.currentDict
 })
 
 async function selectDict(item: Dict) {
   currentSelectDict = {
+    ...item,
     type: DictType.inner,
     sort: Sort.normal,
-    ...item,
     wordList: [],
     chapterList: [],
     chapterIndex: 0,
@@ -48,6 +57,12 @@ async function selectDict(item: Dict) {
 
 function changeDict() {
   store.changeDict(currentSelectDict)
+  this.close()
+}
+
+function close() {
+  console.log('close')
+  emit('update:modelValue', false)
 }
 
 function resetChapterList() {
@@ -56,10 +71,11 @@ function resetChapterList() {
 </script>
 
 <template>
-  <Modal v-model="store.dictModalIsOpen">
+  <Modal :modelValue="props.modelValue"
+         @close="close">
     <div class="slide">
-      <div class="slide-list" :class="`step${step}`">
-        <div class="dict-page">
+      <div  class="slide-list" :class="`step${step}`">
+        <div  class="dict-page">
           <header>
             <div class="tabs">
               <div class="tab">
@@ -72,8 +88,7 @@ function resetChapterList() {
                 <span>德语</span>
               </div>
             </div>
-            <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
-                   :strokeWidth="2"/>
+            <Close @click="close" theme="outline" size="20" fill="#929596" :strokeWidth="2"/>
           </header>
           <div class="page-content">
             <div class="dict-list-wrapper">
@@ -119,7 +134,7 @@ function resetChapterList() {
             </div>
           </div>
         </div>
-        <div class="dict-detail-page">
+        <div  class="dict-detail-page">
           <header>
             <div class="left">
               <arrow-left
@@ -130,7 +145,7 @@ function resetChapterList() {
                 词典详情
               </div>
             </div>
-            <close @click="store.dictModalIsOpen = false" theme="outline" size="20" fill="#929596"
+            <Close @click="close" theme="outline" size="20" fill="#929596"
                    :strokeWidth="2"/>
           </header>
           <div class="page-content">

src/components/Toolbar/Toolbar.vue

@@ -17,6 +17,8 @@ import useThemeColor from "@/hooks/useThemeColor.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import SettingModal from "@/components/Toolbar/SettingModal.vue"
 import FeedbackModal from "@/components/Toolbar/FeedbackModal.vue"
+import DictModal from "@/components/Toolbar/DictModal.vue"
+
 import IconWrapper from "@/components/IconWrapper.vue";
 import IconCog6Tooth from '~icons/heroicons/cog-6-tooth-solid'
 
@@ -34,11 +36,12 @@ const {appearance, toggle} = useThemeColor()
 const store = useBaseStore()
 const showFeedbackModal = $ref(false)
 const showSettingModal = $ref(false)
+const showDictModal = $ref(false)
 </script>
 
 <template>
   <header :class="!store.setting.showToolbar && 'hide'">
-    <div class="info" @click="store.dictModalIsOpen = true">
+    <div class="info" @click="showDictModal = true">
       {{ store.currentDict.name }}   第{{ store.currentDict.chapterIndex + 1}}章
     </div>
     <div class="options">
@@ -104,6 +107,7 @@ const showSettingModal = $ref(false)
           theme="outline" size="24" fill="#999"/>
     </Tooltip>
   </header>
+  <DictModal v-model="showDictModal"/>
   <SettingModal v-model="showSettingModal"/>
   <FeedbackModal v-model="showFeedbackModal"/>
 </template>

src/components/Type.vue

@@ -10,7 +10,7 @@ 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 {$ref} from "vue/macros"
+import {$computed, $ref} from "vue/macros"
 import {useSound} from "@/hooks/useSound.ts"
 import {useBaseStore} from "@/stores/base.ts"
 import {DictType, SaveKey, Word} from "../types";
@@ -159,8 +159,11 @@ async function onKeyDown(e: KeyboardEvent) {
   }
 }
 
+const progress = $computed(() => {
+  if (!store.chapter.length) return 0
+  return ((store.currentDict.wordIndex / store.chapter.length) * 100)
+})
 
-const show = $ref(false)
 const {appearance, toggle} = useThemeColor()
 
 </script>
@@ -193,8 +196,13 @@ const {appearance, toggle} = useThemeColor()
         下一个
       </BaseButton>
     </div>
+    <div class="progress">
+      <el-progress :percentage="progress"
+                   :stroke-width="8"
+                   color="rgb(224,231,255)"
+                   :show-text="false"/>
+    </div>
   </div>
-
 </template>
 
 <style scoped lang="scss">
@@ -216,7 +224,6 @@ const {appearance, toggle} = useThemeColor()
     display: flex;
     gap: 15rem;
     font-size: 18rem;
-
   }
 
   .phonetic, .translate {
@@ -247,6 +254,11 @@ const {appearance, toggle} = useThemeColor()
       }
     }
   }
+
+  .progress {
+    margin-top: 20rem;
+    width: 400rem;
+  }
 }
 
 @keyframes shake {