增加了图片上传解析的功能

.vscode/settings.json

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

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

@@ -489,3 +489,213 @@ iconify-icon {
 }
 
 #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>
@@ -172,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>
@@ -251,6 +280,16 @@
       </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>

js/apiclient.js

@@ -2,13 +2,23 @@
  * 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',
@@ -32,15 +42,72 @@ class APIClient {
         '你是一个可靠的智能助手，请直接回答用户的问题并提供结构化输出。'
     };
     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 = []) {
@@ -118,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);
   }
@@ -151,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);
   }

js/core/app-shell.js

@@ -34,6 +34,9 @@
       this.mermaidPanZoom = null;
       this.mermaidInitialized = false;
 
+      // 图片上传状态管理
+      this.pendingImages = [];  // 待发送的图片列表 { id, file, blobUrl, base64?, mimeType }
+
       this.globalStore = moduleRuntime.storageService.global();
       this.activeModuleId = null;
 
@@ -57,6 +60,16 @@
       this.el.clearHistoryBtn = document.getElementById('clear-history-btn');
       this.el.chatHistory = document.getElementById('chat-history');
 
+      // 图片上传相关
+      this.el.imageUploadBtn = document.getElementById('image-upload-btn');
+      this.el.imageFileInput = document.getElementById('image-file-input');
+      this.el.imagePreviewContainer = document.getElementById('image-preview-container');
+      this.el.imagePreviewModal = document.getElementById('image-preview-modal');
+      this.el.imagePreviewFull = document.getElementById('image-preview-full');
+      this.el.closeImagePreviewBtn = document.getElementById('close-image-preview-btn');
+      this.el.imageVisionDisabledTip = document.getElementById('image-vision-disabled-tip');
+      this.el.configEnableVision = document.getElementById('config-enable-vision');
+
       // 视图区域
       this.el.viewer = document.getElementById('svg-viewer');
       this.el.placeholderText =
@@ -287,6 +300,101 @@
           }
         });
       }
