save

components.d.ts

@@ -8,11 +8,12 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Add: typeof import('./src/components/toolbar/Add.vue')['default']
-    ArticleList4: typeof import('./src/components/list2/ArticleList4.vue')['default']
+    ArticleList: typeof import('./src/components/list/ArticleList.vue')['default']
+    ArticleList4: typeof import('./src/components/list/ArticleList4.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
     BaseIcon: typeof import('./src/components/BaseIcon.vue')['default']
-    BaseList: typeof import('./src/components/list2/BaseList.vue')['default']
+    BaseList: typeof import('./src/components/list/BaseList.vue')['default']
     ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default']
     Close: typeof import('./src/components/icon/Close.vue')['default']
     Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
@@ -58,7 +59,7 @@ declare module 'vue' {
     TranslateSetting: typeof import('./src/components/toolbar/TranslateSetting.vue')['default']
     VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
     VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
-    WordList: typeof import('./src/components/list2/WordList.vue')['default']
+    WordList: typeof import('./src/components/list/WordList.vue')['default']
     WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
   }
   export interface ComponentCustomProperties {

src/assets/css/style.scss

@@ -298,7 +298,7 @@ footer {
   margin-bottom: 15rem;
 }
 
-.common-list {
+.common-list1 {
   display: flex;
   flex-direction: column;
   width: 100%;

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<{

src/pages/dict/components/ArticleDictDetail.vue

@@ -20,7 +20,7 @@ import * as XLSX from "xlsx";
 import {MessageBox} from "@/utils/MessageBox.tsx";
 import {syncMyDictList} from "@/hooks/dict.ts";
 import {useWindowClick} from "@/hooks/event.ts";
-import ArticleList4 from "@/components/list2/ArticleList4.vue";
+import ArticleList from "@/components/list/ArticleList.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -309,7 +309,7 @@ defineExpose({getDictDetail, add, editDict})
           </div>
         </div>
         <div class="wrapper">
-          <ArticleList4
+          <ArticleList
               ref="listRef"
               :isActive="false"
               v-if="runtimeStore.editDict.articles.length"
@@ -332,7 +332,7 @@ defineExpose({getDictDetail, add, editDict})
                   title="删除"
                   icon="solar:trash-bin-minimalistic-linear"/>
             </template>
-          </ArticleList4>
+          </ArticleList>
           <Empty v-else/>
         </div>
       </div>

src/pages/dict/components/ChapterWordList.vue

@@ -10,7 +10,7 @@ import BaseButton from "@/components/BaseButton.vue";
 import {useWindowClick} from "@/hooks/event.ts";
 import {reverse, shuffle} from "lodash-es";
 import {usePlayWordAudio} from "@/hooks/sound.ts";
-import WordList from '@/components/list2/WordList.vue'
+import WordList from '@/components/list/WordList.vue'
 
 const props = defineProps<{
   title: string,

src/pages/dict/components/WordDictDetail.vue

@@ -22,7 +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";
+import BaseList from "@/components/list/BaseList.vue";
 
 const emit = defineEmits<{
   back: []

src/pages/practice/Panel.vue

@@ -18,8 +18,8 @@ import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useRouter} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {cloneDeep} from "lodash-es";
-import WordList from "@/components/list2/WordList.vue";
-import ArticleList4 from "@/components/list2/ArticleList4.vue";
+import WordList from "@/components/list/WordList.vue";
+import ArticleList from "@/components/list/ArticleList.vue";
 
 const router = useRouter()
 const store = useBaseStore()
@@ -141,7 +141,7 @@ function addSimple() {
                 <Empty v-else/>
               </template>
               <template v-else>
-                <ArticleList4
+                <ArticleList
                     v-if="store.collect.articles.length"
                     v-model:list="store.collect.articles">
                   <template v-slot:suffix="{item,index}">
@@ -151,7 +151,7 @@ function addSimple() {
                         title="移除"
                         icon="solar:trash-bin-minimalistic-linear"/>
                   </template>
-                </ArticleList4>
+                </ArticleList>
                 <Empty v-else/>
               </template>
             </div>

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

@@ -19,7 +19,7 @@ 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 ArticleList4 from "@/components/list2/ArticleList4.vue";
+import ArticleList from "@/components/list/ArticleList.vue";
 
 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -278,7 +278,7 @@ const {
               </div>
             </div>
 
-            <ArticleList4
+            <ArticleList
                 :isActive="active"
                 :static="false"
                 :show-translate="settingStore.translate"
@@ -297,7 +297,7 @@ const {
                     @click="toggleArticleCollect(item)"
                     title="取消收藏" icon="ph:star-fill"/>
               </template>
-            </ArticleList4>
+            </ArticleList>
           </div>
         </template>
       </Panel>

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

@@ -17,7 +17,7 @@ import IconWrapper from "@/components/IconWrapper.vue";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
-import WordList from "@/components/list2/WordList.vue";
+import WordList from "@/components/list/WordList.vue";
 import Empty from "@/components/Empty.vue";
 
 interface IProps {