优化ui

2023-08-25 18:07:17 +08:00
parent 2739bcac5f
commit f72438c989
6 changed files with 208 additions and 191 deletions
--- 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>
--- a/src/components/Toolbar/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">
--- 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>
--- 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 {
--- 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)
+    }
+  },
 })
--- 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,