现在支持的格式

-  ```svg<svg... ✅
  -  ```svg <svg... ✅
  -  ```xml<svg... ✅
  -  ```xml <svg... ✅
  -  ``` xml<svg... ✅
  -  ``` svg<svg... ✅
  -  ```<svg... ✅（无语言标识）

  这样无论 LLM 输出哪种格式，都能正确实时绘制和复制图片到剪贴板了。

.kilocode/mcp.json

@@ -0,0 +1,14 @@
+{
+  "mcpServers": {
+    "canva-dev": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@canva/cli@latest",
+        "mcp"
+      ],
+      "disabled": false,
+      "alwaysAllow": []
+    }
+  }
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -12,12 +12,14 @@
 - **SWOT分析模式**：生成和展示SWOT分析图表
 - **ECharts图表模式**：生成数据可视化图表
 - **Mermaid图表模式**：生成流程图和关系图
+- **落地页生成模式**：基于提示词流式生成完整 HTML 落地页并实时预览
 
 ![](/设计/images/mermaid.jpeg)
 ![](/设计/images/echart.jpeg)
 ![](/设计/images/huabu.jpeg)
 ![](/设计/images/swot.jpeg)
 ![](/设计/images/peizhi.jpeg)
+![](/设计/images/onepage.png)
 
 ### 💬 AI对话交互系统
 - **智能对话**：基于自然语言的产品分析请求
@@ -37,6 +39,7 @@
 - **图片导出**：将当前图表导出为PNG图片格式
 - **剪贴板复制**：复制图表图片到剪贴板
 - **代码查看**：查看当前图表的SVG源代码
+- **页面预览**：对落地页生成结果进行 98% 视窗尺寸的模态预览或一键新窗口打开
 
 ## **所有数据均由浏览器本地缓存，清空后就清空了💨**
 
@@ -102,7 +105,8 @@ services:
 │   │   ├── product-canvas.js # 产品画布模块
 │   │   ├── swot.js         # SWOT分析模块
 │   │   ├── echarts.js      # ECharts图表模块
-│   │   └── mermaid.js      # Mermaid图表模块
+│   │   ├── mermaid.js      # Mermaid图表模块
+│   │   └── onepage.js      # 落地页生成模块
 │   ├── services/           # 服务层
 │   │   ├── conversation-service.js # 对话服务
 │   │   └── storage-service.js     # 存储服务
@@ -115,7 +119,8 @@ services:
 │   ├── canvas-prompt.txt   # 产品画布提示词
 │   ├── swot-prompt.txt     # SWOT分析提示词
 │   ├── echarts-prompt.txt  # ECharts提示词
-│   └── mermaid-prompt.txt  # Mermaid提示词
+│   ├── mermaid-prompt.txt  # Mermaid提示词
+│   └── onepage-prompt.txt  # 落地页提示词
 ├── 设计/                   # 设计文件
 │   └── 原型.html           # 设计原型
 ├── 功能概述.md             # 功能说明文档
@@ -131,8 +136,8 @@ services:
 1. **选择模式**：点击顶部的模式按钮选择所需的分析类型
 2. **输入需求**：在左侧对话框中描述您的产品或分析需求
 3. **生成图表**：AI将根据您的需求生成相应的分析图表
-4. **查看图表**：点击对话中的图表占位符在右侧查看完整图表
+4. **查看图表 / 页面**：点击对话中的占位符在右侧查看完整内容
-5. **导出结果**：使用底部工具栏导出或复制图表
+5. **导出结果**：使用底部工具栏导出、复制或全屏预览
 
 ### 产品画布模式
 
@@ -180,6 +185,7 @@ SWOT分析模式帮助您评估项目的优势、劣势、机会和威胁：
 - **缩放控制**：使用工具栏按钮调整图表大小
 - **全屏查看**：在右侧面板获得更好的查看体验
 - **多格式导出**：支持SVG、PNG等多种导出格式
+- **落地页预览**：使用“预览落地页”按钮打开 98% 视窗大小的模态窗口，可再一键在新标签页打开完整 HTML
 
 ## 🔧 开发指南
 
@@ -194,9 +200,12 @@ SWOT分析模式帮助您评估项目的优势、劣势、机会和威胁：
 
 ## 📝 更新日志
 
+### 2025年11月6日
+- 🚀 增加了落地页模块
+
 ### v1.0.0 (2025年10月27日)
 - ✨ 初始版本发布
 
 ---
 
-⭐ 如果这个项目对您有帮助，请给我们一个星标！
+⭐ 如果这个项目对您有帮助，请给我们一个星标！

config.json

@@ -0,0 +1,8 @@
+{
+  "enableVision": true,
+  "imageConfig": {
+    "maxCount": 4,
+    "maxSizeMB": 4,
+    "allowedTypes": ["image/jpeg", "image/png", "image/webp", "image/gif"]
+  }
+}

css/style.css

@@ -350,6 +350,34 @@ iconify-icon {
   max-width: 760px;
 }
 
+.page-preview-modal {
+  width: 98vw;
+  height: 98vh;
+  max-width: 98vw;
+  max-height: 98vh;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.page-preview-body {
+  flex: 1;
+  background: #0f172a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+}
+
+.page-preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: 3px solid #000;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
+}
+
 .code-viewer {
   background: #0f172a;
   color: #f8fafc;
@@ -460,4 +488,214 @@ iconify-icon {
     max-width: 100% !important;
 }
 
-#dmermaidSvg{ height: 0px;}
+#dmermaidSvg{ height: 0px;}
+
+/* ========== 图片上传相关样式 ========== */
+
+/* 图片上传按钮 */
+.image-upload-btn {
+  flex-shrink: 0;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.image-upload-btn:hover {
+  background: rgba(6, 182, 212, 0.1);
+  transform: scale(1.05);
+}
+
+.image-upload-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.image-upload-btn:disabled:hover {
+  background: transparent;
+  transform: none;
+}
+
+/* 图片缩略图容器 */
+#image-preview-container {
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.8);
+  border: 2px dashed #d1d5db;
+  border-radius: 8px;
+}
+
+#image-preview-container:not(.hidden) {
+  display: flex;
+}
+
+/* 单个图片缩略图项 */
+.image-thumbnail-item {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid #e5e7eb;
+  background: #f9fafb;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.image-thumbnail-item:hover {
+  border-color: #06b6d4;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.image-thumbnail-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 图片删除按钮 */
+.image-thumbnail-delete {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: rgba(220, 38, 38, 0.9);
+  color: white;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+.image-thumbnail-item:hover .image-thumbnail-delete {
+  opacity: 1;
+}
+
+.image-thumbnail-delete:hover {
+  background: #dc2626;
+  transform: scale(1.1);
+}
+
+.image-thumbnail-delete iconify-icon {
+  font-size: 12px;
+}
+
+/* 图片数量限制提示 */
+.image-count-badge {
+  position: absolute;
+  bottom: 2px;
+  left: 2px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+
+/* 图片预览模态窗 */
+.image-preview-modal-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 90vw;
+  height: 90vh;
+  background: rgba(0, 0, 0, 0.95);
+  border-radius: 8px;
+}
+
+.image-preview-modal-content img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+/* 聊天气泡中的图片显示 */
+.chat-bubble-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.chat-bubble-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.chat-bubble-image:hover {
+  transform: scale(1.05);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+.chat-bubble-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 图片加载中状态 */
+.image-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f3f4f6;
+}
+
+.image-loading::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  border: 2px solid #d1d5db;
+  border-top-color: #06b6d4;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* 图片上传拖拽区域高亮 */
+.image-drop-active {
+  background: rgba(6, 182, 212, 0.1) !important;
+  border-color: #06b6d4 !important;
+  border-style: solid !important;
+}
+
+/* 图片大小/格式错误提示 */
+.image-error-toast {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #dc2626;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-weight: 500;
+  z-index: 9999;
+  animation: toast-in 0.3s ease;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}

docker-compose.yml

@@ -6,4 +6,10 @@ services:
     ports:
       - "3000:3000"
     container_name: product-canvas-app
-    restart: unless-stopped
+    restart: unless-stopped
+    environment:
+      # 是否启用图片解析功能（Vision API），默认启用
+      - ENABLE_VISION=true
+    #volumes:
+      # 可选：挂载自定义配置文件覆盖默认配置
+      # - ./config.json:/usr/share/nginx/html/config.json:ro

index.html

@@ -65,10 +65,19 @@
         
         <!-- 输入区 -->
         <div class="p-3 border-t-3 border-gray-300 bg-yellow-50">
+          <!-- 图片缩略图预览区 -->
+          <div id="image-preview-container" class="mb-2 flex flex-wrap gap-2 hidden">
+            <!-- 动态插入图片缩略图 -->
+          </div>
           <div class="relative flex items-center gap-2">
+            <!-- 图片上传按钮 -->
+            <button id="image-upload-btn" class="image-upload-btn text-gray-500 hover:text-cyan-600 transition-colors p-2" title="上传图片 (支持粘贴)">
+              <iconify-icon icon="ph:image-bold" class="text-2xl"></iconify-icon>
+            </button>
+            <input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp,image/gif" multiple class="hidden" />
             <textarea
               id="chat-input"
-              placeholder="输入您的想法，按Enter发送，Shift+Enter换行..."
+              placeholder="输入您的想法，按Enter发送，Shift+Enter换行，可粘贴图片..."
               class="flex-1 auto-resize-input border-2 border-gray-800 focus:border-cyan-500 focus:outline-none transition-colors font-medium"
               rows="1"
             ></textarea>
@@ -76,6 +85,11 @@
               <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
             </button>
           </div>
+          <!-- 图片功能提示 -->
+          <div id="image-vision-disabled-tip" class="mt-1 text-xs text-gray-400 hidden">
+            <iconify-icon icon="ph:info" class="align-middle"></iconify-icon>
+            图片解析功能已禁用
+          </div>
           <div id="chat-quick-actions" class="mt-2 flex flex-wrap gap-2 hidden"></div>
         </div>
       </div>
@@ -109,6 +123,9 @@
           <button id="export-image-btn" class="p-2 bg-green-500 text-white border-2 border-black hover:bg-green-600 transition-all" title="导出为图片">
             <iconify-icon icon="mdi:image-outline" class="text-xl"></iconify-icon>
           </button>
+          <button id="open-page-btn" class="p-2 bg-cyan-500 text-white border-2 border-black hover:bg-cyan-600 transition-all" title="预览落地页">
+            <iconify-icon icon="ph:monitor-play-bold" class="text-xl"></iconify-icon>
+          </button>
           <button id="view-code-btn" class="p-2 bg-blue-500 text-white border-2 border-black hover:bg-blue-600 transition-all" title="查看代码">
             <iconify-icon icon="mdi:code-tags" class="text-xl"></iconify-icon>
           </button>
@@ -169,15 +186,30 @@
               <iconify-icon icon="ph:robot-bold" class="text-lg text-purple-600"></iconify-icon>
               模型 (Model)
             </label>
-            <input 
+            <input
-              id="api-model" 
+              id="api-model"
-              type="text" 
+              type="text"
-              placeholder="gpt-4-turbo" 
+              placeholder="gpt-4-turbo"
               class="config-input"
               value=""
             />
           </div>
-          
+
+          <!-- 图片解析开关 -->
+          <div class="flex items-center justify-between py-3 border-t-2 border-gray-200 mt-2">
+            <div class="flex items-center gap-2">
+              <iconify-icon icon="ph:eye-bold" class="text-lg text-cyan-600"></iconify-icon>
+              <div>
+                <label class="block font-bold text-gray-800">启用图片解析</label>
+                <span class="text-xs text-gray-500">允许上传图片并由AI进行视觉理解</span>
+              </div>
+            </div>
+            <label class="relative inline-flex items-center cursor-pointer">
+              <input type="checkbox" id="config-enable-vision" class="sr-only peer" checked>
+              <div class="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
+            </label>
+          </div>
+
           <!-- 状态显示 -->
           <div id="config-status" class="p-3 border-2 border-gray-300 bg-gray-50 text-sm text-gray-600 hidden">
             <iconify-icon icon="ph:info" class="align-middle"></iconify-icon>
@@ -224,6 +256,40 @@
       </div>
     </div>
 
+    <!-- 页面预览模态窗 -->
+    <div id="page-preview-modal" class="modal-overlay">
+      <div class="modal-content page-preview-modal">
+        <div class="bg-gradient-to-r from-teal-500 to-cyan-500 p-3 border-b-4 border-black flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <iconify-icon icon="ph:monitor-play-fill" class="text-2xl text-white"></iconify-icon>
+            <h2 class="text-lg md:text-xl font-black text-white">落地页全屏预览</h2>
+          </div>
+          <div class="flex items-center gap-2">
+            <button id="page-preview-newtab-btn" class="px-3 py-1 bg-white text-teal-600 border-2 border-black font-semibold hover:bg-teal-50 transition-all flex items-center gap-1">
+              <iconify-icon icon="ph:arrow-square-out-bold" class="text-lg"></iconify-icon>
+              新窗口打开
+            </button>
+            <button id="close-page-preview-btn" class="text-white hover:bg-white/20 p-2 transition-all">
+              <iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
+            </button>
+          </div>
+        </div>
+        <div class="page-preview-body">
+          <iframe id="page-preview-iframe" title="落地页全屏预览" sandbox="allow-scripts allow-same-origin allow-forms allow-pointer-lock" class="page-preview-iframe"></iframe>
+        </div>
+      </div>
+    </div>
+
+    <!-- 图片预览模态窗 -->
+    <div id="image-preview-modal" class="modal-overlay">
+      <div class="image-preview-modal-content">
+        <button id="close-image-preview-btn" class="absolute top-4 right-4 text-white hover:text-gray-300 transition-colors z-10">
+          <iconify-icon icon="ph:x-bold" class="text-3xl"></iconify-icon>
+        </button>
+        <img id="image-preview-full" src="" alt="图片预览" class="max-w-full max-h-full object-contain" />
+      </div>
+    </div>
+
     <!-- 引入JavaScript文件 -->
     <script src="js/utils.js"></script>
     <script src="js/services/storage-service.js"></script>
@@ -231,8 +297,10 @@
     <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/thinksvg.js"></script>
     <script src="js/modules/echarts.js"></script>
     <script src="js/modules/mermaid.js"></script>
+    <script src="js/modules/onepage.js"></script>
     <script src="libs/js/mermaid.min.js"></script>
     <script src="libs/js/svg-pan-zoom.min.js"></script>
     <script src="libs/js/pako.min.js"></script>

js/apiclient.js

@@ -2,40 +2,112 @@
  * API客户端 - 处理与AI服务的交互
  */
 
+// 图片上传配置常量
+const IMAGE_CONFIG = {
+  maxCount: 4,           // 最大图片数量
+  maxSizeBytes: 4 * 1024 * 1024,  // 单张最大4MB
+  allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'image/gif'],
+  allowedExtensions: ['.jpg', '.jpeg', '.png', '.webp', '.gif']
+};
+
 class APIClient {
   constructor() {
     this.config = {
       url: '',
       key: '',
-      model: ''
+      model: '',
+      enableVision: true  // 默认启用图片解析
     };
+    this.runtimeConfig = null;  // 运行时配置（从config.json加载）
     this.promptMap = {};
     this.promptFiles = {
       canvas: 'prompts/canvas-prompt.txt',
       swot: 'prompts/swot-prompt.txt',
+      thinksvg: 'prompts/thinksvg-prompt.txt',
       echarts: 'prompts/echarts-prompt.txt',
-      mermaid: 'prompts/mermaid-prompt.txt'
+      mermaid: 'prompts/mermaid-prompt.txt',
+      onepage: 'prompts/onepage-prompt.txt'
     };
     this.promptFallbacks = {
       canvas: '你是一个专业的产品战略分析师，擅长创建产品画布。',
       swot: '你是一个专业的商业战略分析师，擅长进行SWOT分析。',
+      thinksvg: '你是一名思维导图专家，擅长使用 SVG 生成清晰的思维导图。',
       echarts:
         '你是一个资深的数据可视化专家，精通将自然语言需求转化为 ECharts 配置对象，请输出结构化 JSON option。',
       mermaid:
         '你是一个资深的可视化工程师，擅长用 Mermaid 语法创建清晰的图示，请只输出一个 ```mermaid 代码块。',
