对话框调试

css/style.css

@@ -33,6 +33,8 @@ body {
   color: #1f2937;
   padding: 10px 14px;
   max-width: 85%;
+  max-height: 300px;
+  overflow-y: auto;
   border: 2px solid #10b981;
   box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
 }
@@ -59,6 +61,57 @@ body {
   background: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
 }
 
+/* SVG绘制中状态占位符 */
+.svg-drawing-placeholder {
+  display: block;
+  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  color: white;
+  padding: 8px 14px;
+  margin: 8px 0;
+  border: 2px solid #000;
+  box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
+  font-weight: bold;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.svg-drawing-placeholder:hover {
+  transform: translateX(2px) translateY(-2px);
+  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
+  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+}
+
+/* 绘制中动画效果 */
+@keyframes drawing-pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.7; }
+  100% { opacity: 1; }
+}
+
+.svg-drawing-placeholder::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: drawing-shine 2s infinite;
+}
+
+@keyframes drawing-shine {
+  0% { left: -100%; }
+  100% { left: 100%; }
+}
+
+.svg-drawing-text {
+  animation: drawing-pulse 1.5s infinite;
+}
+
 /* 气泡操作按钮 */
 .bubble-action-btn {
   opacity: 0;
@@ -179,4 +232,15 @@ body {
   animation: blink 1s infinite;
   color: #667eea;
   font-weight: bold;
+}
+
+/* 清空历史按钮摇动动画 */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
+  20%, 40%, 60%, 80% { transform: translateX(2px); }
+}
+
+.clear-history-btn:hover iconify-icon {
+  animation: shake 0.5s ease-in-out;
 }

index.html

@@ -46,6 +46,17 @@
     
       <!-- 左侧对话面板 -->
       <div class="md:col-span-1 bg-white wild-border border-cyan-500 flex flex-col">
+        <!-- 对话历史顶部栏 -->
+        <div class="p-3 border-b-3 border-gray-300 bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <iconify-icon icon="ph:chats-circle-fill" class="text-2xl text-white"></iconify-icon>
+            <span class="font-black text-white">对话历史</span>
+          </div>
+          <button id="clear-history-btn" class="clear-history-btn bg-red-500 text-white px-3 py-1 border-2 border-black hover:bg-red-600 transition-all flex items-center gap-1 font-bold" title="清空对话历史">
+            <iconify-icon icon="ph:trash-bold" class="text-lg"></iconify-icon>
+            <span class="text-sm">清空</span>
+          </button>
+        </div>
         <!-- 对话历史区 -->
         <div id="chat-history" class="flex-1 p-4 overflow-y-auto space-y-3">
           <!-- 欢迎消息 -->
@@ -58,21 +69,16 @@
         
         <!-- 输入区 -->
         <div class="p-3 border-t-3 border-gray-300 bg-yellow-50">
-          <div class="relative flex items-start gap-2">
+          <div class="relative flex items-center gap-2">
             <textarea
               id="chat-input"
               placeholder="输入您的想法，按Enter发送，Shift+Enter换行..."
               class="flex-1 auto-resize-input border-2 border-gray-800 focus:border-cyan-500 focus:outline-none transition-colors font-medium"
               rows="1"
             ></textarea>
-            <div class="flex flex-col gap-2">
+            <button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
-              <button id="clear-button" class="clear-btn text-red-500 hover:text-red-600 transition-colors p-2 hover:scale-110 transform duration-200" title="清空当前对话">
+              <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
-                <iconify-icon icon="ph:trash-bold" class="text-2xl"></iconify-icon>
+            </button>
-              </button>
-              <button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
-                <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
-              </button>
-            </div>
           </div>
         </div>
       </div>

js/app.js

