修改了提示词

js/app.js

@@ -14,22 +14,26 @@ if (typeof marked !== 'undefined') {
 }
 
 class ProductCanvasApp {
-  constructor() {
+  constructor() {
-    this.currentMode = 'canvas'; // 'canvas' 或 'swot'
+    this.currentMode = 'canvas'; // 'canvas' 或 'swot'
-    this.svgStorage = {};
+    this.svgStorage = {};
-    this.currentSvgId = null;
+    this.currentSvgId = null;
-    this.conversationHistory = {};
+    this.conversationHistory = {};
     this.isProcessing = false;
     this.currentStreamingMessage = null;
     
     this.initElements();
     this.initEventListeners();
     this.loadSavedData();
-    this.updateModeUI();
+    this.updateModeUI();
-  }
+  }
-
+
-  // 初始化DOM元素引用
+  getModeDisplayName(mode = this.currentMode) {
-  initElements() {
+    return mode === 'canvas' ? '产品画布' : 'SWOT分析';
+  }
+
+  // 初始化DOM元素引用
+  initElements() {
     // 模式切换按钮
     this.canvasBtn = document.getElementById('canvas-mode-btn');
     this.swotBtn = document.getElementById('swot-mode-btn');
@@ -117,54 +121,97 @@ class ProductCanvasApp {
       canvas: savedCanvasHistory,
       swot: savedSwotHistory
     };
-    this.renderConversationHistory();
+    this.renderConversationHistory();
-    
+    
-    // 加载SVG存储（按模式分别存储）
+    // 加载SVG存储（按模式分别存储）
-    const savedCanvasSVGs = Utils.storage.get('canvasSVGs', {});
+    const savedCanvasSVGs = Utils.storage.get('canvasSVGs', {});
-    const savedSwotSVGs = Utils.storage.get('swotSVGs', {});
+    const savedSwotSVGs = Utils.storage.get('swotSVGs', {});
     this.svgStorage = {
       canvas: savedCanvasSVGs,
-      swot: savedSwotSVGs
+      swot: savedSwotSVGs
-    };
+    };
-    
+
-    // 加载API配置
+    this.renderSvgViewerForMode();
+    
+    // 加载API配置
     const apiConfig = window.apiClient.getConfig();
     this.apiUrlInput.value = apiConfig.url || '';
     this.apiKeyInput.value = apiConfig.key || '';
     this.apiModelInput.value = apiConfig.model || '';
   }
 
-  // 切换模式
+  // 切换模式
-  switchMode(mode) {
+  switchMode(mode) {
-    if (this.currentMode === mode) return;
+    if (this.currentMode === mode) return;
-    
+    
-    this.currentMode = mode;
+    this.currentMode = mode;
-    Utils.storage.set('currentMode', mode);
+    Utils.storage.set('currentMode', mode);
-    this.updateModeUI();
+    this.currentSvgId = null;
-  }
+    this.currentMode = mode;
+    Utils.storage.set('currentMode', mode);
+    this.updateModeUI();
+    this.renderConversationHistory();
+    this.renderSvgViewerForMode();
+  }
 
   // 更新模式UI
-  updateModeUI() {
+  updateModeUI() {
-    if (this.currentMode === 'canvas') {
+    if (this.currentMode === 'canvas') {
-      this.canvasBtn.classList.add('mode-btn-active');
+      this.canvasBtn.classList.add('mode-btn-active');
       this.canvasBtn.classList.remove('mode-btn-inactive');
       this.swotBtn.classList.remove('mode-btn-active');
       this.swotBtn.classList.add('mode-btn-inactive');
-      this.pageTitle.textContent = '产品画布';
+      this.pageTitle.textContent = '产品画布';
-      if (!this.currentSvgId) {
+      if (!this.currentSvgId) {
-        this.placeholderText.textContent = '生成的产品画布将在此处显示';
+        this.placeholderText.textContent = '生成的产品画布将在此处显示';
-      }
+      }
-    } else {
+    } else {
       this.swotBtn.classList.add('mode-btn-active');
       this.swotBtn.classList.remove('mode-btn-inactive');
       this.canvasBtn.classList.remove('mode-btn-active');
       this.canvasBtn.classList.add('mode-btn-inactive');
-      this.pageTitle.textContent = 'SWOT分析';
+      this.pageTitle.textContent = 'SWOT分析';
-      if (!this.currentSvgId) {
+      if (!this.currentSvgId) {
-        this.placeholderText.textContent = '生成的SWOT分析将在此处显示';
+        this.placeholderText.textContent = '生成的SWOT分析将在此处显示';
-      }
+      }
-    }
+    }
-  }
+  }
+
+  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() {
@@ -723,37 +770,69 @@ class ProductCanvasApp {
     this.chatHistory.appendChild(messageDiv);
   }
 
-  // 渲染对话历史
+  // 渲染对话历史
-  renderConversationHistory() {
+  renderConversationHistory() {
-    this.chatHistory.innerHTML = '';
+    this.chatHistory.innerHTML = '';
-    
+    
-    // 获取当前模式的对话历史
+    // 获取当前模式的对话历史
-    const currentHistory = this.conversationHistory[this.currentMode] || [];
+    const currentHistory = this.conversationHistory[this.currentMode] || [];
-    
+    const currentSvgStorage = this.svgStorage[this.currentMode] || {};
-    for (const message of currentHistory) {
+    let hasStorageUpdate = false;
-      if (message.type === 'ai') {
+    let hasHistoryUpdate = false;
-        const parsed = Utils.parseSVGResponse(message.content);
+    
-        
+    for (const message of currentHistory) {
-        // 查找对应的SVG
+      if (message.type === 'ai') {
-        let svgId = null;
+        const parsed = Utils.parseSVGResponse(message.content);
-        const currentSvgStorage = this.svgStorage[this.currentMode] || {};
+        
-        for (const [id, svg] of Object.entries(currentSvgStorage)) {
+        // 查找或补建对应的SVG
-          if (svg.messageId === message.id) {
+        let svgId = null;
-            svgId = id;
+        for (const [id, svg] of Object.entries(currentSvgStorage)) {
-            break;
+          if (svg.messageId === message.id) {
-          }
+            svgId = id;
-        }
+            break;
-        
+          }
-        if (svgId && parsed.svgContent) {
+        }
-          this.renderMessageWithSVG(message, parsed, svgId);
+
-        } else {
+        const hasSvgContent = parsed.svgContent && parsed.svgContent.includes('<svg');
-          this.renderMessage(message);
+        if (hasSvgContent) {
-        }
+          if (!svgId) {
-      } else {
+            const normalizedSvg = parsed.svgContent.trim().endsWith('</svg>')
-        this.renderMessage(message);
+              ? 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);
+          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
   viewSVG(svgId) {

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>