+
+      // 图片上传相关事件绑定
+      this.bindImageUploadEvents();
+    }
+
+    /**
+     * 绑定图片上传相关事件
+     */
+    bindImageUploadEvents() {
+      // 图片上传按钮点击
+      if (this.el.imageUploadBtn && this.el.imageFileInput) {
+        this.el.imageUploadBtn.addEventListener('click', () => {
+          if (!this.apiClient.isVisionEnabled()) {
+            this.showImageError('图片解析功能已禁用');
+            return;
+          }
+          this.el.imageFileInput.click();
+        });
+      }
+
+      // 文件选择变化
+      if (this.el.imageFileInput) {
+        this.el.imageFileInput.addEventListener('change', (event) => {
+          const files = Array.from(event.target.files || []);
+          this.handleImageFiles(files);
+          event.target.value = '';  // 清空以允许重复选择同一文件
+        });
+      }
+
+      // 粘贴事件（支持图片粘贴）
+      if (this.el.chatInput) {
+        this.el.chatInput.addEventListener('paste', (event) => {
+          if (!this.apiClient.isVisionEnabled()) return;
+
+          const items = event.clipboardData?.items;
+          if (!items) return;
+
+          const imageFiles = [];
+          for (const item of items) {
+            if (item.type.startsWith('image/')) {
+              const file = item.getAsFile();
+              if (file) imageFiles.push(file);
+            }
+          }
+
+          if (imageFiles.length > 0) {
+            // 不阻止默认行为，允许同时粘贴文本
+            this.handleImageFiles(imageFiles);
+          }
+        });
+      }
+
+      // 图片预览容器点击事件（删除和预览）
+      if (this.el.imagePreviewContainer) {
+        this.el.imagePreviewContainer.addEventListener('click', (event) => {
+          const deleteBtn = event.target.closest('.image-thumbnail-delete');
+          if (deleteBtn) {
+            event.stopPropagation();
+            const imageId = deleteBtn.dataset.imageId;
+            this.removeImage(imageId);
+            return;
+          }
+
+          const thumbnailItem = event.target.closest('.image-thumbnail-item');
+          if (thumbnailItem) {
+            const imageId = thumbnailItem.dataset.imageId;
+            this.openImagePreview(imageId);
+          }
+        });
+      }
+
+      // 图片预览模态窗关闭
+      if (this.el.closeImagePreviewBtn) {
+        this.el.closeImagePreviewBtn.addEventListener('click', () => {
+          this.closeImagePreviewModal();
+        });
+      }
+      if (this.el.imagePreviewModal) {
+        this.el.imagePreviewModal.addEventListener('click', (event) => {
+          if (event.target === this.el.imagePreviewModal) {
+            this.closeImagePreviewModal();
+          }
+        });
+      }
+
+      // 初始化图片上传UI状态
+      this.updateImageUploadUI();
+
+      // 监听运行时配置更新事件
+      if (typeof window !== 'undefined') {
+        window.addEventListener('vision-config-updated', (event) => {
+          this.updateImageUploadUI();
+          this.updateVisionConfigUI(event.detail);
+        });
+      }
     }
 
     setupModuleSwitcher() {
@@ -461,14 +569,21 @@
       const wrapper = document.createElement('div');
       const manifest = this.getActiveManifest();
       const actionsHtml = this.buildMessageActions(message, options);
+
+      // 构建图片HTML（用于用户消息）
+      const imagesHtml = this.buildMessageImagesHtml(message.images);
+
       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>
+            ${imagesHtml}
+            <div>${Utils.escapeHtml(message.content || '')}</div>
             ${actionsHtml}
           </div>
         `;
+        // 绑定图片点击预览事件
+        this.bindBubbleImagePreview(wrapper, message.images);
       } else if (message.type === 'error') {
         wrapper.className = 'flex justify-start';
         wrapper.innerHTML = `
@@ -509,6 +624,47 @@
       return wrapper;
     }
 
+    /**
+     * 构建消息中图片的HTML
+     * @param {Array} images - 图片数组
+     * @returns {string} - HTML字符串
+     */
+    buildMessageImagesHtml(images) {
+      if (!images || images.length === 0) return '';
+
+      const imageItems = images.map((img, index) => {
+        const src = `data:${img.mimeType};base64,${img.base64}`;
+        return `
+          <div class="chat-bubble-image" data-image-index="${index}">
+            <img src="${src}" alt="图片 ${index + 1}" loading="lazy" />
+          </div>
+        `;
+      }).join('');
+
+      return `<div class="chat-bubble-images">${imageItems}</div>`;
+    }
+
+    /**
+     * 绑定气泡中图片的点击预览事件
+     * @param {HTMLElement} wrapper - 消息包装元素
+     * @param {Array} images - 图片数组
+     */
+    bindBubbleImagePreview(wrapper, images) {
+      if (!images || images.length === 0) return;
+
+      const imageElements = wrapper.querySelectorAll('.chat-bubble-image');
+      imageElements.forEach((el, index) => {
+        el.addEventListener('click', (event) => {
+          event.stopPropagation();
+          const img = images[index];
+          if (img && this.el.imagePreviewModal && this.el.imagePreviewFull) {
+            this.el.imagePreviewFull.src = `data:${img.mimeType};base64,${img.base64}`;
+            this.el.imagePreviewModal.classList.add('active');
+          }
+        });
+      });
+    }
+
     buildMessageActions(message, options = {}) {
       const {
         allowRollback = false,
@@ -692,7 +848,8 @@
         .map((msg) => ({
           role: msg.type === 'user' ? 'user' : 'assistant',
           // 使用原始内容作为 LLM 上下文，兼容无 rawContent 的旧记录
-          content: msg.rawContent || msg.content || ''
+          content: msg.rawContent || msg.content || '',
+          images: msg.type === 'user' ? msg.images || [] : undefined
         }));
 
       this.isProcessing = true;
@@ -702,7 +859,8 @@
 
       this.beginStreaming(manifest, {
         userMessage,
-        contextMessages
+        contextMessages,
+        images: userMessage.images || []  // 传递原始用户消息的图片
       });
     }
 
@@ -745,10 +903,14 @@
       return nextId;
     }
 