@@ -27,7 +27,7 @@ class ProductCanvasApp {
     // 对话相关
     this.chatInput = document.getElementById('chat-input');
     this.sendButton = document.getElementById('send-button');
-    this.clearButton = document.getElementById('clear-button');
+    this.clearHistoryBtn = document.getElementById('clear-history-btn');
     this.chatHistory = document.getElementById('chat-history');
     
     // SVG显示
@@ -60,7 +60,7 @@ class ProductCanvasApp {
     
     // 发送消息
     this.sendButton.addEventListener('click', () => this.sendMessage());
-    this.clearButton.addEventListener('click', () => this.clearCurrentConversation());
+    this.clearHistoryBtn.addEventListener('click', () => this.clearCurrentConversation());
     
     // 输入框事件
     this.chatInput.addEventListener('keypress', (e) => {
@@ -206,18 +206,111 @@ class ProductCanvasApp {
     Utils.scrollToBottom(this.chatHistory);
     
     let fullContent = '';
+    let svgStarted = false;
+    let svgContent = '';
+    let svgId = null;
+    let beforeText = '';
     
     const onChunk = (chunk) => {
       if (chunk.choices && chunk.choices[0] && chunk.choices[0].delta) {
         const content = chunk.choices[0].delta.content || '';
         fullContent += content;
-        this.updateStreamingMessage(messageContainer, fullContent);
+        
+        // 检测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>
+              </div>
+            </div>
+          `;
+        }
+        
+        // 如果SVG已经开始，收集SVG内容
+        if (svgStarted) {
+          // 检查是否有SVG结束标记
+          if (fullContent.includes('</svg>')) {
+            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>';
+            }
+            
+            // 实时显示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) {
+            // 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>';
+            }
+            
+            // 实时更新SVG显示
+            this.svgViewer.innerHTML = tempSvgContent;
+          }
+        } else {
+          // 普通文本更新
+          this.updateStreamingMessage(messageContainer, fullContent);
+        }
       }
     };
     
     const onComplete = () => {
       // 流式接收完成，处理完整消息
-      this.finalizeStreamingMessage(messageId, fullContent);
+      this.finalizeStreamingMessage(messageId, fullContent, svgId, beforeText);
       
       this.isProcessing = false;
       this.sendButton.disabled = false;
@@ -252,14 +345,55 @@ class ProductCanvasApp {
       Utils.scrollToBottom(this.chatHistory);
     }
   }
+  
+  // 更新流式消息内容并显示SVG占位符
+  updateStreamingMessageWithPlaceholder(container, beforeText, svgId) {
+    container.innerHTML = `
+      <div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
+        <div>
+          ${Utils.escapeHtml(beforeText)}
+          <div class="svg-drawing-placeholder" data-svg-id="${svgId}">
+            <span class="svg-drawing-text">🎨 正在绘制${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}...</span>
+          </div>
+          <div class="typing-cursor"></div>
+        </div>
+      </div>
+    `;
+    Utils.scrollToBottom(this.chatHistory);
+  }
+  
+  // 更新占位符为可点击状态
+  updatePlaceholderToClickable(container, svgId) {
+    const placeholder = container.querySelector('.svg-drawing-placeholder');
+    if (placeholder) {
+      placeholder.classList.remove('svg-drawing-placeholder');
+      placeholder.classList.add('svg-placeholder-block');
+      placeholder.innerHTML = `📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG`;
+      placeholder.setAttribute('onclick', `app.viewSVG('${svgId}')`);
+    }
+  }
+  
+  // 更新SVG后的消息内容
+  updateStreamingMessageAfterSVG(container, beforeText, svgId, afterText) {
+    container.innerHTML = `
+      <div class="chat-bubble-ai relative group streaming-text" data-message-id="${container.dataset.messageId}">
+        <div>
+          ${Utils.escapeHtml(beforeText)}
+          <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>
+      </div>
+    `;
+    Utils.scrollToBottom(this.chatHistory);
+  }
 
   // 完成流式消息
-  finalizeStreamingMessage(messageId, fullContent) {
+  finalizeStreamingMessage(messageId, fullContent, svgId = null, beforeText = '') {
     const container = document.querySelector(`[data-message-id="${messageId}"]`);
     if (!container) return;
     
-    const parsed = Utils.parseSVGResponse(fullContent);
-    
     const message = {
       id: messageId,
       type: 'ai',
@@ -269,26 +403,23 @@ class ProductCanvasApp {
     
     this.conversationHistory[this.currentMode].push(message);
     
-    // 如果包含SVG，存储SVG内容
+    // 如果已经有SVG ID（从流式处理中获得），直接使用
-    if (parsed.svgContent) {
+    if (svgId && this.svgStorage[this.currentMode][svgId]) {
-      const svgId = Utils.generateId('svg');
+      // 提取SVG后的文本
-      this.svgStorage[this.currentMode][svgId] = {
+      let afterText = '';
-        content: parsed.svgContent,
+      if (fullContent.includes('</svg>')) {
-        messageId: messageId,
+        const svgEndIndex = fullContent.indexOf('</svg>') + 6;
-        mode: this.currentMode,
+        afterText = fullContent.substring(svgEndIndex);
-        timestamp: new Date().toISOString()
+      }
-      };
-      
-      this.viewSVG(svgId);
       
       // 更新容器内容为包含SVG的消息
       container.innerHTML = `
         <div>
-          ${Utils.escapeHtml(parsed.beforeText)}
+          ${Utils.escapeHtml(beforeText)}
           <div class="svg-placeholder-block" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
             📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
           </div>
-          ${Utils.escapeHtml(parsed.afterText)}
+          ${Utils.escapeHtml(afterText)}
         </div>
         
         <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
@@ -303,28 +434,68 @@ class ProductCanvasApp {
         </div>
       `;
     } else {
-      // 更新容器内容为普通消息
+      // 使用原有的解析方法作为后备
-      container.innerHTML = `
+      const parsed = Utils.parseSVGResponse(fullContent);
-        <div class="mb-1">
+      
-          ${Utils.escapeHtml(fullContent)}
+      // 如果包含SVG，存储SVG内容
-        </div>
+      if (parsed.svgContent) {
+        const newSvgId = Utils.generateId('svg');
+        this.svgStorage[this.currentMode][newSvgId] = {
+          content: parsed.svgContent,
+          messageId: messageId,
+          mode: this.currentMode,
+          timestamp: new Date().toISOString()
+        };
         
-        <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
+        this.viewSVG(newSvgId);
-          <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
+        
-            <iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
+        // 更新容器内容为包含SVG的消息
-            <span>退回</span>
+        container.innerHTML = `
-          </button>
+          <div>
-          <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
+            ${Utils.escapeHtml(parsed.beforeText)}
-            <iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
+            <div class="svg-placeholder-block" data-svg-id="${newSvgId}" onclick="app.viewSVG('${newSvgId}')">
-            <span>重新生成</span>
+              📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-          </button>
+            </div>
-        </div>
+            ${Utils.escapeHtml(parsed.afterText)}
-      `;
+          </div>
+          
+          <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
+            <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
+              <iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
+              <span>退回</span>
+            </button>
+            <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
+              <iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
+              <span>重新生成</span>
+            </button>
+          </div>
+        `;
+      } else {
+        // 更新容器内容为普通消息
+        container.innerHTML = `
+          <div class="mb-1">
+            ${Utils.escapeHtml(fullContent)}
+          </div>
+          
+          <div class="flex gap-2 mt-2 pt-2 border-t border-gray-200">
+            <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" onclick="app.rollbackToMessage('${messageId}')">
+              <iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
+              <span>退回</span>
+            </button>
+            <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" onclick="app.regenerateMessage('${messageId}')">
+              <iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
+              <span>重新生成</span>
+            </button>
+          </div>
+        `;
+      }
     }
     
     // 保存数据
-    Utils.storage.set(`conversationHistory`, this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set(`svgStorage`, this.svgStorage);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
+    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
+    Utils.storage.set('swotSVGs', this.svgStorage.swot);
   }
 
   // 清空当前对话
@@ -351,8 +522,10 @@ class ProductCanvasApp {
     }
     
     // 保存数据
-    Utils.storage.set('conversationHistory', this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('svgStorage', this.svgStorage);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
+    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
+    Utils.storage.set('swotSVGs', this.svgStorage.swot);
     
     // 重新渲染对话历史
     this.renderConversationHistory();
@@ -371,7 +544,8 @@ class ProductCanvasApp {
     this.conversationHistory[this.currentMode].push(message);
     this.renderMessage(message);
     Utils.scrollToBottom(this.chatHistory);
-    Utils.storage.set('conversationHistory', this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
   }
 
   // 添加AI消息（非流式，保留用于错误情况）
@@ -398,7 +572,8 @@ class ProductCanvasApp {
         timestamp: new Date().toISOString()
       };
       
-      Utils.storage.set('svgStorage', this.svgStorage);
+      Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
+      Utils.storage.set('swotSVGs', this.svgStorage.swot);
       this.viewSVG(svgId);
       
       // 渲染包含SVG占位符的消息
@@ -409,7 +584,8 @@ class ProductCanvasApp {
     }
     
     Utils.scrollToBottom(this.chatHistory);
-    Utils.storage.set('conversationHistory', this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
   }
 
   // 添加错误消息
@@ -425,7 +601,8 @@ class ProductCanvasApp {
     this.conversationHistory[this.currentMode].push(message);
     this.renderMessage(message);
     Utils.scrollToBottom(this.chatHistory);
-    Utils.storage.set('conversationHistory', this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
   }
 
   // 渲染消息
@@ -506,13 +683,17 @@ class ProductCanvasApp {
   renderConversationHistory() {
     this.chatHistory.innerHTML = '';
     
-    for (const message of this.conversationHistory) {
+    // 获取当前模式的对话历史
+    const currentHistory = this.conversationHistory[this.currentMode] || [];
+    
+    for (const message of currentHistory) {
       if (message.type === 'ai') {
         const parsed = Utils.parseSVGResponse(message.content);
         
         // 查找对应的SVG
         let svgId = null;
-        for (const [id, svg] of Object.entries(this.svgStorage)) {
+        const currentSvgStorage = this.svgStorage[this.currentMode] || {};
+        for (const [id, svg] of Object.entries(currentSvgStorage)) {
           if (svg.messageId === message.id) {
             svgId = id;
             break;
@@ -532,29 +713,29 @@ class ProductCanvasApp {
 
   // 显示SVG
   viewSVG(svgId) {
-    if (!this.svgStorage[svgId]) {
+    if (!this.svgStorage[this.currentMode][svgId]) {
       console.error('SVG not found:', svgId);
       return;
     }
     
     this.currentSvgId = svgId;
-    const svgContent = this.svgStorage[svgId].content;
+    const svgContent = this.svgStorage[this.currentMode][svgId].content;
     this.svgViewer.innerHTML = svgContent;
   }
 
   // 退回到指定消息
   rollbackToMessage(messageId) {
-    const messageIndex = this.conversationHistory.findIndex(msg => msg.id === messageId);
+    const messageIndex = this.conversationHistory[this.currentMode].findIndex(msg => msg.id === messageId);
     if (messageIndex === -1) return;
     
     // 删除指定消息之后的所有消息
-    const messagesToRemove = this.conversationHistory.slice(messageIndex + 1);
+    const messagesToRemove = this.conversationHistory[this.currentMode].slice(messageIndex + 1);
     
     // 删除相关的SVG
     for (const message of messagesToRemove) {
-      for (const [svgId, svg] of Object.entries(this.svgStorage)) {
+      for (const [svgId, svg] of Object.entries(this.svgStorage[this.currentMode])) {
         if (svg.messageId === message.id) {
-          delete this.svgStorage[svgId];
+          delete this.svgStorage[this.currentMode][svgId];
           
           // 如果当前显示的是被删除的SVG，清空显示
           if (this.currentSvgId === svgId) {
@@ -571,11 +752,13 @@ class ProductCanvasApp {
     }
     
     // 更新对话历史
-    this.conversationHistory = this.conversationHistory.slice(0, messageIndex + 1);
+    this.conversationHistory[this.currentMode] = this.conversationHistory[this.currentMode].slice(0, messageIndex + 1);
     
     // 保存数据
-    Utils.storage.set('conversationHistory', this.conversationHistory);
+    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('svgStorage', this.svgStorage);
+    Utils.storage.set('swotHistory', this.conversationHistory.swot);
+    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
+    Utils.storage.set('swotSVGs', this.svgStorage.swot);
     
     // 重新渲染对话历史
     this.renderConversationHistory();
@@ -591,7 +774,7 @@ class ProductCanvasApp {
     
     try {
       // 重新生成响应
-      const response = await window.apiClient.regenerateResponse(messageId, this.conversationHistory);
+      const response = await window.apiClient.regenerateResponse(messageId, this.conversationHistory[this.currentMode]);
       
       // 退回到指定消息
       this.rollbackToMessage(messageId);
@@ -616,7 +799,7 @@ class ProductCanvasApp {
       return;
     }
     
-    const svgContent = this.svgStorage[this.currentSvgId].content;
+    const svgContent = this.svgStorage[this.currentMode][this.currentSvgId].content;
     const filename = `${this.currentMode}-${Utils.formatDateTime().replace(/[/:]/g, '-')}.svg`;
     Utils.downloadFile(svgContent, filename, 'image/svg+xml');
   }
@@ -640,7 +823,7 @@ class ProductCanvasApp {
       return;
     }
     
-    const svgContent = this.svgStorage[this.currentSvgId].content;
+    const svgContent = this.svgStorage[this.currentMode][this.currentSvgId].content;
     
     // 创建代码查看模态窗
     const modal = document.createElement('div');