From 5e0651c26f6fbb33196c40ccf528ab4c9da338ff Mon Sep 17 00:00:00 2001
From: wizardchen <wizardchen@tencent.com>
Date: Tue, 11 Nov 2025 02:52:30 +0800
Subject: [PATCH] feat: Enhance Markdown rendering in chat component

- Enabled single line break support in Markdown rendering by setting breaks option to true.
- Refactored image rendering logic to use a custom renderer, improving image URL validation and safety.
- Updated Markdown processing to utilize the new renderer and options for better content display.
- Ensured proper handling of line breaks in the rendered output for improved readability.
---
 frontend/src/views/chat/components/botmsg.vue | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/views/chat/components/botmsg.vue b/frontend/src/views/chat/components/botmsg.vue
index b20f2dcc3..b1f3a9f08 100644
--- a/frontend/src/views/chat/components/botmsg.vue
+++ b/frontend/src/views/chat/components/botmsg.vue
@@ -31,6 +31,7 @@ import { sanitizeHTML, safeMarkdownToHTML, createSafeImage, isValidImageURL } fr
 marked.use({
     mangle: false,
     headerIds: false,
+    breaks: true,  // 全局启用单个换行支持
 });
 const emit = defineEmits(['scroll-bottom'])
 const renderer = new marked.Renderer();
@@ -104,22 +105,27 @@ const processMarkdown = (markdownText) => {
     // 首先对 Markdown 内容进行安全处理
     const safeMarkdown = safeMarkdownToHTML(markdownText);
     
-    // 自定义安全的渲染器处理图片
-    const renderer = {
-        image(href, title, text) {
-            // 验证图片 URL 是否安全
-            if (!isValidImageURL(href)) {
-                return `<p>无效的图片链接</p>`;
-            }
-            // 使用安全的图片创建函数
-            return createSafeImage(href, text || '', title || '');
+    // 创建自定义渲染器实例，继承默认渲染器
+    const customRenderer = new marked.Renderer();
+    // 覆盖图片渲染方法
+    customRenderer.image = function(href, title, text) {
+        // 验证图片 URL 是否安全
+        if (!isValidImageURL(href)) {
+            return `<p>无效的图片链接</p>`;
         }
+        // 使用安全的图片创建函数
+        return createSafeImage(href, text || '', title || '');
     };
 
-    marked.use({ renderer });
+    // 创建临时的 marked 配置，包含 renderer 和 breaks 选项
+    // breaks: true 会将单个换行渲染为 <br>，而不是忽略
+    const markedOptions = {
+        renderer: customRenderer,
+        breaks: true  // 启用单个换行支持
+    };
 
-    // 安全地渲染 Markdown
-    let html = marked.parse(safeMarkdown);
+    // 安全地渲染 Markdown，直接传递选项
+    let html = marked.parse(safeMarkdown, markedOptions);
 
     // 使用 DOMPurify 进行最终的安全清理
     const sanitizedHTML = sanitizeHTML(html);
@@ -212,6 +218,8 @@ onMounted(async () => {
     font-size: 14px;
     color: #333333;
     line-height: 1.6;
+    /* 确保换行符正确显示 */
+    white-space: pre-line;  /* 保留换行符，但合并多个空格 */
 }
 
 .markdown-content {