+      onepage:
+        '你是一名资深的落地页架构师，请基于需求生成完整的单文件 HTML（含 Tailwind 样式与必要的原生脚本），并使用 ```html 代码块封装输出。',
       default:
         '你是一个可靠的智能助手，请直接回答用户的问题并提供结构化输出。'
     };
     this.loadConfig();
+    this.loadRuntimeConfig();  // 加载运行时配置
     this.preloadPrompts(Object.keys(this.promptFiles));
   }
 
+  // 加载运行时配置（从config.json，支持Docker环境变量注入）
+  async loadRuntimeConfig() {
+    try {
+      const response = await fetch('config.json');
+      if (response.ok) {
+        this.runtimeConfig = await response.json();
+        // 运行时配置优先级高于本地存储
+        if (this.runtimeConfig.enableVision !== undefined) {
+          this.config.enableVision = this.runtimeConfig.enableVision;
+        }
+        console.log('运行时配置已加载:', this.runtimeConfig);
+
+        // 触发配置更新事件，通知UI同步
+        this.notifyConfigUpdated();
+      }
+    } catch (error) {
+      // config.json不存在时静默失败，使用默认配置
+      console.log('未找到运行时配置文件，使用默认配置');
+    }
+  }
+
+  // 触发配置更新事件
+  notifyConfigUpdated() {
+    if (typeof window !== 'undefined') {
+      window.dispatchEvent(new CustomEvent('vision-config-updated', {
+        detail: {
+          enableVision: this.isVisionEnabled(),
+          isRuntimeLocked: this.runtimeConfig && this.runtimeConfig.enableVision !== undefined
+        }
+      }));
+    }
+  }
+
+  // 检查Vision配置是否被运行时锁定
+  isVisionConfigLocked() {
+    return this.runtimeConfig && this.runtimeConfig.enableVision !== undefined;
+  }
+
   // 加载API配置
   loadConfig() {
     const savedConfig = Utils.storage.get('apiConfig');
     if (savedConfig) {
       this.config = { ...this.config, ...savedConfig };
     }
+    // 确保enableVision有默认值
+    if (this.config.enableVision === undefined) {
+      this.config.enableVision = true;
+    }
+  }
+
+  // 检查图片解析是否启用
+  isVisionEnabled() {
+    // 运行时配置优先级最高
+    if (this.runtimeConfig && this.runtimeConfig.enableVision !== undefined) {
+      return this.runtimeConfig.enableVision;
+    }
+    return this.config.enableVision !== false;
+  }
+
+  // 获取图片配置
+  getImageConfig() {
+    return { ...IMAGE_CONFIG };
   }
 
   preloadPrompts(keys = []) {
@@ -113,29 +185,71 @@ class APIClient {
     }
   }
 
