From d602d5459a561cc00f5e5f760e8e156f0f6d7d4d Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 2 Dec 2023 16:59:03 +0800
Subject: [PATCH] save

---
 components.d.ts                               |   3 +-
 src/components/DictListPanel.vue              |   4 +-
 src/components/dialog/DictDiglog.vue          |   2 +-
 src/components/list/BaseList.vue              |  20 +-
 .../{toolbar => list}/DictGroup.vue           |  15 +-
 src/components/list/DictItem.vue              |  29 +-
 src/components/list/DictList.vue              |   4 +-
 src/pages/dict/components/ChapterWordList.vue |   3 +-
 src/pages/dict/components/WordDictDetail.vue  |  32 +-
 src/stores/base.ts                            | 466 +++++++++---------
 10 files changed, 306 insertions(+), 272 deletions(-)
 rename src/components/{toolbar => list}/DictGroup.vue (82%)

diff --git a/components.d.ts b/components.d.ts
index e605a338..1af9bca1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     Add: typeof import('./src/components/toolbar/Add.vue')['default']
     ArticleList: typeof import('./src/components/list/ArticleList.vue')['default']
-    ArticleList4: typeof import('./src/components/list/ArticleList4.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
     BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
@@ -18,7 +17,7 @@ declare module 'vue' {
     Close: typeof import('./src/components/icon/Close.vue')['default']
     Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
     DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default']
-    DictGroup: typeof import('./src/components/toolbar/DictGroup.vue')['default']
+    DictGroup: typeof import('./src/components/list/DictGroup.vue')['default']
     DictItem: typeof import('./src/components/list/DictItem.vue')['default']
     DictList: typeof import('./src/components/list/DictList.vue')['default']
     DictListPanel: typeof import('./src/components/DictListPanel.vue')['default']
diff --git a/src/components/DictListPanel.vue b/src/components/DictListPanel.vue
index f47f63bf..3de9da74 100644
--- a/src/components/DictListPanel.vue
+++ b/src/components/DictListPanel.vue
@@ -8,7 +8,7 @@ import {useBaseStore} from "@/stores/base.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import DictList from "@/components/list/DictList.vue";
-import DictGroup from "@/components/toolbar/DictGroup.vue";
+import DictGroup from "@/components/list/DictGroup.vue";
 
 const emit = defineEmits<{
   add: [],
@@ -160,7 +160,7 @@ const groupedByCategoryAndTag = $computed(() => {
       flex: 1;
       overflow: auto;
       height: 100%;
-      padding-right: var(--space);
+      padding-right: 10rem;
 
       .translate {
         display: flex;
diff --git a/src/components/dialog/DictDiglog.vue b/src/components/dialog/DictDiglog.vue
index e0ef43e0..92f54a45 100644
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -412,7 +412,7 @@ $header-height: 60rem;
   //transform: translate(-50%, -50%);
   background: var(--color-second-bg);
   z-index: 99999;
-  width: 1000rem;
+  width: 1030rem;
   height: 75vh;
 }
 
diff --git a/src/components/list/BaseList.vue b/src/components/list/BaseList.vue
index a21a12f8..875c8829 100644
--- a/src/components/list/BaseList.vue
+++ b/src/components/list/BaseList.vue
@@ -40,7 +40,7 @@ const localActiveIndex = $computed(() => {
 
 function scrollViewToCenter(index: number) {
   if (index === -1) return
-  nextTick(()=>{
+  nextTick(() => {
     if (props.list.length > limit) {
       listRef?.scrollToItem(index)
     } else {
@@ -65,7 +65,7 @@ watch(() => props.isActive, (n: boolean) => {
 
 watch(() => props.list, () => {
   if (props.static) return
-  nextTick(()=>{
+  nextTick(() => {
     if (props.list.length > limit) {
       listRef?.scrollToItem(0)
     } else {
@@ -75,14 +75,22 @@ watch(() => props.list, () => {
 })
 
 function scrollToBottom() {
-  nextTick(()=>{
-    listRef.scrollToBottom()
+  nextTick(() => {
+    if (props.list.length > limit) {
+      listRef.scrollToBottom()
+    } else {
+      listRef?.scrollTo(0, listRef.scrollHeight)
+    }
   })
 }
 
 function scrollToItem(index: number) {
-  nextTick(()=>{
-    listRef.scrollToItem(index)
+  nextTick(() => {
+    if (props.list.length > limit) {
+      listRef?.scrollToItem(index)
+    } else {
+      listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+    }
   })
 }
 
diff --git a/src/components/toolbar/DictGroup.vue b/src/components/list/DictGroup.vue
similarity index 82%
rename from src/components/toolbar/DictGroup.vue
rename to src/components/list/DictGroup.vue
index 92b513bd..905bcdf7 100644
--- a/src/components/toolbar/DictGroup.vue
+++ b/src/components/list/DictGroup.vue
@@ -3,6 +3,7 @@ import {$computed, $ref} from "vue/macros";
 import {watch} from "vue";
 import {DictResource} from "@/types.ts";
 import DictItem from "@/components/list/DictItem.vue";
+import DictList from "@/components/list/DictList.vue";
 
 const props = defineProps<{
   category: string,
@@ -34,12 +35,9 @@ watch(() => props.groupByTag, () => {
            v-for="i in Object.keys(groupByTag)">{{ i }}
       </div>
     </div>
-    <div class="dict-list">
-      <DictItem v-for="(dict,index) in list"
-                @click="emit('selectDict',{dict,index})"
-                :active="selectDictName === dict.id"
-                :dict="dict"/>
-    </div>
+    <DictList
+        @selectDict="e => emit('selectDict',e)"
+        :list="list" :select-dict-name="selectDictName"/>
   </div>
 </template>
 
@@ -74,9 +72,4 @@ watch(() => props.groupByTag, () => {
   }
 }
 
-.dict-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 15rem;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/list/DictItem.vue b/src/components/list/DictItem.vue
index ec2f0226..f9a58cbd 100644
--- a/src/components/list/DictItem.vue
+++ b/src/components/list/DictItem.vue
@@ -21,8 +21,10 @@ const emit = defineEmits<{
       :class="active && 'active'"
   >
     <template v-if="dict.name">
-      <div class="name">{{ dict.name }}</div>
-      <div class="desc">{{ dict.description }}</div>
+      <div class="top">
+        <div class="name">{{ dict.name }}</div>
+        <div class="desc">{{ dict.description }}</div>
+      </div>
       <div class="num">{{ dict.length ?? dict.originWords.length }}词</div>
     </template>
     <div v-else class="add" @click.stop="emit('add')">
@@ -35,24 +37,41 @@ const emit = defineEmits<{
 <style scoped lang="scss">
 .dict-item {
   cursor: pointer;
+  box-sizing: border-box;
   padding: 10rem;
-  min-height: 100rem;
+  width: 125rem;
+  height: 165rem;
   border-radius: 10rem;
   position: relative;
   background: var(--color-item-bg);
   color: var(--color-font-1);
   font-size: 14rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 
   .name {
-    font-size: 18rem;
+    font-size: 16rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:-webkit-box; //作为弹性伸缩盒子模型显示。
+    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+    -webkit-line-clamp:2; //显示的行
   }
 
   .desc {
     color: var(--color-font-2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display:-webkit-box; //作为弹性伸缩盒子模型显示。
+    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+    -webkit-line-clamp:2; //显示的行
   }
 
   .num {
-    font-weight: bold;
+    text-align: right;
+    color: var(--color-font-2);
+    //font-weight: bold;
   }
 
   .go {
diff --git a/src/components/list/DictList.vue b/src/components/list/DictList.vue
index b96761af..69982afd 100644
--- a/src/components/list/DictList.vue
+++ b/src/components/list/DictList.vue
@@ -27,8 +27,8 @@ const emit = defineEmits<{
 
 <style scoped lang="scss">
 .dict-list {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 15rem;
 }
 
diff --git a/src/pages/dict/components/ChapterWordList.vue b/src/pages/dict/components/ChapterWordList.vue
index 0bf9a3ef..069c1de7 100644
--- a/src/pages/dict/components/ChapterWordList.vue
+++ b/src/pages/dict/components/ChapterWordList.vue
@@ -4,7 +4,7 @@ import {Sort, Word} from "@/types.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Empty from "@/components/Empty.vue";
 import {$computed, $ref} from "vue/macros";
-import {watch} from "vue";
+import {nextTick, watch} from "vue";
 import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {useWindowClick} from "@/hooks/event.ts";
@@ -90,7 +90,6 @@ defineExpose({scrollToBottom, scrollToItem})
 let show = $ref(false)
 useWindowClick(() => show = false)
 
-const playWordAudio = usePlayWordAudio()
 </script>
 
 <template>
diff --git a/src/pages/dict/components/WordDictDetail.vue b/src/pages/dict/components/WordDictDetail.vue
index 0386accc..70b8dc2b 100644
--- a/src/pages/dict/components/WordDictDetail.vue
+++ b/src/pages/dict/components/WordDictDetail.vue
@@ -38,7 +38,7 @@ let chapterWordListRef: any = $ref()
 let residueWordListRef: any = $ref()
 let chapterListRef: any = $ref()
 let chapterIndex = $ref(1)
-let residueWordList = $ref([])
+// let residueWordList = $ref([])
 let isEditDict = $ref(false)
 let showExport = $ref(false)
 let chapterWordNumber = $ref(settingStore.chapterWordNumber)
@@ -61,6 +61,15 @@ let chapterWordList: Word[] = $computed({
   }
 })
 
+let residueWordList: Word[] = $computed({
+  get() {
+    return runtimeStore.editDict.residueWords ?? []
+  },
+  set(newValue) {
+    runtimeStore.editDict.residueWords = newValue
+  }
+})
+
 async function getDictDetail(val: {
   dict: DictResource | Dict,
   index: number
@@ -99,7 +108,7 @@ async function getDictDetail(val: {
           runtimeStore.editDict.originWords = cloneDeep(v)
           changeSort(runtimeStore.editDict.sort)
         } else {
-          runtimeStore.editDict.length = runtimeStore.editDict.words.length + runtimeStore.editDict.residueWords.length
+          runtimeStore.editDict.length = runtimeStore.editDict.words.length
         }
       }
     }
@@ -403,7 +412,7 @@ function resetChapterList(num?: number) {
   chapterIndex = -1
   runtimeStore.editDict.words.map(v => v.checked = false)
   runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
-  runtimeStore.editDict.length = runtimeStore.editDict.words.length + runtimeStore.editDict.residueWords.length
+  runtimeStore.editDict.length = runtimeStore.editDict.words.length
   chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
 }
 
@@ -513,6 +522,14 @@ function editDict() {
   isEditDict = true
 }
 
+function s() {
+  if (runtimeStore.editDict.words.length) {
+    showAllocationChapterDialog = true
+  } else {
+    ElMessage.warning('请先添加单词')
+  }
+}
+
 defineExpose({getDictDetail, add: addWord, editDict})
 
 </script>
@@ -582,8 +599,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
             </div>
           </div>
           <div class="select">
-            <BaseButton v-if="isCanOperation" size="small" @click="showAllocationChapterDialog = true">智能分配
-            </BaseButton>
+            <BaseButton v-if="isCanOperation" size="small" @click="s">智能分配</BaseButton>
             <span>{{ runtimeStore.editDict.chapterWords.length }}章</span>
           </div>
         </div>
@@ -697,10 +713,12 @@ defineExpose({getDictDetail, add: addWord, editDict})
         <span class="text">最小:10</span>
         <el-slider :min="10"
                    :step="10"
-                   :max="runtimeStore.editDict.words.length ?? 10"
+                   :max="runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length"
                    v-model="chapterWordNumber"
         />
-        <span class="text">最大:{{ runtimeStore.editDict.words.length ?? 10 }}</span>
+        <span class="text">最大:{{
+            runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length
+          }}</span>
       </div>
 
       <div class="notice">鼠标按住滑块，按键盘左右箭头可进行微调</div>
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 79af35c0..4b194d37 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -7,13 +7,13 @@ import * as localforage from "localforage";
 import {nanoid} from "nanoid";
 
 export interface BaseState {
-    myDictList: Dict[],
-    current: {
-        index: number,
-        practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
-    },
-    simpleWords: string[],
-    load: boolean
+  myDictList: Dict[],
+  current: {
+    index: number,
+    practiceType: DictType,//练习类型，目前仅词典为collect时判断是练单词还是文章使用
+  },
+  simpleWords: string[],
+  load: boolean
 }
 
 // words: [
@@ -62,238 +62,236 @@ export interface BaseState {
 // ],
 
 export const useBaseStore = defineStore('base', {
-    state: (): BaseState => {
-        return {
-            myDictList: [
-                {
-                    ...cloneDeep(DefaultDict),
-                    id: 'collect',
-                    name: '收藏',
-                    type: DictType.collect,
-                    category: '自带字典',
-                    tags: ['自带'],
-                },
-                {
-                    ...cloneDeep(DefaultDict),
-                    id: 'skip',
-                    name: '简单词',
-                    type: DictType.simple,
-                    category: '自带字典'
-                },
-                {
-                    ...cloneDeep(DefaultDict),
-                    id: 'wrong',
-                    name: '错词本',
-                    type: DictType.wrong,
-                    category: '自带字典'
-                },
-                {
-                    ...cloneDeep(DefaultDict),
-                    id: 'article_nce2',
-                    name: "新概念英语2-课文",
-                    description: '新概念英语2-课文',
-                    category: '英语学习',
-                    tags: ['新概念英语'],
-                    url: 'NCE_2.json',
-                    translateLanguage: 'common',
-                    language: 'en',
-                    type: DictType.article,
-                    resourceId: 'article_nce2',
-                },
-                {
-                    ...cloneDeep(DefaultDict),
-                    id: 'nce-new-2',
-                    name: '新概念英语(新版)-2',
-                    description: '新概念英语新版第二册',
-                    category: '青少年英语',
-                    tags: ['新概念英语'],
-                    url: 'nce-new-2.json',
-                    translateLanguage: 'common',
-                    language: 'en',
-                    type: DictType.word,
-                    resourceId: 'nce-new-2',
-                },
-            ],
-            current: {
-                index: 4,
-                // dictType: DictType.article,
-                // index: 0,
-                practiceType: DictType.word,
-            },
-            simpleWords: [
-                'a', 'an',
-                'i', 'my', 'you', 'your', 'me', 'it',
-                'am', 'is', 'do', 'are', 'did', 'were',
-                'what', 'who', 'where', 'how', 'no', 'yes',
-                'not', 'can', 'could',
-                'the', 'to', 'of', 'for', 'and', 'that', 'this', 'be'
-            ],
-            load: false
-        }
+  state: (): BaseState => {
+    return {
+      myDictList: [
+        {
+          ...cloneDeep(DefaultDict),
+          id: 'collect',
+          name: '收藏',
+          type: DictType.collect,
+          category: '自带字典',
+          tags: ['自带'],
+        },
+        {
+          ...cloneDeep(DefaultDict),
+          id: 'skip',
+          name: '简单词',
+          type: DictType.simple,
+          category: '自带字典'
+        },
+        {
+          ...cloneDeep(DefaultDict),
+          id: 'wrong',
+          name: '错词本',
+          type: DictType.wrong,
+          category: '自带字典'
+        },
+        {
+          ...cloneDeep(DefaultDict),
+          id: 'article_nce2',
+          name: "新概念英语2-课文",
+          description: '新概念英语2-课文',
+          category: '英语学习',
+          tags: ['新概念英语'],
+          url: 'NCE_2.json',
+          translateLanguage: 'common',
+          language: 'en',
+          type: DictType.article,
+          resourceId: 'article_nce2',
+        },
+        {
+          ...cloneDeep(DefaultDict),
+          id: 'nce-new-2',
+          name: '新概念英语(新版)-2',
+          description: '新概念英语新版第二册',
+          category: '青少年英语',
+          tags: ['新概念英语'],
+          url: 'nce-new-2.json',
+          translateLanguage: 'common',
+          language: 'en',
+          type: DictType.word,
+          resourceId: 'nce-new-2',
+        },
+      ],
+      current: {
+        index: 4,
+        // dictType: DictType.article,
+        // index: 0,
+        practiceType: DictType.word,
+      },
+      simpleWords: [
+        'a', 'an',
+        'i', 'my', 'you', 'your', 'me', 'it',
+        'am', 'is', 'do', 'are', 'did', 'were',
+        'what', 'who', 'where', 'how', 'no', 'yes',
+        'not', 'can', 'could',
+        'the', 'to', 'of', 'for', 'and', 'that', 'this', 'be'
+      ],
+      load: false
+    }
+  },
+  getters: {
+    collect() {
+      return this.myDictList[0] ?? {}
     },
-    getters: {
-        collect() {
-            return this.myDictList[0] ?? {}
-        },
-        simple(): Dict {
-            return this.myDictList[1]
-        },
-        wrong() {
-            return this.myDictList[2]
-        },
-        skipWordNames() {
-            return this.simple.originWords.map(v => v.name.toLowerCase())
-        },
-        skipWordNamesWithSimpleWords() {
-            return this.simple.originWords.map(v => v.name.toLowerCase()).concat(this.simpleWords)
-        },
-        isArticle(state: BaseState): boolean {
-            //如果是收藏时，特殊判断
-            if (this.currentDict.type === DictType.collect) {
-                return state.current.practiceType === DictType.article
-            }
-            return [
-                DictType.article,
-            ].includes(this.currentDict.type)
-        },
-        currentDict(): Dict {
-            return this.myDictList[this.current.index]
-        },
-        chapter(state: BaseState): Word[] {
-            return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
-        },
-        dictTitle(state: BaseState) {
-            let title = this.currentDict.name
-            return title + this.chapterName
-        },
-        chapterName(state: BaseState) {
-            let title = ''
-            switch (this.currentDict.type) {
-                case DictType.collect:
-                    if (state.current.practiceType === DictType.article || state.current.practiceType === DictType.customArticle) {
-                        return `第${this.currentDict.chapterIndex + 1}章`
-                    }
-                    return ''
-                case DictType.word:
-                case DictType.customWord:
-                    return `第${this.currentDict.chapterIndex + 1}章`
-            }
-            return title
-        }
+    simple(): Dict {
+      return this.myDictList[1]
     },
-    actions: {
-        setState(obj: any) {
-            //这样不会丢失watch的值的引用
-            merge(this, obj)
-        },
-        async init() {
-            return new Promise(async resolve => {
-                try {
-                    let configStr: string = await localforage.getItem(SaveDict.key)
-                    // console.log(configStr)
-                    // console.log('s', new Blob([configStr]).size)
-                    configStr = ''
-                    if (configStr) {
-                        let data = JSON.parse(configStr)
-                        let state: BaseState = data.val
-                        state.load = false
+    wrong() {
+      return this.myDictList[2]
+    },
+    skipWordNames() {
+      return this.simple.originWords.map(v => v.name.toLowerCase())
+    },
+    skipWordNamesWithSimpleWords() {
+      return this.simple.originWords.map(v => v.name.toLowerCase()).concat(this.simpleWords)
+    },
+    isArticle(state: BaseState): boolean {
+      //如果是收藏时，特殊判断
+      if (this.currentDict.type === DictType.collect) {
+        return state.current.practiceType === DictType.article
+      }
+      return [
+        DictType.article,
+      ].includes(this.currentDict.type)
+    },
+    currentDict(): Dict {
+      return this.myDictList[this.current.index]
+    },
+    chapter(state: BaseState): Word[] {
+      return this.currentDict.chapterWords[this.currentDict.chapterIndex] ?? []
+    },
+    dictTitle(state: BaseState) {
+      let title = this.currentDict.name
+      return title + this.chapterName
+    },
+    chapterName(state: BaseState) {
+      let title = ''
+      switch (this.currentDict.type) {
+        case DictType.collect:
+          if (state.current.practiceType === DictType.article || state.current.practiceType === DictType.customArticle) {
+            return `第${this.currentDict.chapterIndex + 1}章`
+          }
+          return ''
+        case DictType.word:
+        case DictType.customWord:
+          return `第${this.currentDict.chapterIndex + 1}章`
+      }
+      return title
+    }
+  },
+  actions: {
+    setState(obj: any) {
+      //这样不会丢失watch的值的引用
+      merge(this, obj)
+    },
+    async init() {
+      return new Promise(async resolve => {
+        try {
+          let configStr: string = await localforage.getItem(SaveDict.key)
+          // console.log(configStr)
+          // console.log('s', new Blob([configStr]).size)
+          configStr = ''
+          if (configStr) {
+            let data = JSON.parse(configStr)
+            let state: BaseState = data.val
+            state.load = false
 
-                        if (data.version === SaveDict.version) {
-                            this.setState(state)
-                        } else {
-                            this.setState(state)
-                        }
-                    }
-                } catch (e) {
-                    console.error('读取本地dict数据失败', e)
-                }
-
-                if (this.current.index < 3) {
-
-                } else {
-                    let dictResourceUrl = `./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`;
-                    if ([DictType.word].includes(this.currentDict.type)) {
-                        if (!this.currentDict.originWords.length) {
-                            let r = await fetch(dictResourceUrl)
-                            // let r = await fetch(`.${this.currentDict.url}`)
-                            let v = await r.json()
-                            v.map(s => {
-                                s.id = nanoid(6)
-                            })
-                            if (this.currentDict.translateLanguage === 'common') {
-                                const runtimeStore = useRuntimeStore()
-                                let r2 = await fetch('./translate/en2zh_CN-min.json')
-                                // fetch('http://sc.ttentau.top/en2zh_CN-min.json').then(r2 => {
-                                let list: Word[] = await r2.json()
-                                if (list && list.length) {
-                                    runtimeStore.translateWordList = list
-                                }
-                            }
-                            this.currentDict.originWords = cloneDeep(v)
-                            this.currentDict.words = cloneDeep(v)
-                            this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
-                        }
-                    }
-
-                    if ([DictType.article].includes(this.currentDict.type)) {
-                        if (!this.currentDict.articles.length) {
-                            let r = await fetch(dictResourceUrl)
-                            let s: any[] = await r.json()
-                            this.currentDict.articles = cloneDeep(s.map(v => {
-                                v.id = nanoid(6)
-                                return v
-                            }))
-                        }
-                    }
-                }
-                resolve(true)
-            })
-        },
-        saveStatistics(statistics: DisplayStatistics) {
-            if (statistics.spend > 1000 * 10) {
-                delete statistics.wrongWords
-                this.currentDict.statistics.push(statistics)
-            }
-        },
-        async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, wordIndex: number = dict.wordIndex, practiceType: DictType) {
-            //TODO 保存统计
-            // this.saveStatistics()
-            console.log('changeDict', cloneDeep(dict), chapterIndex, wordIndex)
-            this.currentDict.type = dict.type
-            this.current.practiceType = practiceType
-            if ([DictType.collect,
-                DictType.simple,
-                DictType.wrong].includes(dict.type)) {
-                dict.chapterIndex = 0
-                dict.wordIndex = wordIndex
-                dict.chapterWordNumber = dict.words.length
-                dict.chapterWords = [dict.words]
+            if (data.version === SaveDict.version) {
+              this.setState(state)
             } else {
-                if (dict.type === DictType.article || dict.type === DictType.customArticle) {
-                    if (chapterIndex > dict.articles.length) {
-                        dict.chapterIndex = 0
-                        dict.wordIndex = 0
-                    }
-                } else {
-                    if (chapterIndex > dict.chapterWords.length) {
-                        dict.chapterIndex = 0
-                        dict.wordIndex = 0
-                    }
-                }
+              this.setState(state)
             }
-
-            // await checkDictHasTranslate(dict)
-
-            let rIndex = this.myDictList.findIndex((v: Dict) => v.id === dict.id)
-            if (rIndex > -1) {
-                this.myDictList[rIndex] = dict
-                this.current.index = rIndex
-            } else {
-                this.myDictList.push(cloneDeep(dict))
-                this.current.index = this.myDictList.length - 1
-            }
-            emitter.emit(EventKey.resetWord)
-            emitter.emit(EventKey.changeDict)
+          }
+        } catch (e) {
+          console.error('读取本地dict数据失败', e)
         }
+
+        if (this.current.index < 3) {
+
+        } else {
+          let dictResourceUrl = `./dicts/${this.currentDict.language}/${this.currentDict.type}/${this.currentDict.translateLanguage}/${this.currentDict.url}`;
+          if ([DictType.word].includes(this.currentDict.type)) {
+            if (!this.currentDict.originWords.length) {
+              let r = await fetch(dictResourceUrl)
+              // let r = await fetch(`.${this.currentDict.url}`)
+              let v = await r.json()
+              v.map(s => {
+                s.id = nanoid(6)
+              })
+              if (this.currentDict.translateLanguage === 'common') {
+                const runtimeStore = useRuntimeStore()
+                let r2 = await fetch('./translate/en2zh_CN-min.json')
+                // fetch('http://sc.ttentau.top/en2zh_CN-min.json').then(r2 => {
+                let list: Word[] = await r2.json()
+                if (list && list.length) {
+                  runtimeStore.translateWordList = list
+                }
+              }
+              this.currentDict.originWords = cloneDeep(v)
+              this.currentDict.words = cloneDeep(v)
+              this.currentDict.chapterWords = chunk(this.currentDict.words, this.currentDict.chapterWordNumber)
+            }
+          }
+
+          if ([DictType.article].includes(this.currentDict.type)) {
+            if (!this.currentDict.articles.length) {
+              let r = await fetch(dictResourceUrl)
+              let s: any[] = await r.json()
+              this.currentDict.articles = cloneDeep(s.map(v => {
+                v.id = nanoid(6)
+                return v
+              }))
+            }
+          }
+        }
+        resolve(true)
+      })
     },
+    saveStatistics(statistics: DisplayStatistics) {
+      if (statistics.spend > 1000 * 10) {
+        delete statistics.wrongWords
+        this.currentDict.statistics.push(statistics)
+      }
+    },
+    async changeDict(dict: Dict, chapterIndex: number = dict.chapterIndex, wordIndex: number = dict.wordIndex, practiceType: DictType) {
+      //TODO 保存统计
+      // this.saveStatistics()
+      console.log('changeDict', cloneDeep(dict), chapterIndex, wordIndex)
+      this.currentDict.type = dict.type
+      this.current.practiceType = practiceType
+      if ([DictType.collect,
+        DictType.simple,
+        DictType.wrong].includes(dict.type)) {
+        dict.chapterIndex = 0
+        dict.wordIndex = wordIndex
+        dict.chapterWordNumber = dict.words.length
+        dict.chapterWords = [dict.words]
+      } else {
+        if (dict.type === DictType.article) {
+          if (chapterIndex > dict.articles.length) {
+            dict.chapterIndex = 0
+            dict.wordIndex = 0
+          }
+        } else {
+          if (chapterIndex > dict.chapterWords.length) {
+            dict.chapterIndex = 0
+            dict.wordIndex = 0
+          }
+        }
+      }
+      // await checkDictHasTranslate(dict)
+      let rIndex = this.myDictList.findIndex((v: Dict) => v.id === dict.id)
+      if (rIndex > -1) {
+        this.myDictList[rIndex] = dict
+        this.current.index = rIndex
+      } else {
+        this.myDictList.push(cloneDeep(dict))
+        this.current.index = this.myDictList.length - 1
+      }
+      emitter.emit(EventKey.resetWord)
+      emitter.emit(EventKey.changeDict)
+    }
+  },
 })
\ No newline at end of file