From 1bac1721ac28166f4c204520fd643d46a2700b5f Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sun, 18 May 2025 14:20:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E7=BF=BB=E8=AF=91?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pc/components/dialog/ArticleContentDialog.vue  |  4 ++--
 .../pc/practice/practice-article/TypingArticle.vue | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/pages/pc/components/dialog/ArticleContentDialog.vue b/src/pages/pc/components/dialog/ArticleContentDialog.vue
index 39911bd4..d2ad3c4c 100644
--- a/src/pages/pc/components/dialog/ArticleContentDialog.vue
+++ b/src/pages/pc/components/dialog/ArticleContentDialog.vue
@@ -39,7 +39,7 @@ onUnmounted(() => {
           <div>{{ article.title }}</div>
         </div>
         <div class="text" v-if="article.text">
-          <div class="sentence" v-for="t in article.text.split('\n')">{{ t }}</div>
+          <div class="sentence" v-for="t in article.text.split('\n\n')">{{ t }}</div>
         </div>
         <Empty v-else/>
       </div>
@@ -88,7 +88,7 @@ onUnmounted(() => {
       padding-bottom: 3rem;
 
       .sentence {
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
       }
     }
   }
diff --git a/src/pages/pc/practice/practice-article/TypingArticle.vue b/src/pages/pc/practice/practice-article/TypingArticle.vue
index e859515f..4e2cf56b 100644
--- a/src/pages/pc/practice/practice-article/TypingArticle.vue
+++ b/src/pages/pc/practice/practice-article/TypingArticle.vue
@@ -13,6 +13,7 @@ import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
+import {getTranslateText} from "@/hooks/article.ts";
 
 interface IProps {
   article: Article,
@@ -458,6 +459,14 @@ defineExpose({showSentence, play, del, hideSentence, nextSentence})
       </div>
       <div class="cursor" v-if="!isEnd" :style="{top:cursor.top+'px',left:cursor.left+'px'}"></div>
     </div>
+    <div class="translate-bottom">
+      <header class="mb-4">
+        <div class="text-2xl center">{{ props.article.titleTranslate }}</div>
+      </header>
+      <template v-if="getTranslateText(article).length">
+        <div class="text-xl" v-for="t in getTranslateText(article)">{{ t }}</div>
+      </template>
+    </div>
   </div>
 </template>
 
@@ -501,7 +510,7 @@ defineExpose({showSentence, play, del, hideSentence, nextSentence})
 
   article {
     font-size: 1.6rem;
-    line-height: 1.3;
+    line-height: 1.5;
     word-break: keep-all;
     word-wrap: break-word;
     white-space: pre-wrap;
@@ -530,7 +539,8 @@ defineExpose({showSentence, play, del, hideSentence, nextSentence})
     .hover-show {
       background: var(--color-main-active);
       color: white !important;
-      .wrote{
+
+      .wrote {
         color: white !important;
       }
     }