diff --git a/src/assets/css/style.scss b/src/assets/css/style.scss
index ab0d1f09..2fbf14dc 100644
--- a/src/assets/css/style.scss
+++ b/src/assets/css/style.scss
@@ -38,6 +38,9 @@
 
   --color-input-bg: white;
   --color-input-icon: #d3d4d7;
+
+  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --word-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
 html.dark {
@@ -123,6 +126,14 @@ html.dark {
   transition: background var(--anim-time), color var(--anim-time), border var(--anim-time);
 }
 
+.word-font-family {
+  font-family: var(--word-font-family);
+  //font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif; //medium
+  //font-family: Optimistic Text,-apple-system,ui-sans-serif,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; // react
+  //font-family: Google Sans Text,Noto Sans,Noto Sans JP,Noto Sans KR,Noto Naskh Arabic,Noto Sans Thai,Noto Sans Hebrew,Noto Sans Bengali,sans-serif; //android-dev
+  line-height: 30rem;
+}
+
 html, body {
   font-size: 1px;
   padding: 0;
@@ -131,11 +142,15 @@ html, body {
   height: 100%;
   color: $font-color;
   //color: var(--color-font-1);
-  font-family: $font-family;
+  //font-family: var(--font-family);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.en-word {
+  font-family: var(--word-font-family);
+}
+
 #app {
   width: 100%;
   height: 100%;
@@ -294,7 +309,7 @@ footer {
   padding: 0 var(--space);
 }
 
-.list-item-wrapper{
+.list-item-wrapper {
   padding-bottom: 15rem;
 }
 
@@ -316,7 +331,7 @@ footer {
     display: flex;
     gap: 10rem;
 
-    .title-wrapper{
+    .title-wrapper {
       display: flex;
       flex-direction: column;
       gap: 3rem;
@@ -360,7 +375,6 @@ footer {
     display: flex;
     align-items: center;
     gap: 8rem;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
     color: var(--color-font-1);
 
     .word {
@@ -387,7 +401,7 @@ footer {
 }
 
 .common-title {
-  height: 40rem;
+  min-height: 40rem;
   font-size: 18rem;
   color: var(--color-font-1);
   display: flex;
diff --git a/src/components/Empty.vue b/src/components/Empty.vue
index 3572d439..f63b6ef9 100644
--- a/src/components/Empty.vue
+++ b/src/components/Empty.vue
@@ -30,6 +30,10 @@ defineEmits<{
   font-size: 12rem;
   gap: 20rem;
 
+  span {
+    font-family: var(--font-family);
+  }
+
   img {
     margin-top: -50rem;
     width: 120rem;
diff --git a/src/pages/dict/components/ArticleDetail.vue b/src/pages/dict/components/ArticleDetail.vue
index 36d5be8f..761cca3d 100644
--- a/src/pages/dict/components/ArticleDetail.vue
+++ b/src/pages/dict/components/ArticleDetail.vue
@@ -9,9 +9,10 @@ import {$ref} from "vue/macros";
 import VirtualWordList2 from "@/components/list/VirtualWordList2.vue";
 import {cloneDeep} from "lodash-es";
 import {Article, DefaultArticle, TranslateType} from "@/types.ts";
+import {emitter, EventKey} from "@/utils/eventBus.ts";
 
 const runtimeStore = useRuntimeStore()
-let chapterIndex = $ref(0)
+let chapterIndex = $ref(-1)
 let article: Article = $ref(cloneDeep(DefaultArticle))
 
 function handleCheckedChange(val) {
@@ -19,6 +20,19 @@ function handleCheckedChange(val) {
   article = val.data
 }
 
+function delArticle(index: number) {
+  runtimeStore.editDict.articles.splice(index, 1)
+
+  if (runtimeStore.editDict.articles.length) {
+    if (chapterIndex === index) {
+      article = runtimeStore.editDict.articles[index]
+    }
+  } else {
+    article = cloneDeep(DefaultArticle)
+  }
+
+  ElMessage.success('删除成功！')
+}
 
 </script>
 
@@ -30,14 +44,12 @@ function handleCheckedChange(val) {
           <span>章节管理</span>
           <div class="options">
             <BaseIcon
+                @click="emitter.emit(EventKey.openArticleListModal)"
                 icon="fluent:add-20-filled"
                 title="新增章节"/>
+            <span>{{ runtimeStore.editDict.articles.length }}章</span>
           </div>
         </div>
-        <div class="select">
-          <BaseButton size="small" @click="showAllocationChapterDialog = true">智能分配</BaseButton>
-          <span>{{ runtimeStore.editDict.articles.length }}章</span>
-        </div>
       </div>
       <div class="wrapper">
         <ArticleList3
@@ -52,82 +64,41 @@ function handleCheckedChange(val) {
           <template v-slot="{data,index}">
             <BaseIcon
                 class-name="del"
-                @click="emit('edit',{data,index})"
+                @click="emitter.emit(EventKey.openArticleListModal,data)"
                 title="编辑"
                 icon="tabler:edit"/>
             <BaseIcon
                 class-name="del"
-                @click="del({data,index})"
+                @click="delArticle(index)"
                 title="删除"
                 icon="solar:trash-bin-minimalistic-linear"/>
           </template>
         </ArticleList3>
-        <template v-if="false">
-          <RecycleScroller
-              v-if="runtimeStore.editDict.articles.length"
-              ref="chapterListRef"
-              style="height: 100%;"
-              :items="runtimeStore.editDict.articles"
-              :item-size="63"
-              key-field="id"
-              v-slot="{ item,index }"
-          >
-            <div style="padding: 0 15rem;">
-              <div class="common-list-item"
-                   :class="chapterIndex === item.id && 'active'"
-                   @click="handleChangeCurrentChapter(item.id)">
-                <div class="flex gap10 flex1 ">
-                  <input type="radio" :checked="chapterIndex === item.id">
-                  <div class="item-title flex flex1 space-between">
-                    <span>{{ index + 1 }}.</span>
-                    <span>{{ item.title }}</span>
-                  </div>
-                </div>
-                <div class="right">
-                  <BaseIcon
-                      class-name="del"
-                      @click="delWordChapter(item.id)"
-                      title="移除"
-                      icon="solar:trash-bin-minimalistic-linear"/>
-                </div>
-              </div>
-            </div>
-          </RecycleScroller>
-          <Empty v-else/>
-        </template>
+        <Empty v-else/>
       </div>
     </div>
-    <div class="article-content">
-      <div class="common-title">原文</div>
-      <div class="item">
-        <div class="label">标题：</div>
-        <p>{{ article.title }}</p>
+    <div class="article-content word-font-family">
+      <div class="title">
+        <div>{{ article.title }}</div>
       </div>
-      <div class="item basic">
-        <div class="label">正文：</div>
-        <p>
-          {{ article.text }}
-        </p>
+      <div class="text" v-if="article.text">
+        <div class="sentence" v-for="t in article.text.split('\n')">{{ t }}</div>
       </div>
+      <Empty v-else/>
     </div>
     <div class="article-content">
-      <div class="common-title">译文</div>
-      <div class="item">
-        <div class="label">标题：</div>
-        <p>{{ article.titleTranslate }}</p>
+      <div class="title">
+        <div>{{ article.titleTranslate }}</div>
       </div>
-      <div class="item basic">
-        <div class="label">正文：</div>
-        <p>
-          {{ article.textCustomTranslate }}
-        </p>
+      <div class="text" v-if="article.textCustomTranslate">
+        {{ article.textCustomTranslate }}
       </div>
+      <Empty v-else/>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-
 .article-detail {
   width: 100%;
   height: 100%;
@@ -180,6 +151,7 @@ function handleCheckedChange(val) {
 
     .wrapper {
       flex: 1;
+      padding-bottom: var(--space);
       overflow: hidden;
     }
   }
@@ -187,13 +159,27 @@ function handleCheckedChange(val) {
   .article-content {
     @extend .box;
     flex: 1;
-    overflow: auto;
     padding: var(--space);
+    overflow: hidden;
+    font-size: 20rem;
 
-    .item {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--space);
+    .title {
+      text-align: center;
+      margin-bottom: var(--space);
+      font-size: 24rem;
+    }
+
+    .text {
+      //white-space: pre-wrap;
+      text-indent: 1.5em;
+      line-height: 35rem;
+      overflow: auto;
+      padding-right: 10rem;
+      padding-bottom: 50rem;
+
+      .sentence {
+        margin-bottom: 30rem;
+      }
     }
   }
 }
diff --git a/src/pages/dict/index.vue b/src/pages/dict/index.vue
index a0de29eb..33bf1db4 100644
--- a/src/pages/dict/index.vue
+++ b/src/pages/dict/index.vue
@@ -11,7 +11,7 @@ import DictManage from "@/pages/dict/DictManage.vue";
 </template>
 
 <style scoped lang="scss">
-#page{
+#page {
   background: var(--color-main-bg);
   height: 100%;
   width: 100%;
diff --git a/src/pages/practice/practice-article/TypingArticle.vue b/src/pages/practice/practice-article/TypingArticle.vue
index b4a5fb3a..d40fb38c 100644
--- a/src/pages/practice/practice-article/TypingArticle.vue
+++ b/src/pages/practice/practice-article/TypingArticle.vue
@@ -382,7 +382,7 @@ const {
 <template>
   <div class="typing-article">
     <header>
-      <div class="title">{{ props.article.title }}</div>
+      <div class="title word">{{ props.article.title }}</div>
       <div class="titleTranslate" v-if="settingStore.translate">{{ props.article.titleTranslate }}</div>
       <div class="options-wrapper">
         <div class="flex gap10">
@@ -498,14 +498,13 @@ $article-width: 1000px;
       text-align: center;
       color: rgba(gray, .8);
       font-size: 36rem;
-      font-weight: 500;
-      word-spacing: 3rem;
-      //opacity: 0;
+      font-family: var(--word-font-family);
     }
 
     .titleTranslate {
       @extend .title;
       font-size: 20rem;
+      font-family: unset;
     }
 
     .options-wrapper {
@@ -527,7 +526,6 @@ $article-width: 1000px;
     //height: 100%;
     font-size: 24rem;
     line-height: 2.5;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
     color: gray;
     word-break: keep-all;
     word-wrap: break-word;
@@ -535,11 +533,16 @@ $article-width: 1000px;
     padding-top: 20rem;
 
     .section {
+      font-family: var(--word-font-family);
       margin-bottom: var(--space);
 
       .sentence {
         transition: all .3s;
 
+        &:first-child{
+          padding-left: 50rem;
+        }
+
         &.dictation {
           letter-spacing: 3rem;
         }