-    sendMessage() {
+    async sendMessage() {
       if (!this.el.chatInput) return;
       const message = this.el.chatInput.value.trim();
-      if (!message || this.isProcessing) return;
+      const hasImages = this.pendingImages.length > 0;
+
+      // 必须有文本或图片才能发送
+      if (!message && !hasImages) return;
+      if (this.isProcessing) return;
 
       if (!this.apiClient.isConfigValid()) {
         alert('⚠️ 请先配置API设置！点击右上角齿轮图标进行配置。');
@@ -756,12 +918,25 @@
         return;
       }
 
+      // 准备图片数据（转换为base64）
+      let images = [];
+      if (hasImages && this.apiClient.isVisionEnabled()) {
+        try {
+          images = await this.prepareImagesForSend();
+        } catch (error) {
+          console.error('图片处理失败:', error);
+          this.showImageError('图片处理失败，请重试');
+          return;
+        }
+      }
+
       const manifest = this.getActiveManifest();
       const userMessage = {
         id: Utils.generateId('msg'),
         type: 'user',
         content: message,
-        timestamp: new Date().toISOString()
+        timestamp: new Date().toISOString(),
+        images: images.length > 0 ? images : undefined  // 保存图片数据到消息
       };
 
       this.conversationService.appendMessage(manifest, userMessage);
@@ -769,6 +944,9 @@
       this.el.chatInput.value = '';
       Utils.autoResizeTextarea(this.el.chatInput);
 
+      // 清空待发送图片
+      this.clearPendingImages();
+
       const context = this.conversationService.buildContext(manifest);
       if (!context) {
         console.warn('无法构建上下文，终止发送');
@@ -782,7 +960,8 @@
 
       this.beginStreaming(manifest, {
         userMessage: context.userMessage,
-        contextMessages: context.contextMessages
+        contextMessages: context.contextMessages,
+        images: images  // 传递图片数据
       });
     }
 
@@ -858,7 +1037,8 @@
           payload.contextMessages,
           handleChunk,
           handleComplete,
-          STREAM_DEFAULT_OPTIONS
+          STREAM_DEFAULT_OPTIONS,
+          payload.images || []  // 传递图片数据
         )
         .then((streamHandle) => {
           this.activeStreamHandle = streamHandle;
@@ -2705,6 +2885,11 @@
       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 || '';
+      if (this.el.configEnableVision) {
+        this.el.configEnableVision.checked = config.enableVision !== false;
+      }
+      // 更新图片上传UI状态
+      this.updateImageUploadUI();
     }
 
     async testAPI() {
@@ -2721,7 +2906,8 @@
       const config = {
         url: this.el.apiUrlInput?.value.trim(),
         key: this.el.apiKeyInput?.value.trim(),
-        model: this.el.apiModelInput?.value.trim()
+        model: this.el.apiModelInput?.value.trim(),
+        enableVision: this.el.configEnableVision?.checked !== false
       };
       if (!config.url || !config.key || !config.model) {
         this.setConfigStatus('error', '请填写完整的配置');
@@ -2729,6 +2915,8 @@
       }
       this.apiClient.saveConfig(config);
       this.setConfigStatus('success', '配置已保存');
+      // 更新图片上传UI状态
+      this.updateImageUploadUI();
       //setTimeout(() => this.closeConfigModal(), 600);
     }
 
@@ -2776,6 +2964,255 @@
         );
       }
     }
