fix: 修正思考模型名称为glm-z1-flash

- 对话列表：新建按钮、对话项、删除按钮使用事件委托
- 对话页面：返回、清空、发送按钮使用 addEventListener
- 快捷语句按钮使用事件监听
- 消息操作按钮（复制、重新生成、删除）使用事件监听
- 修复动态生成 HTML 后 onclick 无法正确绑定的作用域问题

www/app.js

@@ -5,6 +5,7 @@ const CONFIG = {
   apiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
   apiKey: '2259e33a1357460abe17919aaf81e73d.K44a8LPQTmFM5PKm',
   model: 'glm-4.5-air',
+  thinkingModel: 'glm-z1-flash',  // 智谱思考模型
   maxTokens: 2048
 };
 
@@ -13,16 +14,25 @@ let conversations = [];  // 对话列表
 let currentConversation = null;  // 当前对话
 let isLoading = false;
 
-// DOM 元素
-const appContainer = document.getElementById('app');
-const messagesContainer = document.getElementById('messagesContainer');
-const messagesDiv = document.getElementById('messages');
-const userInput = document.getElementById('userInput');
-const sendBtn = document.getElementById('sendBtn');
-const welcome = document.getElementById('welcome');
+// 功能开关
+let enableThinking = false;  // 深度思考
+let enableSearch = false;    // 联网搜索
+
+// DOM 元素（初始为 null，在 openConversation 时重新获取）
+let appContainer = null;
+let messagesContainer = null;
+let messagesDiv = null;
+let userInput = null;
+let sendBtn = null;
+let welcome = null;
+let thinkingBtn = null;
+let searchBtn = null;
 
 // 初始化
 document.addEventListener('DOMContentLoaded', () => {
+  // 初始化 appContainer
+  appContainer = document.getElementById('app');
+  
   // 从本地存储加载对话列表
   const saved = localStorage.getItem('conversations');
   if (saved) {
@@ -65,22 +75,20 @@ function showConversationList() {
           <span class="logo">🤖</span>
           <h1>AI助手</h1>
         </div>
+        <button class="new-chat-btn-header" id="newChatBtn" title="新建对话">
+          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+        </button>
       </header>
       
       <div class="list-content">
-        <button class="new-chat-btn" onclick="createNewConversation()">
-          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-          新建对话
-        </button>
-        
-        <div class="conversation-list">
+        <div class="conversation-list" id="conversationList">
           ${conversations.length === 0 
             ? '<div class="empty-list">暂无对话记录</div>'
             : conversations.map(conv => `
-              <div class="conversation-item" onclick="openConversation('${conv.id}')">
+              <div class="conversation-item" data-id="${conv.id}">
                 <div class="conv-title">${escapeHtml(conv.title)}</div>
                 <div class="conv-meta">${conv.messages.length} 条消息 · ${formatTime(conv.updatedAt)}</div>
-                <button class="conv-delete-btn" onclick="event.stopPropagation(); deleteConversation('${conv.id}')" title="删除对话">
+                <button class="conv-delete-btn" data-id="${conv.id}" title="删除对话">
                   <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
                 </button>
               </div>
@@ -92,6 +100,29 @@ function showConversationList() {
   `;
   
   appContainer.innerHTML = listHtml;
+  
+  // 绑定事件
+  const newChatBtn = document.getElementById('newChatBtn');
+  if (newChatBtn) {
+    newChatBtn.addEventListener('click', createNewConversation);
+  }
+  
+  const conversationList = document.getElementById('conversationList');
+  if (conversationList) {
+    conversationList.addEventListener('click', (e) => {
+      const item = e.target.closest('.conversation-item');
+      const deleteBtn = e.target.closest('.conv-delete-btn');
+      
+      if (deleteBtn) {
+        e.stopPropagation();
+        const id = deleteBtn.getAttribute('data-id');
+        deleteConversation(id);
+      } else if (item) {
+        const id = item.getAttribute('data-id');
+        openConversation(id);
+      }
+    });
+  }
 }
 
 // 创建新对话
@@ -121,14 +152,14 @@ function openConversation(id) {
   const chatHtml = `
     <div id="chatPage">
       <header class="header">
-        <button class="back-btn" onclick="showConversationList()">
+        <button class="back-btn" id="backBtn">
           <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
         </button>
         <div class="header-title">
           <span class="logo">🤖</span>
           <h1>${escapeHtml(currentConversation.title)}</h1>
         </div>
-        <button class="clear-btn" onclick="clearCurrentChat()" title="清空对话">
+        <button class="clear-btn" id="clearBtn" title="清空对话">
           <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
         </button>
       </header>
@@ -147,18 +178,47 @@ function openConversation(id) {
         <div class="messages" id="messages"></div>
       </div>
 
+      <!-- 功能开关栏 -->
+      <div class="feature-bar">
+        <button class="feature-btn thinking-btn ${enableThinking ? 'active' : ''}" id="thinkingBtn">
+          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+          <span>深度思考</span>
+        </button>
+        <button class="feature-btn search-btn ${enableSearch ? 'active' : ''}" id="searchBtn">
+          <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+          <span>联网搜索</span>
+        </button>
+      </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="输入消息..." 
           rows="1"
-          onkeydown="handleKeyDown(event)"
-          oninput="autoResize(this)"
         ></textarea>
-        <button class="send-btn" onclick="sendMessage()" id="sendBtn">
+        <button class="send-btn" id="sendBtn">
           <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>
   `;
   
@@ -170,10 +230,85 @@ function openConversation(id) {
   userInput = document.getElementById('userInput');
   sendBtn = document.getElementById('sendBtn');
   welcome = document.getElementById('welcome');
+  thinkingBtn = document.getElementById('thinkingBtn');
+  searchBtn = document.getElementById('searchBtn');
   
-  // 渲染消息
-  renderMessages();
-  userInput.focus();
+  // 绑定按钮事件
+  const backBtn = document.getElementById('backBtn');
+  if (backBtn) backBtn.addEventListener('click', showConversationList);
+  
+  const clearBtn = document.getElementById('clearBtn');
+  if (clearBtn) clearBtn.addEventListener('click', clearCurrentChat);
+  
+  // 绑定功能开关按钮事件
+  if (thinkingBtn) {
+    thinkingBtn.addEventListener('click', () => {
+      enableThinking = !enableThinking;
+      thinkingBtn.classList.toggle('active', enableThinking);
+      // 如果开启深度思考，关闭联网搜索（智谱思考模型不支持联网）
+      if (enableThinking && enableSearch) {
+        enableSearch = false;
+        searchBtn.classList.remove('active');
+      }
+    });
+  }
+  
+  if (searchBtn) {
+    searchBtn.addEventListener('click', () => {
+      enableSearch = !enableSearch;
+      searchBtn.classList.toggle('active', enableSearch);
+      // 如果开启联网搜索，关闭深度思考
+      if (enableSearch && enableThinking) {
+        enableThinking = false;
+        thinkingBtn.classList.remove('active');
+      }
+    });
+  }
+  
+  // 绑定输入事件
+  userInput.addEventListener('keydown', handleKeyDown);
+  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', (e) => {
+      e.stopPropagation();  // 阻止冒泡到 document
+      attachPanel.classList.toggle('show');
+    });
+  }
+  
+  // 点击其他地方关闭面板
+  document.addEventListener('click', (e) => {
+    if (attachPanel && attachPanel.classList.contains('show') && 
+        !attachPanel.contains(e.target) && !attachBtn.contains(e.target)) {
+      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 => {
@@ -183,6 +318,10 @@ function openConversation(id) {
       sendMessage();
     });
   });
+  
+  // 渲染消息
+  renderMessages();
+  userInput.focus();
 }
 
 // 删除对话
@@ -256,14 +395,24 @@ async function streamGenerate(userMsgIndex) {
   sendBtn.disabled = true;
 
   const aiMessageIndex = currentConversation.messages.length;
-  currentConversation.messages.push({ role: 'assistant', content: '' });
+  currentConversation.messages.push({ 
+    role: 'assistant', 
+    content: '',
+    thinking: ''  // 思考内容
+  });
   renderMessages();
   
   const lastMessageEl = messagesDiv.lastElementChild;
   const contentEl = lastMessageEl.querySelector('.message-content');
+  const thinkingEl = lastMessageEl.querySelector('.thinking-content');
+  
   contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
+  if (thinkingEl) thinkingEl.innerHTML = '<span class="streaming-cursor">▌</span>';
 
   try {
+    // 根据开关选择模型
+    const model = enableThinking ? CONFIG.thinkingModel : CONFIG.model;
+    
     const response = await fetch(CONFIG.apiUrl, {
       method: 'POST',
       headers: {
@@ -271,7 +420,7 @@ async function streamGenerate(userMsgIndex) {
         'Authorization': `Bearer ${CONFIG.apiKey}`
       },
       body: JSON.stringify({
-        model: CONFIG.model,
+        model: model,
         messages: currentConversation.messages.slice(0, aiMessageIndex).map(m => ({
           role: m.role,
           content: m.content
@@ -288,6 +437,7 @@ async function streamGenerate(userMsgIndex) {
     const reader = response.body.getReader();
     const decoder = new TextDecoder();
     let buffer = '';
+    let thinkingComplete = false;  // 思考是否完成
 
     while (true) {
       const { done, value } = await reader.read();
@@ -304,16 +454,47 @@ async function streamGenerate(userMsgIndex) {
           
           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();
+            const delta = data.choices?.[0]?.delta;
+            
+            if (delta) {
+              // 处理思考内容
+              if (delta.reasoning_content || delta.thinking) {
+                const thinkingChunk = delta.reasoning_content || delta.thinking;
+                currentConversation.messages[aiMessageIndex].thinking += thinkingChunk;
+                if (thinkingEl) {
+                  thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking) + '<span class="streaming-cursor">▌</span>';
+                  // 思考时展开
+                  const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
+                  if (thinkingBlock) thinkingBlock.classList.add('expanded');
+                }
+                scrollToBottom();
+              }
+              
+              // 处理正式回复内容
+              if (delta.content) {
+                // 如果开始输出正式内容，说明思考完成
+                if (currentConversation.messages[aiMessageIndex].thinking && !thinkingComplete) {
+                  thinkingComplete = true;
+                  // 折叠思考内容
+                  const thinkingBlock = lastMessageEl.querySelector('.thinking-block');
+                  if (thinkingBlock) thinkingBlock.classList.remove('expanded');
+                  if (thinkingEl) thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
+                }
+                
+                currentConversation.messages[aiMessageIndex].content += delta.content;
+                contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content) + '<span class="streaming-cursor">▌</span>';
+                scrollToBottom();
+              }
             }
           } catch (e) {}
         }
       }
     }
 
+    // 最终渲染
+    if (thinkingEl && currentConversation.messages[aiMessageIndex].thinking) {
+      thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
+    }
     contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
 
   } catch (error) {
@@ -376,21 +557,38 @@ function deleteMessage(index) {
 function copyMessage(index) {
   if (!currentConversation) return;
   
-  const content = currentConversation.messages[index].content;
+  const msg = currentConversation.messages[index];
+  // 如果是图片消息，复制图片描述或提示
+  let content = msg.content;
+  if (msg.image && content === '[图片]') {
+    content = '[图片: ' + (msg.imageName || '未命名') + ']';
+  }
   
-  navigator.clipboard.writeText(content).then(() => {
-    showToast('已复制到剪贴板');
-  }).catch(err => {
+  // HTTP 环境下 navigator.clipboard 不工作，优先使用 fallback
+  try {
     const textarea = document.createElement('textarea');
     textarea.value = content;
     textarea.style.position = 'fixed';
+    textarea.style.top = '0';
+    textarea.style.left = '0';
     textarea.style.opacity = '0';
+    textarea.style.pointerEvents = 'none';
     document.body.appendChild(textarea);
+    textarea.focus();
     textarea.select();
-    document.execCommand('copy');
+    
+    const success = document.execCommand('copy');
     document.body.removeChild(textarea);
-    showToast('已复制到剪贴板');
-  });
+    
+    if (success) {
+      showToast('已复制到剪贴板');
+    } else {
+      showToast('复制失败，请手动复制');
+    }
+  } catch (err) {
+    console.error('复制失败:', err);
+    showToast('复制失败，请手动复制');
+  }
 }
 
 // 清空当前对话
@@ -410,26 +608,56 @@ function clearCurrentChat() {
 function renderMessages() {
   if (!currentConversation) return;
   
+  // 根据消息数量显示/隐藏欢迎界面
+  if (welcome) {
+    welcome.style.display = currentConversation.messages.length > 0 ? 'none' : 'block';
+  }
+  
   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);
+    }
+    
+    // 思考内容块（仅AI消息）
+    let thinkingHtml = '';
+    if (!isUser && msg.thinking) {
+      thinkingHtml = `
+        <div class="thinking-block" onclick="toggleThinking(this)">
+          <div class="thinking-header">
+            <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+            <span>思考过程</span>
+            <svg class="thinking-arrow" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg>
+          </div>
+          <div class="thinking-content">${renderMarkdown(msg.thinking)}</div>
+        </div>`;
+    }
     
     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>`;
     
     const actions = isUser 
       ? `<div class="message-actions">
-          <button class="action-btn copy-btn" onclick="copyMessage(${index})" title="复制">${copyIcon}</button>
-          <button class="action-btn delete-btn" onclick="deleteMessage(${index})" title="删除">
+          <button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
+          <button class="action-btn delete-btn" data-index="${index}" title="删除">
             <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
           </button>
         </div>`
       : `<div class="message-actions">
-          <button class="action-btn copy-btn" onclick="copyMessage(${index})" title="复制">${copyIcon}</button>
-          <button class="action-btn regenerate-btn" onclick="regenerate(${index})" title="重新生成">
+          <button class="action-btn copy-btn" data-index="${index}" title="复制">${copyIcon}</button>
+          <button class="action-btn regenerate-btn" data-index="${index}" title="重新生成">
             <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
           </button>
-          <button class="action-btn delete-btn" onclick="deleteMessage(${index})" title="删除">
+          <button class="action-btn delete-btn" data-index="${index}" title="删除">
             <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
           </button>
         </div>`;
@@ -438,16 +666,33 @@ 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>
+          ${thinkingHtml}
+          <div class="message-content">${contentHtml}</div>
           ${actions}
         </div>
       </div>
     `;
   }).join('');
 
+  // 绑定消息操作按钮事件（事件委托）
+  messagesDiv.querySelectorAll('.copy-btn').forEach(btn => {
+    btn.addEventListener('click', () => copyMessage(parseInt(btn.dataset.index)));
+  });
+  messagesDiv.querySelectorAll('.regenerate-btn').forEach(btn => {
+    btn.addEventListener('click', () => regenerate(parseInt(btn.dataset.index)));
+  });
+  messagesDiv.querySelectorAll('.delete-btn').forEach(btn => {
+    btn.addEventListener('click', () => deleteMessage(parseInt(btn.dataset.index)));
+  });
+
   scrollToBottom();
 }
 
+// 折叠/展开思考内容
+function toggleThinking(block) {
+  block.classList.toggle('expanded');
+}
+
 // ==================== 工具函数 ====================
 
 // 渲染 Markdown
@@ -512,4 +757,255 @@ function formatTime(timestamp) {
 // PWA 注册
 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();
+  }
 }

www/index.html

@@ -4,13 +4,16 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta name="theme-color" content="#667eea">
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
   <title>AI助手</title>
-  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="style.css?v=2.2.1">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js"></script>
-  <script src="app.js"></script>
+  <script src="marked.min.js?v=2.2.1"></script>
+  <script src="app.js?v=2.2.1"></script>
 </body>
 </html>

www/style.css

@@ -72,6 +72,53 @@ body {
   overflow-y: auto;
 }
 
+/* Header 中的新建对话按钮 - 美化版 */
+.new-chat-btn-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: rgba(255,255,255,0.95);
+  border: none;
+  border-radius: 50%;
+  color: var(--primary);
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
+  position: relative;
+  overflow: hidden;
+}
+
+.new-chat-btn-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 100%);
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+.new-chat-btn-header:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 16px rgba(102,126,234,0.4), 0 2px 8px rgba(0,0,0,0.2);
+  color: #5a67d8;
+}
+
+.new-chat-btn-header:hover::before {
+  opacity: 1;
+}
+
+.new-chat-btn-header:active {
+  transform: scale(0.95);
+  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+
+.new-chat-btn-header svg {
+  filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3));
+}
+
+/* 原样式保留（备用） */
 .new-chat-btn {
   display: flex;
   align-items: center;
@@ -453,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;
@@ -500,6 +582,102 @@ body {
   font-weight: 600;
 }
 
+/* 功能开关栏 */
+.feature-bar {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(255,255,255,0.95);
+  border-top: 1px solid var(--border-color);
+}
+
+.feature-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--text-light);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.feature-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.feature-btn.active {
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  border-color: transparent;
+  color: white;
+}
+
+.feature-btn svg {
+  flex-shrink: 0;
+}
+
+/* 思考内容块 */
+.thinking-block {
+  margin-bottom: 12px;
+  background: rgba(102, 126, 234, 0.08);
+  border: 1px solid rgba(102, 126, 234, 0.2);
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.thinking-block:hover {
+  border-color: rgba(102, 126, 234, 0.4);
+}
+
+.thinking-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: rgba(102, 126, 234, 0.12);
+  font-size: 13px;
+  color: var(--primary);
+  font-weight: 500;
+}
+
+.thinking-header svg:first-child {
+  color: var(--primary);
+}
+
+.thinking-arrow {
+  margin-left: auto;
+  transition: transform 0.2s;
+}
+
+.thinking-block.expanded .thinking-arrow {
+  transform: rotate(180deg);
+}
+
+.thinking-content {
+  padding: 0 12px;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease;
+  color: var(--text-light);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.thinking-block.expanded .thinking-content {
+  padding: 12px;
+  max-height: 500px;
+}
+
+.thinking-content p {
+  margin: 8px 0;
+}
+
 /* 输入区域 */
 .input-area {
   display: flex;
@@ -511,6 +689,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;