Add large screen display of articles

components.d.ts

@@ -8,6 +8,8 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Add: typeof import('./src/components/toolbar/Add.vue')['default']
+    ArticleContentDialog: typeof import('./src/components/dialog/ArticleContentDialog.vue')['default']
+    ArticleDetailDialog: typeof import('./src/components/dialog/ArticleDetailDialog.vue')['default']
     ArticleList: typeof import('./src/components/list/ArticleList.vue')['default']
     Backgorund: typeof import('./src/components/Backgorund.vue')['default']
     BaseButton: typeof import('./src/components/BaseButton.vue')['default']

src/App.vue

@@ -11,6 +11,7 @@ import Backgorund from "@/components/Backgorund.vue";
 import useTheme from "@/hooks/theme.ts";
 import * as localforage from "localforage";
 import SettingDialog from "@/components/dialog/SettingDialog.vue";
+import ArticleContentDialog from "@/components/dialog/ArticleContentDialog.vue";
 
 const store = useBaseStore()
 const runtimeStore = useRuntimeStore()
@@ -67,6 +68,7 @@ onMounted(() => {
 <template>
   <Backgorund/>
   <router-view/>
+  <ArticleContentDialog/>
   <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
 </template>
 

src/components/dialog/ArticleContentDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+
+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";
+import {useRuntimeStore} from "@/stores/runtime.ts";
+import WordList from "@/components/list/WordList.vue";
+import {Article, DefaultArticle} from "@/types.ts";
+import {cloneDeep} from "lodash-es";
+import Empty from "@/components/Empty.vue";
+import {getTranslateText} from "@/hooks/article.ts";
+
+let show = $ref(false)
+let loading = $ref(false)
+const runtimeStore = useRuntimeStore()
+let article: Article = $ref(cloneDeep(DefaultArticle))
+
+onMounted(() => {
+  emitter.on(EventKey.openArticleContentModal, (val: any) => {
+    show = true
+    article = cloneDeep(val)
+  })
+})
+
+onUnmounted(() => {
+  emitter.off(EventKey.openArticleContentModal)
+})
+
+</script>
+
+<template>
+  <Dialog
+      :header="false"
+      v-model="show">
+    <div class="content">
+      <div class="article-content word-font-family">
+        <div class="title">
+          <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>
+        <Empty v-else/>
+      </div>
+      <div class="article-content">
+        <div class="title">
+          <div>{{ article.titleTranslate }}</div>
+        </div>
+        <div class="text" v-if="getTranslateText(article).length">
+          <div class="sentence" v-for="t in getTranslateText(article)">{{ t }}</div>
+        </div>
+        <Empty v-else/>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<style lang="scss" scoped>
+@import "@/assets/css/style";
+
+.content {
+  width: 70vw;
+  height: 75vh;
+  display: flex;
+  gap: var(--space);
+  padding: var(--space);
+
+
+  .article-content {
+    flex: 1;
+    overflow: hidden;
+    font-size: 20rem;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      text-align: center;
+      margin-bottom: var(--space);
+      font-size: 24rem;
+    }
+
+    .text {
+      text-indent: 1.5em;
+      line-height: 35rem;
+      overflow: auto;
+      padding-right: 10rem;
+      padding-bottom: 50rem;
+
+      .sentence {
+        margin-bottom: 30rem;
+      }
+    }
+  }
+
+}
+</style>

src/components/dialog/DictDiglog.vue

@@ -355,7 +355,7 @@ function handleChangeArticleChapterIndex(val) {
                       :isActive="false"
                       v-loading="loading"
                       :show-border="true"
-                      @title="(val:any) => emitter.emit(EventKey.openArticleListModal,val.item)"
+                      @title="(val:any) => emitter.emit(EventKey.openArticleContentModal,val.item)"
                       @click="handleChangeArticleChapterIndex"
                       :active-id="activeId"
                       :list="runtimeStore.editDict.articles">

src/hooks/article.ts

@@ -1,4 +1,4 @@
-import {ArticleWord, DefaultArticleWord, DictType, Sentence} from "@/types.ts";
+import {Article, ArticleWord, DefaultArticleWord, DictType, Sentence, TranslateType} from "@/types.ts";
 import {cloneDeep} from "lodash-es";
 import nlp from "compromise";
 import {split} from "sentence-splitter";
@@ -260,4 +260,16 @@ export function isArticle(type: DictType): boolean {
     DictType.article,
     DictType.customArticle
   ].includes(type)
+}
+
+export function getTranslateText(article: Article) {
+  if (article.useTranslateType === TranslateType.custom) {
+    return article.textCustomTranslate
+      .split('\r\n\r\n').filter(v => v)
+  } else if (article.useTranslateType === TranslateType.network) {
+    return article.textNetworkTranslate
+      .split('\r\n\r\n').filter(v => v)
+  } else {
+    return []
+  }
 }

src/pages/dict/components/ArticleDictDetail.vue

@@ -22,6 +22,7 @@ import {syncMyDictList} from "@/hooks/dict.ts";
 import {useWindowClick} from "@/hooks/event.ts";
 import ArticleList from "@/components/list/ArticleList.vue";
 import * as copy from "copy-to-clipboard";
+import {getTranslateText} from "@/hooks/article.ts";
 
 const emit = defineEmits<{
   back: []
@@ -352,6 +353,11 @@ defineExpose({getDictDetail, add, editDict})
       <div class="article-content word-font-family">
         <div class="title">
           <div>{{ article.title }}</div>
+          <BaseIcon
+              style="position:absolute;right: 0;"
+              title="大屏显示"
+              @click="emitter.emit(EventKey.openArticleContentModal,article)"
+              icon="iconoir:expand"/>
         </div>
         <div class="text" v-if="article.text">
           <div class="sentence" v-for="t in article.text.split('\n')">{{ t }}</div>
@@ -361,9 +367,14 @@ defineExpose({getDictDetail, add, editDict})
       <div class="article-content">
         <div class="title">
           <div>{{ article.titleTranslate }}</div>
+          <BaseIcon
+              style="position:absolute;right: 0;"
+              title="大屏显示"
+              @click="emitter.emit(EventKey.openArticleContentModal,article)"
+              icon="iconoir:expand"/>
         </div>
-        <div class="text" v-if="article.textCustomTranslate">
-          {{ article.textCustomTranslate }}
+        <div class="text" v-if="getTranslateText(article).length">
+          <div class="sentence" v-for="t in getTranslateText(article)">{{ t }}</div>
         </div>
         <Empty v-else/>
       </div>
@@ -494,13 +505,15 @@ defineExpose({getDictDetail, add, editDict})
     font-size: 20rem;
 
     .title {
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
       margin-bottom: var(--space);
       font-size: 24rem;
     }
 
     .text {
-      //white-space: pre-wrap;
       text-indent: 1.5em;
       line-height: 35rem;
       overflow: auto;

src/pages/practice/practice-article/index.vue

@@ -286,7 +286,9 @@ defineExpose({getCurrentPractice})
             <ArticleList
                 :isActive="active"
                 :static="false"
+                :show-border="true"
                 :show-translate="settingStore.translate"
+                @title="e => emitter.emit(EventKey.openArticleContentModal,e.item)"
                 @click="changePracticeArticle"
                 :active-id="articleData.article.id"
                 :list="store.currentDict.articles">

src/utils/eventBus.ts

@@ -6,6 +6,7 @@ export const EventKey = {
   changeDict: 'changeDict',
   openStatModal: 'openStatModal',
   openWordListModal: 'openWordListModal',
+  openArticleContentModal: 'openArticleContentModal',
   openDictModal: 'openDictModal',
   openArticleListModal: 'openArticleListModal',
   closeOther: 'closeOther',