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

2023-12-03 02:44:22 +08:00
parent da25417f7a
commit 8510d3733d
4 changed files with 104 additions and 44 deletions
--- a/src/components/dialog/DictDiglog.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -23,6 +23,7 @@ import DictListPanel from "@/components/DictListPanel.vue";
 import {useRouter} from "vue-router";
 import ArticleList from "@/components/list/ArticleList.vue";
 import BaseList from "@/components/list/BaseList.vue";
+import {MessageBox} from "@/utils/MessageBox.tsx";

 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -33,6 +34,7 @@ let step = $ref(1)
 let loading = $ref(false)
 let show = $ref(false)
 let chapterList2 = $ref([])
+let chapterWordNumber = $ref(0)

 const activeId = $computed(() => {
  if (dictIsArticle) {
@@ -72,7 +74,7 @@ async function selectDict(val: { dict: DictResource | Dict, index: number }) {
            s.id = nanoid(6)
          })
          runtimeStore.editDict.originWords = cloneDeep(v)
-          changeSort(runtimeStore.editDict.sort)
+          changeSort(runtimeStore.editDict.sort, false)
        } else {
          runtimeStore.editDict.length = runtimeStore.editDict.words.length
        }
@@ -91,6 +93,7 @@ async function selectDict(val: { dict: DictResource | Dict, index: number }) {
      }
    }
  }
+  chapterWordNumber = runtimeStore.editDict.chapterWordNumber
  chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
  loading = false
 }
@@ -125,22 +128,49 @@ function showAllWordModal() {
  })
 }

-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))
+function resetChapterList(v) {
+  const temp = () => {
+    runtimeStore.editDict.chapterWordNumber = v
+    runtimeStore.editDict.chapterWords = chunk(runtimeStore.editDict.words, runtimeStore.editDict.chapterWordNumber)
+    chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
+  }
+  if (runtimeStore.editDict.isCustom) {
+    MessageBox.confirm(
+        '检测到您已对这本词典自定义修改，修改“每章单词数”将会导致所有章节被重新分配，原有章节内容将被清除且不可恢复，是否继续？',
+        '提示',
+        () => temp(),
+        () => {
+          chapterWordNumber = runtimeStore.editDict.chapterWordNumber
+        }
+    )
+  } else {
+    temp()
  }
-  resetChapterList()
 }

-let wordListRef: any = $ref()
+function changeSort(v, notice: boolean = true) {
+  const temp = () => {
+    runtimeStore.editDict.sort = 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()
+    notice && ElMessage.success('已重新排序')
+  }
+  if (runtimeStore.editDict.isCustom) {
+    MessageBox.confirm(
+        '检测到您已对这本词典自定义修改，修改“单词排序”将会导致所有章节被重新分配，原有章节内容将被清除且不可恢复，是否继续？',
+        '提示',
+        () => temp()
+    )
+  } else {
+    temp()
+  }
+}

 function option(type: string) {
  show = false
@@ -153,7 +183,6 @@ function option(type: string) {
 /* 单词修改相关*/
 /**/

-
 watch(() => step, v => {
  if (v === 0) {
  }
@@ -266,20 +295,27 @@ function handleChangeArticleChapterIndex(val) {
                  <template v-if="!dictIsArticle">
                    <div class="row">
                      <div class="label">每章单词数</div>
-                      <el-slider :min="10"
-                                 :step="10"
-                                 :max="100"
-                                 v-model="runtimeStore.editDict.chapterWordNumber"
-                                 @change="resetChapterList"
+                      <el-slider
+                          class="my-slider"
+                          :min="10"
+                          :step="10"
+                          :max="runtimeStore.editDict.words.length < 10 ? 10 : runtimeStore.editDict.words.length"
+                          show-input
+                          :show-input-controls="false"
+                          size="small"
+                          v-model="chapterWordNumber"
+                          @change="resetChapterList"
                      />
-                      <div class="option">
-                        <span>{{ runtimeStore.editDict.chapterWordNumber }}</span>
-                      </div>
+                    </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>
                      <div class="option">
-                        <el-radio-group v-model="runtimeStore.editDict.sort"
+                        <el-radio-group :model-value="runtimeStore.editDict.sort"
                                        @change="changeSort"
                        >
                          <el-radio :label="Sort.normal" size="large">默认</el-radio>
@@ -516,7 +552,7 @@ $header-height: 60rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
-            height: 40rem;
+            height: 34rem;
            word-break: keep-all;
            gap: 10rem;

@@ -524,6 +560,20 @@ $header-height: 60rem;
              margin-right: 10rem;
            }
          }
+
+          .my-slider {
+            :deep(.el-slider__input) {
+              width: 55px;
+            }
+          }
+
+          .notice {
+            display: flex;
+            justify-content: space-between;
+            transform: translate3d(0, -5rem, 0);
+            padding-left: 100rem;
+            font-size: 13rem;
+          }
        }

      }
--- a/src/pages/dict/components/WordDictDetail.vue
+++ b/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;
  }
 }

--- a/src/pages/practice/practice-article/index.vue
+++ b/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"
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/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 }}个单词