View dictionary word list Add progress bar

components.d.ts

@@ -66,5 +66,9 @@ declare module 'vue' {
     VolumeSetting: typeof import('./src/components/Toolbar/VolumeSetting.vue')['default']
     WordList: typeof import('./src/components/WordList.vue')['default']
     WordListModal: typeof import('./src/components/WordListModal.vue')['default']
+    WordListModal2: typeof import('./src/components/WordListModal2.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

src/components/ChapterList.vue

@@ -24,17 +24,11 @@ const list: any[] = $computed(() => {
 
 
 function showWordListModal(index: number, item: Word[]) {
-  if (runtimeStore.editDict.translateLanguage === 'common') {
-    console.time()
-    item.map((w: Word) => {
-      if (!w.trans.length) {
-        let res = runtimeStore.translateWordList.find(a => a.name === w.name)
-        if (res) w = Object.assign(w, res)
-      }
-    })
-    console.timeEnd()
-  }
-  emitter.emit(EventKey.openWordListModal, {title: `第${index + 1}章`, list: item})
+  emitter.emit(EventKey.openWordListModal, {
+    title: `第${index + 1}章`,
+    translateLanguage: runtimeStore.editDict.translateLanguage,
+    list: item
+  })
 }
 </script>
 

src/components/Toolbar/DictModal.vue

@@ -17,6 +17,7 @@ import WordListModal from "@/components/WordListModal.vue";
 import {isArticle} from "@/hooks/article.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 interface IProps {
   modelValue?: boolean,
@@ -148,6 +149,14 @@ const dictIsArticle = $computed(() => {
   return isArticle(runtimeStore.editDict.type)
 })
 
+function showWordListModal() {
+  emitter.emit(EventKey.openWordListModal, {
+    title: runtimeStore.editDict.name,
+    translateLanguage: runtimeStore.editDict.translateLanguage,
+    list: runtimeStore.editDict.words
+  })
+}
+
 </script>
 
 <template>
@@ -215,7 +224,9 @@ const dictIsArticle = $computed(() => {
               >总文章：{{ runtimeStore.editDict.articles.length }}篇
               </div>
               <div class="num" v-else>
-                总词汇：<span>{{ runtimeStore.editDict.originWords.length }}词</span>
+                总词汇：<span class="count"
+                             @click="showWordListModal"
+              >{{ runtimeStore.editDict.originWords.length }}词</span>
               </div>
               <div class="num">开始日期：-</div>
               <div class="num">花费时间：-</div>

src/components/Toolbar/Toolbar.vue

@@ -111,7 +111,7 @@ watch(() => store.load, n => {
           </Tooltip>
         </div>
 
-        <div class="with-bg">
+        <div class="with-bg anim">
           <Tooltip title="设置">
             <IconWrapper>
               <Icon icon="uil:setting" @click="showSettingModal = true"/>

src/components/WordListModal.vue

@@ -1,30 +1,71 @@
 <script setup lang="ts">
 
 import VolumeIcon from "@/components/VolumeIcon.vue";
-import {Icon} from "@iconify/vue";
 import Modal from "@/components/Modal/Modal.vue";
 import {$ref} from "vue/macros";
-import {onMounted, onUnmounted} from "vue";
+import {onMounted, onUnmounted, watch} from "vue";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import ListItem from "@/components/ListItem.vue";
+import {Word} from "@/types.ts";
+import {useRuntimeStore} from "@/stores/runtime.ts";
 
 let show = $ref(false)
+let loading = $ref(false)
 let list = $ref([])
 let title = $ref('')
+let progress = $ref(0)
 const playWordAudio = usePlayWordAudio()
+const runtimeStore = useRuntimeStore()
 
 onMounted(() => {
   emitter.on(EventKey.openWordListModal, (val: any) => {
+    show = true
     list = val.list
     title = val.title
-    show = true
+    let count = 0
+    if (val.translateLanguage === 'common') {
+      console.time()
+      for (let index = 0; index < list.length; index++) {
+        let w = list[index]
+        if (!w.trans.length) {
+          requestIdleCallback(() => {
+            if (list.length) {
+              let res = runtimeStore.translateWordList.find(a => a.name === w.name)
+              if (res) w = Object.assign(w, res)
+              count++
+              if (count === list.length) {
+                progress = 100
+              } else {
+                if (count % 30 === 0) progress = (count / list.length) * 100
+              }
+            }
+          })
+        } else {
+          count++
+          if (count === list.length) {
+            progress = 100
+          } else {
+            if (count % 30 === 0) progress = (count / list.length) * 100
+          }
+        }
+      }
+    }
   })
 })
 
+watch(() => show, v => {
+  console.log('show', v)
+  if (!v) {
+    list = []
+    progress = 0
+  }
+})
+
 onUnmounted(() => {
   emitter.off(EventKey.openWordListModal)
 })
+
 </script>
 
 <template>
@@ -32,6 +73,14 @@ onUnmounted(() => {
       :title="title"
       v-model="show">
     <div class="all-word">
+      <div class="progress-wrapper" v-if="progress !== 100 && list.length > 1000">
+        <span>词典加载进度:</span>
+        <el-progress :percentage="progress"
+                     :stroke-width="8"
+                     :duration="0"
+                     :indeterminate="false"
+                     :show-text="false"/>
+      </div>
       <virtual-list class="virtual-list"
                     :keeps="20"
                     data-key="name"
@@ -64,6 +113,19 @@ onUnmounted(() => {
   padding-top: 0;
   width: 400rem;
   height: 75vh;
+
+  .progress-wrapper {
+    height: 45rem;
+    display: flex;
+    align-items: center;
+    gap: 10rem;
+    font-size: 14rem;
+    color: var(--color-font-1);
+
+    .el-progress {
+      flex: 1;
+    }
+  }
 }
 </style>
 

src/components/WordListModal2.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+
+import VolumeIcon from "@/components/VolumeIcon.vue";
+import Modal from "@/components/Modal/Modal.vue";
+import {$ref} from "vue/macros";
+import {onMounted, onUnmounted} from "vue";
+import {usePlayWordAudio} from "@/hooks/sound.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
+import ListItem from "@/components/ListItem.vue";
+import {Word} from "@/types.ts";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import {cloneDeep} from "lodash-es";
+
+let show = $ref(false)
+let loading = $ref(false)
+let list = $ref([])
+let title = $ref('')
+const playWordAudio = usePlayWordAudio()
+const runtimeStore = useRuntimeStore()
+
+onMounted(() => {
+  emitter.on(EventKey.openWordListModal, (val: any) => {
+    loading = true
+    show = true
+    list = cloneDeep(val.list)
+    title = val.title
+    setTimeout(() => {
+      if (val.translateLanguage === 'common') {
+        console.time()
+        let tempList = cloneDeep(val.list)
+        tempList.map((w: Word) => {
+          if (!w.trans.length) {
+            let res = runtimeStore.translateWordList.find(a => a.name === w.name)
+            if (res) w = Object.assign(w, res)
+          }
+        })
+        list = cloneDeep(tempList)
+        console.timeEnd()
+      }
+      // loading = false
+    }, 500)
+  })
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.openWordListModal)
+})
+
+</script>
+
+<template>
+  <Modal
+      :title="title"
+      v-model="show">
+    <div class="all-word">
+      <virtual-list class="virtual-list"
+                    :keeps="20"
+                    data-key="name"
+                    v-loading="loading"
+                    :data-sources="list"
+                    :estimate-size="85"
+                    item-class="dict-virtual-item"
+      >
+        <template #={source}>
+          <ListItem
+              class="common-list-item"
+              :show-volume="true">
+            <div class="item-title">
+              <span class="word">{{ source.name }}</span>
+              <span class="phonetic">{{ source.usphone }}</span>
+              <VolumeIcon class="volume" @click="playWordAudio(source.name)"></VolumeIcon>
+            </div>
+            <div class="item-sub-title" v-if="source.trans.length">{{ source.trans.join('；') }}</div>
+          </ListItem>
+        </template>
+      </virtual-list>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/css/style";
+
+.all-word {
+  padding: $space;
+  padding-top: 0;
+  width: 400rem;
+  height: 75vh;
+}
+</style>
+
+<style lang="scss">
+@import "@/assets/css/variable.scss";
+
+.virtual-list {
+  overflow: auto;
+  height: 100%;
+}
+
+.dict-virtual-item {
+  margin-bottom: 15rem;
+}
+
+</style>