save

src/components/dialog/DictDiglog.vue

@@ -21,8 +21,8 @@ import EditBatchArticleModal from "@/components/article/EditBatchArticleModal.vu
 import {nanoid} from "nanoid";
 import DictListPanel from "@/components/DictListPanel.vue";
 import {useRouter} from "vue-router";
-import ArticleList4 from "@/components/list2/ArticleList4.vue";
-import BaseList from "@/components/list2/BaseList.vue";
+import ArticleList from "@/components/list/ArticleList.vue";
+import BaseList from "@/components/list/BaseList.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -335,7 +335,7 @@ function showWordListModal(val: { item: Word, index: number }) {
                   />
                 </div>
                 <template v-if="dictIsArticle">
-                  <ArticleList4
+                  <ArticleList
                       v-if="runtimeStore.editDict.articles.length"
                       :isActive="false"
                       v-loading="loading"
@@ -347,7 +347,7 @@ function showWordListModal(val: { item: Word, index: number }) {
                     <template v-slot:prefix="{item,index}">
                       <input type="radio" :checked="runtimeStore.editDict.chapterIndex === index">
                     </template>
-                  </ArticleList4>
+                  </ArticleList>
                   <Empty v-else/>
                 </template>
                 <template v-else>

src/components/dialog/WordListDialog.vue

@@ -5,7 +5,7 @@ import {$ref} from "vue/macros";
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
-import WordList from "@/components/list2/WordList.vue";
+import WordList from "@/components/list/WordList.vue";
 
 let show = $ref(false)
 let loading = $ref(false)

src/components/list/ArticleList.vue

@@ -3,7 +3,7 @@
 import Input from "@/components/Input.vue";
 import {$computed, $ref} from "vue/macros";
 import {Article} from "@/types.ts";
-import BaseList from "@/components/list2/BaseList.vue";
+import BaseList from "@/components/list/BaseList.vue";
 
 const props = withDefaults(defineProps<{
   list: Article[],

src/components/list/BaseList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useSettingStore} from "@/stores/setting.ts";
-import {watch} from 'vue'
+import {nextTick, watch} from 'vue'
 import {$computed} from "vue/macros";
 
 const props = withDefaults(defineProps<{
@@ -27,7 +27,7 @@ const emit = defineEmits<{
 }>()
 
 //虚拟列表长度限制
-const limit = 0
+const limit = 99
 const settingStore = useSettingStore()
 const listRef: any = $ref()
 
@@ -40,11 +40,13 @@ const localActiveIndex = $computed(() => {
 
 function scrollViewToCenter(index: number) {
   if (index === -1) return
-  if (props.list.length > limit) {
-    listRef?.scrollToItem(index)
-  } else {
-    listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
-  }
+  nextTick(()=>{
+    if (props.list.length > limit) {
+      listRef?.scrollToItem(index)
+    } else {
+      listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+    }
+  })
 }
 
 watch(() => localActiveIndex, (n: any) => {
@@ -63,19 +65,25 @@ watch(() => props.isActive, (n: boolean) => {
 
 watch(() => props.list, () => {
   if (props.static) return
-  if (props.list.length > limit) {
-    listRef?.scrollToItem(0)
-  } else {
-    listRef?.scrollTo(0, 0)
-  }
+  nextTick(()=>{
+    if (props.list.length > limit) {
+      listRef?.scrollToItem(0)
+    } else {
+      listRef?.scrollTo(0, 0)
+    }
+  })
 })
 
 function scrollToBottom() {
-  listRef.scrollToBottom()
+  nextTick(()=>{
+    listRef.scrollToBottom()
+  })
 }
 
 function scrollToItem(index: number) {
-  listRef.scrollToItem(index)
+  nextTick(()=>{
+    listRef.scrollToItem(index)
+  })
 }
 
 function itemIsActive(item: any, index: number) {
@@ -90,6 +98,7 @@ defineExpose({scrollToBottom, scrollToItem})
 
 <template>
   <DynamicScroller
+      v-if="list.length>limit"
       :items="list"
       ref="listRef"
       :min-item-size="90"
@@ -126,6 +135,34 @@ defineExpose({scrollToBottom, scrollToItem})
       </DynamicScrollerItem>
     </template>
   </DynamicScroller>
+  <div
+      v-else
+      class="scroller"
+      style="overflow: auto;"
+      ref="listRef">
+    <div class="list-item-wrapper"
+         v-for="(item,index) in list"
+         :key="item.id"
+    >
+      <div class="common-list-item"
+           :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
+           @click="emit('click',{item,index})"
+      >
+        <div class="left">
+          <slot name="prefix" :item="item" :index="index"></slot>
+          <div class="title-wrapper">
+            <slot :item="item" :index="index"></slot>
+          </div>
+        </div>
+        <div class="right">
+          <slot name="suffix" :item="item" :index="index"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>

src/components/list/WordList.vue

@@ -3,7 +3,7 @@
 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 BaseList from "@/components/list/BaseList.vue";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
 
 const props = withDefaults(defineProps<{