From f72438c9892f444c5728ef71132285051e0d8db6 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 25 Aug 2023 18:07:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   3 -
 .../{Modal => Toolbar}/DictModal.vue          |  45 ++-
 src/components/Toolbar/Toolbar.vue            |   6 +-
 src/components/Type.vue                       |  20 +-
 src/stores/base.ts                            | 324 +++++++++---------
 src/types.ts                                  |   1 -
 6 files changed, 208 insertions(+), 191 deletions(-)
 rename src/components/{Modal => Toolbar}/DictModal.vue (91%)

diff --git a/src/App.vue b/src/App.vue
index cb00e40b..16c24f23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,6 @@ 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 DictModal from "@/components/Modal/DictModal.vue";
 
 </script>
 
@@ -19,7 +18,6 @@ import DictModal from "@/components/Modal/DictModal.vue";
       <Side/>
     </div>
     <Statistics></Statistics>
-    <DictModal/>
   </div>
 </template>
 
@@ -56,5 +54,4 @@ import DictModal from "@/components/Modal/DictModal.vue";
     }
   }
 }
-
 </style>
diff --git a/src/components/Modal/DictModal.vue b/src/components/Toolbar/DictModal.vue
similarity index 91%
rename from src/components/Modal/DictModal.vue
rename to src/components/Toolbar/DictModal.vue
index 1af42afa..f93face4 100644
--- a/src/components/Modal/DictModal.vue
+++ b/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">
diff --git a/src/components/Toolbar/Toolbar.vue b/src/components/Toolbar/Toolbar.vue
index f6fcde03..f8e06472 100644
--- a/src/components/Toolbar/Toolbar.vue
+++ b/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>
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 48797b6d..a60911a8 100644
--- a/src/components/Type.vue
+++ b/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 {
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 217cfb43..463e9998 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -3,174 +3,164 @@ import {Config, Dict, DictType, SaveKey, Sort, State, Word} from "../types.ts"
 import {chunk, cloneDeep} from "lodash";
 
 export const useBaseStore = defineStore('base', {
-    state: (): State => {
-        return {
-            newWordDict: {
-                type: DictType.newWordDict,
-                sort: Sort.normal,
-                name: '生词本',
-                description: '生词本',
-                category: '',
-                tags: [],
-                url: '',
-                length: -1,
-                language: 'en',
-                languageCategory: 'en',
-                wordList: [],
-                chapterList: [],
-                chapterIndex: 0,
-                wordIndex: 0,
-                dictStatistics: []
-            },
-            skipWordDict: {
-                type: DictType.skipWordDict,
-                sort: Sort.normal,
-                name: '已忽略',
-                description: '已忽略',
-                category: '',
-                tags: [],
-                url: '',
-                length: -1,
-                language: 'en',
-                languageCategory: 'en',
-                wordList: [],
-                chapterList: [],
-                chapterIndex: 0,
-                wordIndex: 0,
-                dictStatistics: []
-            },
-            wrongDict: {
-                type: DictType.wrongDict,
-                sort: Sort.normal,
-                name: '已忽略',
-                description: '已忽略',
-                category: '',
-                tags: [],
-                url: '',
-                length: -1,
-                language: 'en',
-                languageCategory: 'en',
-                wordList: [],
-                chapterList: [],
-                chapterIndex: 0,
-                wordIndex: 0,
-                dictStatistics: []
-            },
-            dict: {
-                type: DictType.inner,
-                sort: Sort.normal,
-                name: '新概念英语-2',
-                description: '新概念英语第二册',
-                category: '青少年英语',
-                tags: ['新概念英语'],
-                url: '/dicts/NCE_2.json',
-                length: 858,
-                language: 'en',
-                languageCategory: 'en',
-                wordList: [],
-                chapterList: [],
-                chapterIndex: 0,
-                wordIndex: 0,
-                dictStatistics: []
-            },
-            oldDicts: [],
-            currentDictType: DictType.inner,
-            sideIsOpen: false,
-            dictModalIsOpen: false,
-            dictModalIsOpen2: false,
-            setting: {
-                showToolbar: true,
-                show: false,
-                value1: false,
-                value2: 50,
-                value3: 1,
-                value4: false,
-            }
-        }
+  state: (): State => {
+    return {
+      newWordDict: {
+        type: DictType.newWordDict,
+        sort: Sort.normal,
+        name: '生词本',
+        description: '生词本',
+        category: '',
+        tags: [],
+        url: '',
+        length: -1,
+        language: 'en',
+        languageCategory: 'en',
+        wordList: [],
+        chapterList: [],
+        chapterIndex: 0,
+        wordIndex: 0,
+        dictStatistics: []
+      },
+      skipWordDict: {
+        type: DictType.skipWordDict,
+        sort: Sort.normal,
+        name: '已忽略',
+        description: '已忽略',
+        category: '',
+        tags: [],
+        url: '',
+        length: -1,
+        language: 'en',
+        languageCategory: 'en',
+        wordList: [],
+        chapterList: [],
+        chapterIndex: 0,
+        wordIndex: 0,
+        dictStatistics: []
+      },
+      wrongDict: {
+        type: DictType.wrongDict,
+        sort: Sort.normal,
+        name: '已忽略',
+        description: '已忽略',
+        category: '',
+        tags: [],
+        url: '',
+        length: -1,
+        language: 'en',
+        languageCategory: 'en',
+        wordList: [],
+        chapterList: [],
+        chapterIndex: 0,
+        wordIndex: 0,
+        dictStatistics: []
+      },
+      dict: {
+        type: DictType.inner,
+        sort: Sort.normal,
+        name: '新概念英语-2',
+        description: '新概念英语第二册',
+        category: '青少年英语',
+        tags: ['新概念英语'],
+        url: '/dicts/NCE_2.json',
+        length: 858,
+        language: 'en',
+        languageCategory: 'en',
+        wordList: [],
+        chapterList: [],
+        chapterIndex: 0,
+        chapterWordNumber: 15,
+        wordIndex: 0,
+        dictStatistics: []
+      },
+      oldDicts: [],
+      currentDictType: DictType.inner,
+      sideIsOpen: false,
+      dictModalIsOpen2: false,
+      setting: {
+        showToolbar: true,
+        show: false,
+        value1: false,
+        value2: 50,
+        value3: 1,
+        value4: false,
+      }
+    }
+  },
+  getters: {
+    skipWordNames: (state: State) => {
+      return state.skipWordDict.wordList.map(v => v.name)
     },
-    getters: {
-        skipWordNames: (state: State) => {
-            return state.skipWordDict.wordList.map(v => v.name)
-        },
-        currentDict(state: State): Dict {
-            switch (state.currentDictType) {
-                case DictType.newWordDict:
-                    return state.newWordDict
-                case DictType.skipWordDict:
-                    return state.skipWordDict
-                case DictType.wrongDict:
-                    return state.wrongDict
-                case DictType.inner:
-                case DictType.custom:
-                    return state.dict
-            }
-        },
-        chapter(): Word[] {
-            return this.currentDict.chapterList[this.currentDict.chapterIndex] ?? []
-        },
-        word(): Word {
-            return this.chapter[this.currentDict.wordIndex] ?? {
-                trans: [],
-                name: ''
-            }
-        },
+    currentDict(state: State): Dict {
+      switch (state.currentDictType) {
+        case DictType.newWordDict:
+          return state.newWordDict
+        case DictType.skipWordDict:
+          return state.skipWordDict
+        case DictType.wrongDict:
+          return state.wrongDict
+        case DictType.inner:
+        case DictType.custom:
+          return state.dict
+      }
     },
-    actions: {
-        setState(obj: any) {
-            for (const [key, value] of Object.entries(obj)) {
-                this[key] = value
-            }
-            // console.log('this/', this)
-        },
-        async init() {
-            let configStr = localStorage.getItem(SaveKey)
-            if (configStr) {
-                let obj: Config = JSON.parse(configStr)
-                this.setState(obj)
-            }
-            if (this.currentDictType === DictType.inner) {
-                let r = await fetch(`/public/${this.dict.url}`)
-                r.json().then(v => {
-                    this.dict.wordList = v
-                    this.dict.chapterList = chunk(this.dict.wordList, 15)
-                })
-            }
-            if (this.currentDictType === DictType.custom) {
-                let r = await fetch(`/public/${this.dict.url}`)
-                r.json().then(v => {
-                    this.dict.wordList = v
-                    this.dict.chapterList = chunk(this.dict.wordList, 15)
-                })
-            }
-            this.dictModalIsOpen = false
-            this.dictModalIsOpen2 = false
-        },
-        async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
-            console.log('changeDict',dict)
-            if ([DictType.newWordDict,
-                DictType.skipWordDict,
-                DictType.wrongDict].includes(dict.type)) {
-                this.currentDictType = dict.type
-                this[dict.type].chapterList = [this[dict.type].wordList]
-                this[dict.type].chapterIndex = 0
-                this[dict.type].wordIndex = wordIndex === -1 ? 0 : wordIndex
-            } else {
-                if (dict.name === this.dict.name) {
-                    this.currentDictType = dict.type
-                    if (wordIndex !== -1) this.dict.wordIndex = wordIndex
-                    if (chapterIndex !== -1) this.dict.chapterIndex = chapterIndex
-                } else {
-                    // let r = await fetch(`/public/${dict.url}`)
-                    // r.json().then(v => {
-                    //     this.currentDictType === dict.type
-                    // })
-                    this.dict = cloneDeep(dict)
-                    // this.dict.chapterList = chunk(this.dict.wordList, 15)
-                    // this.dict.chapterIndex = chapterIndex === -1 ? 0 : chapterIndex
-                    // this.dict.wordIndex = wordIndex === -1 ? 0 : wordIndex
-                    this.currentDictType = dict.type
-                }
-            }
-        }
+    chapter(): Word[] {
+      return this.currentDict.chapterList[this.currentDict.chapterIndex] ?? []
     },
+    word(): Word {
+      return this.chapter[this.currentDict.wordIndex] ?? {
+        trans: [],
+        name: ''
+      }
+    },
+  },
+  actions: {
+    setState(obj: any) {
+      for (const [key, value] of Object.entries(obj)) {
+        this[key] = value
+      }
+      // console.log('this/', this)
+    },
+    async init() {
+      let configStr = localStorage.getItem(SaveKey)
+      if (configStr) {
+        let obj: Config = JSON.parse(configStr)
+        this.setState(obj)
+      }
+      if (this.currentDictType === DictType.inner) {
+        let r = await fetch(`/public/${this.dict.url}`)
+        r.json().then(v => {
+          this.dict.wordList = v
+          this.dict.chapterList = chunk(this.dict.wordList, this.dict.chapterWordNumber)
+        })
+      }
+      if (this.currentDictType === DictType.custom) {
+        let r = await fetch(`/public/${this.dict.url}`)
+        r.json().then(v => {
+          this.dict.wordList = v
+          this.dict.chapterList = chunk(this.dict.wordList, this.dict.chapterWordNumber)
+        })
+      }
+      this.dictModalIsOpen = false
+      this.dictModalIsOpen2 = false
+    },
+    async changeDict(dict: Dict, chapterIndex: number = -1, wordIndex: number = -1) {
+      console.log('changeDict', dict)
+      if ([DictType.newWordDict,
+        DictType.skipWordDict,
+        DictType.wrongDict].includes(dict.type)) {
+        this.currentDictType = dict.type
+        this[dict.type].chapterList = [this[dict.type].wordList]
+        this[dict.type].chapterIndex = 0
+        this[dict.type].wordIndex = wordIndex === -1 ? 0 : wordIndex
+      } else {
+        this.dict = cloneDeep(dict)
+        this.currentDictType = dict.type
+        if (wordIndex !== -1) this.dict.wordIndex = wordIndex
+        if (chapterIndex !== -1) this.dict.chapterIndex = chapterIndex
+      }
+      console.log(' this.dict', this.dict)
+    }
+  },
 })
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index a2757143..ece37cbb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -138,7 +138,6 @@ export interface State {
     oldDicts: Dict[],
     currentDictType: DictType
     sideIsOpen: boolean,
-    dictModalIsOpen: boolean,
     dictModalIsOpen2: boolean,
     setting: {
         showToolbar: boolean,