From c8413334e55da2420a0248b11c4a16f9371d804c Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Fri, 3 Nov 2023 16:49:48 +0800
Subject: [PATCH] fix bug

---
 Note.md                                       |  4 --
 src/components/Backgorund.vue                 |  2 +-
 .../Practice/PracticeWord/PracticeWord.vue    |  6 +-
 .../Practice/PracticeWord/TypingWord.vue      |  2 +
 src/components/Toolbar/DictModal.vue          | 60 +++++++++++++------
 src/components/WordList.vue                   | 10 +++-
 src/components/WordListModal.vue              |  2 -
 src/stores/base.ts                            |  9 +++
 src/types.ts                                  |  2 +
 9 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/Note.md b/Note.md
index 17441191..a7127dc8 100644
--- a/Note.md
+++ b/Note.md
@@ -41,8 +41,6 @@ A cold welcome 有bug
 
 [EditAbleText.vue](src%2Fcomponents%2FEditAbleText.vue) 不能自动聚焦
 
-在文章模式下，背单词时不能调出面板
-
 单词发音，点击第二遍时减速
 
 http://enpuz.com/ 语法分析工具
@@ -51,8 +49,6 @@ http://enpuz.com/ 语法分析工具
 
 加载单词列表时需要loading
 
-背单词页面div，位置应该恒定，不应该随翻译内容变动而跳动
-
 点击句子播放的音乐，需要可暂停
 
 footer 的输入数统计有问题，当在列表点一个，然后输入错误之后，不会统计到输入数里面(单词和文章的都有问题)