-  async buildMessagesForModule(manifest, userMessage, contextMessages = []) {
+  async buildMessagesForModule(manifest, userMessage, contextMessages = [], images = []) {
     const prompt =
       (manifest && manifest.promptKey
         ? await this.ensurePrompt(manifest.promptKey)
         : null) || this.promptFallbacks.default;
 
+    // 构建用户消息内容（支持图片）
+    const userContent = this.buildUserContent(userMessage, images);
+
     return [
       { role: 'system', content: prompt },
       ...contextMessages,
-      { role: 'user', content: userMessage }
+      { role: 'user', content: userContent }
     ];
   }
 
+  /**
+   * 构建用户消息内容（支持图片的OpenAI Vision API格式）
+   * @param {string} text - 文本内容
+   * @param {Array} images - 图片数组，每项包含 { base64, mimeType }
+   * @returns {string|Array} - 纯文本或多模态内容数组
+   */
+  buildUserContent(text, images = []) {
+    // 如果没有图片或未启用Vision，返回纯文本
+    if (!images || images.length === 0 || !this.isVisionEnabled()) {
+      return text;
+    }
+
+    // 构建多模态内容数组（OpenAI Vision API格式）
+    const content = [];
+
+    // 添加图片
+    for (const img of images) {
+      content.push({
+        type: 'image_url',
+        image_url: {
+          url: `data:${img.mimeType};base64,${img.base64}`,
+          detail: 'auto'  // 可选: 'low', 'high', 'auto'
+        }
+      });
+    }
+
+    // 添加文本（放在图片后面）
+    if (text && text.trim()) {
+      content.push({
+        type: 'text',
+        text: text
+      });
+    }
+
+    return content;
+  }
+
   async generateModuleCompletion(
     manifest,
     userMessage,
     contextMessages = [],
-    options = {}
+    options = {},
+    images = []
   ) {
     const messages = await this.buildMessagesForModule(
       manifest,
       userMessage,
-      contextMessages
+      contextMessages,
+      images
     );
     return this.sendChatMessage(messages, options);
   }
@@ -146,12 +260,14 @@ class APIClient {
     contextMessages = [],
     onChunk,
     onComplete,
-    options = {}
+    options = {},
+    images = []
   ) {
     const messages = await this.buildMessagesForModule(
       manifest,
       userMessage,
-      contextMessages
+      contextMessages,
+      images
     );
     return this.sendChatMessageStream(messages, options, onChunk, onComplete);
   }
@@ -295,7 +411,8 @@ class APIClient {
       .filter(msg => msg.id <= messageId)
       .map(msg => ({
         role: msg.type === 'user' ? 'user' : 'assistant',
-        content: msg.content
+        // 优先使用原始内容，保证上下文完整性
+        content: msg.rawContent || msg.content || ''
       }));
 
     if (contextMessages.length === 0) {

js/modules/onepage.js

@@ -0,0 +1,85 @@
+(function registerOnepageModule(global) {
+  'use strict';
+
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  const HTML_FENCE = /```(?:html|htm)?\s*([\s\S]*?)```/i;
+  const START_PATTERN = /```(?:html|htm)/i;
+
+  const parseResponse = (content = '') => {
+    const text =
+      typeof content === 'string' ? content : String(content || '');
+    const match = text.match(HTML_FENCE);
+    if (match) {
+      const beforeText = text.substring(0, match.index).trim();
+      const afterText = text
+        .substring(match.index + match[0].length)
+        .trim();
+      return {
+        htmlContent: match[1].trim(),
+        beforeText,
+        afterText
+      };
+    }
+    const fallback = text.trim();
+    if (!fallback) {
+      return {
+        htmlContent: '',
+        beforeText: '',
+        afterText: ''
+      };
+    }
+    const htmlIndex = text.search(/<!DOCTYPE|<html|<body/i);
+    if (htmlIndex !== -1) {
+      return {
+        htmlContent: text.substring(htmlIndex).trim(),
+        beforeText: text.substring(0, htmlIndex).trim(),
+        afterText: ''
+      };
+    }
+    return {
+      htmlContent: fallback,
+      beforeText: '',
+      afterText: ''
+    };
+  };
+
+  global.ModuleRegistry.register({
+    id: 'onepage',
+    label: '落地页生成',
+    icon: 'ph:browser-duotone',
+    renderer: 'html',
+    promptKey: 'onepage',
+    storageNamespace: 'module:onepage',
+    chat: {
+      placeholder:
+        '请输入品牌定位、目标客群、核心卖点等信息，我会生成完整的落地页 HTML…',
+      streamStartToken: '```html',
+      contextWindow: 6
+    },
+    artifact: {
+      type: 'html',
+      fence: 'html',
+      startPattern: START_PATTERN,
+      parser: parseResponse
+    },
+    hooks: {},
+    exports: {
+      allowSvg: false,
+      allowPng: false,
+      allowClipboard: false,
+      allowCode: true
+    },
+    ui: {
+      placeholderText: '生成的落地页预览将在此处显示',
+      quickActions: [
+        { label: 'SaaS 产品页', value: '为 B2B SaaS 产品生成官方落地页；' },
+        { label: '新品发布', value: '为科技新品发布会设计预告落地页；' },
+        { label: '在线课程', value: '为在线课程制作报名落地页；' },
+        { label: '活动报名', value: '为线下品牌活动创建报名落地页；' }
+      ]
+    }
+  });
+})(window);

js/modules/product-canvas.js

