页面右侧聊天助手的ai输出结果加上md文档格式显示

src/assets/styles/components/ai-chat.scss

@@ -94,6 +94,90 @@
     font-size: 0.13rem;
     line-height: 1.6;
     max-width: 85%;
+
+    // ===== Markdown 渲染样式 =====
+    p {
+      margin: 0 0 0.08rem;
+      &:last-child { margin-bottom: 0; }
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0.12rem 0 0.06rem;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+    h1 { font-size: 0.18rem; }
+    h2 { font-size: 0.16rem; }
+    h3 { font-size: 0.14rem; }
+
+    ul, ol {
+      padding-left: 0.2rem;
+      margin: 0.06rem 0;
+    }
+
+    li {
+      margin-bottom: 0.04rem;
+    }
+
+    code {
+      background: #f1f5f9;
+      padding: 0.01rem 0.04rem;
+      border-radius: 0.03rem;
+      font-size: 0.12rem;
+      font-family: 'Courier New', monospace;
+    }
+
+    pre {
+      background: #1e293b;
+      color: #e2e8f0;
+      padding: 0.1rem 0.12rem;
+      border-radius: 0.06rem;
+      overflow-x: auto;
+      margin: 0.08rem 0;
+
+      code {
+        background: none;
+        padding: 0;
+        color: inherit;
+        font-size: 0.11rem;
+      }
+    }
+
+    blockquote {
+      border-left: 3px solid #cbd5e1;
+      padding-left: 0.1rem;
+      margin: 0.08rem 0;
+      color: #64748b;
+    }
+
+    a {
+      color: #2563eb;
+      text-decoration: underline;
+    }
+
+    table {
+      border-collapse: collapse;
+      margin: 0.08rem 0;
+      width: 100%;
+      font-size: 0.12rem;
+
+      th, td {
+        border: 1px solid #e5e7eb;
+        padding: 0.04rem 0.08rem;
+        text-align: left;
+      }
+
+      th {
+        background: #f8fafc;
+        font-weight: 600;
+      }
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid #e5e7eb;
+      margin: 0.1rem 0;
+    }
   }
 
   &__msg--ai &__msg-bubble {

src/components/AiChat.vue

@@ -74,12 +74,22 @@
 import { ref, computed, watch, nextTick, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useStore } from 'vuex'
+import markdownit from 'markdown-it'
 import MemberDialog from '@/components/MemberDialog.vue'
 import AiThinkingIndicator from '@/components/tools/AiThinkingIndicator.vue'
 import { sendNovaChat } from '@/utils/aiRequest'
 import type { NovaChatHistoryItem } from '@/utils/aiRequest'
 import { fetchResumeList } from '@/api/resume'
 
+// ==================== Markdown 渲染实例 ====================
+
+/** markdown-it 实例，用于将 AI 回复的 Markdown 文本渲染为 HTML */
+const md = markdownit({
+  html: false,       // 禁止原始 HTML（防 XSS）
+  breaks: true,      // 将换行符转为 <br>
+  linkify: true,     // 自动识别链接
+})
+
 // ==================== Props ====================
 
 /** 组件属性 */
@@ -180,9 +190,9 @@ const userQuestions = computed(() => quickQuestions.value)
 
 // ==================== 内容格式化 ====================
 
-/** 将消息中的换行符转为 HTML 换行标签 */
+/** 将消息内容通过 markdown-it 渲染为 HTML */
 function formatContent(content: string): string {
-  return content.replace(/\n/g, '<br>')
+  return md.render(content)
 }
 
 // ==================== 滚动控制 ====================