replace list

2023-12-01 01:56:03 +08:00
parent 8a42cc6259
commit bdd3b501a0
9 changed files with 123 additions and 134 deletions
--- a/src/pages/dict/components/ArticleDictDetail.vue
+++ b/src/pages/dict/components/ArticleDictDetail.vue
@@ -47,11 +47,16 @@ function delArticle(index: number) {
  runtimeStore.editDict.articles.splice(index, 1)

  if (runtimeStore.editDict.articles.length) {
+    if (chapterIndex >= runtimeStore.editDict.articles.length - 1) {
+      chapterIndex = runtimeStore.editDict.articles.length - 1
+      article = runtimeStore.editDict.articles[chapterIndex]
+    }
    if (chapterIndex === index) {
-      article = runtimeStore.editDict.articles[index]
+      article = runtimeStore.editDict.articles[chapterIndex]
    }
  } else {
    article = cloneDeep(DefaultArticle)
+    chapterIndex = -1
  }
  syncMyDictList(runtimeStore.editDict)
  ElMessage.success('删除成功！')
@@ -61,7 +66,10 @@ const emit = defineEmits<{
  back: []
 }>()

-async function getDictDetail(val: { dict: DictResource | Dict, index: number }) {
+async function getDictDetail(val: {
+  dict: DictResource | Dict,
+  index: number
+}) {
  let item = val.dict
  // console.log('word-getDictDetail', item)
  chapterIndex = -1
@@ -189,7 +197,10 @@ function importData(e: any) {
  reader.readAsBinaryString(file);
 }

-function exportData(val: { type: string, data?: Article }) {
+function exportData(val: {
+  type: string,
+  data?: Article
+}) {
  const {type, data} = val
  let list = []
  let filename = ''
@@ -309,7 +320,7 @@ defineExpose({getDictDetail, add, editDict})
            <template v-slot:prefix="{item,index}">
              <input type="radio" :checked="chapterIndex === index">
            </template>
-            <template v-slot="{item,index}">
+            <template v-slot:suffix="{item,index}">
              <BaseIcon
                  class-name="del"
                  @click="emitter.emit(EventKey.openArticleListModal,item)"
--- a/src/pages/dict/components/ChapterWordList.vue
+++ b/src/pages/dict/components/ChapterWordList.vue
@@ -10,6 +10,9 @@ 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 BaseList from "@/components/list2/BaseList.vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import {usePlayWordAudio} from "@/hooks/sound.ts";

 const props = defineProps<{
  title: string,
@@ -36,7 +39,7 @@ watch(() => props.list, (n) => {
  checkStatus()
 })

-function handleCheckedChange({word: source}: any) {
+function handleCheckedChange({item: source}: any) {
  source.checked = !source.checked
  checkStatus()
 }
@@ -89,6 +92,7 @@ defineExpose({scrollToBottom, scrollToItem})
 let show = $ref(false)
 useWindowClick(() => show = false)

+const playWordAudio = usePlayWordAudio()
 </script>

 <template>
@@ -140,30 +144,41 @@ useWindowClick(() => show = false)
      </div>
    </div>
    <div class="wrapper">
-      <VirtualWordList2
+<!--      TODO -->
+      <BaseList
          ref="listRef"
          :list="list"
          v-if="list.length"
          @click="handleCheckedChange"
      >
-        <template v-slot:prefix="{word}" v-if="canOperation">
-          <el-checkbox v-model="word.checked"
-                       @change="handleCheckedChange({word})"
+        <template v-slot:prefix="{item}" v-if="canOperation">
+          <el-checkbox v-model="item.checked"
+                       @change="handleCheckedChange({item})"
                       size="large"/>
        </template>
-        <template v-slot="{word,index}" v-if="canOperation">
+        <template v-slot="{item,index}">
+          <div class="item-title">
+            <span class="word">{{ item.name }}</span>
+            <span class="phonetic">{{ item.usphone }}</span>
+            <VolumeIcon class="volume" @click="playWordAudio(item.name)"></VolumeIcon>
+          </div>
+          <div class="item-sub-title" v-if="item.trans.length">
+            <div v-for="tran in item.trans">{{ tran }}</div>
+          </div>
+        </template>
+        <template v-slot:suffix="{item,index}" v-if="canOperation">
          <BaseIcon
              class-name="del"
-              @click="emit('edit',{word,index})"
+              @click="emit('edit',{item,index})"
              title="编辑"
              icon="tabler:edit"/>
          <BaseIcon
              class-name="del"
-              @click="del({word,index})"
+              @click="del({item,index})"
              title="删除"
              icon="solar:trash-bin-minimalistic-linear"/>
        </template>
-      </VirtualWordList2>
+      </BaseList>
      <Empty :text="emptyTitle" v-else/>
    </div>
  </div>
@@ -200,6 +215,7 @@ useWindowClick(() => show = false)
 }

 .wrapper {
+  display: flex;
  flex: 1;
  overflow: hidden;
 }
--- a/src/pages/dict/components/WordDictDetail.vue
+++ b/src/pages/dict/components/WordDictDetail.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">

 import BaseIcon from "@/components/BaseIcon.vue";
-import Empty from "@/components/Empty.vue";
 import ChapterWordList from "@/pages/dict/components/ChapterWordList.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {$computed, $ref} from "vue/macros";
@@ -23,6 +22,7 @@ import EditDict from "@/pages/dict/components/EditDict.vue";
 import {syncMyDictList} from "@/hooks/dict.ts";
 import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {useWindowClick} from "@/hooks/event.ts";
+import BaseList from "@/components/list2/BaseList.vue";

 const emit = defineEmits<{
  back: []
@@ -61,7 +61,10 @@ let chapterWordList: Word[] = $computed({
  }
 })

-async function getDictDetail(val: { dict: DictResource | Dict, index: number }) {
+async function getDictDetail(val: {
+  dict: DictResource | Dict,
+  index: number
+}) {
  let item = val.dict
  // console.log('word-getDictDetail', item)
  chapterList2 = []
@@ -101,13 +104,13 @@ async function getDictDetail(val: { dict: DictResource | Dict, index: number })
      }
    }
  }
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+  chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
  loading = false
 }

 function addNewChapter() {
  runtimeStore.editDict.chapterWords.push([])
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+  chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
  ElMessage.success('新增章节成功')
  setTimeout(() => chapterListRef?.scrollToItem(chapterList2.length - 1), 100)
 }
@@ -117,8 +120,17 @@ function delWordChapter(index: number) {
  list.map(v => v.checked = false)
  residueWordList = residueWordList.concat(list)
  runtimeStore.editDict.chapterWords.splice(index, 1)
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+  chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))

+  // if (runtimeStore.editDict.chapterWords.length) {
+  //   if (chapterIndex >= runtimeStore.editDict.chapterWords.length - 1) {
+  //     chapterIndex = runtimeStore.editDict.chapterWords.length - 1
+  //   }
+  // } else {
+  //   chapterIndex = -1
+  // }
+
+  //这里采用删除后跳到上一张的做法，因为章节名是index，如果保持删除后的index不变，看起来就像未删除一样，但是实际删除了
  if (chapterIndex >= index) chapterIndex--
  if (chapterIndex < 0) chapterIndex = 0

@@ -133,9 +145,11 @@ let residueWordListCheckedTotal = $computed(() => {
  return residueWordList.filter(v => v.checked).length
 })

-function handleChangeCurrentChapter(index: number) {
+function handleChangeCurrentChapter(val: {
+  index: number
+}) {
  chapterWordList.map(v => v.checked = false)
-  chapterIndex = index
+  chapterIndex = val.index
  closeWordForm()
 }

@@ -324,17 +338,19 @@ async function onSubmitWord() {
  })
 }

-function delWord(val: { word: Word }) {
-  let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.id === val.word.id)
+function delWord(val: {
+  item: Word
+}) {
+  let rIndex = runtimeStore.editDict.originWords.findIndex(v => v.id === val.item.id)
  if (rIndex > -1) {
    runtimeStore.editDict.originWords.splice(rIndex, 1)
  }
-  let rIndex2 = runtimeStore.editDict.words.findIndex(v => v.id === val.word.id)
+  let rIndex2 = runtimeStore.editDict.words.findIndex(v => v.id === val.item.id)
  if (rIndex2 > -1) {
    runtimeStore.editDict.words.splice(rIndex2, 1)
  }

-  if (wordFormData.type === FormMode.Edit && wordForm.name === val.word.name) {
+  if (wordFormData.type === FormMode.Edit && wordForm.name === val.item.name) {
    closeWordForm()
  }
  syncEditDict2MyDictList()
@@ -388,7 +404,7 @@ function resetChapterList(num?: number) {
  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
-  chapterList2 = Array.from({length: runtimeStore.editDict.chapterWords.length}).map((v, i) => ({id: i}))
+  chapterList2 = runtimeStore.editDict.chapterWords.map((v, i) => ({id: i}))
 }

 async function resetDict() {
@@ -566,44 +582,34 @@ 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="showAllocationChapterDialog = true">智能分配
+            </BaseButton>
            <span>{{ runtimeStore.editDict.chapterWords.length }}章</span>
          </div>
        </div>
        <div class="wrapper">
-          <RecycleScroller
-              v-if="chapterList2.length"
+          <BaseList
              ref="chapterListRef"
-              style="height: 100%;"
-              :items="chapterList2"
-              :item-size="63"
-              key-field="id"
-              v-slot="{ item,index }"
-          >
-            <div style="padding: 0 15rem;">
-              <div class="common-list-item"
-                   :class="chapterIndex === item.id && 'active'"
-                   @click="handleChangeCurrentChapter(item.id)">
-                <div class="flex gap10 flex1 ">
-                  <input type="radio" :checked="chapterIndex === item.id">
-                  <div class="item-title flex flex1 space-between">
-                    <span>第{{ item.id + 1 }}章</span>
-                    <span>{{ runtimeStore.editDict.chapterWords[item.id]?.length }}词</span>
-                  </div>
-                </div>
-                <div class="right"
-                     v-if="isCanOperation"
-                >
-                  <BaseIcon
-                      class-name="del"
-                      @click="delWordChapter(item.id)"
-                      title="移除"
-                      icon="solar:trash-bin-minimalistic-linear"/>
-                </div>
+              :list="chapterList2"
+              @click="handleChangeCurrentChapter"
+              :active-index="chapterIndex">
+            <template v-slot:prefix="{ item, index }">
+              <input type="radio" :checked="chapterIndex === item.id">
+            </template>
+            <template v-slot="{ item, index }">
+              <div class="item-title">
+                <span>第{{ item.id + 1 }}章</span>
+                <span>{{ runtimeStore.editDict.chapterWords[item.id]?.length }}词</span>
              </div>
-            </div>
-          </RecycleScroller>
-          <Empty v-else/>
+            </template>
+            <template v-slot:suffix="{ item, index }" v-if="isCanOperation">
+              <BaseIcon
+                  class-name="del"
+                  @click="delWordChapter(item.id)"
+                  title="移除"
+                  icon="solar:trash-bin-minimalistic-linear"/>
+            </template>
+          </BaseList>
        </div>
      </div>
      <ChapterWordList
@@ -614,7 +620,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
          @add="addWord('chapter')"
          @del="delWord"
          :empty-title="chapterIndex === -1?'请选择章节':null"
-          @edit="val => editWord(val.word,val.index,'chapter')"
+          @edit="val => editWord(val.item,val.index,'chapter')"
          v-model:list="chapterWordList"/>
      <div class="options-column" v-if="isCanOperation">
        <BaseButton @click="toChapterWordList"
@@ -635,7 +641,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
          :show-add="true"
          @add="addWord('residue')"
          @del="delWord"
-          @edit="val => editWord(val.word,val.index,'residue')"
+          @edit="val => editWord(val.item,val.index,'residue')"
          v-model:list="residueWordList"/>
      <div class="right-column">
        <div class="add" v-if="wordFormData.type">
@@ -814,6 +820,7 @@ defineExpose({getDictDetail, add: addWord, editDict})
  }

  .wrapper {
+    display: flex;
    flex: 1;
    overflow: hidden;
  }
--- a/src/pages/practice/practice-article/index.vue
+++ b/src/pages/practice/practice-article/index.vue
@@ -21,6 +21,7 @@ import ArticleList2 from "@/components/list/ArticleList2.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useArticleOptions} from "@/hooks/dict.ts";
 import ArticleList4 from "@/components/list2/ArticleList4.vue";
+import WordList from "@/components/list2/WordList.vue";

 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -208,7 +209,10 @@ function nextWord(word: ArticleWord) {
  }
 }

-function changePracticeArticle(val: { item: Article, index: number }) {
+function changePracticeArticle(val: {
+  item: Article,
+  index: number
+}) {
  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.item.id)
  if (rIndex > -1) {
    store.currentDict.chapterIndex = rIndex
@@ -278,6 +282,7 @@ const {

            <ArticleList4
                :isActive="active"
+                :static="false"
                :show-translate="settingStore.translate"
                @click="changePracticeArticle"
                :active-id="articleData.article.id"
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/src/pages/practice/practice-word/TypingWord.vue
@@ -291,6 +291,7 @@ onUnmounted(() => {
              <WordList
                  v-if="data.words.length"
                  :is-active="active"
+                  :static="false"
                  :show-word="!settingStore.dictation"
                  :show-translate="settingStore.translate"
                  :list="data.words"