优化平台公告的md显示

frontend/package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.13.2",
         "element-plus": "^2.11.9",
+        "marked": "^18.0.5",
         "pinia": "^3.0.4",
         "qrcode": "^1.5.4",
         "vue": "^3.5.24",
@@ -2245,6 +2246,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.5",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.5.tgz",
+      "integrity": "sha512-S6GcvALHg6K4ohtu4E7x0a1AqhAjp6cV8KhLSyN9qVapnzJkusVBxZRcIU9AeYsbe6P1hKDusSbEOzGyyuce6w==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

frontend/package.json

@@ -13,6 +13,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.13.2",
     "element-plus": "^2.11.9",
+    "marked": "^18.0.5",
     "pinia": "^3.0.4",
     "qrcode": "^1.5.4",
     "vue": "^3.5.24",

frontend/src/features/announcement/views/AnnouncementDetailView.vue

@@ -1,15 +1,28 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, Bell, Calendar, Document, QuestionFilled, View, Warning } from '@element-plus/icons-vue'
 import { fetchAnnouncementDetail, type Announcement } from '@/features/announcement'
 import { formatDateTime } from '@/utils/time'
+import { marked } from 'marked'
 
 const route = useRoute()
 const router = useRouter()
 const loading = ref(false)
 const announcement = ref<Announcement | null>(null)
 
+// 配置 marked 选项
+marked.setOptions({
+  breaks: true, // 支持换行
+  gfm: true, // GitHub Flavored Markdown
+})
+
+// 计算属性：将 Markdown 转换为 HTML
+const renderedContent = computed(() => {
+  if (!announcement.value?.content) return ''
+  return marked.parse(announcement.value.content)
+})
+
 const categories = [
   { value: 'notice', label: '通知公告', icon: Bell, color: '#3b82f6' },
   { value: 'tutorial', label: '使用教程', icon: Document, color: '#10b981' },
@@ -94,7 +107,7 @@ function getCategoryLabel(category: string) {
 
       <div class="detail-divider"></div>
 
-      <div class="detail-content" v-html="announcement.content"></div>
+      <div class="detail-content" v-html="renderedContent"></div>
     </div>
   </section>
 </template>
@@ -206,10 +219,14 @@ function getCategoryLabel(category: string) {
 
 .detail-content :deep(h1) {
   font-size: 24px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e6eaf2;
 }
 
 .detail-content :deep(h2) {
   font-size: 20px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #f1f5f9;
 }
 
 .detail-content :deep(h3) {
@@ -221,6 +238,16 @@ function getCategoryLabel(category: string) {
   line-height: 1.8;
 }
 
+.detail-content :deep(strong) {
+  color: #111827;
+  font-weight: 700;
+}
+
+.detail-content :deep(em) {
+  font-style: italic;
+  color: #475569;
+}
+
 .detail-content :deep(ul),
 .detail-content :deep(ol) {
   margin: 16px 0;