diff --git a/components.d.ts b/components.d.ts
index d2445a09..191235de 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,11 +10,11 @@ declare module 'vue' {
     Add: typeof import('./src/components/toolbar/Add.vue')['default']
     ArticleList2: typeof import('./src/components/list/ArticleList2.vue')['default']
     ArticleList3: typeof import('./src/components/list/ArticleList3.vue')['default']
-    ArticleListFQ: typeof import('./src/components/article/ArticleList-FQ.vue')['default']
+    ArticleList4: typeof import('./src/components/list2/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/list/BaseList.vue')['default']
+    BaseList: typeof import('./src/components/list2/BaseList.vue')['default']
     ChapterList: typeof import('./src/components/list/ChapterList.vue')['default']
     ChapterName: typeof import('./src/components/toolbar/ChapterName.vue')['default']
     Close: typeof import('./src/components/icon/Close.vue')['default']
@@ -28,7 +28,6 @@ declare module 'vue' {
     EditAbleText: typeof import('./src/components/EditAbleText.vue')['default']
     EditArticle: typeof import('./src/components/article/EditArticle.vue')['default']
     EditBatchArticleModal: typeof import('./src/components/article/EditBatchArticleModal.vue')['default']
-    EditBatchArticleModalFQ: typeof import('./src/components/article/EditBatchArticleModal-FQ.vue')['default']
     EditSingleArticleModal: typeof import('./src/components/article/EditSingleArticleModal.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
@@ -67,6 +66,8 @@ declare module 'vue' {
     VolumeIcon: typeof import('./src/components/icon/VolumeIcon.vue')['default']
     VolumeSetting: typeof import('./src/components/toolbar/VolumeSetting.vue')['default']
     WordItem: typeof import('./src/components/list/WordItem.vue')['default']
+    WordList: typeof import('./src/components/list2/WordList.vue')['default']
+    WordList4: typeof import('./src/components/list2/WordList4.vue')['default']
     WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
   }
   export interface ComponentCustomProperties {
diff --git a/src/App.vue b/src/App.vue
index 3d140165..6ab140c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,7 +50,7 @@ async function init() {
   console.time()
   store.init().then(() => {
     store.load = true
-    console.timeEnd()
+    // console.timeEnd()
   })
   await settingStore.init()
   setTheme(settingStore.theme)
diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index 2fbf14dc..1cb0fe50 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -371,6 +371,26 @@ footer {
     }
   }
 
+  &.border {
+    &.active {
+      .item-title {
+        border-bottom: 2px solid gray !important;
+      }
+    }
+
+    .item-title {
+      transition: all .3s;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+    }
+
+    &:hover {
+      .item-title {
+        border-bottom: 2px solid gray !important;
+      }
+    }
+  }
+
   .item-title {
     display: flex;
     align-items: center;
@@ -387,11 +407,12 @@ footer {
       color: gray;
     }
   }
-}
 
-.item-sub-title {
-  font-size: 16rem;
-  color: gray;
+  .item-sub-title {
+    font-size: 16rem;
+    color: gray;
+  }
+
 }
 
 .text-shadow {
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 701cdcfd..e10eb59e 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -39,7 +39,8 @@ useWindowClick((e: PointerEvent) => {
 
 .base-input {
   border: 1px solid var(--color-second-bg);
-  border-radius: 4rem;
+  border-radius: 6rem;
+  overflow: hidden;
   padding: 3rem 5rem;
   transition: all .3s;
   display: flex;
diff --git a/src/components/article/EditArticle.vue b/src/components/article/EditArticle.vue
index 08872d6a..96275485 100644
--- a/src/components/article/EditArticle.vue
+++ b/src/components/article/EditArticle.vue
@@ -107,7 +107,7 @@ function onPaste(event: ClipboardEvent) {
       () => {
         appendTranslate(paste)
         renewSections()
-      },
+      },null,
       {
         confirmButtonText: '需要',
         cancelButtonText: '关闭',
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 49ee3b4f..3cd6d372 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -20,6 +20,7 @@ export interface ModalProps {
   cancelButtonText?: string,
   keyboard?: boolean,
   confirm?: any
+  beforeClose?: any
 }
 
 const props = withDefaults(defineProps<ModalProps>(), {
@@ -49,10 +50,15 @@ let modalRef = $ref<HTMLDivElement>(null)
 const runtimeStore = useRuntimeStore()
 let id = Date.now()
 
-function close() {
+async function close() {
   if (!visible) {
     return
   }
+  if (props.beforeClose) {
+    if (!await props.beforeClose()) {
+      return
+    }
+  }
   //记录停留时间，避免时间太短，弹框闪烁
   let stayTime = Date.now() - openTime;
   let closeTime = 300;
@@ -110,11 +116,11 @@ onUnmounted(() => {
   }
 })
 
-useEventListener('keyup', (e: KeyboardEvent) => {
+useEventListener('keyup', async (e: KeyboardEvent) => {
   if (e.key === 'Escape' && props.keyboard) {
     let lastItem = runtimeStore.modalList[runtimeStore.modalList.length - 1]
     if (lastItem?.id === id) {
-      close()
+      await cancel()
     }
   }
 })
@@ -125,13 +131,13 @@ async function ok() {
     await props.confirm()
     confirmButtonLoading = false
   }
-  await close()
   emit('ok')
+  await close()
 }
 
 async function cancel() {
-  await close()
   emit('cancel')
+  await close()
 }
 
 </script>
diff --git a/src/components/dialog/DictDiglog.vue b/src/components/dialog/DictDiglog.vue
index 58cc0525..cd91e9e9 100644
--- a/src/components/dialog/DictDiglog.vue
+++ b/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">
diff --git a/src/components/list2/ArticleList4.vue b/src/components/list2/ArticleList4.vue
new file mode 100644
index 00000000..1c1261a9
--- /dev/null
+++ b/src/components/list2/ArticleList4.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+
+import Input from "@/components/Input.vue";
+import {$computed, $ref} from "vue/macros";
+import {Article, Word} from "@/types.ts";
+import ListItem from "@/components/list/ListItem.vue";
+import {useSettingStore} from "@/stores/setting.ts";
+import {onMounted, useAttrs, watch} from "vue";
+import VolumeIcon from "@/components/icon/VolumeIcon.vue";
+import BaseList from "@/components/list2/BaseList.vue";
+
+const props = withDefaults(defineProps<{
+  list: Article[],
+  showTranslate?: boolean
+}>(), {
+  list: [],
+  showTranslate: true,
+})
+
+const emit = defineEmits<{
+  click: [val: { item: Article, index: number }],
+  title: [val: { item: Article, index: number }],
+}>()
+
+let searchKey = $ref('')
+let localList = $computed(() => {
+  if (searchKey) {
+    return props.list.filter((item: Article) => {
+      //把搜索内容，分词之后，判断是否有这个词，比单纯遍历包含体验更好
+      return searchKey.toLowerCase().split(' ').filter(v => v).some(value => {
+        return item.title.toLowerCase().includes(value) || item.titleTranslate.toLowerCase().includes(value)
+      })
+    })
+  } else {
+    return props.list
+  }
+})
+
+const listRef: any = $ref(null as any)
+
+function scrollToBottom() {
+  listRef?.scrollToBottom()
+}
+
+function scrollToItem(index: number) {
+  listRef?.scrollToItem(index)
+}
+
+defineExpose({scrollToBottom, scrollToItem})
+
+</script>
+
+<template>
+  <div class="list">
+    <div class="search">
+      <Input v-model="searchKey"/>
+    </div>
+    <BaseList
+        ref="listRef"
+        @click="(e:any) => emit('click',e)"
+        :list="localList"
+        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" @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">
+          <div class="item-translate"> {{ `   ${item.titleTranslate}` }}</div>
+        </div>
+      </template>
+      <template v-slot:suffix="{ item, index }">
+        <slot name="suffix" :item="item" :index="index"></slot>
+      </template>
+    </BaseList>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 15rem;
+  flex: 1;
+  overflow: hidden;
+
+  .search {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 var(--space);
+  }
+
+  .translate {
+    font-size: 16rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/list/BaseList.vue b/src/components/list2/BaseList.vue
similarity index 53%
rename from src/components/list/BaseList.vue
rename to src/components/list2/BaseList.vue
index 5da53db4..7fd83cf4 100644
--- a/src/components/list/BaseList.vue
+++ b/src/components/list2/BaseList.vue
@@ -1,37 +1,52 @@
 <script setup lang="ts">
-import {Word} from "../../types.ts";
 import {useSettingStore} from "@/stores/setting.ts";
-import VolumeIcon from "@/components/icon/VolumeIcon.vue";
-import {usePlayWordAudio} from "@/hooks/sound.ts";
 import {watch} from 'vue'
+import {$computed} from "vue/macros";
 
 const props = withDefaults(defineProps<{
-  list: Word[],
+  list?: any[],
   activeIndex?: number,
+  activeId?: string,
   isActive?: boolean
-  showTranslate?: boolean
-  showWord?: boolean
+  showBorder?: boolean
 }>(), {
+  list: [],
   activeIndex: -1,
+  activeId: '',
   isActive: false,
-  showTranslate: true,
-  showWord: true
+  showBorder: false
 })
 
 const emit = defineEmits<{
-  click: [val: { word: Word, index: number }],
+  click: [val: {
+    item: any,
+    index: number
+  }],
 }>()
 
+//虚拟列表长度限制
+const limit = 1
+
 const settingStore = useSettingStore()
 const listRef: any = $ref()
 
+const localActiveIndex = $computed(() => {
+  if (props.activeId) {
+    return props.list.findIndex(v => v.id === props.activeId)
+  }
+  return props.activeIndex
+})
+
 function scrollViewToCenter(index: number) {
   if (index === -1) return
-  listRef.scrollToIndex(index)
-  // listRef.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+  if (props.list.length > limit) {
+    listRef?.scrollToItem(index)
+  } else {
+    listRef?.children[index]?.scrollIntoView({block: 'center', behavior: 'smooth'})
+  }
 }
 
-watch(() => props.activeIndex, (n: any) => {
+watch(() => localActiveIndex, (n: any) => {
   if (settingStore.showPanel) {
     scrollViewToCenter(n)
   }
@@ -39,19 +54,17 @@ watch(() => props.activeIndex, (n: any) => {
 
 watch(() => props.isActive, (n: boolean) => {
   setTimeout(() => {
-    if (n) scrollViewToCenter(props.activeIndex)
+    if (n) scrollViewToCenter(localActiveIndex)
   }, 300)
 })
 
-// watch(() => props.list, () => {
-//   listRef.scrollTo(0, 0)
-// })
-
-const playWordAudio = usePlayWordAudio()
-
-function reset() {
-  listRef.reset()
-}
+watch(() => props.list, () => {
+  if (props.list.length > limit) {
+    listRef?.scrollToItem(0)
+  } else {
+    listRef?.scrollTo(0, 0)
+  }
+})
 
 function scrollToBottom() {
   listRef.scrollToBottom()
@@ -61,6 +74,12 @@ function scrollToItem(index: number) {
   listRef.scrollToItem(index)
 }
 
+function itemIsActive(item: any, index: number) {
+  return props.activeId ?
+      props.activeId === item.id
+      : props.activeIndex === index
+}
+
 defineExpose({scrollToBottom, scrollToItem})
 
 </script>
@@ -83,24 +102,20 @@ defineExpose({scrollToBottom, scrollToItem})
       >
         <div class="list-item-wrapper">
           <div class="common-list-item"
-               :class="{active:activeIndex === index}"
-               @click="emit('click',{data:item,index})"
+               :class="{
+            active:itemIsActive(item,index),
+            border:showBorder
+          }"
+               @click="emit('click',{item,index})"
           >
             <div class="left">
-              <slot name="prefix" :word="item" :index="index"></slot>
+              <slot name="prefix" :item="item" :index="index"></slot>
               <div class="title-wrapper">
-                <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>
+                <slot :item="item" :index="index"></slot>
               </div>
             </div>
             <div class="right">
-              <slot :word="item" :index="index"></slot>
+              <slot name="suffix" :item="item" :index="index"></slot>
             </div>
           </div>
         </div>
@@ -113,7 +128,7 @@ defineExpose({scrollToBottom, scrollToItem})
 @import "@/assets/css/variable";
 
 .scroller {
-  height: 100%;
+  flex: 1;
   padding: 0 var(--space);
 }
 </style>
diff --git a/src/components/list2/WordList.vue b/src/components/list2/WordList.vue
new file mode 100644
index 00000000..9f212645
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/dict/DictManage.vue b/src/pages/dict/DictManage.vue
index f1edc6cd..ebb14af4 100644
--- a/src/pages/dict/DictManage.vue
+++ b/src/pages/dict/DictManage.vue
@@ -62,7 +62,7 @@ function cancelAddDict() {
 
 onMounted(() => {
   // selectDict({dict: store.currentDict, index: 0})
-  console.log('router.params', route)
+  // console.log('router.params', route)
   switch (route.query.type) {
     case 'addDict':
       setTimeout(() => {
diff --git a/src/pages/dict/components/ArticleDictDetail.vue b/src/pages/dict/components/ArticleDictDetail.vue
index 58c7c98d..99ce936e 100644
--- a/src/pages/dict/components/ArticleDictDetail.vue
+++ b/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;
     }
diff --git a/src/pages/practice/Panel.vue b/src/pages/practice/Panel.vue
index 582d531a..d6284ba9 100644
--- a/src/pages/practice/Panel.vue
+++ b/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>
diff --git a/src/pages/practice/practice-article/index.vue b/src/pages/practice/practice-article/index.vue
index ef36b0b7..c416f53f 100644
--- a/src/pages/practice/practice-article/index.vue
+++ b/src/pages/practice/practice-article/index.vue
@@ -20,6 +20,7 @@ import {useSettingStore} from "@/stores/setting.ts";
 import ArticleList2 from "@/components/list/ArticleList2.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import {useArticleOptions} from "@/hooks/dict.ts";
+import ArticleList4 from "@/components/list2/ArticleList4.vue";
 
 const store = useBaseStore()
 const practiceStore = usePracticeStore()
@@ -41,10 +42,8 @@ let showEditArticle = $ref(false)
 let editArticle = $ref<Article>(cloneDeep(DefaultArticle))
 
 watch([
-  () => store.current.index,
-  () => store.load,
-  () => store.currentDict.type,
-  () => store.currentDict.chapterIndex,
+  // () => store.load,
+  () => store.currentDict.articles,
 ], n => {
   console.log('n', n)
   getCurrentPractice()
@@ -83,7 +82,7 @@ function getCurrentPractice() {
 
   let currentArticle = store.currentDict.articles[store.currentDict.chapterIndex]
   let tempArticle = {...DefaultArticle, ...currentArticle}
-  console.log('article', tempArticle)
+  // console.log('article', tempArticle)
   if (tempArticle.sections.length) {
     setArticle(tempArticle)
   } else {
@@ -109,7 +108,7 @@ function getCurrentPractice() {
                   renewSectionTexts(tempArticle)
                   tempArticle.useTranslateType = TranslateType.none
                   setArticle(tempArticle)
-                },
+                }, null,
                 {
                   confirmButtonText: '去编辑',
                   cancelButtonText: '不需要翻译',
@@ -124,11 +123,12 @@ function getCurrentPractice() {
                 editArticle = tempArticle
                 showEditArticle = true
               },
+
               () => {
                 renewSectionTexts(tempArticle)
                 tempArticle.useTranslateType = TranslateType.none
                 setArticle(tempArticle)
-              },
+              }, null,
               {
                 confirmButtonText: '去编辑',
                 cancelButtonText: '不需要翻译',
@@ -208,10 +208,11 @@ function nextWord(word: ArticleWord) {
   }
 }
 
-function changePracticeArticle(val: Article) {
-  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.id)
+function changePracticeArticle(val: { item: Article, index: number }) {
+  let rIndex = store.currentDict.articles.findIndex(v => v.id === val.item.id)
   if (rIndex > -1) {
     store.currentDict.chapterIndex = rIndex
+    getCurrentPractice()
   }
 }
 
@@ -274,25 +275,26 @@ const {
                 {{ store.currentDict.articles.length }}篇文章
               </div>
             </div>
-            <ArticleList2
+
+            <ArticleList4
                 :isActive="active"
                 :show-translate="settingStore.translate"
-                @select-item="changePracticeArticle"
-                :active-index="store.currentDict.chapterIndex"
-                v-model:list="store.currentDict.articles">
-              <template v-slot="{source,index}">
+                @click="changePracticeArticle"
+                :active-id="articleData.article.id"
+                :list="store.currentDict.articles">
+              <template v-slot:suffix="{item,index}">
                 <BaseIcon
-                    v-if="!isArticleCollect(source)"
+                    v-if="!isArticleCollect(item)"
                     class-name="collect"
-                    @click="toggleArticleCollect(source)"
+                    @click="toggleArticleCollect(item)"
                     title="收藏" icon="ph:star"/>
                 <BaseIcon
                     v-else
                     class-name="fill"
-                    @click="toggleArticleCollect(source)"
+                    @click="toggleArticleCollect(item)"
                     title="取消收藏" icon="ph:star-fill"/>
               </template>
-            </ArticleList2>
+            </ArticleList4>
           </div>
         </template>
       </Panel>
diff --git a/src/pages/practice/practice-word/TypingWord.vue b/src/pages/practice/practice-word/TypingWord.vue
index c114325b..532785fc 100644
--- a/src/pages/practice/practice-word/TypingWord.vue
+++ b/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>
diff --git a/src/stores/base.ts b/src/stores/base.ts
index 6b7a9184..79af35c0 100644
--- a/src/stores/base.ts
+++ b/src/stores/base.ts
@@ -115,7 +115,7 @@ export const useBaseStore = defineStore('base', {
                 },
             ],
             current: {
-                index: 3,
+                index: 4,
                 // dictType: DictType.article,
                 // index: 0,
                 practiceType: DictType.word,
@@ -154,7 +154,6 @@ export const useBaseStore = defineStore('base', {
             }
             return [
                 DictType.article,
-                DictType.customArticle
             ].includes(this.currentDict.type)
         },
         currentDict(): Dict {
diff --git a/src/utils/MessageBox.tsx b/src/utils/MessageBox.tsx
index 49e90125..c11e2d74 100644
--- a/src/utils/MessageBox.tsx
+++ b/src/utils/MessageBox.tsx
@@ -1,65 +1,64 @@
-import {createApp} from 'vue'
+import {createVNode, render} from 'vue'
 import Dialog, {ModalProps} from "@/components/dialog/Dialog.vue";
-import {AppContext, Component, ComponentPublicInstance, createVNode, getCurrentInstance, render, VNode} from 'vue';
 
 export class MessageBox {
-    static confirm(
-        content: string,
-        title: string,
-        onOk: () => any = () => void 0,
-        onCancel: () => any = () => void 0,
-        onClose: () => any = () => void 0,
-        config: ModalProps = {}
-    ) {
-        let container = document.createElement('div')
-        const close = () => {
-            render(null, container);
-            container.remove()
-            onClose?.()
-        }
-
-        const vNode = createVNode(Dialog, {
-            title,
-            content,
-            onCancel: onCancel,
-            confirm: onOk,
-            onClose: close,
-            footer: true,
-            ...config
-        });
-        // const appContext = getCurrentInstance()?.appContext;
-        // // 补丁：Component中获取当前组件树的provides
-        // if (appContext) {
-        //     const currentProvides = (getCurrentInstance() as any)?.provides;
-        //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
-        // }
-        // vNode.appContext = appContext;
-        render(vNode, container);
-        document.body.append(container)
+  static confirm(
+    content: string,
+    title: string,
+    onOk: () => any = () => void 0,
+    onCancel: () => any = () => void 0,
+    onClose: () => any = () => void 0,
+    config: ModalProps = {}
+  ) {
+    let container = document.createElement('div')
+    const close = () => {
+      render(null, container);
+      container.remove()
+      onClose?.()
     }
 
-    static notice(
-        content: string,
-        title: string,
-    ) {
-        let container = document.createElement('div')
-        let tempOnCancel = () => {
-            render(null, container);
-            container.remove()
-        }
-        const vNode = createVNode(Dialog, {
-            title,
-            content,
-            onCancel: tempOnCancel,
-        });
-        // const appContext = getCurrentInstance()?.appContext;
-        // // 补丁：Component中获取当前组件树的provides
-        // if (appContext) {
-        //     const currentProvides = (getCurrentInstance() as any)?.provides;
-        //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
-        // }
-        // vNode.appContext = appContext;
-        render(vNode, container);
-        document.body.append(container)
+    const vNode = createVNode(Dialog, {
+      title,
+      content,
+      onCancel: onCancel,
+      confirm: onOk,
+      onClose: close,
+      footer: true,
+      ...config
+    });
+    // const appContext = getCurrentInstance()?.appContext;
+    // // 补丁：Component中获取当前组件树的provides
+    // if (appContext) {
+    //     const currentProvides = (getCurrentInstance() as any)?.provides;
+    //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
+    // }
+    // vNode.appContext = appContext;
+    render(vNode, container);
+    document.body.append(container)
+  }
+
+  static notice(
+    content: string,
+    title: string,
+  ) {
+    let container = document.createElement('div')
+    let tempOnCancel = () => {
+      render(null, container);
+      container.remove()
     }
+    const vNode = createVNode(Dialog, {
+      title,
+      content,
+      onCancel: tempOnCancel,
+    });
+    // const appContext = getCurrentInstance()?.appContext;
+    // // 补丁：Component中获取当前组件树的provides
+    // if (appContext) {
+    //     const currentProvides = (getCurrentInstance() as any)?.provides;
+    //     Reflect.set(appContext, 'provides', {...appContext.provides, ...currentProvides});
+    // }
+    // vNode.appContext = appContext;
+    render(vNode, container);
+    document.body.append(container)
+  }
 }
\ No newline at end of file