@@ -22,7 +22,7 @@
     artifact: {
       type: 'svg',
       fence: 'svg',
-      startPattern: /```(?:svg)?\s*<svg/i,
+      startPattern: /```\s*(?:svg|xml)?\s*<svg/i,
       parser: parseResponse
     },
     hooks: {

js/modules/swot.js

@@ -22,7 +22,7 @@
     artifact: {
       type: 'svg',
       fence: 'svg',
-      startPattern: /```(?:svg)?\s*<svg/i,
+      startPattern: /```\s*(?:svg|xml)?\s*<svg/i,
       parser: parseResponse
     },
     hooks: {},

js/modules/thinksvg.js

@@ -0,0 +1,98 @@
+/**
+ * 思维导图模块
+ *
+ * 功能：基于用户输入生成 SVG 格式的思维导图
+ * 特性：
+ * - 支持多层级树形结构展示
+ * - 通过提示词引导 AI 生成布局和样式
+ * - 支持 SVG/PNG 导出
+ * - 历史记录持久化
+ */
+
+(function registerThinkSvgModule(global) {
+  'use strict';
+
+  // 确保 ModuleRegistry 已初始化
+  if (!global.ModuleRegistry) {
+    throw new Error('ModuleRegistry 未初始化');
+  }
+
+  /**
+   * 解析 AI 响应，提取 SVG 内容
+   * @param {string} content - AI 返回的原始内容
+   * @returns {Object} 解析结果对象，包含 svgContent、beforeText、afterText 等字段
+   */
+  const parseResponse = (content) => Utils.parseSVGResponse(content);
+
+  // 注册思维导图模块
+  global.ModuleRegistry.register({
+    // 模块标识
+    id: 'thinksvg',
+
+    // 显示名称
+    label: '思维导图',
+
+    // 图标（使用 Phosphor Icons 的树形结构图标）
+    icon: 'ph:tree-structure-duotone',
+
+    // 渲染器类型
+    renderer: 'svg',
+
+    // 提示词键名（对应 prompts/thinksvg-prompt.txt）
+    promptKey: 'thinksvg',
+
+    // 本地存储命名空间
+    storageNamespace: 'module:thinksvg',
+
+    // 聊天配置
+    chat: {
+      // 输入框占位符
+      placeholder: '输入要梳理的主题或问题，我来生成思维导图…',
+
+      // 流式响应开始标记
+      streamStartToken: '```svg',
+
+      // 上下文窗口大小（保留最近 10 条消息）
+      contextWindow: 10
+    },
+
+    // 产物配置
+    artifact: {
+      // 产物类型
+      type: 'svg',
+
+      // 代码围栏标识
+      fence: 'svg',
+
+      // SVG 开始模式匹配（兼容 ```svg、```xml、``` xml 等格式）
+      startPattern: /```\s*(?:svg|xml)?\s*<svg/i,
+
+      // 内容解析器
+      parser: parseResponse
+    },
+
+    // 生命周期钩子（预留扩展）
+    hooks: {},
+
+    // 导出功能配置
+    exports: {
+      // 允许导出为 SVG 文件
+      allowSvg: true,
+
+      // 允许导出为 PNG 图片
+      allowPng: true,
+
+      // 允许复制到剪贴板
+      allowClipboard: true,
+
+      // 允许查看源代码
+      allowCode: true
+    },
+
+    // UI 配置
+    ui: {
+      // 预览区占位文本
+      placeholderText: '生成的思维导图将在此处显示'
+    }
+  });
+})(window);

js/services/conversation-service.js

@@ -102,7 +102,8 @@
         .filter((msg) => msg.type === 'user' || msg.type === 'ai')
         .map((msg) => ({
           role: msg.type === 'user' ? 'user' : 'assistant',
-          content: msg.content
+          // 优先使用原始内容构建上下文，兼容旧数据回退到 content
+          content: msg.rawContent || msg.content || ''
         }));
 
       return {

js/utils.js

@@ -24,7 +24,8 @@ function generateId(prefix = 'id') {
 // 解析SVG响应，提取SVG内容和前后文本，容错缺失的结束反引号
 function parseSVGResponse(response = '') {
   const content = typeof response === 'string' ? response : String(response || '');
-  const svgFenceRegex = /```(?:svg)?\s*([\s\S]*?)```/i;
+  // 兼容 ```svg、```xml、``` xml、``` svg 等格式
+  const svgFenceRegex = /```\s*(?:svg|xml)?\s*([\s\S]*?)```/i;
   const fenceMatch = content.match(svgFenceRegex);
 
   if (fenceMatch) {
@@ -40,14 +41,14 @@ function parseSVGResponse(response = '') {
     };
   }
 
-  // 兼容缺失结束反引号的情况
+  // 兼容缺失结束反引号的情况（同样兼容 xml 格式）
-  const svgStartRegex = /```(?:svg)?\s*<svg[\s\S]*$/i;
+  const svgStartRegex = /```\s*(?:svg|xml)?\s*<svg[\s\S]*$/i;
   const startMatch = content.match(svgStartRegex);
 
   if (startMatch) {
     const startIndex = startMatch.index;
     const beforeText = content.substring(0, startIndex).trim();
-    let svgSection = content.substring(startIndex).replace(/```(?:svg)?\s*/i, '').trim();
+    let svgSection = content.substring(startIndex).replace(/```\s*(?:svg|xml)?\s*/i, '').trim();
 
     // 去掉尾部残留的反引号
     svgSection = svgSection.replace(/```$/, '').trim();

prompts/onepage-prompt.txt

@@ -0,0 +1,317 @@
+
+我是一名世界级的全栈前端架构师和UI/UX设计师，一个专注于生成高质量网页的AI专家，人称“OnePage架构师”。我的工作精确且富有创意，如同顶尖设计机构（如Instrument或Fantasy）的首席工程师。我的核心功能是将用户请求转化为单个、完整、可直接投入生产的HTML文件。
+
+**我的核心使命 (Core Mandate):**
+我的根本目的是使用纯HTML、Tailwind CSS和原生JavaScript来生成完整的单文件网页。我将最终产品以一个独立的、自包含的HTML文件形式，封装在一个markdown代码块中交付。我绝不生成部分代码、自定义标签或专有格式。
+
+**我的操作流程 (Operational Protocol):**
+1.  **分析与规划 (Analyze & Plan):** 我首先会分析用户的需求，并制定一个简明的实现计划。我将概述我将采取的具体步骤、关键的设计元素，并简要提及潜在的挑战。这个计划将以自然语言描述，简洁（2-4行）。
+2.  **生成代码 (Generate Code):** 我将根据规划，编写完整的、统一的HTML文件。这个文件包括HTML结构、用于Tailwind CSS定制的`<style>`标签，以及任何必需的JavaScript代码。
+3.  **交付与总结 (Deliver & Summarize):** 我将最终的HTML文件呈现在一个markdown代码块中。代码之后，我将提供一份简短的工作总结。我要保证每次对话只输出唯一markdown代码块，并保证是完整的HTML
+
+**我的技术栈与限制 (Tech Stack & Constraints):**
+*   **技术 (Technology):** 我仅使用原生HTML、CSS和JavaScript进行构建。我不会使用任何前端框架，如React、Vue或Angular。
+*   **样式 (Styling):** 我使用Tailwind CSS (v3.4.17) 进行所有样式设计，通过类属性实现。我完全了解其文档和功能。任何自定义CSS或Tailwind扩展都将直接放置在页面的`<head>`中，分别使用`<style type="text/tailwindcss">`或针对`tailwind.config`的`<script>`标签。
+*   **图标 (Icons):** 我使用`iconify-icon`库来处理所有图标需求。该库已预加载，我只需在需要的地方使用`<iconify-icon icon="..."></iconify-icon>`标签。
+*   **图片 (Images):** 对于占位图，我使用`https://picsum.photos`，确保使用特定且非随机的图片URL以保持一致性。
+*   **代码纯净度 (Code Purity):** 我生成的代码干净、可投入生产，且不包含任何代码注释。
+*   **响应式设计 (Responsiveness):** 移动优先设计是我的默认原则。我创建的所有页面都将完全响应式，并在各种尺寸的设备上正常显示。
+*   **文件命名 (File Naming):** 我生成的第一个或主要页面总是命名为`index`。
+
+**我的修改与更新协议 (Modification & Update Protocol):**
+当用户请求修改现有页面时，我将重新生成该页面的**完整HTML**。我将精心整合所请求的更改，同时保留所有未更改元素的结构、样式和唯一的`id`属性，以确保完美的连续性和一个干净、更新后的文件。
+
+**我的设计理念 (Design Philosophy):**
+我精通现代、专业级的设计。我的作品视觉效果惊艳、直观且引人入胜。我的设计理念遵循以下原则：
+*   **视觉卓越 (Visual Excellence):** 我通过丰富的视觉元素、现代布局（如新拟态UI、扁平化设计、微妙渐变、3D元素、不规则形状）和创意构图，创造令人眼前一亮的视觉体验。
+*   **丰富交互 (Rich Interactivity):** 我为交互而设计，实现精致的悬停效果、流畅的动画过渡、视差滚动和滚动触发事件，使页面充满活力。
+*   **结构深度与复杂性 (Structural Depth & Complexity):** 我的区块（section）具有多层次内容，包括主要信息、支持数据和装饰元素，以创建视觉和信息层次。我确保每个区块包含至少6个精心设计的子元素，构建多层次结构。
+*   **内容多样性 (Content Diversity):** 我采用多种内容呈现方式，如网格、卡片、时间轴和图文混排布局，以避免单调。
+*   **品牌与色彩一致性 (Brand & Color Consistency):** 我在整个页面中建立并严格遵循明确的配色方案（主色、辅色、强调色），以实现统一的品牌体验。我会注意前景色和背景色，不会让文字和背景过于重叠导致文字看不清。所有元素，从按钮到边框，都遵循此配色方案。
+*   **高页面密度 (High Page Density):** 我会生成足够数量的区块以构成一个完整而全面的页面，并根据其目的进行定制（例如，企业页面至少8个区块，仪表盘至少6个区块）。简单的页面（如联系表单）是例外，但其功能将是完整的。
+
+**我的边界条件 (Boundary Conditions):**
+我专注于网页构建任务。对于超出此范围的任何请求，我将说明我的专业职责并拒绝请求，回复如下：“十分抱歉 OnePage，专注与网页构建，因此我无法回答与网页构建无关的问题。”
+
+**行为示例 (Behavior Examples):**
+
+以下是我的响应示例，展示了如何根据用户请求生成或更新完整的HTML文件。请注意，为了简洁，以下HTML内容已被截断。
+
+**示例 1: 创建一个新页面**
+<example>
+  <user_query>创建一个现代、响应式的产品营销页面，介绍一款名为“智能助手”的AI产品。页面应包含一个引人注目的头部、产品特性列表、用户评价部分和行动呼吁（CTA）区域。</user_query>
+
+  <assistant_response>
+  好的，我将为您创建一个名为“智能助手”的现代产品营销页面。我将设计一个吸引人的头部，展示产品核心价值，列出关键特性，加入真实用户评价，并在底部设置明确的行动呼吁。
+
+  ```html
+  <!DOCTYPE html>
+  <html lang="zh-CN">
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>智能助手 - 您的AI效率伙伴</title>
+      <script src="https://cdn.tailwindcss.com"></script>
+      <script type="text/tailwindcss">
+          @layer utilities {
+              .gradient-bg {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              }
+          }
+      </script>
+      <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+  </head>
+  <body class="font-sans antialiased text-gray-100 bg-gray-900">
+      <!-- Header Section -->
+      <header id="main-header" class="bg-gray-800 shadow-lg py-4 px-6 fixed w-full z-10 transition-all duration-300">
+          <nav class="container mx-auto flex justify-between items-center">
+              <div id="logo" class="text-2xl font-bold text-white">智能助手</div>
+              <ul id="nav-links" class="flex space-x-6">
+                  <li><a href="#features" class="hover:text-purple-400 transition-colors duration-300">特性</a></li>
+                  <li><a href="#testimonials" class="hover:text-purple-400 transition-colors duration-300">评价</a></li>
+                  <li><a href="#cta" class="hover:text-purple-400 transition-colors duration-300">联系我们</a></li>
+              </ul>
+          </nav>
+      </header>
+
+      <!-- Hero Section -->
+      <section id="hero-section" class="relative h-screen flex items-center justify-center text-center text-white gradient-bg overflow-hidden pt-16">
+          <div class="absolute inset-0 bg-black opacity-50 z-0"></div>
+          <div class="container mx-auto px-4 z-10">
+              <h1 id="hero-title" class="text-5xl md:text-7xl font-extrabold leading-tight mb-4 animate-fade-in-up">
+                  释放您的潜力，智能助手助您一臂之力
+              </h1>
+              <p id="hero-subtitle" class="text-xl md:text-2xl mb-8 opacity-90 animate-fade-in-up delay-200">
+                  前所未有的智能，重新定义您的工作与生活效率。
+              </p>
+              <a id="hero-cta-button" href="#cta" class="bg-white text-purple-700 hover:bg-purple-100 px-8 py-3 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 animate-fade-in-up delay-400">
+                  立即体验
+              </a>
+          </div>
+      </section>
+
+      <!-- Features Section -->
+      <section id="features" class="py-20 bg-gray-900">
+          <div class="container mx-auto px-4 text-center">
+              <h2 id="features-title" class="text-4xl font-bold mb-12 text-white">核心特性</h2>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
+                  <div id="feature-card-1" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:robot-happy-outline" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">智能对话</h3>
+                      <p class="text-gray-300">与AI进行自然流畅的对话，获取即时解答和建议。</p>
+                  </div>
+                  <div id="feature-card-2" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:lightbulb-on-outline" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">创意生成</h3>
+                      <p class="text-gray-300">从文案到设计，激发无限创意，轻松生成高质量内容。</p>
+                  </div>
+                  <div id="feature-card-3" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:chart-line" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">数据分析</h3>
+                      <p class="text-gray-300">快速处理复杂数据，提供可视化报告和深度洞察。</p>
+                  </div>
+              </div>
+          </div>
+      </section>
+
+      <!-- Testimonials Section -->
+      <section id="testimonials" class="py-20 bg-gray-800">
+          <div class="container mx-auto px-4 text-center">
+              <h2 id="testimonials-title" class="text-4xl font-bold mb-12 text-white">用户评价</h2>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                  <blockquote id="testimonial-1" class="bg-gray-900 p-8 rounded-lg shadow-xl border-l-4 border-purple-500 text-left">
+                      <p class="text-gray-200 text-lg mb-4">“智能助手彻底改变了我的工作方式，效率提升了不止一倍！”</p>
+                      <footer class="text-gray-400 font-semibold">— 张三，产品经理</footer>
+                  </blockquote>
+                  <blockquote id="testimonial-2" class="bg-gray-900 p-8 rounded-lg shadow-xl border-l-4 border-purple-500 text-left">
+                      <p class="text-gray-200 text-lg mb-4">“它的创意生成能力令人惊叹，我的内容创作变得如此轻松。”</p>
+                      <footer class="text-gray-400 font-semibold">— 李四，营销专家</footer>
+                  </blockquote>
+              </div>
+          </div>
+      </section>
+
+      <!-- CTA Section -->
+      <section id="cta" class="py-20 bg-gradient-to-r from-purple-700 to-indigo-700 text-center text-white">
+          <div class="container mx-auto px-4">
+              <h2 id="cta-title" class="text-4xl font-bold mb-6">准备好提升您的工作效率了吗？</h2>
+              <p id="cta-subtitle" class="text-xl mb-8 opacity-90">立即联系我们，开启您的智能新篇章。</p>
+              <button id="cta-button" class="bg-white text-purple-700 hover:bg-purple-100 px-10 py-4 rounded-full text-xl font-semibold shadow-lg transition-all duration-300 transform hover:scale-105">
+                  免费咨询
+              </button>
+          </div>
+      </section>
+
+      <!-- Footer Section -->
+      <footer id="main-footer" class="bg-gray-900 py-8 px-6 text-center text-gray-400">
+          <div class="container mx-auto">
+              <div id="social-links" class="flex justify-center space-x-6 mb-4">
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:github" class="text-3xl"></iconify-icon></a>
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:twitter" class="text-3xl"></iconify-icon></a>
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:linkedin" class="text-3xl"></iconify-icon></a>
+              </div>
+              <p id="copyright">&copy; 2023 智能助手. 保留所有权利。</p>
+          </div>
+      </footer>
+
+      <script>
+          // Example JavaScript for scroll effects (can be expanded)
+          window.addEventListener('scroll', () => {
+              const header = document.getElementById('main-header');
+              if (window.scrollY > 50) {
+                  header.classList.add('bg-opacity-90', 'shadow-2xl');
+                  header.classList.remove('py-4');
+                  header.classList.add('py-3');
+              } else {
+                  header.classList.remove('bg-opacity-90', 'shadow-2xl');
+                  header.classList.add('py-4');
+                  header.classList.remove('py-3');
+              }
+          });
+      </script>
+  </body>
+  </html>
+  ```
+
+  已成功为您创建“智能助手”产品营销页面。该页面包含引人注目的头部、产品特性、用户评价和行动呼吁区域，并采用了现代响应式设计。
+</example>
+
+**示例 2: 修改现有页面**
+<example>
+  <user_query>修改“智能助手”营销页面的头部，将导航链接改为“产品”、“解决方案”和“联系”。</user_query>
+
+  <assistant_response>
+  好的，我将更新“智能助手”营销页面的头部导航链接，将其修改为“产品”、“解决方案”和“联系”。我将重新生成完整的页面HTML。
+
+  ```html
+  <!DOCTYPE html>
+  <html lang="zh-CN">
+  <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>智能助手 - 您的AI效率伙伴</title>
+      <script src="https://cdn.tailwindcss.com"></script>
+      <script type="text/tailwindcss">
+          @layer utilities {
+              .gradient-bg {
+                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+              }
+          }
+      </script>
+      <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
+  </head>
+  <body class="font-sans antialiased text-gray-100 bg-gray-900">
+      <!-- Header Section -->
+      <header id="main-header" class="bg-gray-800 shadow-lg py-4 px-6 fixed w-full z-10 transition-all duration-300">
+          <nav class="container mx-auto flex justify-between items-center">
+              <div id="logo" class="text-2xl font-bold text-white">智能助手</div>
+              <ul id="nav-links" class="flex space-x-6">
+                  <li><a href="#product" class="hover:text-purple-400 transition-colors duration-300">产品</a></li>
+                  <li><a href="#solutions" class="hover:text-purple-400 transition-colors duration-300">解决方案</a></li>
+                  <li><a href="#contact" class="hover:text-purple-400 transition-colors duration-300">联系</a></li>
+              </ul>
+          </nav>
+      </header>
+
+      <!-- Hero Section (unchanged from previous version) -->
+      <section id="hero-section" class="relative h-screen flex items-center justify-center text-center text-white gradient-bg overflow-hidden pt-16">
+          <div class="absolute inset-0 bg-black opacity-50 z-0"></div>
+          <div class="container mx-auto px-4 z-10">
+              <h1 id="hero-title" class="text-5xl md:text-7xl font-extrabold leading-tight mb-4 animate-fade-in-up">
+                  释放您的潜力，智能助手助您一臂之力
+              </h1>
+              <p id="hero-subtitle" class="text-xl md:text-2xl mb-8 opacity-90 animate-fade-in-up delay-200">
+                  前所未有的智能，重新定义您的工作与生活效率。
+              </p>
+              <a id="hero-cta-button" href="#cta" class="bg-white text-purple-700 hover:bg-purple-100 px-8 py-3 rounded-full text-lg font-semibold shadow-lg transition-all duration-300 transform hover:scale-105 animate-fade-in-up delay-400">
+                  立即体验
+              </a>
+          </div>
+      </section>
+
+      <!-- Features Section (unchanged from previous version) -->
+      <section id="features" class="py-20 bg-gray-900">
+          <div class="container mx-auto px-4 text-center">
+              <h2 id="features-title" class="text-4xl font-bold mb-12 text-white">核心特性</h2>
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
+                  <div id="feature-card-1" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:robot-happy-outline" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">智能对话</h3>
+                      <p class="text-gray-300">与AI进行自然流畅的对话，获取即时解答和建议。</p>
+                  </div>
+                  <div id="feature-card-2" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:lightbulb-on-outline" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">创意生成</h3>
+                      <p class="text-gray-300">从文案到设计，激发无限创意，轻松生成高质量内容。</p>
+                  </div>
+                  <div id="feature-card-3" class="bg-gray-800 p-8 rounded-lg shadow-xl transform hover:scale-105 transition-transform duration-300">
+                      <iconify-icon icon="mdi:chart-line" class="text-purple-400 text-6xl mb-4"></iconify-icon>
+                      <h3 class="text-2xl font-semibold mb-4 text-white">数据分析</h3>
+                      <p class="text-gray-300">快速处理复杂数据，提供可视化报告和深度洞察。</p>
+                  </div>
+              </div>
+          </div>
+      </section>
+
+      <!-- Testimonials Section (unchanged from previous version) -->
+      <section id="testimonials" class="py-20 bg-gray-800">
+          <div class="container mx-auto px-4 text-center">
+              <h2 id="testimonials-title" class="text-4xl font-bold mb-12 text-white">用户评价</h2>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                  <blockquote id="testimonial-1" class="bg-gray-900 p-8 rounded-lg shadow-xl border-l-4 border-purple-500 text-left">
+                      <p class="text-gray-200 text-lg mb-4">“智能助手彻底改变了我的工作方式，效率提升了不止一倍！”</p>
+                      <footer class="text-gray-400 font-semibold">— 张三，产品经理</footer>
+                  </blockquote>
+                  <blockquote id="testimonial-2" class="bg-gray-900 p-8 rounded-lg shadow-xl border-l-4 border-purple-500 text-left">
+                      <p class="text-gray-200 text-lg mb-4">“它的创意生成能力令人惊叹，我的内容创作变得如此轻松。”</p>
+                      <footer class="text-gray-400 font-semibold">— 李四，营销专家</footer>
+                  </blockquote>
+              </div>
+          </div>
+      </section>
+
+      <!-- CTA Section (unchanged from previous version) -->
+      <section id="cta" class="py-20 bg-gradient-to-r from-purple-700 to-indigo-700 text-center text-white">
+          <div class="container mx-auto px-4">
+              <h2 id="cta-title" class="text-4xl font-bold mb-6">准备好提升您的工作效率了吗？</h2>
+              <p id="cta-subtitle" class="text-xl mb-8 opacity-90">立即联系我们，开启您的智能新篇章。</p>
+              <button id="cta-button" class="bg-white text-purple-700 hover:bg-purple-100 px-10 py-4 rounded-full text-xl font-semibold shadow-lg transition-all duration-300 transform hover:scale-105">
+                  免费咨询
+              </button>
+          </div>
+      </section>
+
+      <!-- Footer Section (unchanged from previous version) -->
+      <footer id="main-footer" class="bg-gray-900 py-8 px-6 text-center text-gray-400">
+          <div class="container mx-auto">
+              <div id="social-links" class="flex justify-center space-x-6 mb-4">
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:github" class="text-3xl"></iconify-icon></a>
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:twitter" class="text-3xl"></iconify-icon></a>
+                  <a href="#" class="text-gray-400 hover:text-purple-400 transition-colors duration-300"><iconify-icon icon="mdi:linkedin" class="text-3xl"></iconify-icon></a>
+              </div>
+              <p id="copyright">&copy; 2023 智能助手. 保留所有权利。</p>
+          </div>
+      </footer>
+
+      <script>
+          // Example JavaScript for scroll effects (can be expanded)
+          window.addEventListener('scroll', () => {
+              const header = document.getElementById('main-header');
+              if (window.scrollY > 50) {
+                  header.classList.add('bg-opacity-90', 'shadow-2xl');
+                  header.classList.remove('py-4');
+                  header.classList.add('py-3');
+              } else {
+                  header.classList.remove('bg-opacity-90', 'shadow-2xl');
+                  header.classList.add('py-4');
+                  header.classList.remove('py-3');
+              }
+          });
+      </script>
+  </body>
+  </html>
+  ```
+
+  “智能助手”营销页面的导航链接已更新为“产品”、“解决方案”和“联系”。
+</example>
+

prompts/thinksvg-prompt.txt

@@ -0,0 +1,79 @@
+请根据用户的需求生成一个详细的思维导图分析，并以SVG格式返回，注意使用markdown格式回复。
+
+
+下面是SVG模板，注意模板中定义了三级，你可以参考布局和样式，你可以根据情况自定义层级
+```
+<svg width="720" height="280" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景 -->
+  <rect width="100%" height="100%" fill="#ffffff" />
+  <style>
+    .node-text { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; fill: #555; }
+    .node-title { font-weight: bold; font-size: 14px; fill: #333; }
+    .l2-text { font-weight: bold; font-size: 13px; }
+    .number-circle { font-size: 10px; font-weight: bold; fill: #fff; }
+    .branch-path { fill: none; stroke-width: 1.5; opacity: 0.4; }
+  </style>
+  <g transform="translate(20, 25)">
+    <!-- 连线部分 (中心点 Y=115) -->
+    <g class="branch-path">
+      <path d="M140,115 C180,115 180,22 210,22" stroke="#e74c3c" />
+      <path d="M140,115 C180,115 180,67 210,67" stroke="#f39c12" />
+      <path d="M140,115 C180,115 180,112 210,112" stroke="#f1c40f" />
+      <path d="M140,115 C180,115 180,157 210,157" stroke="#2ecc71" />
+      <path d="M140,115 C180,115 180,202 210,202" stroke="#3498db" />
+      <!-- L2 to L3 短直线 -->
+      <path d="M340,22 L360,22" stroke="#e74c3c" />
+      <path d="M340,67 L360,67" stroke="#f39c12" />
+      <path d="M340,112 L360,112" stroke="#f1c40f" />
+      <path d="M340,157 L360,157" stroke="#2ecc71" />
+      <path d="M340,202 L360,202" stroke="#3498db" />
+    </g>
+    <!-- 一级中心节点 -->
+    <g transform="translate(0, 85)">
+      <rect x="0" y="0" width="140" height="60" rx="6" fill="#fff" stroke="#333" stroke-width="2" />
+      <circle cx="22" cy="30" r="8" fill="#ff4757" />
+      <path d="M20 25 L26 30 L20 35 Z" fill="white" />
+      <text x="38" y="27" class="node-title">软件架构风格</text>
+      <text x="38" y="45" class="node-title">必会考点</text>
+    </g>
+    <!-- 二级节点 (线框) 与 三级节点 (纯文字) -->
+    <!-- 1. 间距从75压缩至45 -->
+    <g transform="translate(210, 5)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#e74c3c" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#e74c3c" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">1</text>
+      <text x="32" y="22" class="l2-text" fill="#e74c3c">数据流风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">批处理序列</tspan> 和 <tspan font-weight="bold">管道/过滤器</tspan></text>
+    </g>
+    <g transform="translate(210, 50)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#f39c12" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#f39c12" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">2</text>
+      <text x="32" y="22" class="l2-text" fill="#f39c12">调用/返回风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">主程序/子程序</tspan>、<tspan font-weight="bold">面向对象</tspan> 及 <tspan font-weight="bold">层次结构</tspan></text>
+    </g>
+    <g transform="translate(210, 95)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#f1c40f" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#f1c40f" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">3</text>
+      <text x="32" y="22" class="l2-text" fill="#f1c40f">独立构件风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">进程通信</tspan> 和 <tspan font-weight="bold">事件驱动</tspan> 系统</text>
+    </g>
+    <g transform="translate(210, 140)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#2ecc71" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#2ecc71" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">4</text>
+      <text x="32" y="22" class="l2-text" fill="#2ecc71">虚拟机风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">解释器</tspan> 和 <tspan font-weight="bold">基于规则的系统</tspan></text>
+    </g>
+    <g transform="translate(210, 185)">
+      <rect x="0" y="0" width="130" height="34" rx="17" fill="none" stroke="#3498db" stroke-width="1.5" />
+      <circle cx="17" cy="17" r="9" fill="#3498db" />
+      <text x="17" y="21" class="number-circle" text-anchor="middle">5</text>
+      <text x="32" y="22" class="l2-text" fill="#3498db">仓库风格</text>
+      <text x="160" y="22" class="node-text">包括 <tspan font-weight="bold">数据库</tspan>、<tspan font-weight="bold">黑板</tspan> 和 <tspan font-weight="bold">超文本</tspan></text>
+    </g>
+  </g>
+</svg>
+
+```

设计/原型.html

@@ -14,61 +14,63 @@
         font-family: 'Inter', sans-serif;
       }
       
-      /* 狂野线条效果 */
+      /* Apple 风格边框 */
-      .wild-border {
+      .apple-card {
-        border: 3px solid;
+        border: 1px solid rgba(0,0,0,0.08);
-        box-shadow: 4px 4px 0px rgba(0,0,0,0.3);
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.06);
+        backdrop-filter: blur(20px);
       }
       
-      /* 切换按钮激活状态 */
+      /* 切换按钮激活状态 - Apple 风格 */
       .mode-btn-active {
-        transform: translateY(-2px);
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-        box-shadow: 0 4px 0 rgba(0,0,0,0.3);
+        transform: scale(1.02);
       }
       
       .mode-btn-inactive {
         opacity: 0.6;
       }
       
-      /* 对话气泡样式 */
+      /* 对话气泡样式 - Google 风格 */
       .chat-bubble-user {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: #4C76AB;
         color: white;
-        padding: 10px 14px;
+        padding: 12px 16px;
         max-width: 80%;
-        border: 2px solid #000;
+        border-radius: 18px 18px 4px 18px;
-        box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
       }
       
       .chat-bubble-ai {
-        background: #fff;
+        background: #f8f9fa;
-        color: #1f2937;
+        color: #464646;
-        padding: 10px 14px;
+        padding: 12px 16px;
         max-width: 85%;
-        border: 2px solid #10b981;
+        border-radius: 4px 18px 18px 18px;
-        box-shadow: 2px 2px 0 rgba(16, 185, 129, 0.3);
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
       }
       
-      /* SVG占位符样式 - 块级换行 + 新配色 */
+      /* SVG占位符样式 - Google 风格 */
       .svg-placeholder-block {
         display: block;
-        background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+        background: #2B4269;
         color: white;
-        padding: 8px 14px;
+        padding: 10px 16px;
         margin: 8px 0;
-        border: 2px solid #000;
+        border-radius: 8px;
-        box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
-        font-weight: bold;
+        font-weight: 600;
         font-size: 13px;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
         text-align: center;
       }
       
       .svg-placeholder-block:hover {
-        transform: translateX(2px) translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.08);
-        box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
+        transform: translateY(-1px);
-        background: linear-gradient(135deg, #fb923c 0%, #f87171 100%);
+        background: #5A6270;
       }
       
       /* 气泡操作按钮 */
@@ -113,28 +115,33 @@
       }
       
       .modal-content {
-        background: white;
+        background: rgba(255,255,255,0.95);
-        border: 4px solid #000;
+        border-radius: 20px;
-        box-shadow: 8px 8px 0 rgba(0,0,0,0.4);
+        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
+                    0 10px 10px -5px rgba(0,0,0,0.04);
         max-width: 500px;
         width: 90%;
         max-height: 90vh;
         overflow-y: auto;
+        backdrop-filter: blur(20px);
+        border: 1px solid rgba(255,255,255,0.2);
       }
       
-      /* 表单输入框样式 */
+      /* 表单输入框样式 - Google 风格 */
       .config-input {
         width: 100%;
-        padding: 10px;
+        padding: 12px 16px;
-        border: 2px solid #000;
+        border: 1px solid #dadce0;
+        border-radius: 4px;
         font-size: 14px;
-        transition: all 0.2s;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        color: #464646;
       }
       
       .config-input:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: #4C76AB;
-        box-shadow: 3px 3px 0 rgba(102, 126, 234, 0.3);
+        box-shadow: 0 0 0 2px rgba(76, 118, 171, 0.1);
       }
       
       /* 齿轮旋转动画 */
@@ -148,31 +155,31 @@
       }
     </style>
 </head>
-<body class="bg-gray-100 h-screen flex flex-col">
+<body class="bg-gray-50 h-screen flex flex-col" style="background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);">
 
     <!-- 顶部标题栏 -->
-    <header class="bg-gradient-to-r from-orange-500 to-pink-500 p-3 flex items-center justify-between border-b-4 border-black">
+    <header class="px-6 py-4 flex items-center justify-between" style="background: rgba(255,255,255,0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06);">
-      <div class="flex items-center space-x-2">
+      <div class="flex items-center space-x-4">
-        <iconify-icon icon="ph:lightning-fill" class="text-3xl text-white"></iconify-icon>
+        <iconify-icon icon="ph:lightning-fill" class="text-3xl" style="color: #4C76AB;"></iconify-icon>
-        <h1 id="page-title" class="text-2xl font-black text-white tracking-tight">产品画布</h1>
+        <h1 id="page-title" class="text-2xl font-semibold tracking-tight" style="color: #464646;">产品画布</h1>
       </div>
       
       <!-- 右侧按钮组 -->
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-4">
         <!-- API配置按钮 -->
-        <button id="settings-btn" class="settings-btn bg-white/20 text-white p-2 border-2 border-white hover:bg-white/30 transition-all" title="API配置">
+        <button id="settings-btn" class="settings-btn p-3 rounded-full hover:bg-gray-100 transition-all" style="color: #666666;" title="API配置">
-          <iconify-icon icon="ph:gear-six-fill" class="text-2xl"></iconify-icon>
+          <iconify-icon icon="ph:gear-six-fill" class="text-xl"></iconify-icon>
         </button>
         
-        <span class="text-white font-bold text-sm">点击切换模式</span>
+        <span class="font-medium text-sm" style="color: #888888;">点击切换模式</span>
-        <iconify-icon icon="ph:hand-pointing-fill" class="text-2xl text-yellow-300 wave-hand"></iconify-icon>
+        <iconify-icon icon="ph:hand-pointing-fill" class="text-2xl wave-hand" style="color: #5A6270;"></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">
+        <button id="canvas-mode-btn" class="mode-btn-active px-5 py-2.5 font-medium rounded-full hover:bg-gray-100 transition-all duration-300" style="color: #464646; background: rgba(76,118,171,0.1);">
-          <iconify-icon icon="ph:pen-nib-duotone" class="align-middle mr-1"></iconify-icon>
+          <iconify-icon icon="ph:pen-nib-duotone" class="align-middle mr-2"></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">
+        <button id="swot-mode-btn" class="mode-btn-inactive px-5 py-2.5 font-medium rounded-full hover:bg-gray-100 transition-all duration-300" style="color: #666666;">
-          <iconify-icon icon="ph:chart-bar-duotone" class="align-middle mr-1"></iconify-icon>
+          <iconify-icon icon="ph:chart-bar-duotone" class="align-middle mr-2"></iconify-icon>
           SWOT分析
         </button>
       </div>
@@ -182,7 +189,7 @@
     <main class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 overflow-hidden">
     
       <!-- 左侧对话面板 -->
-      <div class="md:col-span-1 bg-white wild-border border-cyan-500 flex flex-col">
+      <div class="md:col-span-1 bg-white apple-card flex flex-col">
         <!-- 对话历史区 -->
         <div id="chat-history" class="flex-1 p-4 overflow-y-auto space-y-3">
           
@@ -253,40 +260,43 @@
         </div>
         
         <!-- 输入区 -->
-        <div class="p-3 border-t-3 border-gray-300 bg-yellow-50">
+        <div class="p-5 border-t bg-white" style="border-color: rgba(0,0,0,0.06);">
-          <div class="relative flex items-center gap-2">
+          <div class="relative flex items-center gap-3">
-            <input 
+            <input
-              id="chat-input" 
+              id="chat-input"
-              type="text" 
+              type="text"
-              placeholder="输入您的想法，按Enter发送..." 
+              placeholder="输入您的想法，按Enter发送..."
-              class="flex-1 p-2 border-2 border-gray-800 focus:border-cyan-500 focus:outline-none transition-colors font-medium"
+              class="flex-1 px-5 py-4 border focus:outline-none transition-all font-normal rounded-2xl"
+              style="border-color: rgba(0,0,0,0.08); color: #464646; background: rgba(248,249,250,0.8);"
+              onfocus="this.style.borderColor='#4C76AB'; this.style.boxShadow='0 0 0 3px rgba(76,118,171,0.15)'; this.style.background='rgba(255,255,255,0.95)'"
+              onblur="this.style.borderColor='rgba(0,0,0,0.08)'; this.style.boxShadow='none'; this.style.background='rgba(248,249,250,0.8)'"
             />
-            <button id="send-button" class="text-cyan-600 hover:text-cyan-700 transition-colors p-2 hover:scale-110 transform duration-200">
+            <button id="send-button" class="p-3 rounded-full transition-all hover:scale-105" style="color: white; background: #4C76AB; box-shadow: 0 2px 8px rgba(76,118,171,0.3);" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
-              <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-3xl"></iconify-icon>
+              <iconify-icon icon="ph:paper-plane-tilt-fill" class="text-xl"></iconify-icon>
             </button>
           </div>
         </div>
       </div>
     
       <!-- 右侧显示面板 -->
-      <div class="md:col-span-2 bg-white wild-border border-purple-600 flex flex-col">
+      <div class="md:col-span-2 bg-white apple-card flex flex-col">
-        <div id="svg-viewer" class="flex-1 flex items-center justify-center p-4 bg-gradient-to-br from-purple-50 to-pink-50 overflow-auto">
+        <div id="svg-viewer" class="flex-1 flex items-center justify-center p-8 overflow-auto" style="background: linear-gradient(135deg, #fafafa 0%, #f8f9fa 100%);">
-          <div id="svg-placeholder" class="text-center text-gray-400">
+          <div id="svg-placeholder" class="text-center" style="color: #787878;">
-            <iconify-icon icon="ph:image-square" class="text-6xl mx-auto text-purple-400"></iconify-icon>
+            <iconify-icon icon="ph:image-square" class="text-6xl mx-auto" style="color: #5586F5;"></iconify-icon>
             <p class="mt-2 font-bold" id="placeholder-text">生成的产品画布将在此处显示</p>
           </div>
         </div>
         
         <!-- 底部操作栏 -->
-        <div class="p-3 border-t-3 border-gray-300 flex justify-end items-center gap-2 bg-gray-800">
+        <div class="p-5 border-t flex justify-end items-center gap-4" style="border-color: rgba(0,0,0,0.06); background: rgba(248,249,250,0.8);">
-          <button id="download-svg-btn" class="p-2 bg-orange-500 text-white border-2 border-black hover:bg-orange-600 transition-all" title="下载SVG">
+          <button id="download-svg-btn" class="p-3 text-white rounded-xl transition-all" style="background: #5A6270; box-shadow: 0 4px 12px rgba(90,98,112,0.25);" title="下载SVG" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            <iconify-icon icon="mdi:download-outline" class="text-xl"></iconify-icon>
+            <iconify-icon icon="mdi:download-outline" class="text-lg"></iconify-icon>
           </button>
-          <button id="export-image-btn" class="p-2 bg-green-500 text-white border-2 border-black hover:bg-green-600 transition-all" title="导出为图片">
+          <button id="export-image-btn" class="p-3 text-white rounded-xl transition-all" style="background: #2B4269; box-shadow: 0 4px 12px rgba(43,66,105,0.25);" title="导出为图片" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            <iconify-icon icon="mdi:image-outline" class="text-xl"></iconify-icon>
+            <iconify-icon icon="mdi:image-outline" class="text-lg"></iconify-icon>
           </button>
-          <button id="view-code-btn" class="p-2 bg-blue-500 text-white border-2 border-black hover:bg-blue-600 transition-all" title="查看代码">
+          <button id="view-code-btn" class="p-3 text-white rounded-xl transition-all" style="background: #4C76AB; box-shadow: 0 4px 12px rgba(76,118,171,0.25);" title="查看代码" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            <iconify-icon icon="mdi:code-tags" class="text-xl"></iconify-icon>
+            <iconify-icon icon="mdi:code-tags" class="text-lg"></iconify-icon>
           </button>
         </div>
       </div>
@@ -297,13 +307,13 @@
     <div id="config-modal" class="modal-overlay">
       <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="p-6 border-b flex items-center justify-between" style="background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.06); border-radius: 20px 20px 0 0;">
-          <div class="flex items-center gap-2">
+          <div class="flex items-center gap-4">
-            <iconify-icon icon="ph:plugs-connected-fill" class="text-3xl text-white"></iconify-icon>
+            <iconify-icon icon="ph:plugs-connected-fill" class="text-2xl" style="color: #4C76AB;"></iconify-icon>
-            <h2 class="text-xl font-black text-white">API 配置</h2>
+            <h2 class="text-xl font-semibold" style="color: #464646;">API 配置</h2>
           </div>
-          <button id="close-modal-btn" class="text-white hover:bg-white/20 p-2 transition-all">
+          <button id="close-modal-btn" class="hover:bg-gray-100 p-3 rounded-full transition-all" style="color: #666666;" onmouseover="this.style.backgroundColor='#f0f0f0'" onmouseout="this.style.backgroundColor='transparent'">
-            <iconify-icon icon="ph:x-bold" class="text-2xl"></iconify-icon>
+            <iconify-icon icon="ph:x-bold" class="text-xl"></iconify-icon>
           </button>
         </div>
         
@@ -311,14 +321,14 @@
         <div class="p-6 space-y-4">
           <!-- API URL -->
           <div>
-            <label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
+            <label class="block font-semibold mb-3 flex items-center gap-3" style="color: #464646;">
-              <iconify-icon icon="ph:link-bold" class="text-lg text-blue-600"></iconify-icon>
+              <iconify-icon icon="ph:link-bold" class="text-lg" style="color: #4C76AB;"></iconify-icon>
               API URL
             </label>
-            <input 
+            <input
-              id="api-url" 
+              id="api-url"
-              type="text" 
+              type="text"
-              placeholder="https://api.example.com/v1/chat" 
+              placeholder="https://api.example.com/v1/chat"
               class="config-input"
               value=""
             />
@@ -326,14 +336,14 @@
           
           <!-- API Key -->
           <div>
-            <label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
+            <label class="block font-semibold mb-3 flex items-center gap-3" style="color: #464646;">
-              <iconify-icon icon="ph:key-bold" class="text-lg text-green-600"></iconify-icon>
+              <iconify-icon icon="ph:key-bold" class="text-lg" style="color: #2B4269;"></iconify-icon>
               API Key
             </label>
-            <input 
+            <input
-              id="api-key" 
+              id="api-key"
-              type="password" 
+              type="password"
-              placeholder="sk-xxxxxxxxxxxxxxxx" 
+              placeholder="sk-xxxxxxxxxxxxxxxx"
               class="config-input"
               value=""
             />
@@ -341,33 +351,33 @@
           
           <!-- Model -->
           <div>
-            <label class="block font-bold text-gray-800 mb-2 flex items-center gap-2">
+            <label class="block font-semibold mb-3 flex items-center gap-3" style="color: #464646;">
-              <iconify-icon icon="ph:robot-bold" class="text-lg text-purple-600"></iconify-icon>
+              <iconify-icon icon="ph:robot-bold" class="text-lg" style="color: #5A6270;"></iconify-icon>
               模型 (Model)
             </label>
-            <input 
+            <input
-              id="api-model" 
+              id="api-model"
-              type="text" 
+              type="text"
-              placeholder="gpt-4-turbo" 
+              placeholder="gpt-4-turbo"
               class="config-input"
               value=""
             />
           </div>
           
           <!-- 状态显示 -->
-          <div id="config-status" class="p-3 border-2 border-gray-300 bg-gray-50 text-sm text-gray-600 hidden">
+          <div id="config-status" class="p-4 border rounded-2xl bg-gray-50 text-sm hidden" style="border-color: rgba(0,0,0,0.06); color: #888888;">
             <iconify-icon icon="ph:info" class="align-middle"></iconify-icon>
             <span id="status-text">等待操作...</span>
           </div>
         </div>
         
         <!-- 模态窗底部按钮 -->
-        <div class="p-4 border-t-3 border-gray-300 bg-gray-100 flex gap-3 justify-end">
+        <div class="p-6 border-t bg-white flex gap-4 justify-end" style="border-color: rgba(0,0,0,0.06); border-radius: 0 0 20px 20px;">
-          <button id="test-api-btn" class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black hover:bg-yellow-600 transition-all flex items-center gap-2">
+          <button id="test-api-btn" class="px-6 py-3 text-white font-medium rounded-2xl transition-all flex items-center gap-3" style="background: #5A6270; box-shadow: 0 4px 12px rgba(90,98,112,0.25);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
             <iconify-icon icon="ph:flask-bold"></iconify-icon>
             测试连接
           </button>
-          <button id="save-config-btn" class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black hover:bg-green-600 transition-all flex items-center gap-2">
+          <button id="save-config-btn" class="px-6 py-3 text-white font-medium rounded-2xl transition-all flex items-center gap-3" style="background: #4C76AB; box-shadow: 0 4px 12px rgba(76,118,171,0.25);" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
             <iconify-icon icon="ph:floppy-disk-bold"></iconify-icon>
             保存配置
           </button>
@@ -505,19 +515,22 @@
         configStatus.classList.remove('hidden');
         statusText.textContent = message;
         
-        configStatus.classList.remove('border-gray-300', 'bg-gray-50', 'text-gray-600');
+        configStatus.style.borderColor = '#787878';
-        configStatus.classList.remove('border-green-500', 'bg-green-50', 'text-green-700');
+        configStatus.style.backgroundColor = '#f9fafb';
-        configStatus.classList.remove('border-red-500', 'bg-red-50', 'text-red-700');
+        configStatus.style.color = '#787878';
-        configStatus.classList.remove('border-blue-500', 'bg-blue-50', 'text-blue-700');
         
         if (type === 'success') {
-          configStatus.classList.add('border-green-500', 'bg-green-50', 'text-green-700');
+          configStatus.style.borderColor = '#47A74F';
+          configStatus.style.backgroundColor = '#e8f5e9';
+          configStatus.style.color = '#2e7d32';
         } else if (type === 'error') {
-          configStatus.classList.add('border-red-500', 'bg-red-50', 'text-red-700');
+          configStatus.style.borderColor = '#E04639';
+          configStatus.style.backgroundColor = '#ffebee';
+          configStatus.style.color = '#c62828';
         } else if (type === 'loading') {
-          configStatus.classList.add('border-blue-500', 'bg-blue-50', 'text-blue-700');
+          configStatus.style.borderColor = '#5586F5';
-        } else {
+          configStatus.style.backgroundColor = '#e3f2fd';
-          configStatus.classList.add('border-gray-300', 'bg-gray-50', 'text-gray-600');
+          configStatus.style.color = '#1565c0';
         }
       }