diff --git a/index.html b/index.html
index 6ed2897..ecd284a 100644
--- a/index.html
+++ b/index.html
@@ -29,17 +29,9 @@
           <iconify-icon icon="ph:gear-six-fill" class="text-2xl"></iconify-icon>
         </button>
         
-        <span class="text-white font-bold text-sm">点击切换模式</span>
+        <span class="text-white font-bold text-sm">点击切换模块</span>
         <iconify-icon icon="ph:hand-pointing-fill" class="text-2xl text-yellow-300 wave-hand"></iconify-icon>
-        
-        <button id="canvas-mode-btn" class="mode-btn-active bg-white text-orange-600 px-4 py-2 font-bold border-2 border-black hover:bg-orange-50 transition-all duration-200">
-          <iconify-icon icon="ph:pen-nib-duotone" class="align-middle mr-1"></iconify-icon>
-          产品画布
-        </button>
-        <button id="swot-mode-btn" class="mode-btn-inactive bg-white text-purple-600 px-4 py-2 font-bold border-2 border-black hover:bg-purple-50 transition-all duration-200">
-          <iconify-icon icon="ph:chart-bar-duotone" class="align-middle mr-1"></iconify-icon>
-          SWOT分析
-        </button>
+        <div id="module-button-group" class="flex items-center gap-2"></div>
       </div>
     </header>
 
@@ -206,6 +198,15 @@
 
     <!-- 引入JavaScript文件 -->
     <script src="js/utils.js"></script>
+    <script src="js/services/storage-service.js"></script>
+    <script src="js/services/conversation-service.js"></script>
+    <script src="js/core/module-registry.js"></script>
+    <script src="js/modules/product-canvas.js"></script>
+    <script src="js/modules/swot.js"></script>
+    <script src="js/modules/echarts.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+    <script src="js/core/module-runtime.js"></script>
+    <script src="js/core/app-shell.js"></script>
     <script src="js/apiclient.js"></script>
     <script src="js/app.js"></script>
 </body>
diff --git a/js/apiclient.js b/js/apiclient.js
index a7db5f9..81b8edf 100644
--- a/js/apiclient.js
+++ b/js/apiclient.js
@@ -9,12 +9,22 @@ class APIClient {
       key: '',
       model: ''
     };
-    this.prompts = {
-      canvas: '',
-      swot: ''
+    this.promptMap = {};
+    this.promptFiles = {
+      canvas: 'prompts/canvas-prompt.txt',
+      swot: 'prompts/swot-prompt.txt',
+      echarts: 'prompts/echarts-prompt.txt'
+    };
+    this.promptFallbacks = {
+      canvas: '你是一个专业的产品战略分析师，擅长创建产品画布。',
+      swot: '你是一个专业的商业战略分析师，擅长进行SWOT分析。',
+      echarts:
+        '你是一个资深的数据可视化专家，精通将自然语言需求转化为 ECharts 配置对象，请输出结构化 JSON option。',
+      default:
+        '你是一个可靠的智能助手，请直接回答用户的问题并提供结构化输出。'
     };
     this.loadConfig();
-    this.loadPrompts();
+    this.preloadPrompts(Object.keys(this.promptFiles));
   }
 
   // 加载API配置
@@ -25,21 +35,45 @@ class APIClient {
     }
   }
 
-  // 加载系统提示词
-  async loadPrompts() {
+  preloadPrompts(keys = []) {
+    keys.forEach((key) => {
+      this.ensurePrompt(key).catch((error) =>
+        console.warn(`预加载提示词 ${key} 失败:`, error)
+      );
+    });
+  }
+
+  async ensurePrompt(promptKey) {
+    if (!promptKey) return '';
+    if (this.promptMap[promptKey]) {
+      return this.promptMap[promptKey];
+    }
+    const prompt = await this.fetchPrompt(promptKey);
+    this.promptMap[promptKey] = prompt;
+    return prompt;
+  }
+
+  async fetchPrompt(promptKey) {
+    const filePath = this.promptFiles[promptKey];
+    const fallback =
+      this.promptFallbacks[promptKey] ||
+      '你是一个可靠的智能助手，请直接回答用户问题。';
+
+    if (!filePath) {
+      console.warn(`未找到提示词 ${promptKey} 对应的文件配置`);
+      return fallback;
+    }
+
     try {
-      // 加载产品画布提示词
-      const canvasResponse = await fetch('prompts/canvas-prompt.txt');
-      this.prompts.canvas = await canvasResponse.text();
-      
-      // 加载SWOT分析提示词
-      const swotResponse = await fetch('prompts/swot-prompt.txt');
-      this.prompts.swot = await swotResponse.text();
+      const response = await fetch(filePath);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const text = await response.text();
+      return text.trim() || fallback;
     } catch (error) {
-      console.error('加载提示词失败:', error);
-      // 使用默认提示词
-      this.prompts.canvas = '你是一个专业的产品战略分析师，擅长创建产品画布。';
-      this.prompts.swot = '你是一个专业的商业战略分析师，擅长进行SWOT分析。';
+      console.warn(`加载提示词 ${promptKey} 失败:`, error);
+      return fallback;
     }
   }
 
@@ -76,6 +110,49 @@ class APIClient {
     }
   }
 
