replace list

src/components/dialog/DictDiglog.vue

@@ -22,6 +22,7 @@ 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";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -316,13 +317,26 @@ function addDict() {
               </div>
               <div class="right-column">
                 <div class="common-title">{{ dictIsArticle ? '文章' : '章节' }}列表</div>
-                <ChapterList
-                    v-if="chapterList"
+
+                <ArticleList4
+                    :isActive="false"
                     v-loading="loading"
-                    :is-article="dictIsArticle"
-                    v-model:active-index="runtimeStore.editDict.chapterIndex"
-                    :dict="runtimeStore.editDict"/>
-                <Empty v-else :show-add="true" @add="add"/>
+                    :show-border="true"
+                    @title="val => emitter.emit(EventKey.openArticleListModal,val.item)"
+                    @click="(val:any) => runtimeStore.editDict.chapterIndex = val.index"
+                    :active-index="runtimeStore.editDict.chapterIndex"
+                    :list="runtimeStore.editDict.articles">
+                </ArticleList4>
+                <template>
+                  <ChapterList
+                      v-if="chapterList"
+                      v-loading="loading"
+                      :is-article="dictIsArticle"
+                      v-model:active-index="runtimeStore.editDict.chapterIndex"
+                      :dict="runtimeStore.editDict"/>
+                  <Empty v-else :show-add="true" @add="add"/>
+                </template>
+
               </div>
             </div>
             <div v-if="false" class="activity">

src/components/list2/ArticleList4.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   click: [val: { item: Article, index: number }],
+  title: [val: { item: Article, index: number }],
 }>()
 
 let searchKey = $ref('')
@@ -63,7 +64,7 @@ defineExpose({scrollToBottom, scrollToItem})
         <slot name="prefix" :item="item" :index="index"></slot>
       </template>
       <template v-slot="{ item, index }">
-        <div class="item-title">
+        <div class="item-title" @click.stop="emit('title',{item,index})">
           <div class="name"> {{ `${searchKey ? '' : (index + 1) + '. '}${item.title}` }}</div>
         </div>
         <div class="item-sub-title" v-if="item.titleTranslate && showTranslate">

src/components/list2/BaseList.vue

@@ -102,7 +102,10 @@ defineExpose({scrollToBottom, scrollToItem})
       >
         <div class="list-item-wrapper">
           <div class="common-list-item"
-               :class="{active:itemIsActive(item,index)}"
+               :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
                @click="emit('click',{item,index})"
           >
             <div class="left">

src/components/list2/WordList.vue

@@ -0,0 +1,67 @@
+<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)
+}
+
+const playWordAudio = usePlayWordAudio()
+
+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">
+        <span class="word" :class="!showWord && 'text-shadow'">{{ item.name }}</span>
+        <span class="phonetic">{{ item.usphone }}</span>
+        <VolumeIcon class="volume" @click="playWordAudio(item.name)"></VolumeIcon>
+      </div>
+      <div class="item-sub-title" v-if="item.trans.length && showTranslate">
+        <div v-for="tran in item.trans">{{ tran }}</div>
+      </div>
+    </template>
+    <template v-slot:suffix="{ item, index }">
+      <slot name="suffix" :item="item" :index="index"></slot>
+    </template>
+  </BaseList>
+</template>
+
+<style scoped lang="scss">
+
+</style>