Add word list panel sorting function

src/hooks/dict.ts

@@ -136,8 +136,6 @@ export async function checkDictHasTranslate(dict: Dict) {
       }))
     }
   }
-
-
 }
 
 //同步到我的词典列表
@@ -148,7 +146,7 @@ export function syncMyDictList(dict: Dict) {
   if (isArticle(dict.type)) {
     dict.length = dict.articles.length
   } else {
-    dict.length = dict.words.length + dict.residueWords.length
+    dict.length = dict.words.length
   }
 
   let rIndex = store.myDictList.findIndex(v => v.id === dict.id)

src/pages/dict/components/ChapterWordList.vue

@@ -8,7 +8,7 @@ import {nextTick, watch} from "vue";
 import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {useWindowClick} from "@/hooks/event.ts";
-import {reverse, shuffle} from "lodash-es";
+import {cloneDeep, reverse, shuffle} from "lodash-es";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
 import WordList from '@/components/list/WordList.vue'
 
@@ -22,6 +22,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   add: []
+  sync: []
   edit: [val: { item: Word, index: number }]
   del: [val: { item: Word, index: number }],
   'update:list': [val: Word[]]
@@ -67,12 +68,13 @@ function del(val: { item: Word, index: number }) {
 function sort(type: Sort) {
   if (type === Sort.reverse) {
     ElMessage.success('已翻转排序')
-    emit('update:list', reverse(props.list))
+    emit('update:list', reverse(cloneDeep(props.list)))
   }
   if (type === Sort.random) {
     ElMessage.success('已随机排序')
     emit('update:list', shuffle(props.list))
   }
+  emit('sync')
 }
 
 let listRef: any = $ref()

src/pages/dict/components/WordDictDetail.vue

@@ -646,6 +646,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
           @del="delWord"
           :empty-title="chapterIndex === -1?'请选择章节':null"
           @edit="val => editWord(val.item,val.index,'chapter')"
+          @sync="syncMyDictList(runtimeStore.editDict)"
           v-model:list="chapterWordList"/>
       <div class="options-column" v-if="isCanOperation">
         <BaseButton @click="toChapterWordList"
@@ -667,6 +668,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
           @add="addWord('residue')"
           @del="delWord"
           @edit="val => editWord(val.item,val.index,'residue')"
+          @sync="syncMyDictList(runtimeStore.editDict)"
           v-model:list="residueWordList"/>
       <div class="right-column">
         <div class="add" v-if="wordFormData.type">

src/pages/practice/practice-word/TypingWord.vue

@@ -2,12 +2,12 @@
 import {onMounted, onUnmounted, watch} from "vue"
 import {$computed, $ref} from "vue/macros"
 import {useBaseStore} from "@/stores/base.ts"
-import {DefaultDisplayStatistics, DictType, ShortcutKey, Word} from "../../../types.ts";
+import {DefaultDisplayStatistics, DictType, ShortcutKey, Sort, Word} from "../../../types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts"
-import {cloneDeep} from "lodash-es"
+import {cloneDeep, reverse, shuffle} from "lodash-es"
 import {usePracticeStore} from "@/stores/practice.ts"
 import {useSettingStore} from "@/stores/setting.ts";
-import {useOnKeyboardEventListener} from "@/hooks/event.ts";
+import {useOnKeyboardEventListener, useWindowClick} from "@/hooks/event.ts";
 import {Icon} from "@iconify/vue";
 import Tooltip from "@/components/Tooltip.vue";
 import Options from "@/pages/practice/Options.vue";
@@ -15,10 +15,12 @@ import Typing from "@/pages/practice/practice-word/Typing.vue";
 import Panel from "@/pages/practice/Panel.vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import {useWordOptions} from "@/hooks/dict.ts";
+import {syncMyDictList, useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import WordList from "@/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
+import MiniDialog from "@/components/dialog/MiniDialog.vue";
+import BaseButton from "@/components/BaseButton.vue";
 
 interface IProps {
   words: Word[],
@@ -30,6 +32,11 @@ const props = withDefaults(defineProps<IProps>(), {
   index: -1
 })
 
+const emit = defineEmits<{
+  'update:words': [val: Word[]],
+  sort: [val: Word[]]
+}>()
+
 const typingRef: any = $ref()
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -50,6 +57,8 @@ let data = $ref({
 })
 
 let stat = cloneDeep(DefaultDisplayStatistics)
+let showSortOption = $ref(false)
+useWindowClick(() => showSortOption = false)
 
 watch(() => props.words, () => {
   data.words = props.words
@@ -199,6 +208,17 @@ function play() {
   typingRef.play()
 }
 
+function sort(type: Sort) {
+  if (type === Sort.reverse) {
+    ElMessage.success('已翻转排序')
+    emit('sort', reverse(cloneDeep(data.words)))
+  }
+  if (type === Sort.random) {
+    ElMessage.success('已随机排序')
+    emit('sort', shuffle(data.words))
+  }
+}
+
 onMounted(() => {
   emitter.on(ShortcutKey.ShowWord, show)
   emitter.on(ShortcutKey.Previous, prev)
@@ -282,6 +302,27 @@ onUnmounted(() => {
                       <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
                     </IconWrapper>
                   </Tooltip>
+                  <div style="position:relative;"
+                       @click.stop="null">
+                    <BaseIcon
+                        title="改变顺序"
+                        icon="icon-park-outline:sort-two"
+                        @click="showSortOption = !showSortOption"
+                    />
+                    <MiniDialog
+                        v-model="showSortOption"
+                        style="width: 130rem;"
+                    >
+                      <div class="mini-row-title">
+                        列表循环设置
+                      </div>
+                      <div class="mini-row">
+                        <BaseButton size="small" @click="sort(Sort.reverse)">翻转</BaseButton>
+                        <BaseButton size="small" @click="sort(Sort.random)">随机</BaseButton>
+                      </div>
+                    </MiniDialog>
+                  </div>
+
                 </div>
                 <div class="right">
                   {{ data.words.length }}个单词

src/pages/practice/practice-word/index.vue

@@ -9,6 +9,7 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {Word} from "@/types.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useSettingStore} from "@/stores/setting.ts";
+import {syncMyDictList} from "@/hooks/dict.ts";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -31,7 +32,7 @@ function getCurrentPractice() {
     wordData.index = 0
 
     store.chapter.map((w: Word) => {
-      if (!w.trans.length){
+      if (!w.trans.length) {
         let res = runtimeStore.translateWordList.find(a => a.name === w.name)
         if (res) w = Object.assign(w, res)
       }
@@ -39,6 +40,12 @@ function getCurrentPractice() {
   }
 }
 
+function sort(list: Word[]) {
+  store.currentDict.chapterWords[store.currentDict.chapterIndex] = wordData.words = list
+  wordData.index = 0
+  syncMyDictList(store.currentDict)
+}
+
 onMounted(getCurrentPractice)
 
 defineExpose({getCurrentPractice})
@@ -47,7 +54,10 @@ defineExpose({getCurrentPractice})
 
 <template>
   <div class="practice">
-    <TypingWord :words="wordData.words" :index="wordData.index"/>
+    <TypingWord
+        @sort="sort"
+        v-model:words="wordData.words"
+        :index="wordData.index"/>
   </div>
 </template>
 

src/stores/base.ts

@@ -116,7 +116,7 @@ export const useBaseStore = defineStore('base', {
         },
       ],
       current: {
-        index: 3,
+        index: 4,
         // dictType: DictType.article,
         // index: 0,
         practiceType: DictType.word,