replace list

src/components/dialog/DictDiglog.vue

@@ -8,7 +8,6 @@ import BaseButton from "@/components/BaseButton.vue";
 import {Icon} from '@iconify/vue';
 import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
-import ChapterList from "@/components/list/ChapterList.vue";
 import WordListDialog from "@/components/dialog/WordListDialog.vue";
 import {isArticle} from "@/hooks/article.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
@@ -23,7 +22,7 @@ import {nanoid} from "nanoid";
 import DictListPanel from "@/components/DictListPanel.vue";
 import {useRouter} from "vue-router";
 import ArticleList4 from "@/components/list2/ArticleList4.vue";
-import WordChapterList from "@/components/list2/WordChapterList.vue";
+import BaseList from "@/components/list2/BaseList.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -78,7 +77,7 @@ async function selectDict(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
 }
 
@@ -341,18 +340,24 @@ function showWordListModal(val: { item: Word, index: number }) {
                   <Empty v-else/>
                 </template>
                 <template v-else>
-                  <WordChapterList
+                  <BaseList
+                      ref="chapterListRef"
                       v-if="chapterList2.length"
                       :list="chapterList2"
                       :show-border="true"
-                      @title="showWordListModal"
                       @click="(val:any) => runtimeStore.editDict.chapterIndex = val.index"
                       :active-index="runtimeStore.editDict.chapterIndex"
                   >
-                    <template v-slot:prefix="{item,index}">
-                      <input type="radio" :checked="runtimeStore.editDict.chapterIndex === index">
+                    <template v-slot:prefix="{ item, index }">
+                      <input type="radio" :checked="runtimeStore.editDict.chapterIndex === item.id">
                     </template>
-                  </WordChapterList>
+                    <template v-slot="{ item, index }">
+                      <div class="item-title" @click.stop="showWordListModal({item,index})">
+                        <span>第{{ item.id + 1 }}章</span>&nbsp;&nbsp;&nbsp;
+                        <span>{{ runtimeStore.editDict.chapterWords[item.id]?.length }}词</span>
+                      </div>
+                    </template>
+                  </BaseList>
                   <Empty v-else/>
                 </template>
               </div>

src/components/list2/BaseList.vue

@@ -9,12 +9,14 @@ const props = withDefaults(defineProps<{
   activeId?: string,
   isActive?: boolean
   showBorder?: boolean
+  static?: boolean
 }>(), {
   list: [],
   activeIndex: -1,
   activeId: '',
   isActive: false,
-  showBorder: false
+  showBorder: false,
+  static: true
 })
 
 const emit = defineEmits<{
@@ -25,8 +27,7 @@ const emit = defineEmits<{
 }>()
 
 //虚拟列表长度限制
-const limit = 1
-
+const limit = 0
 const settingStore = useSettingStore()
 const listRef: any = $ref()
 
@@ -47,18 +48,21 @@ function scrollViewToCenter(index: number) {
 }
 
 watch(() => localActiveIndex, (n: any) => {
+  if (props.static) return
   if (settingStore.showPanel) {
     scrollViewToCenter(n)
   }
 })
 
 watch(() => props.isActive, (n: boolean) => {
-  setTimeout(() => {
-    if (n) scrollViewToCenter(localActiveIndex)
-  }, 300)
+  if (props.static) return
+  if (n) {
+    setTimeout(() => scrollViewToCenter(localActiveIndex), 300)
+  }
 })
 
 watch(() => props.list, () => {
+  if (props.static) return
   if (props.list.length > limit) {
     listRef?.scrollToItem(0)
   } else {

src/components/list2/WordChapterList.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-
-import {$ref} from "vue/macros";
-import {Word} from "@/types.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import BaseList from "@/components/list2/BaseList.vue";
-import {usePlayWordAudio} from "@/hooks/sound.ts";
-
-const props = withDefaults(defineProps<{
-  list: Word[],
-  showTranslate?: boolean
-  showWord?: boolean
-}>(), {
-  list: [],
-  showTranslate: true,
-  showWord: true
-})
-
-const emit = defineEmits<{
-  click: [val: { item: Word, index: number }],
-  title: [val: { item: Word, index: number }],
-}>()
-
-const listRef: any = $ref(null as any)
-
-function scrollToBottom() {
-  listRef?.scrollToBottom()
-}
-
-function scrollToItem(index: number) {
-  listRef?.scrollToItem(index)
-}
-defineExpose({scrollToBottom, scrollToItem})
-
-</script>
-
-<template>
-  <BaseList
-      ref="listRef"
-      @click="(e:any) => emit('click',e)"
-      :list="list"
-      v-bind="$attrs">
-    <template v-slot:prefix="{ item, index }">
-      <slot name="prefix" :item="item" :index="index"></slot>
-    </template>
-    <template v-slot="{ item, index }">
-      <div class="item-title" @click.stop="emit('title',{item,index})">
-        第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词
-      </div>
-    </template>
-    <template v-slot:suffix="{ item, index }">
-      <slot name="suffix" :item="item" :index="index"></slot>
-    </template>
-  </BaseList>
-</template>
-
-<style scoped lang="scss">
-
-</style>