修改了提示词

js/app.js

@@ -28,6 +28,10 @@ class ProductCanvasApp {
     this.updateModeUI();
   }
 
+  getModeDisplayName(mode = this.currentMode) {
+    return mode === 'canvas' ? '产品画布' : 'SWOT分析';
+  }
+
   // 初始化DOM元素引用
   initElements() {
     // 模式切换按钮
@@ -127,6 +131,8 @@ class ProductCanvasApp {
       swot: savedSwotSVGs
     };
 
+    this.renderSvgViewerForMode();
+    
     // 加载API配置
     const apiConfig = window.apiClient.getConfig();
     this.apiUrlInput.value = apiConfig.url || '';
@@ -138,9 +144,14 @@ class ProductCanvasApp {
   switchMode(mode) {
     if (this.currentMode === mode) return;
     
+    this.currentMode = mode;
+    Utils.storage.set('currentMode', mode);
+    this.currentSvgId = null;
     this.currentMode = mode;
     Utils.storage.set('currentMode', mode);
     this.updateModeUI();
+    this.renderConversationHistory();
+    this.renderSvgViewerForMode();
   }
 
   // 更新模式UI
@@ -166,6 +177,42 @@ class ProductCanvasApp {
     }
   }
 
+  showSvgPlaceholder() {
+    const label = this.getModeDisplayName();
+    this.currentSvgId = null;
+    this.svgViewer.innerHTML = `
+      <div id="svg-placeholder" class="text-center text-gray-400">
+        <iconify-icon icon="ph:image-square" class="text-6xl mx-auto text-purple-400"></iconify-icon>
+        <p class="mt-2 font-bold" id="placeholder-text">生成的${label}将在此处显示</p>
+      </div>
+    `;
+  }
+
+  renderSvgViewerForMode() {
+    const svgStore = this.svgStorage[this.currentMode] || {};
+    const history = this.conversationHistory[this.currentMode] || [];
+
+    let latestSvgId = null;
+    for (let i = history.length - 1; i >= 0; i--) {
+      const message = history[i];
+      if (message.type !== 'ai') continue;
+      for (const [svgId, svg] of Object.entries(svgStore)) {
+        if (svg.messageId === message.id) {
+          latestSvgId = svgId;
+          break;
+        }
+      }
+      if (latestSvgId) break;
+    }
+
+    if (latestSvgId && svgStore[latestSvgId]) {
+      this.currentSvgId = latestSvgId;
+      this.svgViewer.innerHTML = svgStore[latestSvgId].content;
+    } else {
+      this.showSvgPlaceholder();
+    }
+  }
+
   // 发送消息
   async sendMessage() {
     const message = this.chatInput.value.trim();
@@ -729,14 +776,16 @@ class ProductCanvasApp {
     
     // 获取当前模式的对话历史
     const currentHistory = this.conversationHistory[this.currentMode] || [];
+    const currentSvgStorage = this.svgStorage[this.currentMode] || {};
+    let hasStorageUpdate = false;
+    let hasHistoryUpdate = false;
     
     for (const message of currentHistory) {
       if (message.type === 'ai') {
         const parsed = Utils.parseSVGResponse(message.content);
         
-        // 查找对应的SVG
+        // 查找或补建对应的SVG
         let svgId = null;
-        const currentSvgStorage = this.svgStorage[this.currentMode] || {};
         for (const [id, svg] of Object.entries(currentSvgStorage)) {
           if (svg.messageId === message.id) {
             svgId = id;
@@ -744,15 +793,45 @@ class ProductCanvasApp {
           }
         }
 
-        if (svgId && parsed.svgContent) {
+        const hasSvgContent = parsed.svgContent && parsed.svgContent.includes('<svg');
+        if (hasSvgContent) {
+          if (!svgId) {
+            const normalizedSvg = parsed.svgContent.trim().endsWith('</svg>')
+              ? parsed.svgContent.trim()
+              : `${parsed.svgContent.trim()}\n</svg>`;
+            svgId = Utils.generateId('svg');
+            currentSvgStorage[svgId] = {
+              content: normalizedSvg,
+              messageId: message.id,
+              mode: this.currentMode,
+              timestamp: message.timestamp || new Date().toISOString()
+            };
+            parsed.svgContent = normalizedSvg;
+            message.content = this.buildSVGMessageContent(parsed.beforeText, normalizedSvg, parsed.afterText);
+            hasStorageUpdate = true;
+            hasHistoryUpdate = true;
+          }
           this.renderMessageWithSVG(message, parsed, svgId);
-        } else {
-          this.renderMessage(message);
+          continue;
         }
+        
+        this.renderMessage(message);
       } else {
         this.renderMessage(message);
       }
     }
+
+    if (hasStorageUpdate) {
+      this.svgStorage[this.currentMode] = currentSvgStorage;
+      Utils.storage.set('canvasSVGs', this.svgStorage.canvas || {});
+      Utils.storage.set('swotSVGs', this.svgStorage.swot || {});
+    }
+    if (hasHistoryUpdate) {
+      Utils.storage.set('canvasHistory', this.conversationHistory.canvas || []);
+      Utils.storage.set('swotHistory', this.conversationHistory.swot || []);
+    }
+
+    Utils.scrollToBottom(this.chatHistory);
   }
 
   // 显示SVG

prompts/canvas-prompt.txt

@@ -3,7 +3,11 @@
 
 
 请用中文回复，并在回复中包含SVG格式的产品画布图表。
-产品精益画布助手，下面是SVG画布的模板，注意使用markdown格式回复
+产品精益画布助手，下面是SVG画布的模板，注意使用markdown格式回复，
+
+- 解决方案、门槛优势、关键指标、渠道 文字不要超过7行
+- 成本分析、收入分析 文字不要超过6行
+
 ```
 <svg width="900" height="550" viewBox="0 0 900 550" xmlns="http://www.w3.org/2000/svg" font-family="'PingFang SC', 'Microsoft YaHei', sans-serif">
   <defs>
@@ -71,12 +75,6 @@
       <g transform="translate(75, 20)">
         <text class="title" fill="#f57c00">独特卖点</text>
       </g>
-      <g transform="translate(75, 60)">
-        <text class="desc" style="font-size: 14px; font-weight: bold;" fill="#f57c00">
-          <tspan x="0" dy="0">微信扫一扫，</tspan>
-          <tspan x="0" dy="20">老少皆宜智能回收</tspan>
-        </text>
-      </g>
       <text x="10" y="120" class="content-bold">对用户价值:</text>
       <text x="10" y="132" class="content">• 扫码即用，操作超简单</text>
       <text x="10" y="144" class="content">• 价格透明，立即到账</text>