From 6fe5f4175da99e37c2850cd12648bd297c483cef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Fri, 24 Oct 2025 18:20:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86SVG=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E7=BB=98=E5=88=B6=E9=97=AE=E9=A2=98=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用更精确的正则表达式检测SVG代码块开始
正确处理Markdown格式的SVG代码块（svg或<svg）
实时更新SVG显示区域，自动补全结束标签确保正确显示
添加了完整的Markdown支持：

集成了marked.js库用于解析Markdown内容
配置了支持GitHub风格的Markdown选项
在所有消息渲染函数中添加了Markdown解析逻辑
添加了专门的Markdown样式：

为标题、段落、列表、代码块、引用等添加了样式
确保Markdown内容在对话气泡中正确显示
保持了原有的设计风格和颜色方案
优化了流式输出体验：

SVG绘制过程中显示加载动画和"正在绘制..."提示
绘制完成后自动切换为可点击的占位符
支持SVG前后的Markdown文本内容正确渲染
---
 css/style.css | 105 ++++++++++++++++++++++++++
 index.html    |   1 +
 js/app.js     | 199 +++++++++++++++++++++++++++++---------------------
 3 files changed, 223 insertions(+), 82 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5cce7a8..f0726b0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -39,6 +39,111 @@ body {
   box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
 }
 