diff --git a/src/components/Backgorund.vue b/src/components/Backgorund.vue
index d59ae80e..11531c51 100644
--- a/src/components/Backgorund.vue
+++ b/src/components/Backgorund.vue
@@ -12,7 +12,7 @@ import {onMounted} from "vue"
 const canvas = $ref<HTMLCanvasElement>()
 
 onMounted(() => {
-  console.log('canvas;', canvas)
+  // console.log('canvas;', canvas)
   let ctx = canvas.getContext("2d");
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
diff --git a/src/components/Practice/PracticeWord/PracticeWord.vue b/src/components/Practice/PracticeWord/PracticeWord.vue
index fd5e8dc1..df8f165b 100644
--- a/src/components/Practice/PracticeWord/PracticeWord.vue
+++ b/src/components/Practice/PracticeWord/PracticeWord.vue
@@ -18,10 +18,8 @@ let wordData = $ref({
 
 watch([
   () => store.load,
-  () => store.current.index,
-  () => store.current.dictType,
   () => store.currentDict.chapterIndex,
-  () => store.currentDict.chapterWordNumber,
+  () => store.currentDict.words,
 ], n => {
   getCurrentPractice()
 })
@@ -36,7 +34,7 @@ function getCurrentPractice() {
   }
   wordData.words = cloneDeep(store.chapter)
   wordData.index = 0
-  console.log('wordData', wordData)
+  // console.log('wordData', wordData)
 }
 
 onMounted(() => {
diff --git a/src/components/Practice/PracticeWord/TypingWord.vue b/src/components/Practice/PracticeWord/TypingWord.vue
index 6ab3488e..382ba858 100644
--- a/src/components/Practice/PracticeWord/TypingWord.vue
+++ b/src/components/Practice/PracticeWord/TypingWord.vue
@@ -237,6 +237,8 @@ useOnKeyboardEventListener(onKeyDown, onKeyUp)
                   class="word-list"
                   :is-active="active"
                   @change="(i:number) => data.index = i"
+                  :show-word="!settingStore.dictation"
+                  :show-translate="settingStore.translate"
                   :list="data.words"
                   :activeIndex="data.index"/>
             </div>
diff --git a/src/components/Toolbar/DictModal.vue b/src/components/Toolbar/DictModal.vue
index 6e9af2c7..0a50d192 100644
--- a/src/components/Toolbar/DictModal.vue
+++ b/src/components/Toolbar/DictModal.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import {dictionaryResources} from '@/assets/dictionary.ts'
 import {useBaseStore} from "@/stores/base.ts"
-import {watch} from "vue"
-import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions} from "@/types.ts"
-import {chunk, cloneDeep, groupBy} from "lodash-es";
+import {onUnmounted, watch} from "vue"
+import {DefaultDict, Dict, DictResource, DictType, languageCategoryOptions, Sort} from "@/types.ts"
+import {chunk, cloneDeep, groupBy, reverse, shuffle} from "lodash-es";
 import {$computed, $ref} from "vue/macros";
 import Modal from "@/components/Modal/Modal.vue";
 import BaseButton from "@/components/BaseButton.vue";
@@ -99,9 +99,6 @@ function close() {
   emit('close')
 }
 
-function resetChapterList() {
-  runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
-}
 
 function groupByDictTags(dictList: DictResource[]) {
   return dictList.reduce<Record<string, DictResource[]>>((result, dict) => {
@@ -149,7 +146,7 @@ const dictIsArticle = $computed(() => {
   return isArticle(runtimeStore.editDict.type)
 })
 
-function showWordListModal() {
+function showAllWordModal() {
   emitter.emit(EventKey.openWordListModal, {
     title: runtimeStore.editDict.name,
     translateLanguage: runtimeStore.editDict.translateLanguage,
@@ -157,6 +154,24 @@ function showWordListModal() {
   })
 }
 
+function resetChapterList() {
+  runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
+}
+
+function changeSort(v) {
+  if (v === Sort.normal) {
+    runtimeStore.editDict.words = cloneDeep(runtimeStore.editDict.originWords)
+  } else if (v === Sort.random) {
+    runtimeStore.editDict.words = shuffle(cloneDeep(runtimeStore.editDict.originWords))
+  } else {
+    runtimeStore.editDict.words = reverse(cloneDeep(runtimeStore.editDict.originWords))
+  }
+  resetChapterList()
+}
+
+onUnmounted(() => {
+  close()
+})
 </script>
 
 <template>
@@ -225,7 +240,7 @@ function showWordListModal() {
               </div>
               <div class="num" v-else>
                 总词汇：<span class="count"
-                             @click="showWordListModal"
+                             @click="showAllWordModal"
               >{{ runtimeStore.editDict.originWords.length }}词</span>
               </div>
               <div class="num">开始日期：-</div>
@@ -251,10 +266,22 @@ function showWordListModal() {
                   <span>{{ runtimeStore.editDict.chapterWordNumber }}</span>
                 </div>
               </div>
+              <div class="row">
+                <div class="label">单词顺序</div>
+                <div class="option">
+                  <el-radio-group v-model="runtimeStore.editDict.sort"
+                                  @change="changeSort"
+                  >
+                    <el-radio :label="Sort.normal" size="large">默认</el-radio>
+                    <el-radio :label="Sort.random" size="large">随机</el-radio>
+                    <el-radio :label="Sort.reverse" size="large">反转</el-radio>
+                  </el-radio-group>
+                </div>
+              </div>
               <div class="row">
                 <div class="label">学习模式</div>
                 <div class="option">
-                  <el-radio-group v-model="settingStore.dictation" class="ml-4">
+                  <el-radio-group v-model="settingStore.dictation">
                     <el-radio :label="false" size="large">再认</el-radio>
                     <el-radio :label="true" size="large">拼写</el-radio>
                   </el-radio-group>
@@ -263,21 +290,12 @@ function showWordListModal() {
               <div class="row">
                 <div class="label">单词发音</div>
                 <div class="option">
-                  <el-radio-group v-model="settingStore.wordSoundType" class="ml-4">
+                  <el-radio-group v-model="settingStore.wordSoundType">
                     <el-radio label="us" size="large">美音</el-radio>
                     <el-radio label="uk" size="large">英音</el-radio>
                   </el-radio-group>
                 </div>
               </div>
-              <!--              <div class="row">-->
-              <!--                <div class="label">词序</div>-->
-              <!--                <div class="option">-->
-              <!--                  <el-radio-group v-model="radio1" class="ml-4">-->
-              <!--                    <el-radio label="1" size="large">随机</el-radio>-->
-              <!--                    <el-radio label="2" size="large">正常</el-radio>-->
-              <!--                  </el-radio-group>-->
-              <!--                </div>-->
-              <!--              </div>-->
               <div class="row">
                 <div class="label">单词自动发音</div>
                 <div class="option">
@@ -525,6 +543,10 @@ $header-height: 60rem;
         height: 40rem;
         word-break: keep-all;
         gap: 10rem;
+
+        .el-radio {
+          margin-right: 10rem;
+        }
       }
     }
 
diff --git a/src/components/WordList.vue b/src/components/WordList.vue
index 5de4f5a9..ce2d4a10 100644
--- a/src/components/WordList.vue
+++ b/src/components/WordList.vue
@@ -13,10 +13,14 @@ const props = withDefaults(defineProps<{
   activeIndex?: number,
   showDel?: boolean,
   isActive?: boolean
+  showTranslate?: boolean
+  showWord?: boolean
 }>(), {
   activeIndex: -1,
   isActive: false,
-  showDel: false
+  showDel: false,
+  showTranslate: true,
+  showWord: true
 })
 
 const emit = defineEmits<{
@@ -77,11 +81,11 @@ const {
         @del="delWrongWord(word)"
     >
       <div class="item-title">
-        <span class="word" :class="settingStore.dictation && 'text-shadow'">{{ word.name }}</span>
+        <span class="word" :class="!showWord && 'text-shadow'">{{ word.name }}</span>
         <span class="phonetic">{{ word.usphone }}</span>
         <VolumeIcon class="volume" @click="playWordAudio(word.name)"></VolumeIcon>
       </div>
-      <div class="item-sub-title" v-if="word.trans.length && settingStore.translate">
+      <div class="item-sub-title" v-if="word.trans.length && showTranslate">
         <div v-for="item in word.trans">{{ item }}</div>
       </div>
     </ListItem>
diff --git a/src/components/WordListModal.vue b/src/components/WordListModal.vue
index b5c784e1..0434c071 100644
--- a/src/components/WordListModal.vue
+++ b/src/components/WordListModal.vue
@@ -25,7 +25,6 @@ onMounted(() => {
     title = val.title
     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) {
@@ -55,7 +54,6 @@ onMounted(() => {
 })
 
 watch(() => show, v => {
-  console.log('show', v)
   if (!v) {
     list = []
     progress = 0
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 705883b5..60cf14d7 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -285,6 +285,15 @@ export const useBaseStore = defineStore('base', {
         this[dict.type].chapterWordIndex = chapterWordIndex
         this[dict.type].chapterWords = [this[dict.type].words]
       } else {
+        if (dict.type === DictType.article || dict.type === DictType.customArticle) {
+          if (chapterIndex > dict.articles.length) {
+            dict.chapterIndex = 0
+          }
+        } else {
+          if (chapterIndex > dict.chapterWords.length) {
+            dict.chapterIndex = 0
+          }
+        }
         let rIndex = this.myDicts.findIndex((v: Dict) => v.name === dict.name)
         if (rIndex > -1) {
           this.myDicts[rIndex] = dict
diff --git a/src/types.ts b/src/types.ts
index e169dfc6..1738b267 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -48,6 +48,7 @@ export type DictResource = {
 export interface Dict {
     id: string,
     name: string,
+    description: string,
     sort: Sort,
     originWords: Word[],//原始单词
     words: Word[],
@@ -199,6 +200,7 @@ export const languageCategoryOptions = [
 export const DefaultDict: Dict = {
     id: '',
     name: '',
+    description: '',
     sort: Sort.normal,
     originWords: [],//原始单词
     words: [],