+
+    // ==================== 图片上传相关方法 ====================
+
+    /**
+     * 处理图片文件（上传或粘贴）
+     * @param {File[]} files - 文件列表
+     */
+    handleImageFiles(files) {
+      const config = this.apiClient.getImageConfig();
+      const currentCount = this.pendingImages.length;
+      const availableSlots = config.maxCount - currentCount;
+
+      if (availableSlots <= 0) {
+        this.showImageError(`最多只能上传 ${config.maxCount} 张图片`);
+        return;
+      }
+
+      const filesToAdd = files.slice(0, availableSlots);
+
+      for (const file of filesToAdd) {
+        // 验证文件类型
+        if (!config.allowedTypes.includes(file.type)) {
+          this.showImageError(`不支持的图片格式: ${file.type}`);
+          continue;
+        }
+
+        // 验证文件大小
+        if (file.size > config.maxSizeBytes) {
+          const maxSizeMB = config.maxSizeBytes / (1024 * 1024);
+          this.showImageError(`图片大小超过限制 (最大 ${maxSizeMB}MB)`);
+          continue;
+        }
+
+        // 创建图片对象
+        const imageObj = {
+          id: Utils.generateId('img'),
+          file: file,
+          blobUrl: URL.createObjectURL(file),
+          mimeType: file.type,
+          base64: null  // 发送时再转换
+        };
+
+        this.pendingImages.push(imageObj);
+      }
+
+      this.renderImageThumbnails();
+
+      if (files.length > availableSlots) {
+        this.showImageError(`已达到最大图片数量限制 (${config.maxCount} 张)`);
+      }
+    }
+
+    /**
+     * 渲染图片缩略图
+     */
+    renderImageThumbnails() {
+      if (!this.el.imagePreviewContainer) return;
+
+      if (this.pendingImages.length === 0) {
+        this.el.imagePreviewContainer.classList.add('hidden');
+        this.el.imagePreviewContainer.innerHTML = '';
+        return;
+      }
+
+      this.el.imagePreviewContainer.classList.remove('hidden');
+      this.el.imagePreviewContainer.innerHTML = this.pendingImages.map((img, index) => `
+        <div class="image-thumbnail-item" data-image-id="${img.id}" title="点击预览">
+          <img src="${img.blobUrl}" alt="图片 ${index + 1}" />
+          <button class="image-thumbnail-delete" data-image-id="${img.id}" title="删除">
+            <iconify-icon icon="ph:x-bold"></iconify-icon>
+          </button>
+        </div>
+      `).join('');
+    }
+
+    /**
+     * 删除指定图片
+     * @param {string} imageId - 图片ID
+     */
+    removeImage(imageId) {
+      const index = this.pendingImages.findIndex(img => img.id === imageId);
+      if (index === -1) return;
+
+      const img = this.pendingImages[index];
+      // 释放Blob URL
+      if (img.blobUrl) {
+        URL.revokeObjectURL(img.blobUrl);
+      }
+
+      this.pendingImages.splice(index, 1);
+      this.renderImageThumbnails();
+    }
+
+    /**
+     * 清空所有待发送图片
+     */
+    clearPendingImages() {
+      for (const img of this.pendingImages) {
+        if (img.blobUrl) {
+          URL.revokeObjectURL(img.blobUrl);
+        }
+      }
+      this.pendingImages = [];
+      this.renderImageThumbnails();
+    }
+
+    /**
+     * 打开图片预览模态窗
+     * @param {string} imageId - 图片ID
+     */
+    openImagePreview(imageId) {
+      const img = this.pendingImages.find(i => i.id === imageId);
+      if (!img || !this.el.imagePreviewModal || !this.el.imagePreviewFull) return;
+
+      this.el.imagePreviewFull.src = img.blobUrl;
+      this.el.imagePreviewModal.classList.add('active');
+    }
+
+    /**
+     * 关闭图片预览模态窗
+     */
+    closeImagePreviewModal() {
+      if (!this.el.imagePreviewModal) return;
+      this.el.imagePreviewModal.classList.remove('active');
+      if (this.el.imagePreviewFull) {
+        this.el.imagePreviewFull.src = '';
+      }
+    }
+
+    /**
+     * 显示图片错误提示
+     * @param {string} message - 错误信息
+     */
+    showImageError(message) {
+      // 创建toast提示
+      const toast = document.createElement('div');
+      toast.className = 'image-error-toast';
+      toast.textContent = message;
+      document.body.appendChild(toast);
+
+      // 3秒后自动移除
+      setTimeout(() => {
+        toast.remove();
+      }, 3000);
+    }
+
+    /**
+     * 更新图片上传UI状态（根据enableVision配置）
+     */
+    updateImageUploadUI() {
+      const visionEnabled = this.apiClient.isVisionEnabled();
+
+      // 更新上传按钮状态
+      if (this.el.imageUploadBtn) {
+        this.el.imageUploadBtn.disabled = !visionEnabled;
+        this.el.imageUploadBtn.title = visionEnabled
+          ? '上传图片 (支持粘贴)'
+          : '图片解析功能已禁用';
+      }
+
+      // 更新禁用提示
+      if (this.el.imageVisionDisabledTip) {
+        this.el.imageVisionDisabledTip.classList.toggle('hidden', visionEnabled);
+      }
+
+      // 如果禁用了Vision，清空待发送图片
+      if (!visionEnabled && this.pendingImages.length > 0) {
+        this.clearPendingImages();
+      }
+    }
+
+    /**
+     * 更新Vision配置UI（处理运行时锁定状态）
+     * @param {Object} detail - 配置详情 { enableVision, isRuntimeLocked }
+     */
+    updateVisionConfigUI(detail) {
+      if (!this.el.configEnableVision) return;
+
+      const { enableVision, isRuntimeLocked } = detail;
+
+      // 更新复选框状态
+      this.el.configEnableVision.checked = enableVision;
+
+      // 如果被运行时配置锁定，禁用复选框并添加提示
+      if (isRuntimeLocked) {
+        this.el.configEnableVision.disabled = true;
+
+        // 添加锁定提示
+        const parent = this.el.configEnableVision.closest('.flex');
+        if (parent) {
+          let lockHint = parent.querySelector('.vision-lock-hint');
+          if (!lockHint) {
+            lockHint = document.createElement('span');
+            lockHint.className = 'vision-lock-hint text-xs text-orange-600 ml-2';
+            lockHint.innerHTML = '<iconify-icon icon="ph:lock-bold" class="align-middle"></iconify-icon> 由部署配置锁定';
+            parent.appendChild(lockHint);
+          }
+        }
+      } else {
+        this.el.configEnableVision.disabled = false;
+
+        // 移除锁定提示
+        const parent = this.el.configEnableVision.closest('.flex');
+        if (parent) {
+          const lockHint = parent.querySelector('.vision-lock-hint');
+          if (lockHint) {
+            lockHint.remove();
+          }
+        }
+      }
+    }
+
+    /**
+     * 将File转换为Base64
+     * @param {File} file - 文件对象
+     * @returns {Promise<string>} - Base64字符串（不含data:前缀）
+     */
+    fileToBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          // 移除 "data:image/xxx;base64," 前缀
+          const base64 = reader.result.split(',')[1];
+          resolve(base64);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+      });
+    }
+
+    /**
+     * 准备图片数据用于API发送（并行转换优化）
+     * @returns {Promise<Array>} - 图片数据数组 [{ base64, mimeType }]
+     */
+    async prepareImagesForSend() {
+      // 并行转换所有图片为base64
+      const conversionPromises = this.pendingImages.map(async (img) => {
+        // 如果还没有转换为base64，现在转换
+        if (!img.base64) {
+          img.base64 = await this.fileToBase64(img.file);
+        }
+        return {
+          base64: img.base64,
+          mimeType: img.mimeType
+        };
+      });
+
+      return Promise.all(conversionPromises);
+    }
   }
 
   global.AppShell = AppShell;