feat: 添加上传按钮支持图片和文件上传

2026-04-26 10:56:40 +08:00
parent 41f06148b4
commit 65360ad822
3 changed files with 439 additions and 5 deletions
--- a/www/app.js
+++ b/www/app.js
@@ -172,6 +172,9 @@ function openConversation(id) {
      </div>

      <div class="input-area">
+        <button class="attach-btn" id="attachBtn" title="上传文件">
+          <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+        </button>
        <textarea 
          id="userInput" 
          placeholder="输入消息..." 
@@ -181,6 +184,22 @@ function openConversation(id) {
          <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
        </button>
      </div>
+      
+      <!-- 上传选项弹窗 -->
+      <div class="attach-panel" id="attachPanel">
+        <div class="attach-panel-content">
+          <div class="attach-item" data-type="image">
+            <div class="attach-icon">📷</div>
+            <div class="attach-label">上传图片</div>
+          </div>
+          <div class="attach-item" data-type="file">
+            <div class="attach-icon">📄</div>
+            <div class="attach-label">上传文件</div>
+          </div>
+        </div>
+      </div>
+      <input type="file" id="imageInput" accept="image/*" style="display:none">
+      <input type="file" id="fileInput" accept=".txt,.md,.pdf,.doc,.docx,.json,.csv" style="display:none">
    </div>
  `;
  
@@ -205,6 +224,45 @@ function openConversation(id) {
  userInput.addEventListener('input', (e) => autoResize(e.target));
  sendBtn.addEventListener('click', sendMessage);
  
+  // 绑定上传按钮事件
+  const attachBtn = document.getElementById('attachBtn');
+  const attachPanel = document.getElementById('attachPanel');
+  const imageInput = document.getElementById('imageInput');
+  const fileInput = document.getElementById('fileInput');
+  
+  if (attachBtn) {
+    attachBtn.addEventListener('click', () => {
+      attachPanel.classList.toggle('show');
+    });
+  }
+  
+  // 点击其他地方关闭面板
+  document.addEventListener('click', (e) => {
+    if (attachPanel && attachPanel.classList.contains('show') && 
+        !attachPanel.contains(e.target) && e.target !== attachBtn) {
+      attachPanel.classList.remove('show');
+    }
+  });
+  
+  // 上传选项点击
+  attachPanel.querySelectorAll('.attach-item').forEach(item => {
+    item.addEventListener('click', () => {
+      const type = item.getAttribute('data-type');
+      attachPanel.classList.remove('show');
+      if (type === 'image') {
+        imageInput.click();
+      } else if (type === 'file') {
+        fileInput.click();
+      }
+    });
+  });
+  
+  // 图片上传处理
+  imageInput.addEventListener('change', handleImageUpload);
+  
+  // 文件上传处理
+  fileInput.addEventListener('change', handleFileUpload);
+  
  // 绑定快捷按钮事件
  document.querySelectorAll('.quick-btn').forEach(btn => {
    btn.addEventListener('click', () => {
@@ -452,7 +510,18 @@ function renderMessages() {
  messagesDiv.innerHTML = currentConversation.messages.map((msg, index) => {
    const isUser = msg.role === 'user';
    const avatar = isUser ? '👤' : '🤖';
-    const content = renderMarkdown(msg.content);
+    
+    // 处理消息内容（支持图片）
+    let contentHtml = '';
+    if (msg.image) {
+      // 图片消息
+      contentHtml = `<div class="message-image"><img src="${msg.image}" alt="${msg.imageName || '图片'}"></div>`;
+      if (msg.content && msg.content !== '[图片]') {
+        contentHtml += `<div class="message-text">${renderMarkdown(msg.content)}</div>`;
+      }
+    } else {
+      contentHtml = renderMarkdown(msg.content);
+    }
    
    const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
    
@@ -477,7 +546,7 @@ function renderMessages() {
      <div class="message ${msg.role}" data-index="${index}">
        <div class="message-avatar">${avatar}</div>
        <div class="message-body">
-          <div class="message-content">${content}</div>
+          <div class="message-content">${contentHtml}</div>
          ${actions}
        </div>
      </div>
@@ -563,3 +632,254 @@ function formatTime(timestamp) {
 if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js').catch(() => {});
 }
+
+// ==================== 文件上传处理 ====================
+
+// 处理图片上传
+async function handleImageUpload(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  
+  // 读取图片为base64
+  const reader = new FileReader();
+  reader.onload = async (event) => {
+    const base64 = event.target.result;
+    
+    // 添加用户消息（显示图片）
+    currentConversation.messages.push({
+      role: 'user',
+      content: '[图片]',
+      image: base64,
+      imageName: file.name
+    });
+    
+    currentConversation.updatedAt = Date.now();
+    saveConversations();
+    renderMessages();
+    
+    // 隐藏欢迎界面
+    if (welcome) welcome.style.display = 'none';
+    
+    // 调用AI生成
+    await streamGenerateWithImage(base64, file.name);
+  };
+  reader.readAsDataURL(file);
+  
+  // 清空input以便再次选择同一文件
+  e.target.value = '';
+}
+
+// 处理文件上传
+async function handleFileUpload(e) {
+  const file = e.target.files[0];
+  if (!file) return;
+  
+  const reader = new FileReader();
+  reader.onload = async (event) => {
+    const content = event.target.result;
+    const fileName = file.name;
+    
+    // 添加用户消息
+    currentConversation.messages.push({
+      role: 'user',
+      content: `[文件: ${fileName}]\\n\\n${content.slice(0, 500)}${content.length > 500 ? '...' : ''}`
+    });
+    
+    currentConversation.updatedAt = Date.now();
+    saveConversations();
+    renderMessages();
+    
+    if (welcome) welcome.style.display = 'none';
+    
+    // 调用AI生成
+    await streamGenerateWithFile(content, fileName);
+  };
+  
+  // 根据文件类型读取
+  if (file.name.endsWith('.pdf') || file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
+    // PDF/Word文件暂时只显示文件名
+    showToast('PDF/Word文件暂不支持解析，请上传文本文件');
+    e.target.value = '';
+    return;
+  }
+  
+  reader.readAsText(file);
+  e.target.value = '';
+}
+
+// 带图片的流式生成
+async function streamGenerateWithImage(base64, imageName) {
+  isLoading = true;
+  sendBtn.disabled = true;
+  
+  const aiMessageIndex = currentConversation.messages.length;
+  currentConversation.messages.push({ role: 'assistant', content: '' });
+  renderMessages();
+  
+  const lastMessageEl = messagesDiv.lastElementChild;
+  const contentEl = lastMessageEl.querySelector('.message-content');
+  contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
+  
+  try {
+    // 构建多模态消息
+    const messages = currentConversation.messages.slice(0, aiMessageIndex).map(m => {
+      if (m.image) {
+        return {
+          role: m.role,
+          content: [
+            { type: 'image_url', image_url: { url: m.image } },
+            { type: 'text', text: '请分析这张图片' }
+          ]
+        };
+      }
+      return { role: m.role, content: m.content };
+    });
+    
+    const response = await fetch(CONFIG.apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${CONFIG.apiKey}`
+      },
+      body: JSON.stringify({
+        model: 'glm-4v-flash',  // 视觉模型
+        messages: messages,
+        max_tokens: CONFIG.maxTokens,
+        stream: true
+      })
+    });
+    
+    if (!response.ok) {
+      throw new Error(`API错误: ${response.status}`);
+    }
+    
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\\n');
+      buffer = lines.pop() || '';
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const jsonStr = line.slice(6).trim();
+          if (jsonStr === '[DONE]') continue;
+          
+          try {
+            const data = JSON.parse(jsonStr);
+            if (data.choices && data.choices[0]?.delta?.content) {
+              currentConversation.messages[aiMessageIndex].content += data.choices[0].delta.content;
+              contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
+              scrollToBottom();
+            }
+          } catch (err) {}
+        }
+      }
+    }
+    
+    contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+    
+  } catch (error) {
+    console.error('Error:', error);
+    currentConversation.messages[aiMessageIndex].content = `抱歉，图片分析失败：${error.message}`;
+    contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+  } finally {
+    isLoading = false;
+    sendBtn.disabled = false;
+    currentConversation.updatedAt = Date.now();
+    saveConversations();
+    renderMessages();
+  }
+}
+
+// 带文件的流式生成
+async function streamGenerateWithFile(content, fileName) {
+  isLoading = true;
+  sendBtn.disabled = true;
+  
+  const aiMessageIndex = currentConversation.messages.length;
+  currentConversation.messages.push({ role: 'assistant', content: '' });
+  renderMessages();
+  
+  const lastMessageEl = messagesDiv.lastElementChild;
+  const contentEl = lastMessageEl.querySelector('.message-content');
+  contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
+  
+  try {
+    const messages = currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
+      role: m.role,
+      content: m.content
+    }));
+    
+    // 添加文件内容作为系统提示
+    messages.unshift({
+      role: 'system',
+      content: `以下是用户上传的文件内容，请根据内容回答问题：\\n文件名：${fileName}\\n内容：\\n${content}`
+    });
+    
+    const response = await fetch(CONFIG.apiUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${CONFIG.apiKey}`
+      },
+      body: JSON.stringify({
+        model: CONFIG.model,
+        messages: messages,
+        max_tokens: CONFIG.maxTokens,
+        stream: true
+      })
+    });
+    
+    if (!response.ok) {
+      throw new Error(`API错误: ${response.status}`);
+    }
+    
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      
+      buffer += decoder.decode(value, { stream: true });
+      const lines = buffer.split('\\n');
+      buffer = lines.pop() || '';
+      
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const jsonStr = line.slice(6).trim();
+          if (jsonStr === '[DONE]') continue;
+          
+          try {
+            const data = JSON.parse(jsonStr);
+            if (data.choices && data.choices[0]?.delta?.content) {
+              currentConversation.messages[aiMessageIndex].content += data.choices[0].delta.content;
+              contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
+              scrollToBottom();
+            }
+          } catch (err) {}
+        }
+      }
+    }
+    
+    contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+    
+  } catch (error) {
+    console.error('Error:', error);
+    currentConversation.messages[aiMessageIndex].content = `抱歉，文件处理失败：${error.message}`;
+    contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+  } finally {
+    isLoading = false;
+    sendBtn.disabled = false;
+    currentConversation.updatedAt = Date.now();
+    saveConversations();
+    renderMessages();
+  }
+}
--- a/www/index.html
+++ b/www/index.html
@@ -8,12 +8,12 @@
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=2.0.4">
+  <link rel="stylesheet" href="style.css?v=2.1.0">
  <link rel="manifest" href="manifest.json">
 </head>
 <body>
  <div id="app"></div>
-  <script src="marked.min.js?v=2.0.4"></script>
-  <script src="app.js?v=2.0.4"></script>
+  <script src="marked.min.js?v=2.1.0"></script>
+  <script src="app.js?v=2.1.0"></script>
 </body>
 </html>
--- a/www/style.css
+++ b/www/style.css
@@ -500,6 +500,41 @@ body {
 .message-content h2 { font-size: 1.2em; }
 .message-content h3 { font-size: 1.1em; }

+/* 图片消息样式 */
+.message-image {
+  margin-bottom: 8px;
+}
+
+.message-image img {
+  max-width: 100%;
+  max-height: 300px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+
+.message-image img:hover {
+  transform: scale(1.02);
+}
+
+/* 图片预览遮罩 */
+.image-preview-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.9);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.image-preview-overlay img {
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 8px;
+}
+
 .message-content ul, .message-content ol {
  margin: 8px 0;
  padding-left: 20px;
@@ -558,6 +593,85 @@ body {
  bottom: 0;
 }

+/* 上传按钮 */
+.attach-btn {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid var(--border-color);
+  color: var(--text-light);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.attach-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.attach-btn:active {
+  transform: scale(0.95);
+}
+
+/* 上传选项面板 */
+.attach-panel {
+  position: fixed;
+  bottom: 70px;
+  left: 16px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+  padding: 16px;
+  display: none;
+  z-index: 200;
+}
+
+.attach-panel.show {
+  display: block;
+  animation: slideUp 0.2s ease;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.attach-panel-content {
+  display: flex;
+  gap: 16px;
+}
+
+.attach-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: rgba(102, 126, 234, 0.05);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.attach-item:hover {
+  background: rgba(102, 126, 234, 0.15);
+}
+
+.attach-icon {
+  font-size: 28px;
+}
+
+.attach-label {
+  font-size: 12px;
+  color: var(--text-color);
+}
+
 #userInput {
  flex: 1;
  padding: 12px 16px;