From e22d46bb3851ee22446f80fff296bb143ff54168 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Wed, 23 Aug 2023 19:16:36 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=85=AC=E5=91=8A=E6=94=AF=E6=8C=81mar?=
 =?UTF-8?q?kdown=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Widgets/Announcement/index.vue | 16 ++++++++++++++--
 src/components/Widgets/MarkDown/index.vue     |  7 +++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Widgets/Announcement/index.vue b/src/components/Widgets/Announcement/index.vue
index a4f7ab03b..93f7e04d6 100644
--- a/src/components/Widgets/Announcement/index.vue
+++ b/src/components/Widgets/Announcement/index.vue
@@ -7,7 +7,7 @@
     :title="title"
     @close="onClose"
   >
-    <span class="announcement-main">{{ announcement.content }}</span>
+    <MarkDown class="markdown" :value="announcement.content" />
     <span v-if="announcement.link">
       <el-link :href="announcement.link" target="_blank" type="info" class="link-more">
         {{ $t('common.ViewMore') }}
@@ -19,9 +19,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import MarkDown from '@/components/Widgets/MarkDown'
 
 export default {
   name: 'Announcement',
+  components: { MarkDown },
   data() {
     return {
       viewedKey: 'AnnouncementViewed'
@@ -54,7 +56,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .announcement >>> .el-alert__content {
   width: 100%;
 }
@@ -70,4 +72,14 @@ export default {
 .icon {
   vertical-align: text-bottom;
 }
+>>> .markdown-body {
+  background-color: transparent !important;
+  a {
+    color: var(--color-info) !important;
+  }
+  h1, h2, h3, h4, h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+}
 </style>
diff --git a/src/components/Widgets/MarkDown/index.vue b/src/components/Widgets/MarkDown/index.vue
index 950173b3d..696677509 100644
--- a/src/components/Widgets/MarkDown/index.vue
+++ b/src/components/Widgets/MarkDown/index.vue
@@ -25,13 +25,12 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.markdown-body {
+  background-color: #f3f3f3;
+}
 .markdown-body * {
   padding: 10px;
-  background-color: #f3f3f3;
   color: #1a1a1a;
   font-size: 13px;
-  //& >>> .table * {
-  //  background-color: #f3f3f3;
-  //}
 }
 </style>