replace list

src/pages/dict/components/ArticleDictDetail.vue

@@ -21,6 +21,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";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -39,7 +40,7 @@ const isPinDict = $computed(() => {
 
 function handleCheckedChange(val) {
   chapterIndex = val.index
-  article = val.data
+  article = val.item
 }
 
 function delArticle(index: number) {
@@ -297,20 +298,21 @@ defineExpose({getDictDetail, add, editDict})
           </div>
         </div>
         <div class="wrapper">
-          <ArticleList3
+          <ArticleList4
               ref="listRef"
+              :isActive="false"
               v-if="runtimeStore.editDict.articles.length"
               :list="runtimeStore.editDict.articles"
+              @title="handleCheckedChange"
               @click="handleCheckedChange"
-              :active-index="chapterIndex"
-          >
-            <template v-slot:prefix="{data,index}">
+              :active-index="chapterIndex">
+            <template v-slot:prefix="{item,index}">
               <input type="radio" :checked="chapterIndex === index">
             </template>
-            <template v-slot="{data,index}">
+            <template v-slot="{item,index}">
               <BaseIcon
                   class-name="del"
-                  @click="emitter.emit(EventKey.openArticleListModal,data)"
+                  @click="emitter.emit(EventKey.openArticleListModal,item)"
                   title="编辑"
                   icon="tabler:edit"/>
               <BaseIcon
@@ -319,7 +321,7 @@ defineExpose({getDictDetail, add, editDict})
                   title="删除"
                   icon="solar:trash-bin-minimalistic-linear"/>
             </template>
-          </ArticleList3>
+          </ArticleList4>
           <Empty v-else/>
         </div>
       </div>
@@ -454,6 +456,7 @@ defineExpose({getDictDetail, add, editDict})
 
     .wrapper {
       flex: 1;
+      display: flex;
       padding-bottom: var(--space);
       overflow: hidden;
     }

src/pages/practice/Panel.vue

@@ -20,6 +20,7 @@ import ArticleList2 from "@/components/list/ArticleList2.vue";
 import {useRouter} from "vue-router";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {cloneDeep} from "lodash-es";
+import WordList from "@/components/list2/WordList.vue";
 
 const router = useRouter()
 const store = useBaseStore()
@@ -126,18 +127,18 @@ function addSimple() {
                 </template>
               </div>
               <template v-if="practiceType === DictType.word">
-                <CommonWordList
+                <WordList
                     v-if="store.collect.words.length"
                     class="word-list"
                     :list="store.collect.words">
-                  <template v-slot="{word,index}">
+                  <template v-slot:suffix="{item,index}">
                     <BaseIcon
                         class-name="del"
-                        @click="toggleWordCollect(word)"
+                        @click="toggleWordCollect(item)"
                         title="移除"
                         icon="solar:trash-bin-minimalistic-linear"/>
                   </template>
-                </CommonWordList>
+                </WordList>
                 <Empty v-else/>
               </template>
               <template v-else>
@@ -178,18 +179,18 @@ function addSimple() {
                   </PopConfirm>
                 </template>
               </div>
-              <CommonWordList
+              <WordList
                   v-if="store.simple.words.length"
                   class="word-list"
                   :list="store.simple.words">
-                <template v-slot="{word,index}">
+                <template v-slot:suffix="{item,index}">
                   <BaseIcon
                       class-name="del"
-                      @click="delSimpleWord(word)"
+                      @click="delSimpleWord(item)"
                       title="移除"
                       icon="solar:trash-bin-minimalistic-linear"/>
                 </template>
-              </CommonWordList>
+              </WordList>
               <Empty v-else/>
             </div>
           </div>
@@ -207,17 +208,17 @@ function addSimple() {
                   </PopConfirm>
                 </template>
               </div>
-              <CommonWordList
+              <WordList
                   class="word-list"
                   :list="store.wrong.words">
-                <template v-slot="{word,index}">
+                <template v-slot="{item,index}">
                   <BaseIcon
                       class-name="del"
-                      @click="delWrongWord(word)"
+                      @click="delWrongWord(item)"
                       title="移除"
                       icon="solar:trash-bin-minimalistic-linear"/>
                 </template>
-              </CommonWordList>
+              </WordList>
             </div>
             <Empty v-else/>
           </div>

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

@@ -18,6 +18,8 @@ import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useWordOptions} from "@/hooks/dict.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import CommonWordList from "@/components/list/CommonWordList.vue";
+import WordList from "@/components/list2/WordList.vue";
+import Empty from "@/components/Empty.vue";
 
 interface IProps {
   words: Word[],
@@ -286,39 +288,41 @@ onUnmounted(() => {
                   {{ data.words.length }}个单词
                 </div>
               </div>
-              <CommonWordList
-                  class="word-list"
+              <WordList
+                  v-if="data.words.length"
                   :is-active="active"
-                  @change="(val:any) => data.index = val.index"
                   :show-word="!settingStore.dictation"
                   :show-translate="settingStore.translate"
                   :list="data.words"
-                  :activeIndex="data.index">
-                <template v-slot="{word,index}">
+                  :activeIndex="data.index"
+                  @click="(val:any) => data.index = val.index"
+              >
+                <template v-slot:suffix="{item,index}">
                   <BaseIcon
-                      v-if="!isWordCollect(word)"
+                      v-if="!isWordCollect(item)"
                       class-name="collect"
-                      @click="toggleWordCollect(word)"
+                      @click="toggleWordCollect(item)"
                       title="收藏" icon="ph:star"/>
                   <BaseIcon
                       v-else
                       class-name="fill"
-                      @click="toggleWordCollect(word)"
+                      @click="toggleWordCollect(item)"
                       title="取消收藏" icon="ph:star-fill"/>
                   <BaseIcon
-                      v-if="!isWordSimple(word)"
+                      v-if="!isWordSimple(item)"
                       class-name="easy"
-                      @click="toggleWordSimple(word)"
+                      @click="toggleWordSimple(item)"
                       title="标记为简单词"
                       icon="material-symbols:check-circle-outline-rounded"/>
                   <BaseIcon
                       v-else
                       class-name="fill"
-                      @click="toggleWordSimple(word)"
+                      @click="toggleWordSimple(item)"
                       title="取消标记简单词"
                       icon="material-symbols:check-circle-rounded"/>
                 </template>
-              </CommonWordList>
+              </WordList>
+              <Empty v-else/>
             </div>
           </template>
         </Panel>