fix: #1185

src/views/setting/notice/components/noticeContent.vue

@@ -1,30 +1,29 @@
 <template>
-    <div class="notice-content">
-        <aside>
-            <a-list item-layout="horizontal" :data-source="noticeList">
-                <template #renderItem="{ item }">
-                    <a-list-item @click="choose(item)">
-                        <a-list-item-meta :description="formatTime(item.createtime)">
-                            <template #title>
-                                <a
-                                    :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }"
-                                    href="javascript:;"
-                                >{{ item.title }}</a>
-                            </template>
-                            <template #avatar>
-                                <a-badge :color="item.readed ? '@m-grey2' : 'orange'" />
-                            </template>
-                        </a-list-item-meta>
-                    </a-list-item>
-                </template>
-            </a-list>
-        </aside>
-        <main>
-            <h4>{{ chooseItemNotice.title }}</h4>
-            <p>{{ formatTime(chooseItemNotice.createtime) }}</p>
-            <div>{{ chooseItemNotice.content }}</div>
-        </main>
-    </div>
+  <div class="notice-content">
+    <aside>
+      <a-list item-layout="horizontal"
+              :data-source="noticeList">
+        <template #renderItem="{ item }">
+          <a-list-item @click="choose(item)">
+            <a-list-item-meta :description="formatTime(item.createtime)">
+              <template #title>
+                <a :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }"
+                   href="javascript:;">{{ item.title }}</a>
+              </template>
+              <template #avatar>
+                <a-badge :color="item.readed ? '@m-grey2' : 'orange'" />
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </aside>
+    <main>
+      <h4>{{ chooseItemNotice.title }}</h4>
+      <p>{{ formatTime(chooseItemNotice.createtime) }}</p>
+      <div v-html="chooseItemNotice.content"></div>
+    </main>
+  </div>
 </template>
 
 <script lang="ts">
@@ -33,6 +32,7 @@ import { QueryNoticeRsp } from '@/services/go/commonService/interface';
 import { mergeObj } from '@/utils/objHandle';
 import { handleNotice } from '../setup';
 import { formatTime } from '@/common/methods/format';
+import { watchEffect } from '@vue/runtime-core';
 
 function chooseNotice(fn: Function) {
     interface ItemNotice {
@@ -46,6 +46,7 @@ function chooseNotice(fn: Function) {
         createtime: '',
     });
     function choose(item: QueryNoticeRsp) {
+        item.content = item.content.replace(/\n/g, '<br />');
         fn(item);
         mergeObj(chooseItemNotice, item);
     }
@@ -64,8 +65,11 @@ export default defineComponent({
         // 公告消息
         const { readNotice } = handleNotice();
         const { chooseItemNotice, choose } = chooseNotice(readNotice);
-        computed(() => {
-            props.noticeList.length && mergeObj(chooseItemNotice, props.noticeList[0]);
+        watchEffect(() => {
+            if (props.noticeList.length) {
+                props.noticeList[0].content = props.noticeList[0].content.replace(/\n/g, '<br />');
+                mergeObj(chooseItemNotice, props.noticeList[0]);
+            }
         });
         return {
             choose,