+  async buildMessagesForModule(manifest, userMessage, contextMessages = []) {
+    const prompt =
+      (manifest && manifest.promptKey
+        ? await this.ensurePrompt(manifest.promptKey)
+        : null) || this.promptFallbacks.default;
+
+    return [
+      { role: 'system', content: prompt },
+      ...contextMessages,
+      { role: 'user', content: userMessage }
+    ];
+  }
+
+  async generateModuleCompletion(
+    manifest,
+    userMessage,
+    contextMessages = [],
+    options = {}
+  ) {
+    const messages = await this.buildMessagesForModule(
+      manifest,
+      userMessage,
+      contextMessages
+    );
+    return this.sendChatMessage(messages, options);
+  }
+
+  async generateModuleStream(
+    manifest,
+    userMessage,
+    contextMessages = [],
+    onChunk,
+    onComplete,
+    options = {}
+  ) {
+    const messages = await this.buildMessagesForModule(
+      manifest,
+      userMessage,
+      contextMessages
+    );
+    return this.sendChatMessageStream(messages, options, onChunk, onComplete);
+  }
+
   // 发送聊天请求
   async sendChatMessage(messages, options = {}) {
     if (!this.isConfigValid()) {
@@ -127,46 +204,46 @@ class APIClient {
 
   // 生成产品画布的专用方法
   async generateProductCanvas(userRequest, context = []) {
-    const messages = [
-      { role: 'system', content: this.prompts.canvas },
-      ...context,
-      { role: 'user', content: userRequest }
-    ];
-
-    return await this.sendChatMessage(messages, { maxTokens: 18000 });
+    return this.generateModuleCompletion(
+      { promptKey: 'canvas' },
+      userRequest,
+      context,
+      { maxTokens: 18000 }
+    );
   }
 
   // 生成SWOT分析的专用方法
   async generateSWOTAnalysis(userRequest, context = []) {
-    const messages = [
-      { role: 'system', content: this.prompts.swot },
-      ...context,
-      { role: 'user', content: userRequest }
-    ];
-
-    return await this.sendChatMessage(messages, { maxTokens: 18000 });
+    return this.generateModuleCompletion(
+      { promptKey: 'swot' },
+      userRequest,
+      context,
+      { maxTokens: 18000 }
+    );
   }
 
   // 流式生成产品画布
   async generateProductCanvasStream(userRequest, context = [], onChunk, onComplete) {
-    const messages = [
-      { role: 'system', content: this.prompts.canvas },
-      ...context,
-      { role: 'user', content: userRequest }
-    ];
-
-    return this.sendChatMessageStream(messages, { maxTokens: 13000 }, onChunk, onComplete);
+    return this.generateModuleStream(
+      { promptKey: 'canvas' },
+      userRequest,
+      context,
+      onChunk,
+      onComplete,
+      { maxTokens: 13000 }
+    );
   }
 
   // 流式生成SWOT分析
   async generateSWOTAnalysisStream(userRequest, context = [], onChunk, onComplete) {
-    const messages = [
-      { role: 'system', content: this.prompts.swot },
-      ...context,
-      { role: 'user', content: userRequest }
-    ];
-
-    return this.sendChatMessageStream(messages, { maxTokens: 13000 }, onChunk, onComplete);
+    return this.generateModuleStream(
+      { promptKey: 'swot' },
+      userRequest,
+      context,
+      onChunk,
+      onComplete,
+      { maxTokens: 13000 }
+    );
   }
 
   // 流式发送聊天请求
@@ -233,7 +310,8 @@ class APIClient {
       throw new Error('没有找到用户消息');
     }
 
-    const mode = Utils.storage.get('currentMode', 'canvas');
+    const activeModuleId = Utils.storage.get('tool-engine:activeModuleId', 'product-canvas');
+    const mode = activeModuleId === 'swot' ? 'swot' : 'canvas';
     
     if (mode === 'canvas') {
       return await this.generateProductCanvas(lastUserMessage.content, contextMessages.slice(0, -1));
@@ -296,4 +374,4 @@ class APIClient {
 }
 
 // 创建全局API客户端实例
-window.apiClient = new APIClient();
\ No newline at end of file
+window.apiClient = new APIClient();
diff --git a/js/app.js b/js/app.js
index 14d5a73..43ee46a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,1503 +1,27 @@
-/**
- * 应用核心逻辑
- */
+(function () {
+  'use strict';
 
-// 配置Markdown解析器
-if (typeof marked !== 'undefined') {
-  marked.setOptions({
-    breaks: true, // 支持换行
-    gfm: true, // 支持GitHub风格的Markdown
-    sanitize: false, // 允许HTML（因为我们自己处理SVG）
-    smartLists: true, // 智能列表
-    smartypants: true // 智能标点
+  document.addEventListener('DOMContentLoaded', () => {
+    if (!window.apiClient) {
+      console.error('APIClient 未初始化，无法启动应用');
+      return;
+    }
+
+    try {
+      const storageService = new StorageService('tool-engine');
+      const conversationService = new ConversationService(storageService);
+      const moduleRuntime = new ModuleRuntime({
+        registry: ModuleRegistry,
+        storageService,
+        conversationService
+      });
+
+      window.app = new AppShell({
+        apiClient: window.apiClient,
+        moduleRuntime
+      });
+    } catch (error) {
+      console.error('初始化应用失败:', error);
+    }
   });
-}
-
-class ProductCanvasApp {
-  constructor() {
-    this.currentMode = 'canvas'; // 'canvas' 或 'swot'
-    this.svgStorage = {};
-    this.currentSvgId = null;
-    this.conversationHistory = {};
-    this.isProcessing = false;
-    this.activeStreamHandle = null;
-    this.svgZoom = { canvas: 1, swot: 1 };
-    this.activeSvgPlaceholder = null;
-    this.pendingSvgId = null;
-    this.pendingCancel = false;
-    this.copyClipboardSupported = typeof ClipboardItem !== 'undefined' && !!navigator.clipboard;
-    const deviceScale = typeof window !== 'undefined' ? (window.devicePixelRatio || 1) : 1;
-    this.imageExportScale = Math.min(4, Math.max(2, deviceScale));
-    
-    this.initElements();
-    this.initEventListeners();
-    this.loadSavedData();
-    this.updateModeUI();
-    this.setSendButtonState('idle');
-  }
-
-  getModeDisplayName(mode = this.currentMode) {
-    return mode === 'canvas' ? '产品画布' : 'SWOT分析';
-  }
-
-  // 初始化DOM元素引用
-  initElements() {
-    // 模式切换按钮
-    this.canvasBtn = document.getElementById('canvas-mode-btn');
-    this.swotBtn = document.getElementById('swot-mode-btn');
-    this.pageTitle = document.getElementById('page-title');
-    
-    // 对话相关
-    this.chatInput = document.getElementById('chat-input');
-    this.sendButton = document.getElementById('send-button');
-    this.clearHistoryBtn = document.getElementById('clear-history-btn');
-    this.chatHistory = document.getElementById('chat-history');
-    
-    // SVG显示
-    this.svgViewer = document.getElementById('svg-viewer');
-    this.placeholderText = this.svgViewer.querySelector('#placeholder-text');
-    
-    // 底部操作按钮
-    this.zoomOutBtn = document.getElementById('zoom-out-btn');
-    this.zoomInBtn = document.getElementById('zoom-in-btn');
-    this.zoomResetBtn = document.getElementById('zoom-reset-btn');
-    this.downloadSvgBtn = document.getElementById('download-svg-btn');
-    this.copyImageBtn = document.getElementById('copy-image-btn');
-    this.exportImageBtn = document.getElementById('export-image-btn');
-    this.viewCodeBtn = document.getElementById('view-code-btn');
-    
-    // API配置模态窗
-    this.settingsBtn = document.getElementById('settings-btn');
-    this.configModal = document.getElementById('config-modal');
-    this.closeModalBtn = document.getElementById('close-modal-btn');
-    this.apiUrlInput = document.getElementById('api-url');
-    this.apiKeyInput = document.getElementById('api-key');
-    this.apiModelInput = document.getElementById('api-model');
-    this.testApiBtn = document.getElementById('test-api-btn');
-    this.saveConfigBtn = document.getElementById('save-config-btn');
-    this.configStatus = document.getElementById('config-status');
-    this.statusText = document.getElementById('status-text');
-  }
-
-  // 初始化事件监听器
-  initEventListeners() {
-    // 模式切换
-    this.canvasBtn.addEventListener('click', () => this.switchMode('canvas'));
-    this.swotBtn.addEventListener('click', () => this.switchMode('swot'));
-    
-    // 发送消息
-    this.sendButton.addEventListener('click', () => {
-      if (this.isProcessing) {
-        this.cancelActiveStream();
-      } else {
-        this.sendMessage();
-      }
-    });
-    this.clearHistoryBtn.addEventListener('click', () => this.clearCurrentConversation());
-    
-    // 输入框事件
-    this.chatInput.addEventListener('keypress', (e) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
-        e.preventDefault();
-        if (!this.isProcessing) {
-          this.sendMessage();
-        }
-      }
-    });
-    
-    // 自动调整输入框高度
-    this.chatInput.addEventListener('input', () => {
-      Utils.autoResizeTextarea(this.chatInput);
-    });
-    
-    // 底部操作按钮
-    if (this.zoomOutBtn) this.zoomOutBtn.addEventListener('click', () => this.adjustSvgZoom(-0.25));
-    if (this.zoomInBtn) this.zoomInBtn.addEventListener('click', () => this.adjustSvgZoom(0.25));
-    if (this.zoomResetBtn) this.zoomResetBtn.addEventListener('click', () => this.resetSvgZoom());
-    this.downloadSvgBtn.addEventListener('click', () => this.downloadSVG());
-    if (this.copyImageBtn) {
-      if (this.copyClipboardSupported) {
-        this.copyImageBtn.addEventListener('click', () => this.copySvgToClipboard());
-      } else {
-        this.copyImageBtn.disabled = true;
-        this.copyImageBtn.title = '当前浏览器不支持复制图片到剪贴板';
-      }
-    }
-    this.exportImageBtn.addEventListener('click', () => this.exportAsImage());
-    this.viewCodeBtn.addEventListener('click', () => this.viewSVGCode());
-    
-    // API配置模态窗
-    this.settingsBtn.addEventListener('click', () => this.openConfigModal());
-    this.closeModalBtn.addEventListener('click', () => this.closeConfigModal());
-    this.configModal.addEventListener('click', (e) => {
-      if (e.target === this.configModal) {
-        this.closeConfigModal();
-      }
-    });
-    
-    this.testApiBtn.addEventListener('click', () => this.testAPIConnection());
-    this.saveConfigBtn.addEventListener('click', () => this.saveAPIConfig());
-  }
-
-  // 加载保存的数据
-  loadSavedData() {
-    // 加载模式
-    const savedMode = Utils.storage.get('currentMode', 'canvas');
-    this.currentMode = savedMode;
-    
-    // 加载对话历史（按模式分别存储）
-    const savedCanvasHistory = Utils.storage.get('canvasHistory', []);
-    const savedSwotHistory = Utils.storage.get('swotHistory', []);
-    this.conversationHistory = {
-      canvas: savedCanvasHistory,
-      swot: savedSwotHistory
-    };
-    this.renderConversationHistory();
-    
-    // 加载SVG存储（按模式分别存储）
-    const savedCanvasSVGs = Utils.storage.get('canvasSVGs', {});
-    const savedSwotSVGs = Utils.storage.get('swotSVGs', {});
-    this.svgStorage = {
-      canvas: savedCanvasSVGs,
-      swot: savedSwotSVGs
-    };
-
-    this.renderSvgViewerForMode();
-    this.setSendButtonState('idle');
-    
-    // 加载API配置
-    const apiConfig = window.apiClient.getConfig();
-    this.apiUrlInput.value = apiConfig.url || '';
-    this.apiKeyInput.value = apiConfig.key || '';
-    this.apiModelInput.value = apiConfig.model || '';
-  }
-
-  // 切换模式
-  switchMode(mode) {
-    if (this.currentMode === mode) return;
-    
-    this.currentMode = mode;
-    Utils.storage.set('currentMode', mode);
-    this.currentSvgId = null;
-    this.showSvgPlaceholder();
-    this.updateModeUI();
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-  }
-
-  // 更新模式UI
-  updateModeUI() {
-    const isCanvas = this.currentMode === 'canvas';
-
-    if (isCanvas) {
-      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');
-    } 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 = isCanvas ? '产品画布' : 'SWOT分析';
-
-    if (!this.currentSvgId) {
-      const placeholder = this.svgViewer.querySelector('#placeholder-text');
-      if (placeholder) {
-        placeholder.textContent = `生成的${this.getModeDisplayName()}将在此处显示`;
-      }
-    }
-  }
-
-  setSendButtonState(state) {
-    this.sendButtonState = state;
-    if (!this.sendButton) return;
-
-    if (state === 'streaming') {
-      this.sendButton.innerHTML = `
-        <span class="flex items-center gap-1 text-red-600 font-bold">
-          <iconify-icon icon="ph:hand-palm-bold" class="text-2xl"></iconify-icon>
-          <span>终止</span>
-        </span>
-      `;
-      this.sendButton.classList.add('terminate-mode');
-      this.sendButton.title = '终止当前生成';
-    } else if (state === 'terminating') {
-      this.sendButton.innerHTML = `
-        <span class="flex items-center gap-1 text-orange-500 font-bold">
-          <iconify-icon icon="ph:hourglass-medium-bold" class="text-2xl"></iconify-icon>
-          <span>终止中</span>
-        </span>
-      `;
-      this.sendButton.classList.add('terminate-mode');
-      this.sendButton.title = '正在终止生成';
-    } else if (state === 'busy') {
-      this.sendButton.innerHTML = `
-        <span class="flex items-center gap-1 text-blue-600 font-bold">
-          <iconify-icon icon="ph:clock-bold" class="text-2xl"></iconify-icon>
-          <span>处理中</span>
-        </span>
-      `;
-      this.sendButton.classList.add('terminate-mode');
-      this.sendButton.title = '正在处理请求';
-    } else {
-      this.sendButton.innerHTML = '<iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>';
-      this.sendButton.classList.remove('terminate-mode');
-      this.sendButton.title = '发送';
-    }
-  }
-
-  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>
-    `;
-    this.placeholderText = this.svgViewer.querySelector('#placeholder-text');
-    this.setActivePlaceholder(null);
-    this.updateZoomButtons();
-  }
-
-  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.mountSvgMarkup(svgStore[latestSvgId].content);
-      this.setActivePlaceholder(latestSvgId);
-    } else {
-      this.currentSvgId = null;
-      this.showSvgPlaceholder();
-    }
-
-    this.updateZoomButtons();
-  }
-
-  adjustSvgZoom(delta) {
-    const current = this.svgZoom[this.currentMode] || 1;
-    const next = Math.min(3, Math.max(0.25, parseFloat((current + delta).toFixed(2))));
-    this.svgZoom[this.currentMode] = next;
-    this.applySvgZoom();
-  }
-
-  resetSvgZoom() {
-    this.svgZoom[this.currentMode] = 1;
-    this.applySvgZoom();
-  }
-
-  applySvgZoom() {
-    const zoom = this.svgZoom[this.currentMode] || 1;
-    const wrapper = this.svgViewer.querySelector('.svg-content-wrapper');
-    if (wrapper) {
-      wrapper.style.transform = `scale(${zoom})`;
-      wrapper.style.transformOrigin = 'center top';
-    }
-    this.updateZoomButtons();
-  }
-
-  updateZoomButtons() {
-    if (!this.zoomInBtn || !this.zoomOutBtn || !this.zoomResetBtn) return;
-    const hasActiveSvg = !!this.currentSvgId && !!(this.svgStorage[this.currentMode] || {})[this.currentSvgId];
-    const zoom = this.svgZoom[this.currentMode] || 1;
-
-    const disableControls = !hasActiveSvg;
-    this.zoomInBtn.disabled = disableControls || zoom >= 3;
-    this.zoomOutBtn.disabled = disableControls || zoom <= 0.25;
-    this.zoomResetBtn.disabled = disableControls || Math.abs(zoom - 1) < 0.01;
-
-    if (!hasActiveSvg) {
-      if (this.copyImageBtn) this.copyImageBtn.disabled = true;
-      this.downloadSvgBtn.disabled = true;
-      this.exportImageBtn.disabled = true;
-      this.viewCodeBtn.disabled = true;
-    } else {
-      if (this.copyImageBtn) this.copyImageBtn.disabled = !this.copyClipboardSupported;
-      this.downloadSvgBtn.disabled = false;
-      this.exportImageBtn.disabled = false;
-      this.viewCodeBtn.disabled = false;
-    }
-  }
-
-  setActivePlaceholder(svgId) {
-    const previousActive = this.chatHistory.querySelectorAll('.svg-placeholder-active');
-    previousActive.forEach(el => el.classList.remove('svg-placeholder-active'));
-    if (svgId) {
-      const next = this.chatHistory.querySelector(`.svg-placeholder-block[data-svg-id="${svgId}"], .svg-drawing-placeholder[data-svg-id="${svgId}"]`);
-      if (next) {
-        next.classList.add('svg-placeholder-active');
-        this.activeSvgPlaceholder = svgId;
-      } else {
-        this.activeSvgPlaceholder = null;
-      }
-    } else {
-      this.activeSvgPlaceholder = null;
-    }
-  }
-
-  mountSvgMarkup(svgMarkup, temporary = false) {
-    this.svgViewer.innerHTML = '';
-    const wrapper = document.createElement('div');
-    wrapper.className = 'svg-content-wrapper';
-    wrapper.innerHTML = svgMarkup;
-    this.svgViewer.appendChild(wrapper);
-    this.placeholderText = null;
-    if (!temporary) {
-      this.applySvgZoom();
-    } else {
-      const zoom = this.svgZoom[this.currentMode] || 1;
-      wrapper.style.transform = `scale(${zoom})`;
-      wrapper.style.transformOrigin = 'center top';
-    }
-  }
-
-  renderSvgContent(svgId) {
-    const store = this.svgStorage[this.currentMode] || {};
-    if (!svgId || !store[svgId]) {
-      this.showSvgPlaceholder();
-      return;
-    }
-    this.currentSvgId = svgId;
-    this.mountSvgMarkup(store[svgId].content);
-    this.setActivePlaceholder(svgId);
-    this.applySvgZoom();
-  }
-
-  renderTemporarySvg(svgMarkup) {
-    this.mountSvgMarkup(svgMarkup, true);
-  }
-
-  buildContextForUserMessage(userIndex) {
-    const history = this.conversationHistory[this.currentMode] || [];
-    if (userIndex < 0 || userIndex >= history.length) {
-      return null;
-    }
-
-    const target = history[userIndex];
-    if (!target || target.type !== 'user') {
-      return null;
-    }
-
-    const start = Math.max(0, userIndex - 10);
-    const contextSlice = history.slice(start, userIndex);
-    const contextMessages = contextSlice
-      .filter(msg => msg.type === 'user' || msg.type === 'ai')
-      .map(msg => ({
-        role: msg.type === 'user' ? 'user' : 'assistant',
-        content: msg.content
-      }));
-
-    return {
-      userMessage: target.content,
-      contextMessages
-    };
-  }
-
-  // 发送消息
-  async sendMessage() {
-    const message = this.chatInput.value.trim();
-    if (!message || this.isProcessing) return;
-
-    if (!window.apiClient.isConfigValid()) {
-      alert('⚠️ 请先配置API设置！点击右上角齿轮图标进行配置。');
-      this.openConfigModal();
-      return;
-    }
-
-    this.pendingCancel = false;
-    this.isProcessing = true;
-
-    this.addUserMessage(message);
-    this.chatInput.value = '';
-    Utils.autoResizeTextarea(this.chatInput);
-
-    const history = this.conversationHistory[this.currentMode] || [];
-    const targetIndex = history.length - 1;
-    const payload = this.buildContextForUserMessage(targetIndex);
-    if (!payload) {
-      console.warn('无法构建上下文，终止发送');
-      this.isProcessing = false;
-      this.setSendButtonState('idle');
-      return;
-    }
-
-    this.setSendButtonState('streaming');
-    this.sendButton.disabled = false;
-
-    try {
-      await this.startStreamingMessage(payload.userMessage, payload.contextMessages);
-    } catch (error) {
-      console.error('发送消息失败:', error);
-      this.addErrorMessage(error.message);
-      this.isProcessing = false;
-      this.setSendButtonState('idle');
-      this.activeStreamHandle = null;
-      this.sendButton.disabled = false;
-    }
-  }
-
-  // 开始流式接收消息
-  async startStreamingMessage(userMessage, contextMessages) {
-    const messageId = Utils.generateId('msg');
-    const messageContainer = this.createStreamingMessageContainer(messageId);
-    this.chatHistory.appendChild(messageContainer);
-    Utils.scrollToBottom(this.chatHistory);
-
-    let fullContent = '';
-    let svgStarted = false;
-    let svgContent = '';
-    let svgId = null;
-    let beforeText = '';
-
-    let streamClosed = false;
-    this.activeStreamHandle = null;
-
-    const finalizeStream = (info = {}) => {
-      if (streamClosed) return;
-      streamClosed = true;
-
-      const trimmedContent = fullContent.trim();
-      if (!trimmedContent && !svgId) {
-        const bubble = this.chatHistory.querySelector(`[data-message-id="${messageId}"]`);
-        if (bubble) {
-          const wrapper = bubble.closest('.flex');
-          if (wrapper) wrapper.remove();
-        }
-      } else {
-        this.finalizeStreamingMessage(messageId, fullContent, svgId);
-      }
-
-      this.isProcessing = false;
-      this.setSendButtonState('idle');
-      this.sendButton.disabled = false;
-      this.activeStreamHandle = null;
-      this.pendingCancel = false;
-    };
-
-    const onChunk = (chunk) => {
-      if (
-        streamClosed ||
-        !chunk ||
-        !chunk.choices ||
-        !chunk.choices[0] ||
-        !chunk.choices[0].delta
-      ) {
-        return;
-      }
-
-      const content = chunk.choices[0].delta.content || '';
-      if (!content) return;
-
-      fullContent += content;
-
-      if (!svgStarted) {
-        const svgStartMatch = fullContent.match(/```(?:svg)?\s*<svg[\s\S]*?>/i);
-        if (svgStartMatch) {
-          svgStarted = true;
-          svgId = svgId || Utils.generateId('svg');
-          this.pendingSvgId = svgId;
-
-          const svgStartIndex = svgStartMatch.index;
-          beforeText = fullContent.substring(0, svgStartIndex);
-
-          this.updateStreamingMessageWithPlaceholder(messageContainer, beforeText, svgId);
-          this.setActivePlaceholder(svgId);
-
-          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>
-          `;
-          this.updateZoomButtons();
-        }
-      }
-
-      if (svgStarted) {
-        if (fullContent.includes('</svg>')) {
-          const svgEndIndex = fullContent.indexOf('</svg>') + 6;
-          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();
-            if (!svgContent.endsWith('</svg>')) {
-              svgContent += '</svg>';
-            }
-
-            this.svgStorage[this.currentMode][svgId] = {
-              content: svgContent,
-              messageId,
-              mode: this.currentMode,
-              timestamp: new Date().toISOString()
-            };
-
-            this.pendingSvgId = null;
-            this.renderSvgContent(svgId);
-            this.updatePlaceholderToClickable(messageContainer, svgId);
-
-            svgStarted = false;
-            const afterText = fullContent.substring(svgEndIndex);
-            this.updateStreamingMessageAfterSVG(messageContainer, beforeText, svgId, afterText);
-          }
-        } else {
-          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();
-            let tempSvgContent = svgContent;
-            if (!tempSvgContent.endsWith('</svg>')) {
-              tempSvgContent += '</svg>';
-            }
-
-            this.renderTemporarySvg(tempSvgContent);
-          }
-        }
-      } else {
-        this.updateStreamingMessage(messageContainer, fullContent);
-      }
-    };
-
-    const onComplete = (info = {}) => {
-      finalizeStream(info);
-    };
-
-    try {
-      const streamHandle = await (
-        this.currentMode === 'canvas'
-          ? window.apiClient.generateProductCanvasStream(userMessage, contextMessages, onChunk, onComplete)
-          : window.apiClient.generateSWOTAnalysisStream(userMessage, contextMessages, onChunk, onComplete)
-      );
-
-      this.activeStreamHandle = streamHandle;
-
-      if (this.pendingCancel) {
-        const shouldCancel = this.pendingCancel;
-        this.pendingCancel = false;
-        this.cancelActiveStream();
-      }
-
-      await streamHandle.finished;
-
-      if (!streamClosed) {
-        finalizeStream({ aborted: false });
-      }
-    } catch (error) {
-      streamClosed = true;
-      this.activeStreamHandle = null;
-      this.isProcessing = false;
-      this.setSendButtonState('idle');
-      this.sendButton.disabled = false;
-      this.pendingCancel = false;
-
-      const bubble = this.chatHistory.querySelector(`[data-message-id="${messageId}"]`);
-      if (bubble) {
-        const wrapper = bubble.closest('.flex');
-        if (wrapper) wrapper.remove();
-      }
-
-      if (error && error.name === 'AbortError') {
-        return;
-      }
-
-      console.error('发送消息失败:', error);
-      this.addErrorMessage(error.message || '生成失败');
-    }
-  }
-
-  cancelActiveStream() {
-    if (!this.activeStreamHandle || typeof this.activeStreamHandle.cancel !== 'function') {
-      this.pendingCancel = true;
-      this.setSendButtonState('terminating');
-      return;
-    }
-
-    this.pendingCancel = false;
-    this.setSendButtonState('terminating');
-    try {
-      this.activeStreamHandle.cancel();
-    } catch (error) {
-      console.warn('终止流式请求失败:', error);
-    }
-  }
-
-  // 创建流式消息容器
-  createStreamingMessageContainer(messageId) {
-    const messageDiv = document.createElement('div');
-    messageDiv.className = 'flex justify-start';
-    messageDiv.dataset.messageId = messageId;
-    messageDiv.innerHTML = `
-      <div class="chat-bubble-ai relative streaming-text" data-message-id="${messageId}">
-        <div class="typing-cursor"></div>
-      </div>
-    `;
-    return messageDiv;
-  }
-
-  // 更新流式消息内容
-  updateStreamingMessage(container, content) {
-    const contentDiv = container.querySelector('.typing-cursor');
-    if (contentDiv) {
-      // 使用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 streaming-text" data-message-id="${container.dataset.messageId}">
-        <div>
-          ${parsedBeforeText}
-          <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.setAttribute('data-svg-id', svgId);
-      placeholder.innerHTML = `📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG`;
-      placeholder.setAttribute('onclick', `app.viewSVG('${svgId}')`);
-      if (this.currentSvgId === svgId) {
-        placeholder.classList.add('svg-placeholder-active');
-      }
-    }
-  }
-  
-  // 更新SVG后的消息内容
-  updateStreamingMessageAfterSVG(container, beforeText, svgId, afterText) {
-    const parsedBeforeText = typeof marked !== 'undefined' ? marked.parse(beforeText) : Utils.escapeHtml(beforeText);
-    const parsedAfterText = typeof marked !== 'undefined' ? marked.parse(afterText) : Utils.escapeHtml(afterText);
-    const placeholderClass = this.currentSvgId === svgId ? 'svg-placeholder-block svg-placeholder-active' : 'svg-placeholder-block';
-
-    container.innerHTML = `
-      <div class="chat-bubble-ai relative streaming-text" data-message-id="${container.dataset.messageId}">
-        <div>
-          ${parsedBeforeText}
-          <div class="${placeholderClass}" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
-            📊 点击查看${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-          </div>
-          <div class="typing-cursor">${parsedAfterText}</div>
-        </div>
-      </div>
-    `;
-    Utils.scrollToBottom(this.chatHistory);
-  }
-
-  buildActionToolbar(messageId, { allowRegenerate = false, allowRollback = true } = {}) {
-    const actions = [];
-
-    if (allowRollback) {
-      actions.push(`
-        <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-blue-600 transition-colors" data-action="rollback" onclick="app.rollbackToMessage('${messageId}')">
-          <iconify-icon icon="ph:arrow-u-up-left-bold"></iconify-icon>
-          <span>退回</span>
-        </button>
-      `);
-    }
-
-    if (allowRegenerate) {
-      actions.push(`
-        <button class="bubble-action-btn flex items-center gap-1 text-xs text-gray-600 hover:text-green-600 transition-colors" data-action="regenerate" onclick="app.regenerateMessage('${messageId}')">
-          <iconify-icon icon="ph:arrow-clockwise-bold"></iconify-icon>
-          <span>重新生成</span>
-        </button>
-      `);
-    }
-
-    if (!actions.length) {
-      return '';
-    }
-
-    return `
-      <div class="message-actions flex gap-2 mt-2 pt-2 border-t border-gray-200">
-        ${actions.join('')}
-      </div>
-    `;
-  }
-
-  buildDeleteButtonHtml(messageId) {
-    return `
-      <button class="message-delete-btn" title="删除此消息" onclick="event.stopPropagation(); app.confirmDeleteMessage('${messageId}')">
-        <iconify-icon icon="ph:trash-simple-bold"></iconify-icon>
-      </button>
-    `;
-  }
-
-  // 组装标准化的SVG消息字符串
-  buildSVGMessageContent(beforeText = '', svgBody = '', afterText = '') {
-    const segments = [];
-    const trimmedBefore = (beforeText || '').trim();
-    const trimmedAfter = (afterText || '').trim();
-    const trimmedSvg = (svgBody || '').trim();
-
-    if (trimmedBefore) {
-      segments.push(trimmedBefore);
-    }
-
-    if (trimmedSvg) {
-      segments.push('```svg');
-      segments.push(trimmedSvg);
-      segments.push('```');
-    }
-
-    if (trimmedAfter) {
-      segments.push(trimmedAfter);
-    }
-
-    return segments.join('\n\n').trim();
-  }
-
-  // 完成流式消息
-  finalizeStreamingMessage(messageId, fullContent, svgId = null) {
-    this.pendingSvgId = null;
-    const parsed = Utils.parseSVGResponse(fullContent);
-    const timestamp = new Date().toISOString();
-
-    const message = {
-      id: messageId,
-      type: 'ai',
-      content: '',
-      timestamp
-    };
-
-    let targetSvgId = svgId || null;
-
-    if (parsed.svgContent && parsed.svgContent.includes('<svg')) {
-      const svgBody = parsed.svgContent.trim().endsWith('</svg>')
-        ? parsed.svgContent.trim()
-        : `${parsed.svgContent.trim()}
-</svg>`;
-
-      if (!targetSvgId || !this.svgStorage[this.currentMode][targetSvgId]) {
-        targetSvgId = targetSvgId || Utils.generateId('svg');
-      }
-
-      this.svgStorage[this.currentMode][targetSvgId] = {
-        content: svgBody,
-        messageId,
-        mode: this.currentMode,
-        timestamp
-      };
-
-      this.currentSvgId = targetSvgId;
-      this.svgViewer.innerHTML = svgBody;
-
-      message.content = this.buildSVGMessageContent(parsed.beforeText, svgBody, parsed.afterText);
-    } else {
-      const sanitizedText = fullContent.replace(/^[\s`]+/, '').replace(/[\s`]+$/, '').trim();
-      message.content = sanitizedText;
-    }
-
-    this.conversationHistory[this.currentMode].push(message);
-
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
-    Utils.storage.set('swotSVGs', this.svgStorage.swot);
-
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-    Utils.scrollToBottom(this.chatHistory);
-  }
-
-  // 清空当前对话
-  clearCurrentConversation() {
-    if (!confirm(`确定要清空当前的${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'}对话吗？`)) {
-      return;
-    }
-    
-    // 清空当前模式的对话历史
-    this.conversationHistory[this.currentMode] = [];
-    
-    // 清空当前模式的SVG存储
-    this.svgStorage[this.currentMode] = {};
-    this.svgZoom[this.currentMode] = 1;
-    this.showSvgPlaceholder();
-
-    // 保存数据
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
-    Utils.storage.set('swotSVGs', this.svgStorage.swot);
-    
-    // 重新渲染对话历史
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-  }
-
-  confirmDeleteMessage(messageId) {
-    const history = this.conversationHistory[this.currentMode] || [];
-    const targetMessage = history.find(msg => msg.id === messageId);
-    if (!targetMessage) {
-      alert('未找到要删除的消息，请刷新后重试。');
-      return;
-    }
-
-    const typeLabel = targetMessage.type === 'user'
-      ? '这条用户消息'
-      : targetMessage.type === 'ai'
-        ? '这条AI回复'
-        : '这条提示';
-
-    const confirmed = confirm(`${typeLabel}删除后无法恢复，确定要删除吗？`);
-    if (!confirmed) {
-      return;
-    }
-
-    this.deleteMessagePermanently(messageId);
-  }
-
-  deleteMessagePermanently(messageId) {
-    const history = this.conversationHistory[this.currentMode] || [];
-    const messageIndex = history.findIndex(msg => msg.id === messageId);
-    if (messageIndex === -1) {
-      return;
-    }
-
-    history.splice(messageIndex, 1);
-
-    const svgStore = this.svgStorage[this.currentMode] || {};
-    let viewerShouldReset = false;
-    for (const [svgId, meta] of Object.entries(svgStore)) {
-      if (meta.messageId === messageId) {
-        delete svgStore[svgId];
-        if (this.currentSvgId === svgId) {
-          viewerShouldReset = true;
-        }
-      }
-    }
-
-    if (viewerShouldReset) {
-      this.currentSvgId = null;
-      this.showSvgPlaceholder();
-    }
-
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas || []);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot || []);
-    Utils.storage.set('canvasSVGs', this.svgStorage.canvas || {});
-    Utils.storage.set('swotSVGs', this.svgStorage.swot || {});
-
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-  }
-
-  // 添加用户消息
-  addUserMessage(text) {
-    const messageId = Utils.generateId('msg');
-    const message = {
-      id: messageId,
-      type: 'user',
-      content: text,
-      timestamp: new Date().toISOString()
-    };
-    
-    this.conversationHistory[this.currentMode].push(message);
-    this.renderMessage(message);
-    Utils.scrollToBottom(this.chatHistory);
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-  }
-
-  // 添加AI消息（非流式，保留用于错误情况）
-  addAIMessage(text) {
-    const messageId = Utils.generateId('msg');
-    const parsed = Utils.parseSVGResponse(text);
-    
-    const message = {
-      id: messageId,
-      type: 'ai',
-      content: text,
-      timestamp: new Date().toISOString()
-    };
-    
-    this.conversationHistory[this.currentMode].push(message);
-
-    let svgId = null;
-    if (parsed.svgContent) {
-      svgId = Utils.generateId('svg');
-      this.svgStorage[this.currentMode][svgId] = {
-        content: parsed.svgContent,
-        messageId,
-        mode: this.currentMode,
-        timestamp: new Date().toISOString()
-      };
-      this.viewSVG(svgId);
-    }
-
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
-    Utils.storage.set('swotSVGs', this.svgStorage.swot);
-
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-  }
-
-  // 添加错误消息
-  addErrorMessage(errorText) {
-    const messageId = Utils.generateId('msg');
-    const message = {
-      id: messageId,
-      type: 'error',
-      content: errorText,
-      timestamp: new Date().toISOString()
-    };
-    
-    this.conversationHistory[this.currentMode].push(message);
-    this.renderMessage(message);
-    Utils.scrollToBottom(this.chatHistory);
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-  }
-
-  // 渲染消息
-  renderMessage(message, options = {}) {
-    const { allowRegenerate = false, allowRollback = message.type === 'ai' } = options;
-    const messageDiv = document.createElement('div');
-
-    if (message.type === 'user') {
-      messageDiv.className = 'flex justify-end';
-      const deleteButton = this.buildDeleteButtonHtml(message.id);
-      messageDiv.innerHTML = `
-        <div class="chat-bubble-user message-with-delete" data-message-id="${message.id}">
-          <div>${Utils.escapeHtml(message.content)}</div>
-          ${deleteButton}
-        </div>
-      `;
-    } else if (message.type === 'error') {
-      messageDiv.className = 'flex justify-start';
-      const deleteButton = this.buildDeleteButtonHtml(message.id);
-      messageDiv.innerHTML = `
-        <div class="chat-bubble-ai message-with-delete border-red-500" data-message-id="${message.id}">
-          ${deleteButton}
-          <div class="flex items-start gap-2">
-            <iconify-icon icon="ph:warning-circle" class="text-red-500 mt-0.5"></iconify-icon>
-            <span>${Utils.escapeHtml(message.content)}</span>
-          </div>
-        </div>
-      `;
-    } else if (message.type === 'ai') {
-      const parsedContent = typeof marked !== 'undefined' ? marked.parse(message.content) : Utils.escapeHtml(message.content);
-      const actions = this.buildActionToolbar(message.id, { allowRegenerate, allowRollback });
-      const deleteButton = this.buildDeleteButtonHtml(message.id);
-      messageDiv.className = 'flex justify-start';
-      messageDiv.innerHTML = `
-        <div class="chat-bubble-ai relative message-with-delete" data-message-id="${message.id}">
-          ${deleteButton}
-          <div class="mb-1">
-            ${parsedContent}
-          </div>
-          ${actions}
-        </div>
-      `;
-    }
-
-    this.chatHistory.appendChild(messageDiv);
-  }
-
-  // 渲染包含SVG的消息
-  renderMessageWithSVG(message, parsed, svgId, options = {}) {
-    const { allowRegenerate = false, allowRollback = true } = options;
-    const messageDiv = document.createElement('div');
-    const beforeHtml = parsed.beforeText ? (typeof marked !== 'undefined' ? marked.parse(parsed.beforeText) : Utils.escapeHtml(parsed.beforeText)) : '';
-    const afterHtml = parsed.afterText ? (typeof marked !== 'undefined' ? marked.parse(parsed.afterText) : Utils.escapeHtml(parsed.afterText)) : '';
-    const actions = this.buildActionToolbar(message.id, { allowRegenerate, allowRollback });
-    const deleteButton = this.buildDeleteButtonHtml(message.id);
-
-    messageDiv.className = 'flex justify-start';
-    const placeholderClass = this.currentSvgId === svgId ? 'svg-placeholder-block svg-placeholder-active' : 'svg-placeholder-block';
-    messageDiv.innerHTML = `
-      <div class="chat-bubble-ai relative message-with-delete" data-message-id="${message.id}">
-        ${deleteButton}
-        <div>
-          ${beforeHtml}
-          <div class="${placeholderClass}" data-svg-id="${svgId}" onclick="app.viewSVG('${svgId}')">
-            📊 点击查看 ${this.currentMode === 'canvas' ? '产品画布' : 'SWOT分析'} SVG
-          </div>
-          ${afterHtml}
-        </div>
-        ${actions}
-      </div>
-    `;
-
-    this.chatHistory.appendChild(messageDiv);
-  }
-
-  // 渲染对话历史
-  renderConversationHistory() {
-    this.chatHistory.innerHTML = '';
-    
-    // 获取当前模式的对话历史
-    const currentHistory = this.conversationHistory[this.currentMode] || [];
-    const currentSvgStorage = this.svgStorage[this.currentMode] || {};
-    let hasStorageUpdate = false;
-    let hasHistoryUpdate = false;
-
-    let lastAiMessageId = null;
-    for (let i = currentHistory.length - 1; i >= 0; i--) {
-      if (currentHistory[i].type === 'ai') {
-        lastAiMessageId = currentHistory[i].id;
-        break;
-      }
-    }
-
-    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(currentSvgStorage)) {
-          if (svg.messageId === message.id) {
-            svgId = id;
-            break;
-          }
-        }
-
-        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, { allowRegenerate: message.id === lastAiMessageId });
-          continue;
-        }
-
-        this.renderMessage(message, { allowRegenerate: message.id === lastAiMessageId });
-      } 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 || []);
-    }
-
-    this.setActivePlaceholder(this.currentSvgId);
-    Utils.scrollToBottom(this.chatHistory);
-  }
-
-  // 显示SVG
-  viewSVG(svgId) {
-    const store = this.svgStorage[this.currentMode] || {};
-    if (!store[svgId]) {
-      console.error('SVG not found:', svgId);
-      return;
-    }
-
-    this.renderSvgContent(svgId);
-  }
-
-  // 退回到指定消息
-  rollbackToMessage(messageId) {
-    const messageIndex = this.conversationHistory[this.currentMode].findIndex(msg => msg.id === messageId);
-    if (messageIndex === -1) return;
-    
-    // 删除指定消息之后的所有消息
-    const messagesToRemove = this.conversationHistory[this.currentMode].slice(messageIndex + 1);
-    
-    // 删除相关的SVG
-    for (const message of messagesToRemove) {
-      for (const [svgId, svg] of Object.entries(this.svgStorage[this.currentMode])) {
-        if (svg.messageId === message.id) {
-          delete this.svgStorage[this.currentMode][svgId];
-          
-          // 如果当前显示的是被删除的SVG，清空显示
-          if (this.currentSvgId === svgId) {
-            this.showSvgPlaceholder();
-          }
-        }
-      }
-    }
-    
-    // 更新对话历史
-    this.conversationHistory[this.currentMode] = this.conversationHistory[this.currentMode].slice(0, messageIndex + 1);
-    
-    // 保存数据
-    Utils.storage.set('canvasHistory', this.conversationHistory.canvas);
-    Utils.storage.set('swotHistory', this.conversationHistory.swot);
-    Utils.storage.set('canvasSVGs', this.svgStorage.canvas);
-    Utils.storage.set('swotSVGs', this.svgStorage.swot);
-    
-    // 重新渲染对话历史
-    this.renderConversationHistory();
-    this.renderSvgViewerForMode();
-  }
-
-  // 重新生成消息
-  async regenerateMessage(messageId) {
-    if (this.isProcessing) return;
-
-    const history = this.conversationHistory[this.currentMode] || [];
-    const targetIndex = history.findIndex(msg => msg.id === messageId && msg.type === 'ai');
-    if (targetIndex === -1) {
-      console.warn('未找到可重新生成的消息');
-      return;
-    }
-
-    let userIndex = -1;
-    for (let i = targetIndex - 1; i >= 0; i--) {
-      if (history[i].type === 'user') {
-        userIndex = i;
-        break;
-      }
-    }
-
-    if (userIndex === -1) {
-      alert('未找到对应的用户消息，无法重新生成');
-      return;
-    }
-
-    const payload = this.buildContextForUserMessage(userIndex);
-    if (!payload) {
-      alert('无法构建对话上下文，请稍后重试');
-      return;
-    }
-
-    this.pendingCancel = false;
-    this.isProcessing = true;
-    this.setSendButtonState('streaming');
-    this.sendButton.disabled = false;
-
-    try {
-      await this.startStreamingMessage(payload.userMessage, payload.contextMessages);
-    } catch (error) {
-      console.error('重新生成失败:', error);
-      this.addErrorMessage(error.message);
-      this.isProcessing = false;
-      this.setSendButtonState('idle');
-      this.activeStreamHandle = null;
-      this.sendButton.disabled = false;
-    }
-  }
-
-  getActiveSvgRecord(showWarning = true) {
-    const store = this.svgStorage[this.currentMode] || {};
-    if (this.currentSvgId && store[this.currentSvgId]) {
-      return { id: this.currentSvgId, ...store[this.currentSvgId] };
-    }
-
-    if (showWarning) {
-      alert('请先生成并选择一个图表');
-    }
-    return null;
-  }
-
-  parseSvgDimensions(svgContent) {
-    try {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(svgContent, 'image/svg+xml');
-      const svgEl = doc.querySelector('svg');
-      if (!svgEl) {
-        return { width: 1024, height: 768 };
-      }
-
-      const parseLength = (value) => {
-        if (!value) return null;
-        const match = /([0-9.]+)/.exec(value);
-        return match ? parseFloat(match[1]) : null;
-      };
-
-      let width = parseLength(svgEl.getAttribute('width'));
-      let height = parseLength(svgEl.getAttribute('height'));
-      const viewBox = svgEl.getAttribute('viewBox');
-
-      if ((!width || !height) && viewBox) {
-        const parts = viewBox.split(/\s+/).map(Number).filter(n => !Number.isNaN(n));
-        if (parts.length === 4) {
-          width = width || parts[2];
-          height = height || parts[3];
-        }
-      }
-
-      return {
-        width: width || 1024,
-        height: height || 768
-      };
-    } catch (error) {
-      console.warn('解析SVG尺寸失败:', error);
-      return { width: 1024, height: 768 };
-    }
-  }
-
-  loadImageFromUrl(url) {
-    return new Promise((resolve, reject) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.onerror = (err) => reject(err);
-      img.src = url;
-    });
-  }
-
-  async convertSvgToPngBlob(svgContent, options = {}) {
-    const { width, height } = this.parseSvgDimensions(svgContent);
-    const svgBlob = new Blob([svgContent], { type: 'image/svg+xml' });
-    const url = URL.createObjectURL(svgBlob);
-
-    try {
-      const img = await this.loadImageFromUrl(url);
-      const canvas = document.createElement('canvas');
-      const baseWidth = Math.max(1, img.naturalWidth || width || 1024);
-      const baseHeight = Math.max(1, img.naturalHeight || height || 768);
-      const preferredScale = options.scale || this.imageExportScale || 1;
-      const exportScale = Math.min(4, Math.max(1, preferredScale));
-      canvas.width = Math.round(baseWidth * exportScale);
-      canvas.height = Math.round(baseHeight * exportScale);
-
-      const ctx = canvas.getContext('2d');
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-
-      return await new Promise((resolve, reject) => {
-        canvas.toBlob((blob) => {
-          if (blob) {
-            resolve(blob);
-          } else {
-            reject(new Error('无法生成PNG图像'));
-          }
-        }, 'image/png');
-      });
-    } finally {
-      URL.revokeObjectURL(url);
-    }
-  }
-
-  async copySvgToClipboard() {
-    const record = this.getActiveSvgRecord();
-    if (!record) return;
-
-    if (!navigator.clipboard || typeof ClipboardItem === 'undefined') {
-      alert('当前浏览器不支持复制图片到剪贴板，请使用下载功能。');
-      return;
-    }
-
-    try {
-      const blob = await this.convertSvgToPngBlob(record.content);
-      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
-      alert('图像已复制到剪贴板');
-    } catch (error) {
-      console.error('复制图片失败:', error);
-      alert('复制失败，请稍后重试。');
-    }
-  }
-
-  // 下载SVG
-  downloadSVG() {
-    const record = this.getActiveSvgRecord();
-    if (!record) return;
-
-    const filename = `${this.currentMode}-${Utils.formatDateTime().replace(/[/:]/g, '-')}.svg`;
-    Utils.downloadFile(record.content, filename, 'image/svg+xml');
-  }
-
-  // 导出为图片
-  async exportAsImage() {
-    const record = this.getActiveSvgRecord();
-    if (!record) return;
-
-    try {
-      const blob = await this.convertSvgToPngBlob(record.content);
-      const filename = `${this.currentMode}-${Utils.formatDateTime().replace(/[/:]/g, '-')}.png`;
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = filename;
-      link.click();
-      URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error('导出图片失败:', error);
-      alert('导出图片失败，请稍后重试。');
-    }
-  }
-
-  // 查看SVG代码
-  viewSVGCode() {
-    const record = this.getActiveSvgRecord();
-    if (!record) return;
-
-    const svgContent = record.content;
-
-    // 创建代码查看模态窗
-    const modal = document.createElement('div');
-    modal.className = 'modal-overlay active';
-    modal.innerHTML = `
-      <div class="modal-content">
-        <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 border-b-4 border-black flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <iconify-icon icon="ph:code-bold" class="text-3xl text-white"></iconify-icon>
-            <h2 class="text-xl font-black text-white">SVG 源代码</h2>
-          </div>
-          <button class="close-modal text-white hover:bg-white/20 p-2 transition-all">
-            <iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
-          </button>
-        </div>
-        <div class="p-4">
-          <pre class="bg-gray-100 p-4 border-2 border-gray-300 rounded overflow-auto max-h-96 text-sm"><code>${Utils.escapeHtml(svgContent)}</code></pre>
-          <div class="mt-4 flex gap-2 justify-end">
-            <button class="copy-btn px-4 py-2 bg-blue-500 text-white font-bold border-2 border-black hover:bg-blue-600 transition-all flex items-center gap-2">
-              <iconify-icon icon="ph:copy-bold"></iconify-icon>
-              复制代码
-            </button>
-          </div>
-        </div>
-      </div>
-    `;
-    
-    document.body.appendChild(modal);
-    
-    // 关闭模态窗
-    const closeModal = () => {
-      document.body.removeChild(modal);
-    };
-    
-    modal.querySelector('.close-modal').addEventListener('click', closeModal);
-    modal.addEventListener('click', (e) => {
-      if (e.target === modal) {
-        closeModal();
-      }
-    });
-    
-    // 复制代码
-    modal.querySelector('.copy-btn').addEventListener('click', () => {
-      navigator.clipboard.writeText(svgContent).then(() => {
-        const btn = modal.querySelector('.copy-btn');
-        const originalHTML = btn.innerHTML;
-        btn.innerHTML = '<iconify-icon icon="ph:check-bold"></iconify-icon> 已复制';
-        btn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
-        btn.classList.add('bg-green-500', 'hover:bg-green-600');
-        
-        setTimeout(() => {
-          btn.innerHTML = originalHTML;
-          btn.classList.remove('bg-green-500', 'hover:bg-green-600');
-          btn.classList.add('bg-blue-500', 'hover:bg-blue-600');
-        }, 2000);
-      });
-    });
-  }
-
-  // 打开API配置模态窗
-  openConfigModal() {
-    this.configModal.classList.add('active');
-    const apiConfig = window.apiClient.getConfig();
-    this.apiUrlInput.value = apiConfig.url || '';
-    this.apiKeyInput.value = apiConfig.key || '';
-    this.apiModelInput.value = apiConfig.model || '';
-  }
-
-  // 关闭API配置模态窗
-  closeConfigModal() {
-    this.configModal.classList.remove('active');
-  }
-
-  // 保存API配置
-  saveAPIConfig() {
-    const config = {
-      url: this.apiUrlInput.value.trim(),
-      key: this.apiKeyInput.value.trim(),
-      model: this.apiModelInput.value.trim()
-    };
-    
-    if (!config.url || !config.key || !config.model) {
-      Utils.showStatus(this.configStatus, '⚠️ 请填写所有字段', 'error');
-      return;
-    }
-    
-    window.apiClient.saveConfig(config);
-    Utils.showStatus(this.configStatus, '✅ 配置已保存成功！', 'success');
-    
-    setTimeout(() => {
-      this.closeConfigModal();
-    }, 1500);
-  }
-
-  // 测试API连接
-  async testAPIConnection() {
-    const config = {
-      url: this.apiUrlInput.value.trim(),
-      key: this.apiKeyInput.value.trim(),
-      model: this.apiModelInput.value.trim()
-    };
-    
-    if (!config.url || !config.key || !config.model) {
-      Utils.showStatus(this.configStatus, '⚠️ 请先填写所有字段', 'error');
-      return;
-    }
-    
-    Utils.showStatus(this.configStatus, '🔄 正在测试连接...', 'loading');
-    
-    try {
-      // 临时保存配置进行测试
-      window.apiClient.saveConfig(config);
-      await window.apiClient.testConnection();
-      Utils.showStatus(this.configStatus, '✅ 连接测试成功！', 'success');
-    } catch (error) {
-      Utils.showStatus(this.configStatus, `❌ 连接失败: ${error.message}`, 'error');
-    }
-  }
-}
-
-// 页面加载完成后初始化应用
-document.addEventListener('DOMContentLoaded', () => {
-  window.app = new ProductCanvasApp();
-});
+})();
diff --git a/js/core/app-shell.js b/js/core/app-shell.js
new file mode 100644
index 0000000..3caf3e0
--- /dev/null
+++ b/js/core/app-shell.js
@@ -0,0 +1,975 @@
+(function (global) {
+  'use strict';
+
+  const STREAM_DEFAULT_OPTIONS = {
+    maxTokens: 13000,
+    temperature: 0.7
+  };
+
+  class AppShell {
+    constructor({ apiClient, moduleRuntime }) {
+      if (!apiClient) throw new Error('AppShell 初始化失败：缺少 apiClient');
+      if (!moduleRuntime)
+        throw new Error('AppShell 初始化失败：缺少 moduleRuntime');
+
+      this.apiClient = apiClient;
+      this.runtime = moduleRuntime;
+      this.conversationService = moduleRuntime.getConversationService();
+
+      this.el = {};
+      this.moduleButtons = new Map();
+      this.copyClipboardSupported =
+        typeof ClipboardItem !== 'undefined' && !!navigator.clipboard;
+
+      const deviceScale =
+        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+      this.imageExportScale = Math.min(4, Math.max(2, deviceScale));
+
+      this.isProcessing = false;
+      this.activeStreamHandle = null;
+      this.pendingCancel = false;
+      this.streamState = null;
+      this.echartsInstance = null;
+
+      this.globalStore = moduleRuntime.storageService.global();
+      this.activeModuleId = null;
+
+      this.initElements();
+      this.bindGlobalEvents();
+      this.setupModuleSwitcher();
+      this.restoreLastModule();
+      this.setSendButtonState('idle');
+    }
+
+    initElements() {
+      this.el.pageTitle = document.getElementById('page-title');
+      this.el.moduleButtonGroup = document.getElementById(
+        'module-button-group'
+      );
+
+      // 对话相关
+      this.el.chatInput = document.getElementById('chat-input');
+      this.el.sendButton = document.getElementById('send-button');
+      this.el.clearHistoryBtn = document.getElementById('clear-history-btn');
+      this.el.chatHistory = document.getElementById('chat-history');
+
+      // 视图区域
+      this.el.viewer = document.getElementById('svg-viewer');
+      this.el.placeholderText =
+        this.el.viewer && this.el.viewer.querySelector('#placeholder-text');
+
+      // 工具栏
+      this.el.zoomOutBtn = document.getElementById('zoom-out-btn');
+      this.el.zoomInBtn = document.getElementById('zoom-in-btn');
+      this.el.zoomResetBtn = document.getElementById('zoom-reset-btn');
+      this.el.downloadSvgBtn = document.getElementById('download-svg-btn');
+      this.el.copyImageBtn = document.getElementById('copy-image-btn');
+      this.el.exportImageBtn = document.getElementById('export-image-btn');
+      this.el.viewCodeBtn = document.getElementById('view-code-btn');
+
+      // 配置模态框
+      this.el.settingsBtn = document.getElementById('settings-btn');
+      this.el.configModal = document.getElementById('config-modal');
+      this.el.closeModalBtn = document.getElementById('close-modal-btn');
+      this.el.apiUrlInput = document.getElementById('api-url');
+      this.el.apiKeyInput = document.getElementById('api-key');
+      this.el.apiModelInput = document.getElementById('api-model');
+      this.el.testApiBtn = document.getElementById('test-api-btn');
+      this.el.saveConfigBtn = document.getElementById('save-config-btn');
+      this.el.configStatus = document.getElementById('config-status');
+      this.el.statusText = document.getElementById('status-text');
+
+      // 复制按钮可用性
+      if (this.el.copyImageBtn && !this.copyClipboardSupported) {
+        this.el.copyImageBtn.disabled = true;
+        this.el.copyImageBtn.title = '当前浏览器不支持复制图片到剪贴板';
+      }
+    }
+
+    bindGlobalEvents() {
+      if (this.el.sendButton) {
+        this.el.sendButton.addEventListener('click', () => {
+          if (this.isProcessing) {
+            this.cancelActiveStream();
+          } else {
+            this.sendMessage();
+          }
+        });
+      }
+
+      if (this.el.chatInput) {
+        this.el.chatInput.addEventListener('keypress', (event) => {
+          if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (!this.isProcessing) {
+              this.sendMessage();
+            }
+          }
+        });
+
+        this.el.chatInput.addEventListener('input', () => {
+          Utils.autoResizeTextarea(this.el.chatInput);
+        });
+      }
+
+      if (this.el.clearHistoryBtn) {
+        this.el.clearHistoryBtn.addEventListener('click', () =>
+          this.clearCurrentConversation()
+        );
+      }
+
+      if (this.el.zoomInBtn) {
+        this.el.zoomInBtn.addEventListener('click', () => this.adjustZoom(0.25));
+      }
+      if (this.el.zoomOutBtn) {
+        this.el.zoomOutBtn.addEventListener('click', () =>
+          this.adjustZoom(-0.25)
+        );
+      }
+      if (this.el.zoomResetBtn) {
+        this.el.zoomResetBtn.addEventListener('click', () =>
+          this.resetZoom()
+        );
+      }
+
+      if (this.el.downloadSvgBtn) {
+        this.el.downloadSvgBtn.addEventListener('click', () =>
+          this.downloadArtifact()
+        );
+      }
+      if (this.el.copyImageBtn) {
+        this.el.copyImageBtn.addEventListener('click', () =>
+          this.copyArtifactImage()
+        );
+      }
+      if (this.el.exportImageBtn) {
+        this.el.exportImageBtn.addEventListener('click', () =>
+          this.exportArtifactAsImage()
+        );
+      }
+      if (this.el.viewCodeBtn) {
+        this.el.viewCodeBtn.addEventListener('click', () =>
+          this.viewArtifactCode()
+        );
+      }
+
+      if (this.el.settingsBtn) {
+        this.el.settingsBtn.addEventListener('click', () =>
+          this.openConfigModal()
+        );
+      }
+      if (this.el.closeModalBtn) {
+        this.el.closeModalBtn.addEventListener('click', () =>
+          this.closeConfigModal()
+        );
+      }
+      if (this.el.configModal) {
+        this.el.configModal.addEventListener('click', (event) => {
+          if (event.target === this.el.configModal) {
+            this.closeConfigModal();
+          }
+        });
+      }
+      if (this.el.testApiBtn) {
+        this.el.testApiBtn.addEventListener('click', () => this.testAPI());
+      }
+      if (this.el.saveConfigBtn) {
+        this.el.saveConfigBtn.addEventListener('click', () => this.saveAPI());
+      }
+    }
+
+    setupModuleSwitcher() {
+      const manifests = this.runtime.listManifests();
+      if (!manifests.length) {
+        throw new Error('未找到可用模块，请确认模块清单是否注册');
+      }
+
+      if (!this.el.moduleButtonGroup) {
+        console.warn('模块按钮容器缺失，无法渲染模块切换按钮');
+        return;
+      }
+      this.el.moduleButtonGroup.innerHTML = '';
+      this.moduleButtons.clear();
+
+      manifests.forEach((manifest) => {
+        const button = document.createElement('button');
+        button.className =
+          'module-btn bg-white text-gray-700 px-4 py-2 font-bold border-2 border-black hover:bg-gray-100 transition-all duration-200 flex items-center gap-1';
+        button.dataset.moduleId = manifest.id;
+        button.innerHTML = `
+          <iconify-icon icon="${manifest.icon ||
+            'ph:squares-four'}" class="text-xl"></iconify-icon>
+          <span>${manifest.label}</span>
+        `;
+        button.addEventListener('click', () =>
+          this.activateModule(manifest.id)
+        );
+        this.el.moduleButtonGroup.appendChild(button);
+        this.moduleButtons.set(manifest.id, button);
+      });
+    }
+
+    restoreLastModule() {
+      const manifests = this.runtime.listManifests();
+      const preferredId =
+        this.globalStore.get('activeModuleId', null) ||
+        (manifests[0] && manifests[0].id);
+      const fallbackId = manifests[0].id;
+      this.activateModule(
+        this.runtime.registry.has(preferredId) ? preferredId : fallbackId
+      );
+    }
+
+    activateModule(moduleId) {
+      if (this.activeModuleId === moduleId) {
+        return;
+      }
+      const context = this.runtime.activate(moduleId);
+      this.activeModuleId = moduleId;
+      this.globalStore.set('activeModuleId', moduleId);
+
+      this.highlightActiveModuleButton();
+      this.updateModuleUI(context.manifest);
+      this.loadApiConfig();
+      this.renderConversationHistory();
+      this.renderActiveArtifact();
+      this.updateToolbarState();
+    }
+
+    highlightActiveModuleButton() {
+      this.moduleButtons.forEach((button, id) => {
+        if (id === this.activeModuleId) {
+          button.classList.add('mode-btn-active');
+          button.classList.remove('mode-btn-inactive');
+        } else {
+          button.classList.add('mode-btn-inactive');
+          button.classList.remove('mode-btn-active');
+        }
+      });
+    }
+
+    updateModuleUI(manifest) {
+      if (this.el.pageTitle) {
+        this.el.pageTitle.textContent = manifest.label;
+      }
+      if (this.el.chatInput && manifest.chat?.placeholder) {
+        this.el.chatInput.placeholder = manifest.chat.placeholder;
+      }
+      this.showViewerPlaceholder(manifest.ui?.placeholderText || '');
+    }
+
+    showViewerPlaceholder(text) {
+      if (!this.el.viewer) return;
+      this.el.viewer.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">${text ||
+            '生成的内容将在此处显示'}</p>
+        </div>
+      `;
+      this.el.placeholderText =
+        this.el.viewer && this.el.viewer.querySelector('#placeholder-text');
+    }
+
+    getActiveManifest() {
+      return this.runtime.getManifest(this.activeModuleId);
+    }
+
+    getCurrentHistory() {
+      return this.conversationService.getHistory(this.getActiveManifest());
+    }
+
+    renderConversationHistory() {
+      if (!this.el.chatHistory) return;
+      const history = this.getCurrentHistory();
+      this.el.chatHistory.innerHTML = '';
+      const manifest = this.getActiveManifest();
+
+      if (!history.length) {
+        const welcome = document.createElement('div');
+        welcome.className = 'flex justify-start';
+        welcome.innerHTML = `
+          <div class="chat-bubble-ai">
+            👋 欢迎使用 ${manifest.label} 助手！请输入需求，我会结合模块特性生成图表与分析。
+          </div>
+        `;
+        this.el.chatHistory.appendChild(welcome);
+        return;
+      }
+
+      history.forEach((message) => {
+        const bubble = this.buildMessageBubble(message);
+        this.el.chatHistory.appendChild(bubble);
+      });
+
+      Utils.scrollToBottom(this.el.chatHistory);
+    }
+
+    buildMessageBubble(message) {
+      const wrapper = document.createElement('div');
+      const manifest = this.getActiveManifest();
+      if (message.type === 'user') {
+        wrapper.className = 'flex justify-end';
+        wrapper.innerHTML = `
+          <div class="chat-bubble-user message-with-delete" data-message-id="${message.id}">
+            <div>${Utils.escapeHtml(message.content)}</div>
+          </div>
+        `;
+      } else if (message.type === 'error') {
+        wrapper.className = 'flex justify-start';
+        wrapper.innerHTML = `
+          <div class="chat-bubble-ai message-with-delete border-red-500" data-message-id="${message.id}">
+            <div class="flex items-start gap-2">
+              <iconify-icon icon="ph:warning-circle" class="text-red-500 mt-0.5"></iconify-icon>
+              <span>${Utils.escapeHtml(message.content)}</span>
+            </div>
+          </div>
+        `;
+      } else {
+        wrapper.className = 'flex justify-start';
+        const parsedContent =
+          typeof marked !== 'undefined'
+            ? marked.parse(message.content)
+            : Utils.escapeHtml(message.content);
+        const artifactHtml = message.artifactId
+          ? `<div class="svg-placeholder-block" data-artifact-id="${message.artifactId}" data-module-id="${manifest.id}">
+              📊 点击查看最新图表
+            </div>`
+          : '';
+        wrapper.innerHTML = `
+          <div class="chat-bubble-ai message-with-delete" data-message-id="${message.id}">
+            <div class="message-body">${parsedContent}</div>
+            ${artifactHtml}
+          </div>
+        `;
+        if (message.artifactId) {
+          const placeholder = wrapper.querySelector('.svg-placeholder-block');
+          placeholder?.addEventListener('click', () =>
+            this.renderArtifact(message.artifactId)
+          );
+        }
+      }
+      return wrapper;
+    }
+
+    sendMessage() {
+      if (!this.el.chatInput) return;
+      const message = this.el.chatInput.value.trim();
+      if (!message || this.isProcessing) return;
+
+      if (!this.apiClient.isConfigValid()) {
+        alert('⚠️ 请先配置API设置！点击右上角齿轮图标进行配置。');
+        this.openConfigModal();
+        return;
+      }
+
+      const manifest = this.getActiveManifest();
+      const userMessage = {
+        id: Utils.generateId('msg'),
+        type: 'user',
+        content: message,
+        timestamp: new Date().toISOString()
+      };
+
+      this.conversationService.appendMessage(manifest, userMessage);
+      this.renderConversationHistory();
+      this.el.chatInput.value = '';
+      Utils.autoResizeTextarea(this.el.chatInput);
+
+      const context = this.conversationService.buildContext(manifest);
+      if (!context) {
+        console.warn('无法构建上下文，终止发送');
+        return;
+      }
+
+      this.isProcessing = true;
+      this.pendingCancel = false;
+      this.setSendButtonState('streaming');
+      this.el.sendButton.disabled = false;
+
+      this.startStreaming(manifest, context);
+    }
+
+    startStreaming(manifest, context) {
+      const messageId = Utils.generateId('msg');
+      const container = this.createStreamingContainer(messageId);
+      this.el.chatHistory.appendChild(container);
+      Utils.scrollToBottom(this.el.chatHistory);
+
+      let fullContent = '';
+
+      const finalize = ({ aborted = false } = {}) => {
+        if (!this.isProcessing) return;
+        this.isProcessing = false;
+        this.setSendButtonState('idle');
+        this.el.sendButton.disabled = false;
+        this.activeStreamHandle = null;
+        this.pendingCancel = false;
+
+        if (aborted) {
+          container.remove();
+          return;
+        }
+
+        this.finalizeAssistantMessage(manifest, messageId, fullContent);
+      };
+
+      const handleChunk = (chunk) => {
+        const delta = chunk?.choices?.[0]?.delta?.content || '';
+        if (!delta) return;
+        fullContent += delta;
+        this.updateStreamingContent(container, fullContent);
+      };
+
+      const handleComplete = (info) => {
+        finalize(info);
+      };
+
+      this.apiClient
+        .generateModuleStream(
+          manifest,
+          context.userMessage.content,
+          context.contextMessages,
+          handleChunk,
+          handleComplete,
+          STREAM_DEFAULT_OPTIONS
+        )
+        .then((streamHandle) => {
+          this.activeStreamHandle = streamHandle;
+          if (this.pendingCancel) {
+            this.pendingCancel = false;
+            this.cancelActiveStream();
+          }
+          return streamHandle.finished;
+        })
+        .then(() => finalize({ aborted: false }))
+        .catch((error) => {
+          console.error('发送消息失败:', error);
+          finalize({ aborted: true });
+          this.addErrorMessage(
+            error.message || '生成失败，请稍后再试',
+            manifest
+          );
+        });
+    }
+
+    createStreamingContainer(messageId) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = 'flex justify-start';
+      messageDiv.dataset.messageId = messageId;
+      messageDiv.innerHTML = `
+        <div class="chat-bubble-ai relative streaming-text" data-message-id="${messageId}">
+          <div class="typing-cursor"></div>
+        </div>
+      `;
+      return messageDiv;
+    }
+
+    updateStreamingContent(container, content) {
+      const cursor = container.querySelector('.typing-cursor');
+      if (!cursor) return;
+      if (typeof marked !== 'undefined') {
+        cursor.innerHTML = marked.parse(content);
+      } else {
+        cursor.textContent = content;
+      }
+      Utils.scrollToBottom(this.el.chatHistory);
+    }
+
+    finalizeAssistantMessage(manifest, messageId, fullContent) {
+      const container = this.el.chatHistory.querySelector(
+        `[data-message-id="${messageId}"]`
+      );
+      if (container) {
+        container.remove();
+      }
+
+      const timestamp = new Date().toISOString();
+      let artifactId = null;
+      let artifactPayload = null;
+
+      if (manifest.artifact?.parser) {
+        try {
+          const parsed = manifest.artifact.parser(fullContent);
+          if (manifest.artifact.type === 'svg' && parsed.svgContent) {
+            artifactId = Utils.generateId('svg');
+            const svgBody = parsed.svgContent.trim().endsWith('</svg>')
+              ? parsed.svgContent.trim()
+              : `${parsed.svgContent.trim()}\n</svg>`;
+            artifactPayload = {
+              id: artifactId,
+              type: manifest.artifact.type,
+              content: svgBody,
+              messageId,
+              timestamp
+            };
+          } else if (
+            manifest.artifact.type === 'echarts-option' &&
+            parsed.option
+          ) {
+            artifactId = Utils.generateId('chart');
+            artifactPayload = {
+              id: artifactId,
+              type: manifest.artifact.type,
+              option: parsed.option,
+              optionText: parsed.optionText || JSON.stringify(parsed.option),
+              messageId,
+              timestamp
+            };
+          }
+        } catch (error) {
+          console.warn('解析助手内容失败:', error);
+        }
+      }
+
+      const messageRecord = {
+        id: messageId,
+        type: 'ai',
+        content: fullContent,
+        timestamp,
+        artifactId
+      };
+      this.conversationService.appendMessage(manifest, messageRecord);
+
+      if (artifactId && artifactPayload) {
+        this.runtime.saveArtifact(manifest.id, artifactId, artifactPayload);
+        this.renderArtifact(artifactId);
+      }
+
+      this.renderConversationHistory();
+    }
+
+    addErrorMessage(errorText, manifest) {
+      const message = {
+        id: Utils.generateId('msg'),
+        type: 'error',
+        content: errorText,
+        timestamp: new Date().toISOString()
+      };
+      this.conversationService.appendMessage(manifest, message);
+      this.renderConversationHistory();
+    }
+
+    cancelActiveStream() {
+      if (!this.activeStreamHandle || typeof this.activeStreamHandle.cancel !== 'function') {
+        this.pendingCancel = true;
+        this.setSendButtonState('terminating');
+        return;
+      }
+      this.pendingCancel = false;
+      this.setSendButtonState('terminating');
+      try {
+        this.activeStreamHandle.cancel();
+      } catch (error) {
+        console.warn('终止流式请求失败:', error);
+      }
+    }
+
+    renderActiveArtifact() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const activeId = state.currentArtifactId;
+      if (activeId) {
+        this.renderArtifact(activeId);
+      } else {
+        this.showViewerPlaceholder(manifest.ui?.placeholderText || '');
+      }
+    }
+
+    renderArtifact(artifactId) {
+      const manifest = this.getActiveManifest();
+      const artifacts = this.runtime.getArtifacts(manifest.id);
+      const artifact = artifacts[artifactId];
+      if (!artifact) {
+        console.warn('未找到图形资源', artifactId);
+        return;
+      }
+      this.runtime.setActiveArtifact(manifest.id, artifactId);
+      if (artifact.type === 'svg') {
+        this.renderSvgArtifact(artifact);
+      } else if (artifact.type === 'echarts-option') {
+        this.renderEChartsArtifact(artifact);
+      }
+      this.updateToolbarState();
+    }
+
+    renderSvgArtifact(artifact) {
+      if (!this.el.viewer) return;
+      this.el.viewer.innerHTML = '';
+      const wrapper = document.createElement('div');
+      wrapper.className = 'svg-content-wrapper';
+      wrapper.innerHTML = artifact.content;
+      this.el.viewer.appendChild(wrapper);
+      const uiState = this.runtime.getUiState(this.activeModuleId, {
+        zoom: 1
+      });
+      wrapper.style.transform = `scale(${uiState.zoom})`;
+      wrapper.style.transformOrigin = 'center top';
+    }
+
+    renderEChartsArtifact(artifact) {
+      if (!this.el.viewer) return;
+      this.el.viewer.innerHTML = '';
+      const chartContainer = document.createElement('div');
+      chartContainer.id = 'echarts-container';
+      chartContainer.style.width = '100%';
+      chartContainer.style.height = '100%';
+      this.el.viewer.appendChild(chartContainer);
+
+      if (!window.echarts) {
+        chartContainer.innerHTML =
+          '<p class="text-center text-red-500 font-bold">未加载 ECharts 库</p>';
+        return;
+      }
+
+      if (this.echartsInstance) {
+        this.echartsInstance.dispose();
+      }
+      this.echartsInstance = window.echarts.init(chartContainer, null, {
+        renderer: 'canvas'
+      });
+      this.echartsInstance.setOption(artifact.option, true);
+    }
+
+    adjustZoom(delta) {
+      const manifest = this.getActiveManifest();
+      if (manifest.artifact?.type !== 'svg') return;
+      const uiState = this.runtime.getUiState(manifest.id, { zoom: 1 });
+      const nextZoom = Math.min(
+        3,
+        Math.max(0.25, parseFloat((uiState.zoom + delta).toFixed(2)))
+      );
+      this.runtime.updateUiState(manifest.id, { zoom: nextZoom });
+      this.renderActiveArtifact();
+    }
+
+    resetZoom() {
+      const manifest = this.getActiveManifest();
+      if (manifest.artifact?.type !== 'svg') return;
+      this.runtime.updateUiState(manifest.id, { zoom: 1 });
+      this.renderActiveArtifact();
+    }
+
+    downloadArtifact() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const id = state.currentArtifactId;
+      if (!id) return;
+      const artifact = state.artifacts[id];
+      if (!artifact) return;
+
+      if (artifact.type === 'svg') {
+        Utils.downloadFile(artifact.content, `${manifest.id}.svg`, 'image/svg+xml');
+      } else {
+        alert('当前图表不支持导出 SVG，请使用导出图片功能');
+      }
+    }
+
+    async copyArtifactImage() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const id = state.currentArtifactId;
+      if (!id) return;
+      const artifact = state.artifacts[id];
+      if (!artifact) return;
+
+      if (artifact.type !== 'svg') {
+        alert('暂不支持复制此类型图表到剪贴板');
+        return;
+      }
+
+      const svgBlob = new Blob([artifact.content], {
+        type: 'image/svg+xml'
+      });
+      const svgUrl = URL.createObjectURL(svgBlob);
+      const image = new Image();
+      image.crossOrigin = 'anonymous';
+      image.src = svgUrl;
+
+      image.onload = async () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width * this.imageExportScale;
+        canvas.height = image.height * this.imageExportScale;
+        const ctx = canvas.getContext('2d');
+        ctx.setTransform(this.imageExportScale, 0, 0, this.imageExportScale, 0, 0);
+        ctx.drawImage(image, 0, 0);
+
+        canvas.toBlob(async (blob) => {
+          try {
+            const clipboardItem = new ClipboardItem({ 'image/png': blob });
+            await navigator.clipboard.write([clipboardItem]);
+            alert('图像已复制到剪贴板');
+          } catch (error) {
+            console.error('复制失败:', error);
+            alert('复制失败，请稍后再试');
+          } finally {
+            URL.revokeObjectURL(svgUrl);
+          }
+        });
+      };
+    }
+
+    exportArtifactAsImage() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const id = state.currentArtifactId;
+      if (!id) return;
+      const artifact = state.artifacts[id];
+      if (!artifact) return;
+
+      if (artifact.type === 'svg') {
+        const svgBlob = new Blob([artifact.content], {
+          type: 'image/svg+xml'
+        });
+        const svgUrl = URL.createObjectURL(svgBlob);
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        image.src = svgUrl;
+        image.onload = () => {
+          const canvas = document.createElement('canvas');
+          canvas.width = image.width * this.imageExportScale;
+          canvas.height = image.height * this.imageExportScale;
+          const ctx = canvas.getContext('2d');
+          ctx.setTransform(this.imageExportScale, 0, 0, this.imageExportScale, 0, 0);
+          ctx.drawImage(image, 0, 0);
+          const pngUrl = canvas.toDataURL('image/png');
+          const link = document.createElement('a');
+          link.href = pngUrl;
+          link.download = `${manifest.id}-${Utils.formatDateTime().replace(/\\W/g, '')}.png`;
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+          URL.revokeObjectURL(svgUrl);
+        };
+      } else if (artifact.type === 'echarts-option') {
+        if (!this.echartsInstance) {
+          alert('图表实例未准备好，无法导出');
+          return;
+        }
+        const url = this.echartsInstance.getDataURL({
+          type: 'png',
+          pixelRatio: 2,
+          backgroundColor: '#fff'
+        });
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `${manifest.id}-${Utils.formatDateTime().replace(/\\W/g, '')}.png`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+      }
+    }
+
+    viewArtifactCode() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const id = state.currentArtifactId;
+      if (!id) return;
+      const artifact = state.artifacts[id];
+      if (!artifact) return;
+
+      let content = '';
+      if (artifact.type === 'svg') {
+        content = artifact.content;
+      } else if (artifact.type === 'echarts-option') {
+        content = artifact.optionText || JSON.stringify(artifact.option, null, 2);
+      }
+
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = URL.createObjectURL(blob);
+      window.open(url, '_blank');
+
+      setTimeout(() => URL.revokeObjectURL(url), 1000 * 30);
+    }
+
+    setSendButtonState(state) {
+      if (!this.el.sendButton) return;
+      if (state === 'streaming') {
+        this.el.sendButton.innerHTML = `
+          <span class="flex items-center gap-1 text-red-600 font-bold">
+            <iconify-icon icon="ph:hand-palm-bold" class="text-2xl"></iconify-icon>
+            <span>终止</span>
+          </span>
+        `;
+        this.el.sendButton.classList.add('terminate-mode');
+        this.el.sendButton.title = '终止当前生成';
+      } else if (state === 'terminating') {
+        this.el.sendButton.innerHTML = `
+          <span class="flex items-center gap-1 text-orange-500 font-bold">
+            <iconify-icon icon="ph:hourglass-medium-bold" class="text-2xl"></iconify-icon>
+            <span>终止中</span>
+          </span>
+        `;
+        this.el.sendButton.classList.add('terminate-mode');
+        this.el.sendButton.title = '正在终止生成';
+      } else if (state === 'busy') {
+        this.el.sendButton.innerHTML = `
+          <span class="flex items-center gap-1 text-blue-600 font-bold">
+            <iconify-icon icon="ph:clock-bold" class="text-2xl"></iconify-icon>
+            <span>处理中</span>
+          </span>
+        `;
+        this.el.sendButton.classList.add('terminate-mode');
+        this.el.sendButton.title = '正在处理请求';
+      } else {
+        this.el.sendButton.innerHTML =
+          '<iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>';
+        this.el.sendButton.classList.remove('terminate-mode');
+        this.el.sendButton.title = '发送';
+      }
+    }
+
+    updateToolbarState() {
+      const manifest = this.getActiveManifest();
+      const state = this.runtime.getState(manifest.id);
+      const hasArtifact = !!state.currentArtifactId;
+
+      if (manifest.artifact?.type !== 'svg') {
+        this.el.zoomInBtn && (this.el.zoomInBtn.disabled = true);
+        this.el.zoomOutBtn && (this.el.zoomOutBtn.disabled = true);
+        this.el.zoomResetBtn && (this.el.zoomResetBtn.disabled = true);
+      } else {
+        const uiState = this.runtime.getUiState(manifest.id, { zoom: 1 });
+        if (this.el.zoomInBtn) {
+          this.el.zoomInBtn.disabled = !hasArtifact || uiState.zoom >= 3;
+        }
+        if (this.el.zoomOutBtn) {
+          this.el.zoomOutBtn.disabled = !hasArtifact || uiState.zoom <= 0.25;
+        }
+        if (this.el.zoomResetBtn) {
+          this.el.zoomResetBtn.disabled =
+            !hasArtifact || Math.abs(uiState.zoom - 1) < 0.01;
+        }
+      }
+
+      if (this.el.downloadSvgBtn) {
+        this.el.downloadSvgBtn.disabled =
+          !hasArtifact || !manifest.exports?.allowSvg;
+      }
+      if (this.el.copyImageBtn) {
+        this.el.copyImageBtn.disabled =
+          !hasArtifact ||
+          !this.copyClipboardSupported ||
+          manifest.artifact?.type !== 'svg' ||
+          manifest.exports?.allowClipboard === false;
+      }
+      if (this.el.exportImageBtn) {
+        this.el.exportImageBtn.disabled =
+          !hasArtifact || !manifest.exports?.allowPng;
+      }
+      if (this.el.viewCodeBtn) {
+        this.el.viewCodeBtn.disabled =
+          !hasArtifact || !manifest.exports?.allowCode;
+      }
+    }
+
+    clearCurrentConversation() {
+      const manifest = this.getActiveManifest();
+      if (
+        !confirm(`确定要清空当前的 ${manifest.label} 对话和图形吗？`)
+      ) {
+        return;
+      }
+      this.conversationService.clearHistory(manifest);
+      this.runtime.clearArtifacts(manifest.id);
+      if (this.echartsInstance) {
+        this.echartsInstance.dispose();
+        this.echartsInstance = null;
+      }
+      this.renderConversationHistory();
+      this.showViewerPlaceholder(manifest.ui?.placeholderText || '');
+      this.updateToolbarState();
+    }
+
+    openConfigModal() {
+      if (!this.el.configModal) return;
+      this.el.configModal.classList.add('active');
+      this.el.configModal.style.display = 'flex';
+    }
+
+    closeConfigModal() {
+      if (!this.el.configModal) return;
+      this.el.configModal.classList.remove('active');
+      this.el.configModal.style.display = 'none';
+    }
+
+    loadApiConfig() {
+      const config = this.apiClient.getConfig();
+      if (this.el.apiUrlInput) this.el.apiUrlInput.value = config.url || '';
+      if (this.el.apiKeyInput) this.el.apiKeyInput.value = config.key || '';
+      if (this.el.apiModelInput) this.el.apiModelInput.value = config.model || '';
+    }
+
+    async testAPI() {
+      try {
+        this.setConfigStatus('loading', '正在测试连接...');
+        await this.apiClient.testConnection();
+        this.setConfigStatus('success', '连接成功，可以开始生成图表');
+      } catch (error) {
+        this.setConfigStatus('error', error.message);
+      }
+    }
+
+    saveAPI() {
+      const config = {
+        url: this.el.apiUrlInput?.value.trim(),
+        key: this.el.apiKeyInput?.value.trim(),
+        model: this.el.apiModelInput?.value.trim()
+      };
+      if (!config.url || !config.key || !config.model) {
+        this.setConfigStatus('error', '请填写完整的配置');
+        return;
+      }
+      this.apiClient.saveConfig(config);
+      this.setConfigStatus('success', '配置已保存');
+      setTimeout(() => this.closeConfigModal(), 600);
+    }
+
+    setConfigStatus(type, message) {
+      if (!this.el.configStatus || !this.el.statusText) return;
+      this.el.configStatus.classList.remove('hidden');
+      this.el.statusText.textContent = message;
+      this.el.configStatus.classList.remove(
+        'border-gray-300',
+        'bg-gray-50',
+        'text-gray-600',
+        'border-green-500',
+        'bg-green-50',
+        'text-green-700',
+        'border-red-500',
+        'bg-red-50',
+        'text-red-700',
+        'border-blue-500',
+        'bg-blue-50',
+        'text-blue-700'
+      );
+      if (type === 'success') {
+        this.el.configStatus.classList.add(
+          'border-green-500',
+          'bg-green-50',
+          'text-green-700'
+        );
+      } else if (type === 'error') {
+        this.el.configStatus.classList.add(
+          'border-red-500',
+          'bg-red-50',
+          'text-red-700'
+        );
+      } else if (type === 'loading') {
+        this.el.configStatus.classList.add(
+          'border-blue-500',
+          'bg-blue-50',
+          'text-blue-700'
+        );
+      } else {
+        this.el.configStatus.classList.add(
+          'border-gray-300',
+          'bg-gray-50',
+          'text-gray-600'
+        );
+      }
+    }
+  }
+
+  global.AppShell = AppShell;
+})(window);
diff --git a/js/core/module-registry.js b/js/core/module-registry.js
new file mode 100644
index 0000000..dd3703d
--- /dev/null
+++ b/js/core/module-registry.js
@@ -0,0 +1,36 @@
+(function (global) {
+  'use strict';
+
+  class ModuleRegistry {
+    constructor() {
+      this.modules = new Map();
+      this.order = [];
+    }
+
+    register(manifest) {
+      if (!manifest || !manifest.id) {
+        throw new Error('注册模块失败：缺少 id');
+      }
+      if (this.modules.has(manifest.id)) {
+        console.warn(`模块 ${manifest.id} 已存在，将被覆盖`);
+      } else {
+        this.order.push(manifest.id);
+      }
+      this.modules.set(manifest.id, manifest);
+    }
+
+    get(moduleId) {
+      return this.modules.get(moduleId) || null;
+    }
+
+    list() {
+      return this.order.map((id) => this.modules.get(id));
+    }
+
+    has(moduleId) {
+      return this.modules.has(moduleId);
+    }
+  }
+
+  global.ModuleRegistry = new ModuleRegistry();
+})(window);
diff --git a/js/core/module-runtime.js b/js/core/module-runtime.js
new file mode 100644
index 0000000..fdc9f9d
--- /dev/null
+++ b/js/core/module-runtime.js
@@ -0,0 +1,181 @@
+(function (global) {
+  'use strict';
+
+  const DEFAULT_STORAGE_KEYS = {
+    history: 'history',
+    artifacts: 'artifacts',
+    ui: 'uiState'
+  };
+
+  class ModuleRuntime {
+    constructor({ registry, storageService, conversationService }) {
+      if (!registry) throw new Error('ModuleRuntime 需要 ModuleRegistry');
+      if (!storageService) throw new Error('ModuleRuntime 需要 StorageService');
+      if (!conversationService)
+        throw new Error('ModuleRuntime 需要 ConversationService');
+
+      this.registry = registry;
+      this.storageService = storageService;
+      this.conversationService = conversationService;
+      this.moduleStates = new Map();
+      this.activeModuleId = null;
+    }
+
+    _storageKeys(manifest) {
+      return {
+        ...DEFAULT_STORAGE_KEYS,
+        ...(manifest.storageKeys || {})
+      };
+    }
+
+    _namespace(manifest) {
+      const namespace =
+        manifest.storageNamespace || `module:${manifest.id || 'unknown'}`;
+      return this.storageService.namespace(namespace);
+    }
+
+    _ensureState(manifest) {
+      if (this.moduleStates.has(manifest.id)) {
+        return this.moduleStates.get(manifest.id);
+      }
+
+      const store = this._namespace(manifest);
+      const keys = this._storageKeys(manifest);
+
+      const state = {
+        artifacts: store.get(keys.artifacts, {}),
+        uiState: store.get(keys.ui, {}),
+        currentArtifactId: null
+      };
+      if (state.uiState && state.uiState.__activeArtifact) {
+        state.currentArtifactId = state.uiState.__activeArtifact;
+      }
+
+      this.moduleStates.set(manifest.id, state);
+      return state;
+    }
+
+    _persistState(manifest) {
+      const store = this._namespace(manifest);
+      const keys = this._storageKeys(manifest);
+      const state = this._ensureState(manifest);
+
+      if (state.uiState) {
+        state.uiState.__activeArtifact = state.currentArtifactId;
+      }
+      store.set(keys.artifacts, state.artifacts);
+      store.set(keys.ui, state.uiState);
+    }
+
+    getManifest(moduleId) {
+      const manifest = this.registry.get(moduleId);
+      if (!manifest) {
+        throw new Error(`未找到模块 ${moduleId}`);
+      }
+      return manifest;
+    }
+
+    listManifests() {
+      return this.registry.list();
+    }
+
+    activate(moduleId) {
+      const manifest = this.getManifest(moduleId);
+      this.activeModuleId = moduleId;
+      const state = this._ensureState(manifest);
+      const context = {
+        manifest,
+        state,
+        history: this.conversationService.getHistory(manifest)
+      };
+      if (manifest.hooks && typeof manifest.hooks.onActivate === 'function') {
+        try {
+          manifest.hooks.onActivate(context);
+        } catch (error) {
+          console.warn(`执行模块 ${moduleId} onActivate 时出错:`, error);
+        }
+      }
+      return context;
+    }
+
+    getActiveModule() {
+      if (!this.activeModuleId) return null;
+      return this.getManifest(this.activeModuleId);
+    }
+
+    getState(moduleId) {
+      const manifest = this.getManifest(moduleId);
+      return this._ensureState(manifest);
+    }
+
+    getArtifacts(moduleId) {
+      const state = this.getState(moduleId);
+      return state.artifacts;
+    }
+
+    saveArtifact(moduleId, artifactId, payload) {
+      const manifest = this.getManifest(moduleId);
+      const state = this._ensureState(manifest);
+      state.artifacts[artifactId] = payload;
+      state.currentArtifactId = artifactId;
+      this._persistState(manifest);
+      return payload;
+    }
+
+    removeArtifact(moduleId, artifactId) {
+      const manifest = this.getManifest(moduleId);
+      const state = this._ensureState(manifest);
+      if (state.artifacts[artifactId]) {
+        delete state.artifacts[artifactId];
+        if (state.currentArtifactId === artifactId) {
+          state.currentArtifactId = null;
+        }
+        this._persistState(manifest);
+      }
+    }
+
+    setActiveArtifact(moduleId, artifactId) {
+      const manifest = this.getManifest(moduleId);
+      const state = this._ensureState(manifest);
+      state.currentArtifactId = artifactId;
+      this._persistState(manifest);
+    }
+
+    getActiveArtifactId(moduleId) {
+      const state = this.getState(moduleId);
+      return state.currentArtifactId || null;
+    }
+
+    updateUiState(moduleId, patch) {
+      const manifest = this.getManifest(moduleId);
+      const state = this._ensureState(manifest);
+      state.uiState = {
+        ...state.uiState,
+        ...patch
+      };
+      this._persistState(manifest);
+      return state.uiState;
+    }
+
+    getUiState(moduleId, defaultValue = {}) {
+      const state = this.getState(moduleId);
+      const uiState = { ...(state.uiState || {}) };
+      delete uiState.__activeArtifact;
+      return { ...defaultValue, ...uiState };
+    }
+
+    getConversationService() {
+      return this.conversationService;
+    }
+
+    clearArtifacts(moduleId) {
+      const manifest = this.getManifest(moduleId);
+      const state = this._ensureState(manifest);
+      state.artifacts = {};
+      state.currentArtifactId = null;
+      this._persistState(manifest);
+    }
+  }
+
+  global.ModuleRuntime = ModuleRuntime;
+})(window);
diff --git a/js/modules/echarts.js b/js/modules/echarts.js
new file mode 100644
index 0000000..9328dc8
--- /dev/null
+++ b/js/modules/echarts.js
@@ -0,0 +1,78 @@
+(function registerEChartsModule(global) {
+  'use strict';
+
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  const CODE_FENCE_REGEX = /```(?:json|js|javascript|echarts|option)?\s*([\s\S]*?)```/i;
+
+  const parseOptionText = (text) => {
+    if (!text) return null;
+    try {
+      return JSON.parse(text);
+    } catch (error) {
+      try {
+        // 尝试处理 JS 对象语法
+        // eslint-disable-next-line no-new-func
+        return new Function(`return (${text});`)();
+      } catch (innerError) {
+        console.warn('解析 ECharts 配置失败:', innerError);
+        return null;
+      }
+    }
+  };
+
+  const parseResponse = (content) => {
+    const match = content.match(CODE_FENCE_REGEX);
+    if (match) {
+      const optionText = match[1].trim();
+      return {
+        optionText,
+        option: parseOptionText(optionText),
+        beforeText: content.substring(0, match.index).trim(),
+        afterText: content.substring(match.index + match[0].length).trim()
+      };
+    }
+    return {
+      optionText: '',
+      option: null,
+      beforeText: content.trim(),
+      afterText: ''
+    };
+  };
+
+  global.ModuleRegistry.register({
+    id: 'echarts',
+    label: 'ECharts 图表',
+    icon: 'ph:chart-line-up-duotone',
+    renderer: 'echarts',
+    promptKey: 'echarts',
+    storageNamespace: 'module:echarts',
+    chat: {
+      placeholder: '描述想生成的图表或调整需求，我会输出 ECharts 配置…',
+      streamStartToken: '```json',
+      contextWindow: 8
+    },
+    artifact: {
+      type: 'echarts-option',
+      fence: ['json', 'js', 'javascript', 'echarts', 'option'],
+      startPattern: /```(?:json|js|javascript|echarts|option)/i,
+      parser: parseResponse
+    },
+    hooks: {
+      onActivate() {
+        // 预留钩子，可在此初始化额外资源
+      }
+    },
+    exports: {
+      allowSvg: false,
+      allowPng: true,
+      allowClipboard: false,
+      allowCode: true
+    },
+    ui: {
+      placeholderText: '生成的 ECharts 图表将在此处显示'
+    }
+  });
+})(window);
diff --git a/js/modules/product-canvas.js b/js/modules/product-canvas.js
new file mode 100644
index 0000000..f0ec6f3
--- /dev/null
+++ b/js/modules/product-canvas.js
@@ -0,0 +1,43 @@
+(function registerProductCanvasModule(global) {
+  'use strict';
+
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  const parseResponse = (content) => Utils.parseSVGResponse(content);
+
+  global.ModuleRegistry.register({
+    id: 'product-canvas',
+    label: '产品画布',
+    icon: 'ph:pen-nib-duotone',
+    renderer: 'svg',
+    promptKey: 'canvas',
+    storageNamespace: 'module:product-canvas',
+    chat: {
+      placeholder: '描述你的产品定位、用户画像、价值主张等内容…',
+      streamStartToken: '```svg',
+      contextWindow: 10
+    },
+    artifact: {
+      type: 'svg',
+      fence: 'svg',
+      startPattern: /```(?:svg)?\s*<svg/i,
+      parser: parseResponse
+    },
+    hooks: {
+      onActivate() {
+        // 保留扩展点，后续可追加自定义逻辑
+      }
+    },
+    exports: {
+      allowSvg: true,
+      allowPng: true,
+      allowClipboard: true,
+      allowCode: true
+    },
+    ui: {
+      placeholderText: '生成的产品画布将在此处显示'
+    }
+  });
+})(window);
diff --git a/js/modules/swot.js b/js/modules/swot.js
new file mode 100644
index 0000000..13610bb
--- /dev/null
+++ b/js/modules/swot.js
@@ -0,0 +1,39 @@
+(function registerSwotModule(global) {
+  'use strict';
+
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  const parseResponse = (content) => Utils.parseSVGResponse(content);
+
+  global.ModuleRegistry.register({
+    id: 'swot',
+    label: 'SWOT分析',
+    icon: 'ph:chart-bar-duotone',
+    renderer: 'svg',
+    promptKey: 'swot',
+    storageNamespace: 'module:swot',
+    chat: {
+      placeholder: '输入业务背景或问题，我来生成 SWOT 分析…',
+      streamStartToken: '```svg',
+      contextWindow: 10
+    },
+    artifact: {
+      type: 'svg',
+      fence: 'svg',
+      startPattern: /```(?:svg)?\s*<svg/i,
+      parser: parseResponse
+    },
+    hooks: {},
+    exports: {
+      allowSvg: true,
+      allowPng: true,
+      allowClipboard: true,
+      allowCode: true
+    },
+    ui: {
+      placeholderText: '生成的SWOT分析将在此处显示'
+    }
+  });
+})(window);
diff --git a/js/services/conversation-service.js b/js/services/conversation-service.js
new file mode 100644
index 0000000..df47a70
--- /dev/null
+++ b/js/services/conversation-service.js
@@ -0,0 +1,118 @@
+(function (global) {
+  'use strict';
+
+  /**
+   * 管理模块化对话历史及上下文构建
+   */
+  class ConversationService {
+    constructor(storageService, defaultOptions = {}) {
+      if (!storageService) {
+        throw new Error('ConversationService 需要 StorageService 实例');
+      }
+      this.storageService = storageService;
+      this.defaultOptions = {
+        historyKey: 'history',
+        contextWindow: 10,
+        ...defaultOptions
+      };
+      this.cache = new Map();
+    }
+
+    _getHistoryKey(moduleConfig) {
+      return moduleConfig.storageKeys?.history || this.defaultOptions.historyKey;
+    }
+
+    _getNamespace(moduleConfig) {
+      const namespace =
+        moduleConfig.storageNamespace || `module:${moduleConfig.id}`;
+      return this.storageService.namespace(namespace);
+    }
+
+    _getCacheKey(moduleId) {
+      return `history:${moduleId}`;
+    }
+
+    getHistory(moduleConfig) {
+      const cacheKey = this._getCacheKey(moduleConfig.id);
+      if (this.cache.has(cacheKey)) {
+        return this.cache.get(cacheKey);
+      }
+
+      const store = this._getNamespace(moduleConfig);
+      const history =
+        store.get(this._getHistoryKey(moduleConfig), []).map((msg) => ({
+          ...msg
+        }));
+
+      this.cache.set(cacheKey, history);
+      return history;
+    }
+
+    saveHistory(moduleConfig, history) {
+      const cacheKey = this._getCacheKey(moduleConfig.id);
+      const clonedHistory = history.map((msg) => ({ ...msg }));
+      this.cache.set(cacheKey, clonedHistory);
+
+      const store = this._getNamespace(moduleConfig);
+      store.set(this._getHistoryKey(moduleConfig), clonedHistory);
+    }
+
+    appendMessage(moduleConfig, message) {
+      const history = this.getHistory(moduleConfig);
+      history.push({ ...message });
+      this.saveHistory(moduleConfig, history);
+      return history;
+    }
+
+    replaceHistory(moduleConfig, history) {
+      this.saveHistory(moduleConfig, history);
+    }
+
+    clearHistory(moduleConfig) {
+      this.saveHistory(moduleConfig, []);
+    }
+
+    /**
+     * 构建流式上下文，为最后一个用户消息提供所需历史
+     */
+    buildContext(moduleConfig, tailMessages = null) {
+      const history = this.getHistory(moduleConfig);
+      if (!history.length) return null;
+
+      let targetIndex = history.length - 1;
+      if (tailMessages != null) {
+        targetIndex = Math.max(0, history.length - tailMessages);
+      }
+
+      // 确保目标是用户消息
+      while (targetIndex >= 0 && history[targetIndex].type !== 'user') {
+        targetIndex -= 1;
+      }
+
+      if (targetIndex < 0) {
+        return null;
+      }
+
+      const contextWindow =
+        moduleConfig.chat?.contextWindow || this.defaultOptions.contextWindow;
+      const start = Math.max(0, targetIndex - contextWindow);
+      const contextSlice = history.slice(start, targetIndex);
+
+      const contextMessages = contextSlice
+        .filter((msg) => msg.type === 'user' || msg.type === 'ai')
+        .map((msg) => ({
+          role: msg.type === 'user' ? 'user' : 'assistant',
+          content: msg.content
+        }));
+
+      return {
+        history,
+        userMessage: history[targetIndex],
+        contextMessages,
+        targetIndex
+      };
+    }
+  }
+
+  global.ConversationService = ConversationService;
+})(window);
diff --git a/js/services/storage-service.js b/js/services/storage-service.js
new file mode 100644
index 0000000..e639f34
--- /dev/null
+++ b/js/services/storage-service.js
@@ -0,0 +1,84 @@
+(function (global) {
+  'use strict';
+
+  /**
+   * 提供按命名空间隔离的本地存储封装
+   * 依赖 Utils.storage 作为底层驱动
+   */
+  class NamespacedStorage {
+    constructor(namespace) {
+      this.namespace = namespace;
+    }
+
+    _key(key) {
+      return `${this.namespace}:${key}`;
+    }
+
+    get(key, defaultValue = null) {
+      return Utils.storage.get(this._key(key), defaultValue);
+    }
+
+    set(key, value) {
+      return Utils.storage.set(this._key(key), value);
+    }
+
+    remove(key) {
+      return Utils.storage.remove(this._key(key));
+    }
+
+    clear() {
+      const prefix = `${this.namespace}:`;
+      const toDelete = [];
+      for (let i = 0; i < localStorage.length; i += 1) {
+        const storageKey = localStorage.key(i);
+        if (storageKey && storageKey.startsWith(prefix)) {
+          toDelete.push(storageKey);
+        }
+      }
+      toDelete.forEach((storageKey) => localStorage.removeItem(storageKey));
+    }
+  }
+
+  class StorageService {
+    constructor(globalNamespace = 'tool-engine') {
+      this.globalNamespace = globalNamespace;
+      this.cache = new Map();
+    }
+
+    /**
+     * 获取全局命名空间存储
+     */
+    global() {
+      if (!this.cache.has(this.globalNamespace)) {
+        this.cache.set(
+          this.globalNamespace,
+          new NamespacedStorage(this.globalNamespace)
+        );
+      }
+      return this.cache.get(this.globalNamespace);
+    }
+
+    /**
+     * 获取指定命名空间存储
+     */
+    namespace(namespace) {
+      if (!namespace) {
+        throw new Error('Storage namespace 不能为空');
+      }
+      if (!this.cache.has(namespace)) {
+        this.cache.set(namespace, new NamespacedStorage(namespace));
+      }
+      return this.cache.get(namespace);
+    }
+
+    /**
+     * 清除指定命名空间内容
+     */
+    clearNamespace(namespace) {
+      const store = this.namespace(namespace);
+      store.clear();
+    }
+  }
+
+  global.StorageService = StorageService;
+})(window);
diff --git a/prompts/echarts-prompt.txt b/prompts/echarts-prompt.txt
new file mode 100644
index 0000000..cf9a3ba
--- /dev/null
+++ b/prompts/echarts-prompt.txt
@@ -0,0 +1,7 @@
+你是一名资深的数据可视化专家，擅长使用 ECharts 将业务需求转化为可执行的配置。请遵循以下规则输出结果：
+
+1. 使用 JSON 对象表达完整的 ECharts option，不要包含解释说明。
+2. 保持字段命名符合 ECharts 官方文档，避免多余字段。
+3. 如需附加解读或说明，请放在 JSON 代码块之外。
+4. 如果用户没有提供数据，请生成结构清晰的示例数据并说明需要用户替换的位置。
+5. 鼓励使用易读的调色板、标题和提示信息，兼顾桌面端展示。