优化平台公告的md显示

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;