+/* Markdown样式 */
+.chat-bubble-ai h1 {
+  font-size: 1.5em;
+  font-weight: bold;
+  margin: 0.5em 0;
+  color: #1f2937;
+}
+
+.chat-bubble-ai h2 {
+  font-size: 1.3em;
+  font-weight: bold;
+  margin: 0.5em 0;
+  color: #1f2937;
+}
+
+.chat-bubble-ai h3 {
+  font-size: 1.1em;
+  font-weight: bold;
+  margin: 0.5em 0;
+  color: #1f2937;
+}
+
+.chat-bubble-ai p {
+  margin: 0.5em 0;
+  line-height: 1.5;
+}
+
+.chat-bubble-ai ul, .chat-bubble-ai ol {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+
+.chat-bubble-ai li {
+  margin: 0.25em 0;
+  line-height: 1.4;
+}
+
+.chat-bubble-ai code {
+  background: #f3f4f6;
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+  color: #e11d48;
+}
+
+.chat-bubble-ai pre {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 0.75em;
+  overflow-x: auto;
+  margin: 0.5em 0;
+}
+
+.chat-bubble-ai pre code {
+  background: none;
+  padding: 0;
+  color: #1f2937;
+}
+
+.chat-bubble-ai blockquote {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.chat-bubble-ai strong {
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.chat-bubble-ai em {
+  font-style: italic;
+  color: #4b5563;
+}
+
+.chat-bubble-ai a {
+  color: #3b82f6;
+  text-decoration: underline;
+}
+
+.chat-bubble-ai a:hover {
+  color: #1d4ed8;
+}
+
+.chat-bubble-ai table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5em 0;
+}
+
+.chat-bubble-ai th, .chat-bubble-ai td {
+  border: 1px solid #e5e7eb;
+  padding: 0.5em;
+  text-align: left;
+}
+
+.chat-bubble-ai th {
+  background: #f9fafb;
+  font-weight: bold;
+}
+
 /* SVG占位符样式 - 块级换行 + 新配色 */
 .svg-placeholder-block {
   display: block;
diff --git a/index.html b/index.html
index 1859cda..22c6bcf 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <title>产品画布 / SWOT分析</title>
     <script src="https://cdn.tailwindcss.com/3.4.1"></script>
     <script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
diff --git a/js/app.js b/js/app.js
index 4bd8e40..06f151a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -2,6 +2,17 @@
  * 应用核心逻辑
  */
 
+// 配置Markdown解析器
+if (typeof marked !== 'undefined') {
+  marked.setOptions({
+    breaks: true, // 支持换行
+    gfm: true, // 支持GitHub风格的Markdown
+    sanitize: false, // 允许HTML（因为我们自己处理SVG）
+    smartLists: true, // 智能列表
+    smartypants: true // 智能标点
+  });
+}
+
 class ProductCanvasApp {
   constructor() {
     this.currentMode = 'canvas'; // 'canvas' 或 'swot'
@@ -217,29 +228,30 @@ class ProductCanvasApp {
         fullContent += content;
         
         // 检测SVG开始标记
-        if (!svgStarted && (fullContent.includes('```svg') || fullContent.includes('``` <svg') || fullContent.includes('```\n<svg'))) {
-          svgStarted = true;
-          svgId = Utils.generateId('svg');
-          
-          // 提取SVG开始前的文本
-          const svgStartIndex = Math.max(
-            fullContent.indexOf('```svg'),
-            fullContent.indexOf('``` <svg')
-          );
-          beforeText = fullContent.substring(0, svgStartIndex);
-          
-          // 显示绘制中占位符
-          this.updateStreamingMessageWithPlaceholder(messageContainer, beforeText, svgId);
-          
-          // 初始化SVG显示区域
-          this.svgViewer.innerHTML = `
-            <div class="flex items-center justify-center h-full">
-              <div class="text-center">
-                <iconify-icon icon="ph:spinner-gap" class="text-6xl text-purple-500 animate-spin"></iconify-icon>
-                <p class="mt-4 font-bold text-gray-600">正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</p>
+        if (!svgStarted) {
+          // 使用正则表达式更准确地检测SVG代码块开始
+          const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
+          if (svgStartMatch) {
+            svgStarted = true;
+            svgId = Utils.generateId('svg');
+            
+            // 提取SVG开始前的文本
+            const svgStartIndex = svgStartMatch.index;
+            beforeText = fullContent.substring(0, svgStartIndex);
+            
+            // 显示绘制中占位符
+            this.updateStreamingMessageWithPlaceholder(messageContainer, beforeText, svgId);
+            
+            // 初始化SVG显示区域
+            this.svgViewer.innerHTML = `
+              <div class="flex items-center justify-center h-full">
+                <div class="text-center">
+                  <iconify-icon icon="ph:spinner-gap" class="text-6xl text-purple-500 animate-spin"></iconify-icon>
+                  <p class="mt-4 font-bold text-gray-600">正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</p>
+                </div>
               </div>
-            </div>
-          `;
+            `;
+          }
         }
         
         // 如果SVG已经开始，收集SVG内容
@@ -249,57 +261,57 @@ class ProductCanvasApp {
             const svgEndIndex = fullContent.indexOf('</svg>') + 6; // +6 是 '</svg>' 的长度
             
             // 提取完整的SVG内容
-            const svgStartIndex = Math.max(
-              fullContent.indexOf('```svg'),
-              fullContent.indexOf('``` <svg')
-            );
-            let svgWithMarkers = fullContent.substring(svgStartIndex, svgEndIndex);
-            
-            // 移除代码块标记
-            svgContent = svgWithMarkers.replace(/```svg\s*/, '').replace(/```\s*$/, '').trim();
-            
-            // 补全SVG结束标签（如果没有的话）
-            if (!svgContent.endsWith('</svg>')) {
-              svgContent += '</svg>';
+            const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
+            if (svgStartMatch) {
+              const svgStartIndex = svgStartMatch.index;
+              let svgWithMarkers = fullContent.substring(svgStartIndex, svgEndIndex);
+              
+              // 移除代码块标记
+              svgContent = svgWithMarkers.replace(/```(?:svg)?\s*/, '').replace(/```$/, '').trim();
+              
+              // 补全SVG结束标签（如果没有的话）
+              if (!svgContent.endsWith('</svg>')) {
+                svgContent += '</svg>';
+              }
+              
+              // 实时显示SVG
+              this.svgViewer.innerHTML = svgContent;
+              
+              // 存储SVG内容
+              this.svgStorage[this.currentMode][svgId] = {
+                content: svgContent,
+                messageId: messageId,
+                mode: this.currentMode,
+                timestamp: new Date().toISOString()
+              };
+              
+              // 更新占位符为可点击状态
+              this.updatePlaceholderToClickable(messageContainer, svgId);
+              
+              // 重置SVG状态，继续接收剩余文本
+              svgStarted = false;
+              const afterText = fullContent.substring(svgEndIndex);
+              this.updateStreamingMessageAfterSVG(messageContainer, beforeText, svgId, afterText);
             }
-            
-            // 实时显示SVG
-            this.svgViewer.innerHTML = svgContent;
-            
-            // 存储SVG内容
-            this.svgStorage[this.currentMode][svgId] = {
-              content: svgContent,
-              messageId: messageId,
-              mode: this.currentMode,
-              timestamp: new Date().toISOString()
-            };
-            
-            // 更新占位符为可点击状态
-            this.updatePlaceholderToClickable(messageContainer, svgId);
-            
-            // 重置SVG状态，继续接收剩余文本
-            svgStarted = false;
-            const afterText = fullContent.substring(svgEndIndex);
-            this.updateStreamingMessageAfterSVG(messageContainer, beforeText, svgId, afterText);
-          } else if (svgContent) {
+          } else {
             // SVG还在继续，更新内容
-            const svgStartIndex = Math.max(
-              fullContent.indexOf('```svg'),
-              fullContent.indexOf('``` <svg')
-            );
-            let svgWithMarkers = fullContent.substring(svgStartIndex);
-            
-            // 移除代码块标记
-            svgContent = svgWithMarkers.replace(/```svg\s*/, '').replace(/```\s*$/, '').trim();
-            
-            // 补全SVG结束标签以便实时显示
-            let tempSvgContent = svgContent;
-            if (!tempSvgContent.endsWith('</svg>')) {
-              tempSvgContent += '</svg>';
+            const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
+            if (svgStartMatch) {
+              const svgStartIndex = svgStartMatch.index;
+              let svgWithMarkers = fullContent.substring(svgStartIndex);
+              
+              // 移除代码块标记
+              svgContent = svgWithMarkers.replace(/```(?:svg)?\s*/, '').replace(/```$/, '').trim();
+              
+              // 补全SVG结束标签以便实时显示
+              let tempSvgContent = svgContent;
+              if (!tempSvgContent.endsWith('</svg>')) {
+                tempSvgContent += '</svg>';
+              }
+              
+              // 实时更新SVG显示
+              this.svgViewer.innerHTML = tempSvgContent;
             }
-            
-            // 实时更新SVG显示
-            this.svgViewer.innerHTML = tempSvgContent;
           }
         } else {
           // 普通文本更新
@@ -341,17 +353,25 @@ class ProductCanvasApp {
   updateStreamingMessage(container, content) {
     const contentDiv = container.querySelector('.typing-cursor');
     if (contentDiv) {
-      contentDiv.textContent = content;
+      // 使用Markdown解析内容
+      if (typeof marked !== 'undefined') {
+        contentDiv.innerHTML = marked.parse(content);
+      } else {
+        contentDiv.textContent = content;
+      }
       Utils.scrollToBottom(this.chatHistory);
     }
   }
   
   // 更新流式消息内容并显示SVG占位符
   updateStreamingMessageWithPlaceholder(container, beforeText, svgId) {
+    // 使用Markdown解析beforeText
+    const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
+    
     container.innerHTML = `
       <div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
         <div>
-          ${Utils.escapeHtml(beforeText)}
+          ${parsedBeforeText}
           <div class="svg-drawing-placeholder" data-svg-id="${svgId}">
             <span class="svg-drawing-text">🎨 正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</span>
           </div>
@@ -375,14 +395,18 @@ class ProductCanvasApp {
   
   // 更新SVG后的消息内容
   updateStreamingMessageAfterSVG(container, beforeText, svgId, afterText) {
+    // 使用Markdown解析文本
+    const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
+    const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(afterText) : Utils.escapeHtml(afterText);
+    
     container.innerHTML = `
       <div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
         <div>
-          ${Utils.escapeHtml(beforeText)}
+          ${parsedBeforeText}
           <div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
             📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
           </div>
-          <div class="typing-cursor">${Utils.escapeHtml(afterText)}</div>
+          <div class="typing-cursor">${parsedAfterText}</div>
         </div>
       </div>
     `;
@@ -412,14 +436,18 @@ class ProductCanvasApp {
         afterText = fullContent.substring(svgEndIndex);
       }
       
+      // 使用Markdown解析文本
+      const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
+      const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(afterText) : Utils.escapeHtml(afterText);
+      
       // 更新容器内容为包含SVG的消息
       container.innerHTML = `
         <div>
-          ${Utils.escapeHtml(beforeText)}
+          ${parsedBeforeText}
           <div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
             📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
           </div>
-          ${Utils.escapeHtml(afterText)}
+          ${parsedAfterText}
         </div>
         
         <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -449,14 +477,18 @@ class ProductCanvasApp {
         
         this.viewSVG(newSvgId);
         
+        // 使用Markdown解析文本
+        const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText);
+        const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText);
+        
         // 更新容器内容为包含SVG的消息
         container.innerHTML = `
           <div>
-            ${Utils.escapeHtml(parsed.beforeText)}
+            ${parsedBeforeText}
             <div class="svg-placeholder-block" data-svg-id="${newSvgId}" onclick="app.viewSVG('${newSvgId}')">
               📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
             </div>
-            ${Utils.escapeHtml(parsed.afterText)}
+            ${parsedAfterText}
           </div>
           
           <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -471,10 +503,13 @@ class ProductCanvasApp {
           </div>
         `;
       } else {
+        // 使用Markdown解析内容
+        const parsedContent = typeof marked !== 'undefined' ? marked.parse(fullContent) : Utils.escapeHtml(fullContent);
+        
         // 更新容器内容为普通消息
         container.innerHTML = `
           <div class="mb-1">
-            ${Utils.escapeHtml(fullContent)}
+            ${parsedContent}
           </div>
           
           <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -629,7 +664,7 @@ class ProductCanvasApp {
       messageDiv.innerHTML = `
         <div class="chat-bubble-ai relative group" data-message-id="${message.id}">
           <div class="mb-1">
-            ${Utils.escapeHtml(message.content)}
+            ${typeof marked !== 'undefined' ? marked.parse(message.content) : Utils.escapeHtml(message.content)}
           </div>
           
           <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -656,11 +691,11 @@ class ProductCanvasApp {
     messageDiv.innerHTML = `
       <div class="chat-bubble-ai relative group" data-message-id="${message.id}">
         <div>
-          ${Utils.escapeHtml(parsed.beforeText)}
+          ${typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText)}
           <div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
             📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
           </div>
-          ${Utils.escapeHtml(parsed.afterText)}
+          ${typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText)}
         </div>
         
         <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">