From fd34e3e902f4301b810e2d5bf2b3f32cfd8c6b1d Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 2 Dec 2023 00:14:33 +0800
Subject: [PATCH] save

---
 components.d.ts                               |  7 +-
 src/assets/css/style.scss                     |  2 +-
 src/components/dialog/DictDiglog.vue          |  8 +--
 src/components/dialog/WordListDialog.vue      |  2 +-
 .../ArticleList4.vue => list/ArticleList.vue} |  2 +-
 src/components/{list2 => list}/BaseList.vue   | 65 +++++++++++++++----
 src/components/{list2 => list}/WordList.vue   |  2 +-
 .../dict/components/ArticleDictDetail.vue     |  6 +-
 src/pages/dict/components/ChapterWordList.vue |  2 +-
 src/pages/dict/components/WordDictDetail.vue  |  2 +-
 src/pages/practice/Panel.vue                  |  8 +--
 src/pages/practice/practice-article/index.vue |  6 +-
 .../practice/practice-word/TypingWord.vue     |  2 +-
 13 files changed, 76 insertions(+), 38 deletions(-)
 rename src/components/{list2/ArticleList4.vue => list/ArticleList.vue} (97%)
 rename src/components/{list2 => list}/BaseList.vue (67%)
 rename src/components/{list2 => list}/WordList.vue (96%)

diff --git a/components.d.ts b/components.d.ts
index 3bc87cbd..e605a338 100644
--- a/components.d.ts
+++ b/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 {
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 1cb0fe50..3072a074 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -298,7 +298,7 @@ footer {
   margin-bottom: 15rem;
 }
 
-.common-list {
+.common-list1 {
   display: flex;
   flex-direction: column;
   width: 100%;
diff --git a/src/components/dialog/DictDiglog.vue b/src/components/dialog/DictDiglog.vue
index 2d18c168..e0ef43e0 100644
--- a/src/components/dialog/DictDiglog.vue
+++ b/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>
diff --git a/src/components/dialog/WordListDialog.vue b/src/components/dialog/WordListDialog.vue
index 4797901e..814071f3 100644
--- a/src/components/dialog/WordListDialog.vue
+++ b/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)
diff --git a/src/components/list2/ArticleList4.vue b/src/components/list/ArticleList.vue
similarity index 97%
rename from src/components/list2/ArticleList4.vue
rename to src/components/list/ArticleList.vue
index 9029659e..d463ebef 100644
--- a/src/components/list2/ArticleList4.vue
+++ b/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[],
diff --git a/src/components/list2/BaseList.vue b/src/components/list/BaseList.vue
similarity index 67%
rename from src/components/list2/BaseList.vue
rename to src/components/list/BaseList.vue
index af4d2f4e..a21a12f8 100644
--- a/src/components/list2/BaseList.vue
+++ b/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>
diff --git a/src/components/list2/WordList.vue b/src/components/list/WordList.vue
similarity index 96%
rename from src/components/list2/WordList.vue
rename to src/components/list/WordList.vue
index 9f212645..9217ea13 100644
--- a/src/components/list2/WordList.vue
+++ b/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<{
diff --git a/src/pages/dict/components/ArticleDictDetail.vue b/src/pages/dict/components/ArticleDictDetail.vue
index fd39cb8b..4f5b6481 100644
--- a/src/pages/dict/components/ArticleDictDetail.vue
+++ b/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>
diff --git a/src/pages/dict/components/ChapterWordList.vue b/src/pages/dict/components/ChapterWordList.vue
index 2ce2b62e..0bf9a3ef 100644
--- a/src/pages/dict/components/ChapterWordList.vue
+++ b/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,
diff --git a/src/pages/dict/components/WordDictDetail.vue b/src/pages/dict/components/WordDictDetail.vue
index 6919f1ea..0386accc 100644
--- a/src/pages/dict/components/WordDictDetail.vue
+++ b/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: []
diff --git a/src/pages/practice/Panel.vue b/src/pages/practice/Panel.vue
index 54b9357a..53d2a081 100644
--- a/src/pages/practice/Panel.vue
+++ b/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>
diff --git a/src/pages/practice/practice-article/index.vue b/src/pages/practice/practice-article/index.vue
index 05746625..54696659 100644
--- a/src/pages/practice/practice-article/index.vue
+++ b/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>
diff --git a/src/pages/practice/practice-word/TypingWord.vue b/src/pages/practice/practice-word/TypingWord.vue
index e8d455bb..6c0f2308 100644
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/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 {