Improve the function of sorting the whole book and modifying the number of chapters

src/pages/dict/components/WordDictDetail.vue

@@ -721,18 +721,20 @@ defineExpose({getDictDetail, add: addWord, editDict})
       </div>
       <div class="row">
         <div class="label">每章单词数</div>
-        <span class="text">最小:10</span>
         <el-slider :min="10"
                    :step="10"
+                   show-input
+                   size="small"
                    :max="runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length"
                    v-model="chapterWordNumber"
         />
-        <span class="text">最大:{{
-            runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length
-          }}</span>
+
       </div>
 
-      <div class="notice">鼠标按住滑块，按键盘左右箭头可进行微调</div>
+      <div class="notice">
+        <span class="text">最小:10</span>
+        <span class="text">最大:{{ runtimeStore.editDict.words.length}}</span>
+      </div>
 
       <div class="row">
         <div class="label">将会创建</div>
@@ -918,8 +920,11 @@ defineExpose({getDictDetail, add: addWord, editDict})
   }
 
   .notice {
-    transform: translate3d(110rem, -20rem, 0);
-    font-size: 11rem;
+    display: flex;
+    justify-content: space-between;
+    transform: translate3d(0, -15rem, 0);
+    padding-left: 110rem;
+    font-size: 13rem;
   }
 }
 

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

@@ -27,7 +27,7 @@ import Tooltip from "@/components/Tooltip.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
-import {useArticleOptions} from "@/hooks/dict.ts";
+import {syncMyDictList, useArticleOptions} from "@/hooks/dict.ts";
 import ArticleList from "@/components/list/ArticleList.vue";
 
 const store = useBaseStore()
@@ -228,6 +228,11 @@ const {
   toggleArticleCollect
 } = useArticleOptions()
 
+function sort(list: Word[]) {
+  wordData.words = list
+  wordData.index = 0
+}
+
 defineExpose({getCurrentPractice})
 
 </script>
@@ -249,6 +254,7 @@ defineExpose({getCurrentPractice})
         <div class="swiper-item">
           <div class="typing-word-wrapper">
             <TypingWord
+                @sort="sort"
                 :words="wordData.words"
                 :index="wordData.index"
                 v-if="tabIndex === 1"

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

@@ -289,19 +289,12 @@ onUnmounted(() => {
             >
               <div class="list-header">
                 <div class="left">
+                  <div class="title">
+                    {{ store.chapterName }}
+                  </div>
                   <BaseIcon title="切换词典"
                             @click="emitter.emit(EventKey.openDictModal,'list')"
                             icon="carbon:change-catalog"/>
-                  <div class="title">
-                    {{ store.dictTitle }}
-                  </div>
-                  <Tooltip
-                      :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
-                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1">
-                    <IconWrapper>
-                      <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
-                    </IconWrapper>
-                  </Tooltip>
                   <div style="position:relative;"
                        @click.stop="null">
                     <BaseIcon
@@ -322,7 +315,13 @@ onUnmounted(() => {
                       </div>
                     </MiniDialog>
                   </div>
-
+                  <Tooltip
+                      :title="`下一章(快捷键：${settingStore.shortcutKeyMap[ShortcutKey.NextChapter]})`"
+                      v-if="store.currentDict.chapterIndex < store.currentDict.chapterWords.length - 1">
+                    <IconWrapper>
+                      <Icon @click="emitter.emit(EventKey.next)" icon="octicon:arrow-right-24"/>
+                    </IconWrapper>
+                  </Tooltip>
                 </div>
                 <div class="right">
                   {{ data.words.length }}个单词