diff --git a/components.d.ts b/components.d.ts
index c1a92da6..aa9c2333 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Add: typeof import('./src/components/Toolbar/Add.vue')['default']
-    AddDict: typeof import('./src/components/Add/AddDict.vue')['default']
     ArticleList: typeof import('./src/components/Article/ArticleList.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']
@@ -17,7 +16,9 @@ declare module 'vue' {
     ChapterName: typeof import('./src/components/Toolbar/ChapterName.vue')['default']
     Close: typeof import('./src/components/icon/Close.vue')['default']
     CommonWordList: typeof import('./src/components/list/CommonWordList.vue')['default']
+    Dialog: typeof import('./src/components/dialog/Dialog.vue')['default']
     DictDialog: typeof import('./src/components/Modal/DictDialog/index.vue')['default']
+    DictDiglog: typeof import('./src/components/dialog/DictDiglog.vue')['default']
     DictGroup: typeof import('./src/components/Toolbar/DictGroup.vue')['default']
     DictItem: typeof import('./src/components/list/DictItem.vue')['default']
     DictList: typeof import('./src/components/list/DictList.vue')['default']
@@ -47,8 +48,9 @@ declare module 'vue' {
     Input: typeof import('./src/components/Input.vue')['default']
     List: typeof import('./src/components/list/List.vue')['default']
     ListItem: typeof import('./src/components/list/ListItem.vue')['default']
+    MiniDialog: typeof import('./src/components/dialog/MiniDialog.vue')['default']
     MiniModal: typeof import('./src/components/Modal/MiniModal.vue')['default']
-    Modal: typeof import('./src/components/Modal/Modal.vue')['default']
+    Modal: typeof import('./src/components/dialog/Modal.vue')['default']
     Options: typeof import('./src/components/Practice/Options.vue')['default']
     Panel: typeof import('./src/components/Practice/Panel.vue')['default']
     PopConfirm: typeof import('./src/components/PopConfirm.vue')['default']
@@ -57,7 +59,8 @@ declare module 'vue' {
     PracticeWord: typeof import('./src/components/Practice/PracticeWord/PracticeWord.vue')['default']
     RepeatSetting: typeof import('./src/components/Toolbar/RepeatSetting.vue')['default']
     Ring: typeof import('./src/components/Ring.vue')['default']
-    SettingModal: typeof import('./src/components/Modal/SettingModal.vue')['default']
+    SettingDialog: typeof import('./src/components/dialog/SettingDialog.vue')['default']
+    SettingModal: typeof import('./src/components/dialog/SettingModal.vue')['default']
     Slide: typeof import('./src/components/Slide.vue')['default']
     Statistics: typeof import('./src/components/Practice/Statistics.vue')['default']
     Toolbar: typeof import('./src/components/Toolbar/Toolbar.vue')['default']
@@ -71,7 +74,7 @@ declare module 'vue' {
     VolumeSetting: typeof import('./src/components/Toolbar/VolumeSetting.vue')['default']
     WordItem: typeof import('./src/components/list/WordItem.vue')['default']
     WordList: typeof import('./src/components/list/WordList.vue')['default']
-    WordListModal: typeof import('./src/components/Modal/WordListModal.vue')['default']
+    WordListDialog: typeof import('./src/components/dialog/WordListDialog.vue')['default']
   }
   export interface ComponentCustomProperties {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
diff --git a/src/App.vue b/src/App.vue
index 6caf0449..9f3f391f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -61,7 +61,7 @@ onMounted(() => {
   init()
 })
 
-useStartKeyboardEventListener()
+// useStartKeyboardEventListener()
 
 </script>
 
diff --git a/src/components/Add/AddDict.vue b/src/components/Add/AddDict.vue
deleted file mode 100644
index 114de7d5..00000000
--- a/src/components/Add/AddDict.vue
+++ /dev/null
@@ -1,388 +0,0 @@
-<script setup lang="ts">
-
-import WordList from "@/components/list/WordList.vue";
-import {$computed, $ref} from "vue/macros";
-import Slide from "@/components/Slide.vue";
-import DictList from "@/components/list/DictList.vue";
-import {Icon} from "@iconify/vue";
-import {useBaseStore} from "@/stores/base.ts";
-import {useSettingStore} from "@/stores/setting.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import {useDisableEventListener} from "@/hooks/event.ts";
-import {Dict, DictType, languageCategoryOptions, Sort} from "@/types.ts";
-import {onMounted, reactive, watch} from "vue";
-import {FormInstance, FormRules} from "element-plus";
-import {dictionaryResources} from "@/assets/dictionary.ts";
-import {cloneDeep} from "lodash-es";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
-import ChapterList from "@/components/list/ChapterList.vue";
-
-let data = $ref({
-  words: [],
-  index: 0
-})
-
-
-const store = useBaseStore()
-const settingStore = useSettingStore()
-const runtimeStore = useRuntimeStore()
-
-const emit = defineEmits([
-  'close',
-])
-
-let step = $ref(0)
-let isEdit = $ref(true)
-
-useDisableEventListener()
-
-let list = $computed(() => {
-  return store.myDictList.filter(v => v.type === DictType.customArticle)
-      .concat([
-        store.simple,
-        store.wrong,
-        store.collect
-      ])
-      .concat([{name: '',} as any])
-})
-
-let form = reactive({
-  id: '',
-  name: '123',
-  description: '',
-  category: '',
-  tags: [],
-  languageCategory: '',
-  language: '',
-})
-
-let wordForm = reactive({
-  name: '',
-  translate: '',
-  usphone: '',
-  ukphone: '',
-})
-
-let languageCategoryList = []
-let categoryList = {}
-let tagList = {}
-const ruleFormRef = $ref<FormInstance>()
-const rules = reactive<FormRules>({
-  name: [
-    {required: true, message: '请输入名称', trigger: 'blur'},
-    {max: 20, message: '名称不能超过20个字符', trigger: 'blur'},
-  ],
-  category: [{required: true, message: '请选择', trigger: 'change'}],
-  tags: [{required: true, message: '请选择', trigger: 'change'}],
-  languageCategory: [{required: true, message: '请选择', trigger: 'change'}],
-})
-
-watch(() => form.languageCategory, () => form.category = '')
-watch(() => form.category, () => form.tags = [])
-
-onMounted(() => {
-  dictionaryResources.map(v => {
-    // if (!languageCategoryList.find(w => w === v.languageCategory)) {
-    //   languageCategoryList.push(v.languageCategory)
-    // }
-    if (categoryList[v.language]) {
-      if (!categoryList[v.language].find(w => w === v.category)) {
-        categoryList[v.language].push(v.category)
-      }
-    } else {
-      categoryList[v.language] = [v.category]
-    }
-    if (tagList[v.category]) {
-      tagList[v.category] = Array.from(new Set(tagList[v.category].concat(v.tags)))
-    } else {
-      tagList[v.category] = v.tags
-    }
-  })
-
-  console.log('languageCategoryList', languageCategoryList)
-  console.log('categoryList', categoryList)
-  console.log('tagList', tagList)
-})
-
-function selectDict(dict: Dict) {
-  runtimeStore.editDict = cloneDeep(dict)
-  isEdit = false
-  step = 1
-}
-
-async function onSubmit() {
-  await ruleFormRef.validate((valid, fields) => {
-    if (valid) {
-      let data = {
-        sort: Sort.normal,
-        type: DictType.customArticle,
-        originWords: [],
-        words: [],
-        chapterWordNumber: 30,
-        chapterWords: [],
-        chapterIndex: 0,
-        chapterWordIndex: 0,
-        statistics: [],
-        articles: [],
-        url: '',
-        ...form,
-      }
-      if (form.id) {
-        let rIndex = store.myDictList.findIndex(v => v.id === form.id)
-        runtimeStore.editDict = data
-        store.myDictList[rIndex] = cloneDeep(data)
-        isEdit = false
-      } else {
-        if (store.myDictList.find(v => v.name === form.name)) {
-          return ElMessage.warning('已有相同名称词典！')
-        } else {
-          runtimeStore.editDict = data
-          store.myDictList.push(cloneDeep(data))
-          isEdit = false
-          console.log('submit!', data)
-        }
-      }
-    } else {
-      ElMessage.warning('请填写完整')
-    }
-  })
-}
-
-function close() {
-  emit('close')
-}
-</script>
-
-<template>
-  <div id="AddWordDialog">
-    <Slide slide-count="2" :step="step">
-      <div class="page dict-list-page">
-        <header>
-          <div class="title">
-            我的词典
-          </div>
-          <Icon @click="close"
-                class="hvr-grow pointer"
-                width="20" color="#929596"
-                icon="ion:close-outline"/>
-        </header>
-        <div class="list">
-          <DictList
-              @add="step = 1;isEdit = true"
-              @selectDict="selectDict"
-              :list="list"/>
-        </div>
-      </div>
-      <div class="page add-page">
-        <header>
-          <div class="left" @click.stop="step = 0">
-            <Icon icon="octicon:arrow-left-24" class="go" width="20"/>
-            <div class="title">
-              词典详情
-            </div>
-          </div>
-          <Icon @click="close"
-                class="hvr-grow pointer"
-                width="20" color="#929596"
-                icon="ion:close-outline"/>
-        </header>
-        <div class="detail" v-if="!isEdit">
-          <div class="dict">
-            <div class="info">
-              <div class="name">{{ runtimeStore.editDict.name }}</div>
-              <div class="desc">{{ runtimeStore.editDict.description }}</div>
-              <div class="num">总文章：{{ runtimeStore.editDict.articles.length }}篇</div>
-              <div class="num">创建日期：-</div>
-              <div class="num">花费时间：-</div>
-              <div class="num">累积错误：-</div>
-              <div class="num">进度：
-                <el-progress :percentage="10"
-                             :stroke-width="8"
-                             :show-text="false"/>
-              </div>
-            </div>
-            <div class="add" v-if="false">
-              <el-form
-                  ref="ruleFormRef"
-                  :rules="rules"
-                  :model="wordForm"
-                  label-width="60px">
-                <el-form-item label="单词" prop="name">
-                  <el-input v-model="wordForm.name"/>
-                </el-form-item>
-                <el-form-item label="翻译">
-                  <el-input v-model="wordForm.translate" type="textarea"/>
-                </el-form-item>
-                <el-form-item label="音标">
-                  <el-input v-model="wordForm.ukphone"/>
-                </el-form-item>
-                <el-form-item>
-                  <el-button @click="step = 0">返回</el-button>
-                  <el-button type="primary" @click="onSubmit">确定</el-button>
-                </el-form-item>
-              </el-form>
-            </div>
-          </div>
-          <div class="list">
-            <div class="list-header">
-              <div class="name">{{ runtimeStore.editDict.name }}</div>
-              <div class="flex-center gap10">
-                <div class="name">{{ runtimeStore.editDict.words.length }}个单词</div>
-                <Icon @click="emitter.emit(EventKey.openArticleListModal)"
-                      class="hvr-grow pointer"
-                      width="24" color="#929596"
-                      icon="mi:add"/>
-              </div>
-            </div>
-            <WordList
-                class="word-list"
-                :is-active="true"
-                @change="(i:number) => data.index = i"
-                :list="runtimeStore.editDict.words"
-                :activeIndex="data.index"/>
-          </div>
-        </div>
-        <div class="edit" v-else>
-          <el-form
-              ref="ruleFormRef"
-              :rules="rules"
-              :model="form"
-              label-width="120px">
-            <el-form-item label="名称" prop="name">
-              <el-input v-model="form.name"/>
-            </el-form-item>
-            <el-form-item label="描述">
-              <el-input v-model="form.description" type="textarea"/>
-            </el-form-item>
-            <el-form-item label="分类" prop="languageCategory">
-              <el-select
-                  v-model="form.languageCategory" placeholder="请选择选项">
-                <el-option :label="i.name" :value="i.id" v-for="i in languageCategoryOptions"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="用途" prop="category">
-              <el-select v-model="form.category" placeholder="请选择选项">
-                <el-option :label="i" :value="i" v-for="i in categoryList[form.languageCategory]"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item label="标签" prop="tags">
-              <el-select
-                  multiple
-                  v-model="form.tags" placeholder="请选择选项">
-                <el-option :label="i" :value="i" v-for="i in tagList[form.category]"/>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button @click="step = 0">返回</el-button>
-              <el-button type="primary" @click="onSubmit">确定</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-      </div>
-    </Slide>
-  </div>
-</template>
-
-<style scoped lang="scss">
-@import "@/assets/css/variable";
-
-#AddWordDialog {
-  position: fixed;
-  width: 700rem;
-  height: 70vh;
-  left: 50%;
-  top: 50%;
-  transform: translate3D(-50%, -50%, 0);
-  z-index: 9999999;
-  background: var(--color-second-bg);
-
-  $header-height: 60rem;
-
-
-  header {
-    color: var(--color-font-3);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: $header-height;
-
-    .left {
-      cursor: pointer;
-      display: flex;
-      gap: 10rem;
-      align-items: center;
-    }
-  }
-
-  .dict-list-page {
-    padding: 0 var(--space);
-    box-sizing: border-box;
-
-  }
-
-  .add-page {
-    color: var(--color-font-1);
-    //display: flex;
-    //flex-direction: column;
-
-    header {
-      padding: 0 var(--space);
-    }
-
-    .detail {
-      flex: 1;
-      height: calc(100% - $header-height);
-      display: flex;
-      position: relative;
-
-      .dict {
-        width: 50%;
-        border-radius: 10rem;
-        background: var(--color-second-bg);
-        color: var(--color-font-1);
-        padding-left: var(--space);
-        box-sizing: border-box;
-
-        .info {
-          border-radius: 8rem;
-          background: gray;
-          padding: 20rem;
-
-          .name {
-            font-size: 28rem;
-            margin-bottom: 10rem;
-          }
-
-          .desc {
-            font-size: 18rem;
-            margin-bottom: 30rem;
-          }
-        }
-      }
-
-      .list {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        font-size: 14rem;
-        padding-bottom: 20rem;
-
-        .list-header {
-          min-height: 50rem;
-          padding: 10rem 24rem;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          font-size: 16rem;
-          color: var(--color-font-3);
-
-          .name {
-            font-size: 18rem;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/components/Article/EditBatchArticleModal.vue b/src/components/Article/EditBatchArticleModal.vue
index 906d2f07..0f78271c 100644
--- a/src/components/Article/EditBatchArticleModal.vue
+++ b/src/components/Article/EditBatchArticleModal.vue
@@ -9,7 +9,7 @@ import {useBaseStore} from "@/stores/base.ts";
 import {$computed, $ref} from "vue/macros";
 import List from "@/components/list/List.vue";
 import {v4 as uuidv4} from 'uuid';
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 import EditArticle from "@/components/Article/EditArticle.vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {useDisableEventListener} from "@/hooks/event.ts";
@@ -231,7 +231,7 @@ function saveAndNext(val: Article) {
 </script>
 
 <template>
-  <Modal
+  <Dialog
       v-model="show"
       :full-screen="true"
       :header="false"
@@ -273,7 +273,7 @@ function saveAndNext(val: Article) {
           @saveAndNext="saveAndNext"
           :article="article"/>
     </div>
-  </Modal>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Article/EditSingleArticleModal.vue b/src/components/Article/EditSingleArticleModal.vue
index 14b89521..8f8392b1 100644
--- a/src/components/Article/EditSingleArticleModal.vue
+++ b/src/components/Article/EditSingleArticleModal.vue
@@ -2,7 +2,7 @@
 
 import {Article, DefaultArticle} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 import EditArticle from "@/components/Article/EditArticle.vue";
 
 interface IProps {
@@ -21,7 +21,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <Modal
+  <Dialog
       :header="false"
       :model-value="props.modelValue"
       :full-screen="true"
@@ -32,7 +32,7 @@ const emit = defineEmits<{
           @save="val => emit('save',val)"
       />
     </div>
-  </Modal>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Practice/Practice.vue b/src/components/Practice/Practice.vue
index fbbeb06e..e8f6dc49 100644
--- a/src/components/Practice/Practice.vue
+++ b/src/components/Practice/Practice.vue
@@ -15,8 +15,8 @@ import PracticeArticle from "@/components/Practice/PracticeArticle/PracticeArtic
 import PracticeWord from "@/components/Practice/PracticeWord/PracticeWord.vue";
 import {ShortcutKey} from "@/types.ts";
 import useTheme from "@/hooks/useTheme.ts";
-import SettingModal from "@/components/Modal/SettingModal.vue";
-import DictModal from "@/components/Modal/DictDialog/index.vue";
+import SettingDialog from "@/components/dialog/SettingDialog.vue";
+import DictModal from "@/components/dialog/DictDiglog.vue";
 
 const practiceStore = usePracticeStore()
 const store = useBaseStore()
@@ -166,7 +166,7 @@ onUnmounted(() => {
   </div>
   <!--  <AddWordDialog></AddWordDialog>-->
   <DictModal/>
-  <SettingModal v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
+  <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>
 </template>
 
diff --git a/src/components/Practice/Statistics.vue b/src/components/Practice/Statistics.vue
index c3feb223..a269338c 100644
--- a/src/components/Practice/Statistics.vue
+++ b/src/components/Practice/Statistics.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 import {useBaseStore} from "@/stores/base.ts";
 import Ring from "@/components/Ring.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -53,7 +53,7 @@ const isEnd = $computed(() => {
 </script>
 
 <template>
-  <Modal
+  <Dialog
       :header="false"
       v-model="statModalIsOpen">
     <div class="statistics">
@@ -122,7 +122,7 @@ const isEnd = $computed(() => {
         </BaseButton>
       </div>
     </div>
-  </Modal>
+  </Dialog>
   <Fireworks v-if="statModalIsOpen"/>
 </template>
 <style scoped lang="scss">
diff --git a/src/components/Toolbar/Add.vue b/src/components/Toolbar/Add.vue
index 121eb008..baecdfc7 100644
--- a/src/components/Toolbar/Add.vue
+++ b/src/components/Toolbar/Add.vue
@@ -3,9 +3,7 @@
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
-import {emitter, EventKey} from "@/utils/eventBus.ts";
 import EditBatchArticleModal from "@/components/Article/EditBatchArticleModal.vue";
-import AddDict from "@/components/Add/AddDict.vue";
 import {$ref} from "vue/macros";
 
 let show = $ref(false)
@@ -26,7 +24,6 @@ function toggle() {
       </IconWrapper>
     </Tooltip>
     <EditBatchArticleModal/>
-    <AddDict v-if="show" @close="show = false"/>
   </div>
 </template>
 
diff --git a/src/components/Toolbar/ChapterName.vue b/src/components/Toolbar/ChapterName.vue
index 9783bbd7..f11438c2 100644
--- a/src/components/Toolbar/ChapterName.vue
+++ b/src/components/Toolbar/ChapterName.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {useBaseStore} from "@/stores/base.ts";
-import MiniModal from "@/components/Modal/MiniModal.vue";
+import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import {nextTick, watch} from "vue";
@@ -45,7 +45,7 @@ watch(() => show, n => {
     >
       {{ store.chapterName }}
     </div>
-    <MiniModal
+    <MiniDialog
         v-model="show"
         @mouseenter="toggle(true)"
         @mouseleave="toggle(false)"
@@ -60,7 +60,7 @@ watch(() => show, n => {
           <div class="title">第{{ index + 1 }}章&nbsp;&nbsp;&nbsp;{{ item.length }}词</div>
         </div>
       </div>
-    </MiniModal>
+    </MiniDialog>
   </div>
 </template>
 
diff --git a/src/components/Toolbar/FeedbackModal.vue b/src/components/Toolbar/FeedbackModal.vue
index 49b6413c..84f7ad40 100644
--- a/src/components/Toolbar/FeedbackModal.vue
+++ b/src/components/Toolbar/FeedbackModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from "@/components/Modal/Modal.vue"
+import Dialog from "@/components/dialog/Dialog.vue"
 import BaseButton from "@/components/BaseButton.vue";
 import {GITHUB} from "@/config/ENV.ts";
 
@@ -10,7 +10,7 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <Modal
+  <Dialog
       @close="emit('close')"
       title="反馈">
     <div class="feedback-modal">
@@ -38,7 +38,7 @@ const emit = defineEmits([
         </div>
       </div>
     </div>
-  </Modal>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Toolbar/RepeatSetting.vue b/src/components/Toolbar/RepeatSetting.vue
index 36990d4d..5d6fc8ea 100644
--- a/src/components/Toolbar/RepeatSetting.vue
+++ b/src/components/Toolbar/RepeatSetting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import MiniModal from "@/components/Modal/MiniModal.vue";
+import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -43,7 +43,7 @@ onMounted(() => {
             @mouseleave="toggle(false)"
       />
     </IconWrapper>
-    <MiniModal
+    <MiniDialog
         v-model="show"
         @mouseenter="toggle(true)"
         @mouseleave="toggle(false)"
@@ -67,7 +67,7 @@ onMounted(() => {
                          type="number"
         />
       </div>
-    </MiniModal>
+    </MiniDialog>
   </div>
 </template>
 
diff --git a/src/components/Toolbar/TranslateSetting.vue b/src/components/Toolbar/TranslateSetting.vue
index c857c7f9..0bf5cbfb 100644
--- a/src/components/Toolbar/TranslateSetting.vue
+++ b/src/components/Toolbar/TranslateSetting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import MiniModal from "@/components/Modal/MiniModal.vue";
+import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -8,7 +8,7 @@ import {useBaseStore} from "@/stores/base.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
 import BaseButton from "@/components/BaseButton.vue";
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 import {useSettingStore} from "@/stores/setting.ts";
 import {ShortcutKey} from "@/types.ts";
 
@@ -53,7 +53,7 @@ function save() {
         />
       </IconWrapper>
     </Tooltip>
-    <MiniModal v-model="show"
+    <MiniDialog v-model="show"
                style="width: 230rem;"
     >
       <div class="mini-row">
@@ -102,7 +102,7 @@ function save() {
         <BaseButton size="small" @click="show = false">取消</BaseButton>
         <BaseButton size="small" @click="save">确定</BaseButton>
       </div>
-    </MiniModal>
+    </MiniDialog>
   </div>
 </template>
 
diff --git a/src/components/Toolbar/VolumeSetting.vue b/src/components/Toolbar/VolumeSetting.vue
index c9a2c5d3..24060ed9 100644
--- a/src/components/Toolbar/VolumeSetting.vue
+++ b/src/components/Toolbar/VolumeSetting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import MiniModal from "@/components/Modal/MiniModal.vue";
+import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import {Icon} from "@iconify/vue";
 import IconWrapper from "@/components/IconWrapper.vue";
 import Tooltip from "@/components/Tooltip.vue";
@@ -58,7 +58,7 @@ function toggle2() {
         />
       </IconWrapper>
     </Tooltip>
-    <MiniModal
+    <MiniDialog
         width="250rem"
         v-model="show">
       <div class="mini-row-title">
@@ -148,7 +148,7 @@ function toggle2() {
           />
         </div>
       </div>
-    </MiniModal>
+    </MiniDialog>
   </div>
 </template>
 
diff --git a/src/components/Modal/Modal.vue b/src/components/dialog/Dialog.vue
similarity index 100%
rename from src/components/Modal/Modal.vue
rename to src/components/dialog/Dialog.vue
diff --git a/src/components/Modal/DictDialog/index.vue b/src/components/dialog/DictDiglog.vue
similarity index 99%
rename from src/components/Modal/DictDialog/index.vue
rename to src/components/dialog/DictDiglog.vue
index 6d481b8c..13bce67e 100644
--- a/src/components/Modal/DictDialog/index.vue
+++ b/src/components/dialog/DictDiglog.vue
@@ -12,7 +12,7 @@ import {v4 as uuidv4} from "uuid";
 import {ActivityCalendar} from "vue-activity-calendar";
 import "vue-activity-calendar/style.css";
 import ChapterList from "@/components/list/ChapterList.vue";
-import WordListModal from "@/components/Modal/WordListModal.vue";
+import WordListDialog from "@/components/dialog/WordListDialog.vue";
 import {isArticle} from "@/hooks/article.ts";
 import {useRuntimeStore} from "@/stores/runtime.ts";
 import {useSettingStore} from "@/stores/setting.ts";
@@ -23,7 +23,7 @@ import VirtualWordList from "@/components/list/VirtualWordList.vue";
 import {FormInstance, FormRules} from "element-plus";
 import Empty from "@/components/Empty.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 
 const store = useBaseStore()
 const settingStore = useSettingStore()
@@ -393,7 +393,7 @@ function delWord(word: Word, index: number) {
     }
   }
 
-  runtimeStore.editDict.words.splice(index, 1)
+  runtimeStore.editDict.words.splice(DictDiglog, 1)
   wordList = cloneDeep(runtimeStore.editDict.words)
   syncMyDictList()
 
@@ -480,7 +480,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <Modal
+  <Dialog
       :header="false"
       v-model="show"
       :show-close="false">
@@ -720,7 +720,7 @@ onMounted(() => {
                     <template v-slot="{word,index}">
                       <BaseIcon
                           class-name="del"
-                          @click="delWord(word,index)"
+                          @click="delWord(word,DictDiglog)"
                           title="移除"
                           icon="solar:trash-bin-minimalistic-linear"/>
                     </template>
@@ -807,8 +807,8 @@ onMounted(() => {
         </div>
       </Slide>
     </div>
-  </Modal>
-  <WordListModal/>
+  </Dialog>
+  <WordListDialog/>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Modal/MiniModal.vue b/src/components/dialog/MiniDialog.vue
similarity index 100%
rename from src/components/Modal/MiniModal.vue
rename to src/components/dialog/MiniDialog.vue
diff --git a/src/components/Modal/SettingModal.vue b/src/components/dialog/SettingDialog.vue
similarity index 99%
rename from src/components/Modal/SettingModal.vue
rename to src/components/dialog/SettingDialog.vue
index b21af740..fdd188be 100644
--- a/src/components/Modal/SettingModal.vue
+++ b/src/components/dialog/SettingDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Modal from "@/components/Modal/Modal.vue"
+import Dialog from "@/components/dialog/Dialog.vue"
 import {useBaseStore} from "@/stores/base.ts"
 import {Icon} from '@iconify/vue';
 import {watch, ref} from "vue";
@@ -68,7 +68,7 @@ function resetShortcutKeyMap() {
 </script>
 
 <template>
-  <Modal
+  <Dialog
       @close="emit('close')"
       :keyboard="!disabledDefaultKeyboardEvent"
       title="设置">
@@ -330,7 +330,7 @@ function resetShortcutKeyMap() {
         </div>
       </div>
     </div>
-  </Modal>
+  </Dialog>
 </template>
 
 <style scoped lang="scss">
diff --git a/src/components/Modal/WordListModal.vue b/src/components/dialog/WordListDialog.vue
similarity index 97%
rename from src/components/Modal/WordListModal.vue
rename to src/components/dialog/WordListDialog.vue
index 5c3389bf..64b2d12f 100644
--- a/src/components/Modal/WordListModal.vue
+++ b/src/components/dialog/WordListDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import Modal from "@/components/Modal/Modal.vue";
+import Dialog from "@/components/dialog/Dialog.vue";
 import {$ref} from "vue/macros";
 import {onMounted, onUnmounted, watch} from "vue";
 import {emitter, EventKey} from "@/utils/eventBus.ts";
@@ -65,7 +65,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Modal
+  <Dialog
       :title="title"
       v-model="show">
     <div class="all-word">
@@ -82,7 +82,7 @@ onUnmounted(() => {
           :list="list">
       </VirtualWordList>
     </div>
-  </Modal>
+  </Dialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/utils/MessageBox.tsx b/src/utils/MessageBox.tsx
index 8676ed62..6ae5f087 100644
--- a/src/utils/MessageBox.tsx
+++ b/src/utils/MessageBox.tsx
@@ -1,5 +1,5 @@
 import {createApp} from 'vue'
-import Modal, {ModalProps} from "@/components/Modal/Modal.vue";
+import Dialog, {ModalProps} from "@/components/dialog/Dialog.vue";
 import {AppContext, Component, ComponentPublicInstance, createVNode, getCurrentInstance, render, VNode} from 'vue';
 
 export class MessageBox {
@@ -23,7 +23,7 @@ export class MessageBox {
       onOk()
       close()
     }
-    const vNode = createVNode(Modal, {
+    const vNode = createVNode(Dialog, {
       title,
       content,
       onCancel: tempOnCancel,
@@ -51,7 +51,7 @@ export class MessageBox {
       render(null, container);
       container.remove()
     }
-    const vNode = createVNode(Modal, {
+    const vNode = createVNode(Dialog, {
       title,
       content,
       onCancel: tempOnCancel,