From 76846f1fe771df27a0e81cf2db5cb0c1341b8268 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 1 Oct 2023 03:21:52 +0800
Subject: [PATCH] Perfect selection dictionary pop-up box

---
 components.d.ts                      |   2 -
 package.json                         |   1 +
 pnpm-lock.yaml                       |  14 ++--
 src/components/Practice/Practice.vue |  24 +++---
 src/components/Toolbar/DictModal.vue | 108 ++++++++++++++++-----------
 src/stores/base.ts                   |  32 ++++----
 src/stores/setting.ts                |   2 +-
 src/vite-env.d.ts                    |  18 +++--
 8 files changed, 112 insertions(+), 89 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 128d62fb..d546941c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -21,7 +21,6 @@ declare module 'vue' {
     DictList: typeof import('./src/components/DictList.vue')['default']
     DictModal: typeof import('./src/components/Toolbar/DictModal.vue')['default']
     EditAbleText: typeof import('./src/components/EditAbleText.vue')['default']
-    ElAutoResizer: typeof import('element-plus/es')['ElAutoResizer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -32,7 +31,6 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTableV2: typeof import('element-plus/es')['ElTableV2']
     FeedbackModal: typeof import('./src/components/Toolbar/FeedbackModal.vue')['default']
     Fireworks: typeof import('./src/components/Fireworks.vue')['default']
     Footer: typeof import('./src/components/Practice/Footer.vue')['default']
diff --git a/package.json b/package.json
index d19471a9..a0ed5583 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "tesseract.js": "^4.1.1",
     "uuid": "^9.0.1",
     "vue": "^3.3.4",
+    "vue-activity-calendar": "^1.2.2",
     "vue-virtual-list-v3": "^1.5.1"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 04a767bf..56393cdb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,12 +59,12 @@ dependencies:
   vue:
     specifier: ^3.3.4
     version: 3.3.4
+  vue-activity-calendar:
+    specifier: ^1.2.2
+    version: 1.2.2
   vue-virtual-list-v3:
     specifier: ^1.5.1
     version: 1.5.1
-  vue-virtual-scroll-list:
-    specifier: ^2.3.5
-    version: 2.3.5
 
 devDependencies:
   '@iconify/vue':
@@ -3085,6 +3085,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /vue-activity-calendar@1.2.2:
+    resolution: {integrity: sha512-HhFfLqmkMB0ylFSjceiJ1b23p/leH6OSXy9iGVkSzndkInG2sh2/F6AG4olFgWRGclxsZXtzIBtE9rm9UwDc+Q==}
+    dev: false
+
   /vue-demi@0.14.6(vue@3.3.4):
     resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
     engines: {node: '>=12'}
@@ -3125,10 +3129,6 @@ packages:
       '@juggle/resize-observer': 3.4.0
     dev: false
 
-  /vue-virtual-scroll-list@2.3.5:
-    resolution: {integrity: sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ==}
-    dev: false
-
   /vue@3.3.4:
     resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==}
     dependencies:
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index 0244c588..e0fce07a 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -176,18 +176,18 @@ function test() {
     <Toolbar/>
     <!--    <BaseButton @click="test">test</BaseButton>-->
 
-<!--    <TypeArticle-->
-<!--        v-if="store.isArticle"-->
-<!--        :article="articleData.article"-->
-<!--        :sectionIndex="articleData.sectionIndex"-->
-<!--        :sentenceIndex="articleData.sentenceIndex"-->
-<!--        :wordIndex="articleData.wordIndex"-->
-<!--        :stringIndex="articleData.stringIndex"-->
-<!--    />-->
-<!--    <TypeWord-->
-<!--        :words="wordData.words"-->
-<!--        :index="wordData.index"-->
-<!--        v-else/>-->
+    <TypeArticle
+        v-if="store.isArticle"
+        :article="articleData.article"
+        :sectionIndex="articleData.sectionIndex"
+        :sentenceIndex="articleData.sentenceIndex"
+        :wordIndex="articleData.wordIndex"
+        :stringIndex="articleData.stringIndex"
+    />
+    <TypeWord
+        :words="wordData.words"
+        :index="wordData.index"
+        v-else/>
     <Footer/>
   </div>
   <Statistics
diff --git a/src/components/Toolbar/DictModal.vue b/src/components/Toolbar/DictModal.vue
index 5a9cd65c..9bc26584 100644
--- a/src/components/Toolbar/DictModal.vue
+++ b/src/components/Toolbar/DictModal.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-// import VirtualList from 'vue-virtual-list-v3';
 import {dictionaryResources} from '@/assets/dictionary.ts'
 import {useBaseStore} from "@/stores/base.ts"
 import {watch} from "vue"
 import {Dict, DictionaryResource, DictType, Sort, Word} from "@/types.ts"
 import {chunk, cloneDeep} from "lodash-es";
 import {$computed, $ref} from "vue/macros";
-import WordList from "@/components/WordList.vue";
 import Modal from "@/components/Modal/Modal.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
@@ -18,6 +16,9 @@ import bookFlag from '@/assets/img/flags/book.png'
 import DictGroup from "@/components/Toolbar/DictGroup.vue";
 import {v4 as uuidv4} from "uuid";
 import VolumeIcon from "@/components/VolumeIcon.vue";
+import {ActivityCalendar} from "vue-activity-calendar";
+import "vue-activity-calendar/style.css";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
 
 const store = useBaseStore()
 
@@ -40,6 +41,8 @@ const options = [
   {id: 'de', name: '德语', flag: deFlag},
   {id: 'code', name: 'Code', flag: codeFlag},
 ]
+
+const playWordAudio = usePlayWordAudio()
 let currentLanguage = $ref('en')
 let currentSelectDict: Dict = $ref(cloneDeep(store.currentDict))
 let step = $ref(1)
@@ -136,19 +139,11 @@ const groupedByCategoryAndTag = $computed(() => {
   return groupedByCategoryAndTag
 })
 
-function playWordAudio(name: string) {
-}
-
 let radio1 = $ref('')
-const columns = [
-  {
-    key: 'name',
-    dataKey: 'name',
-    title: 'name',
-    width: 350,
 
-  }
-]
+function clickEvent(e) {
+  console.log('e', e)
+}
 </script>
 
 <template>
@@ -199,12 +194,21 @@ const columns = [
                   icon="ion:close-outline"/>
           </header>
           <div class="page-content">
-            <div class="dict-info">
-              <div class="detail">
-                <div class="name">{{ currentSelectDict.name }}</div>
-                <div class="desc">{{ currentSelectDict.description }}</div>
-                <div class="num">总共：{{ currentSelectDict.length }}词</div>
-                <div class="num">{{ currentSelectDict.chapterWords.length }}章(每章313词)</div>
+            <div class="detail">
+              <div class="name">{{ currentSelectDict.name }}</div>
+              <div class="desc">{{ currentSelectDict.description }}</div>
+              <div class="num">总词汇：{{ currentSelectDict.length }}词</div>
+              <div class="num">{{
+                  currentSelectDict.chapterWords.length
+                }}章(每章{{ currentSelectDict.chapterWordNumber }}词)
+              </div>
+              <div class="num">开始日期：-</div>
+              <div class="num">花费时间：-</div>
+              <div class="num">累积错误：-</div>
+              <div class="num">进度：
+                <el-progress :percentage="10"
+                             :stroke-width="8"
+                             :show-text="false"/>
               </div>
             </div>
             <div class="setting">
@@ -303,9 +307,23 @@ const columns = [
               </virtual-list>
             </div>
           </div>
+          <div class="activity">
+            <ActivityCalendar
+                :data="[{ date: '2023-05-22', count: 5 }]"
+                :width="40"
+                :height="7"
+                :cellLength="16"
+                :cellInterval="8"
+                :fontSize="12"
+                :showLevelFlag="false"
+                :showWeekDayFlag="false"
+                :clickEvent="clickEvent"
+            />
+          </div>
           <div class="footer">
+            <BaseButton @click="step = 0">导出</BaseButton>
             <BaseButton @click="step = 0">返回</BaseButton>
-            <BaseButton>确定</BaseButton>
+            <BaseButton @click="changeDict">确定</BaseButton>
           </div>
         </div>
       </div>
@@ -324,7 +342,7 @@ $footer-height: 40rem;
 
 .slide {
   width: 1100rem;
-  height: 70vh;
+  height: 75vh;
 
   .slide-list {
     width: 200%;
@@ -425,29 +443,28 @@ $footer-height: 40rem;
     position: relative;
     gap: $space;
 
-    .dict-info {
+    .detail {
       flex: 3;
-      color: black;
+      display: flex;
+      flex-direction: column;
+      gap: 10rem;
+      cursor: pointer;
+      padding: 15rem;
+      min-height: 100rem;
+      position: relative;
+      border-radius: 10rem;
+      background: var(--color-item-bg);
+      color: var(--color-font-1);
+      font-size: 14rem;
 
-      .detail {
-        cursor: pointer;
-        padding: 10rem;
-        min-height: 100rem;
-        position: relative;
-        border-radius: 10rem;
-        background: var(--color-item-bg);
-        color: var(--color-font-1);
-        font-size: 14rem;
+      .name {
+        font-size: 28rem;
+        margin-bottom: 10rem;
+      }
 
-        .name {
-          font-size: 28rem;
-          margin-bottom: 10rem;
-        }
-
-        .desc {
-          font-size: 18rem;
-          margin-bottom: 30rem;
-        }
+      .desc {
+        font-size: 18rem;
+        margin-bottom: 30rem;
       }
     }
 
@@ -457,7 +474,7 @@ $footer-height: 40rem;
       border-radius: 10rem;
       background: var(--color-item-bg);
       color: var(--color-font-1);
-      padding: 10rem;
+      padding: 15rem;
 
       .title {
         font-size: 20rem;
@@ -489,6 +506,11 @@ $footer-height: 40rem;
     }
   }
 
+  .activity {
+    display: flex;
+    justify-content: center;
+  }
+
   .footer {
     margin-top: 10rem;
     box-sizing: content-box;
@@ -513,7 +535,7 @@ $footer-height: 40rem;
 .dict-virtual-item {
   background: var(--color-header-bg);
   border-radius: 6rem;
-  padding: 12rem;
+  padding: 8rem 12rem;
   display: flex;
   justify-content: space-between;
   transition: all .3s;
diff --git a/src/stores/base.ts b/src/stores/base.ts
index c8c97096..ba5271c0 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -31,7 +31,7 @@ export const useBaseStore = defineStore('base', {
         originWords: [],
         articles: [],
         words: [],
-        chapterWordNumber: 30,
+        chapterWordNumber: 15,
         chapterWords: [],
         chapterIndex: 0,
         chapterWordIndex: 0,
@@ -45,7 +45,7 @@ export const useBaseStore = defineStore('base', {
         originWords: [],
         articles: [],
         words: [],
-        chapterWordNumber: 30,
+        chapterWordNumber: 15,
         chapterWords: [],
         chapterIndex: 0,
         chapterWordIndex: 0,
@@ -59,7 +59,7 @@ export const useBaseStore = defineStore('base', {
         originWords: [],
         articles: [],
         words: [],
-        chapterWordNumber: 30,
+        chapterWordNumber: 15,
         chapterWords: [],
         chapterIndex: 0,
         chapterWordIndex: 0,
@@ -87,7 +87,7 @@ export const useBaseStore = defineStore('base', {
         originWords: [],
         articles: [],
         words: [],
-        chapterWordNumber: 30,
+        chapterWordNumber: 15,
         chapterWords: [],
         chapterIndex: 0,
         chapterWordIndex: 0,
@@ -102,7 +102,7 @@ export const useBaseStore = defineStore('base', {
           originWords: [],
           articles: [],
           words: [],
-          chapterWordNumber: 30,
+          chapterWordNumber: 15,
           chapterWords: [],
           chapterIndex: 0,
           chapterWordIndex: 0,
@@ -116,7 +116,7 @@ export const useBaseStore = defineStore('base', {
           originWords: [],
           articles: [],
           words: [],
-          chapterWordNumber: 30,
+          chapterWordNumber: 15,
           chapterWords: [],
           chapterIndex: 0,
           chapterWordIndex: 0,
@@ -221,7 +221,7 @@ export const useBaseStore = defineStore('base', {
             r.json().then(v => {
               this.currentDict.originWords = cloneDeep(v)
               this.currentDict.words = cloneDeep(v)
-              this.currentDict.chapterWords = chunk(this.dict.words, this.dict.chapterWordNumber)
+              this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
               this.load = true
             })
           }
@@ -250,7 +250,8 @@ export const useBaseStore = defineStore('base', {
       }
     },
     async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, chapterWordIndex: number = dict.chapterWordNumber) {
-      this.saveStatistics()
+      //TODO 保存统计
+      // this.saveStatistics()
       console.log('changeDict', cloneDeep(dict), chapterIndex, chapterWordIndex)
       this.current.dictType = dict.type
       if ([DictType.newDict,
@@ -259,16 +260,13 @@ export const useBaseStore = defineStore('base', {
         this[dict.type].chapterIndex = chapterIndex
         this[dict.type].chapterWordIndex = chapterWordIndex
       } else {
-        this.dict = cloneDeep(dict)
-        if (dict.originWords.length) {
-          let r = await fetch(`/public/${this.dict.url}`)
-          let v = await r.json()
-          this.dict.originWords = cloneDeep(v)
-          this.dict.words = cloneDeep(v)
-          this.dict.chapters = chunk(this.dict.words, this.dict.chapterWordNumber)
+        let rIndex = this.myDicts.findIndex(v => v.name === dict.name)
+        if (rIndex > -1) {
+          this.current.index = rIndex
+        } else {
+          this.myDicts.push(cloneDeep(dict))
+          this.current.index = this.myDicts.length - 1
         }
-        this.dict.chapterIndex = chapterIndex
-        this.dict.chapterWordIndex = chapterWordIndex
       }
       emitter.emit(EventKey.resetWord)
     }
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
index f6682d5c..ddfa5a39 100644
--- a/src/stores/setting.ts
+++ b/src/stores/setting.ts
@@ -61,7 +61,7 @@ export const useSettingStore = defineStore('setting', {
       fontSize: {
         articleForeignFontSize: 48,
         articleTranslateFontSize: 20,
-        wordForeignFontSize: 38,
+        wordForeignFontSize: 48,
         wordTranslateFontSize: 20,
       },
       waitTimeForChangeWord: 300,
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 5eb5c4af..c723240c 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -9,19 +9,23 @@ import {ElMessageBox} from "element-plus";
 
 
 declare module '*.mp3' {
-    const src: string;
-    export default src;
+  const src: string;
+  export default src;
 }
 
 declare module '*.wav' {
-    const src: string;
-    export default src;
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
 }
 
 declare module "*.vue" {
-    import type {DefineComponent} from 'vue'
-    const component: DefineComponent<{}, {}, any>
-    export default component
+  import type {DefineComponent} from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }
 
 // declare module '*.vue' {