feat: AI生成回复时显示停止生成按钮

www/app.js

@@ -74,9 +74,14 @@ function showConversationList() {
           <span class="logo">🤖</span>
           <h1>AI助手</h1>
         </div>
-        <button class="new-chat-btn-header" id="newChatBtn" title="新建对话">
+        <div class="header-actions">
+          <button class="header-btn search-toggle-btn" id="searchToggleBtn" title="搜索">
+            <svg viewBox="0 0 24 24" width="20" height="20"><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>
+          </button>
+          <button class="header-btn 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>
+        </div>
       </header>
       
       <div class="list-content">
@@ -115,6 +120,20 @@ function showConversationList() {
           </div>
         </div>
       </div>
+      
+      <!-- 搜索栏 -->
+      <div class="search-bar" id="searchBar">
+        <div class="search-input-wrapper">
+          <svg viewBox="0 0 24 24" width="20" height="20"><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>
+          <input type="text" id="searchInput" placeholder="搜索对话标题或内容...">
+          <button class="search-close-btn" id="searchCloseBtn">
+            <svg viewBox="0 0 24 24" width="18" height="18"><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>
+        </div>
+        <div class="search-results" id="searchResults"></div>
+      </div>
+      
+      </div>
     </div>
   `;
   
@@ -126,6 +145,71 @@ function showConversationList() {
     newChatBtn.addEventListener('click', createNewConversation);
   }
   
+  // 搜索功能
+  const searchToggleBtn = document.getElementById('searchToggleBtn');
+  const searchBar = document.getElementById('searchBar');
+  const searchInput = document.getElementById('searchInput');
+  const searchCloseBtn = document.getElementById('searchCloseBtn');
+  const searchResults = document.getElementById('searchResults');
+  
+  if (searchToggleBtn) {
+    searchToggleBtn.addEventListener('click', () => {
+      if (searchBar) {
+        searchBar.classList.add('show');
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    });
+  }
+  
+  if (searchCloseBtn) {
+    searchCloseBtn.addEventListener('click', () => {
+      hideSearchBar();
+    });
+  }
+  
+  if (searchInput) {
+    searchInput.addEventListener('input', (e) => {
+      const keyword = e.target.value.trim();
+      if (keyword) {
+        searchConversations(keyword);
+      } else {
+        if (searchResults) searchResults.innerHTML = '';
+      }
+    });
+    
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        hideSearchBar();
+      }
+    });
+  }
+  
+  // 点击搜索结果
+  if (searchResults) {
+    searchResults.addEventListener('click', (e) => {
+      const item = e.target.closest('.search-result-item');
+      if (item) {
+        const id = item.getAttribute('data-id');
+        hideSearchBar();
+        openConversation(id);
+      }
+    });
+  }
+  
+  function hideSearchBar() {
+    if (searchBar) {
+      searchBar.classList.remove('show');
+    }
+    if (searchInput) {
+      searchInput.value = '';
+    }
+    if (searchResults) {
+      searchResults.innerHTML = '';
+    }
+  }
+  
   const conversationList = document.getElementById('conversationList');
   const actionMenu = document.getElementById('actionMenu');
   let longPressTimer = null;
@@ -224,6 +308,52 @@ function sortConversations() {
   });
 }
 
+// 搜索对话
+function searchConversations(keyword) {
+  const searchResults = document.getElementById('searchResults');
+  if (!searchResults) return;
+  
+  keyword = keyword.toLowerCase();
+  
+  // 搜索标题和消息内容
+  const results = conversations.filter(conv => {
+    // 搜索标题
+    if (conv.title.toLowerCase().includes(keyword)) return true;
+    
+    // 搜索消息内容
+    if (conv.messages.some(m => m.content.toLowerCase().includes(keyword))) return true;
+    
+    return false;
+  });
+  
+  if (results.length === 0) {
+    searchResults.innerHTML = '<div class="search-empty">未找到相关对话</div>';
+    return;
+  }
+  
+  searchResults.innerHTML = results.map(conv => {
+    // 找到匹配的消息片段
+    let matchSnippet = '';
+    const matchedMsg = conv.messages.find(m => m.content.toLowerCase().includes(keyword));
+    if (matchedMsg) {
+      const content = matchedMsg.content;
+      const idx = content.toLowerCase().indexOf(keyword);
+      const start = Math.max(0, idx - 30);
+      const end = Math.min(content.length, idx + keyword.length + 30);
+      matchSnippet = (start > 0 ? '...' : '') + content.slice(start, end) + (end < content.length ? '...' : '');
+    }
+    
+    return `
+      <div class="search-result-item ${conv.is_pinned ? 'pinned' : ''}" data-id="${conv.id}">
+        ${conv.is_pinned ? '<span class="pin-icon">📌</span>' : ''}
+        <div class="search-result-title">${escapeHtml(conv.title)}</div>
+        ${matchSnippet ? `<div class="search-result-snippet">${escapeHtml(matchSnippet)}</div>` : ''}
+        <div class="search-result-meta">${conv.messages.length} 条消息 · ${formatTime(conv.updatedAt)}</div>
+      </div>
+    `;
+  }).join('');
+}
+
 // 显示操作菜单
 function showActionMenu(convId) {
   const actionMenu = document.getElementById('actionMenu');
@@ -652,6 +782,9 @@ async function streamGenerate(userMsgIndex) {
   
   contentEl.innerHTML = '<span class="streaming-cursor">▌</span>';
   
+  // 显示停止生成按钮
+  showStopGenerateBtn();
+
   try {
     // 构建请求体 - 统一使用 glm-4.5-air，通过 thinking 参数控制
     const requestBody = {
@@ -684,8 +817,30 @@ async function streamGenerate(userMsgIndex) {
     const decoder = new TextDecoder();
     let buffer = '';
     let thinkingOutputStarted = false;  // 正式内容是否开始输出
+    let abortController = new AbortController();  // 用于中断流
+    
+    // 绑定停止按钮事件
+    const stopBtn = document.getElementById('stopGenerateBtn');
+    if (stopBtn) {
+      stopBtn.onclick = () => {
+        abortController.abort();
+        isLoading = false;
+        sendBtn.disabled = false;
+        hideStopGenerateBtn();
+        // 更新最终内容
+        if (thinkingEl && enableThinking && currentConversation.messages[aiMessageIndex].thinking) {
+          thinkingEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].thinking);
+        }
+        contentEl.innerHTML = renderMarkdown(currentConversation.messages[aiMessageIndex].content);
+        currentConversation.updatedAt = Date.now();
+        saveConversations();
+        renderMessages();
+      };
+    }
 
     while (true) {
+      if (abortController.signal.aborted) break;  // 检查是否已停止
+      
       const { done, value } = await reader.read();
       if (done) break;
 
@@ -747,6 +902,7 @@ async function streamGenerate(userMsgIndex) {
   } finally {
     isLoading = false;
     sendBtn.disabled = false;
+    hideStopGenerateBtn();
     currentConversation.updatedAt = Date.now();
     saveConversations();
     renderMessages();
@@ -759,6 +915,33 @@ async function streamGenerate(userMsgIndex) {
   }
 }
 
+// 显示停止生成按钮
+function showStopGenerateBtn() {
+  // 检查是否已存在
+  if (document.getElementById('stopGenerateBtn')) return;
+  
+  const stopBtn = document.createElement('button');
+  stopBtn.id = 'stopGenerateBtn';
+  stopBtn.className = 'stop-generate-btn';
+  stopBtn.innerHTML = `
+    <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M6 6h12v12H6z"/></svg>
+    <span>停止生成</span>
+  `;
+  
+  // 插入到消息容器底部
+  if (messagesContainer) {
+    messagesContainer.appendChild(stopBtn);
+  }
+}
+
+// 隐藏停止生成按钮
+function hideStopGenerateBtn() {
+  const stopBtn = document.getElementById('stopGenerateBtn');
+  if (stopBtn) {
+    stopBtn.remove();
+  }
+}
+
 // 生成对话标题
 async function generateConversationTitle() {
   if (!currentConversation) return;

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.4.0">
+  <link rel="stylesheet" href="style.css?v=2.6.0">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=2.4.0"></script>
+  <script src="marked.min.js?v=2.6.0"></script>
-  <script src="app.js?v=2.4.0"></script>
+  <script src="app.js?v=2.6.0"></script>
 </body>
 </html>

www/style.css

@@ -66,14 +66,13 @@ body {
   font-weight: 600;
 }
 
-.list-content {
+.header-actions {
-  flex: 1;
+  display: flex;
-  padding: 16px;
+  align-items: center;
-  overflow-y: auto;
+  gap: 8px;
 }
 
-/* Header 中的新建对话按钮 - 美化版 */
+.header-btn {
-.new-chat-btn-header {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -90,7 +89,7 @@ body {
   overflow: hidden;
 }
 
-.new-chat-btn-header::before {
+.header-btn::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -99,25 +98,31 @@ body {
   transition: opacity 0.25s;
 }
 
-.new-chat-btn-header:hover {
+.header-btn: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 {
+.header-btn:hover::before {
   opacity: 1;
 }
 
-.new-chat-btn-header:active {
+.header-btn:active {
   transform: scale(0.95);
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 }
 
-.new-chat-btn-header svg {
+.header-btn svg {
   filter: drop-shadow(0 1px 2px rgba(102,126,234,0.3));
 }
 
+.list-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
 /* 原样式保留（备用） */
 .new-chat-btn {
   display: flex;
@@ -261,6 +266,143 @@ body {
   background: rgba(229, 62, 62, 0.1);
 }
 
+/* 搜索栏 */
+.search-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+  display: none;
+  z-index: 1100;
+}
+
+.search-bar.show {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: white;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.search-input-wrapper svg {
+  color: var(--text-light);
+}
+
+.search-input-wrapper input {
+  flex: 1;
+  font-size: 16px;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.search-close-btn {
+  padding: 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-light);
+  cursor: pointer;
+}
+
+.search-close-btn:hover {
+  color: var(--text-color);
+}
+
+.search-results {
+  flex: 1;
+  background: white;
+  overflow-y: auto;
+  padding: 8px 16px;
+}
+
+.search-empty {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-light);
+}
+
+.search-result-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 16px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.search-result-item:hover {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.05);
+}
+
+.search-result-item.pinned {
+  border-color: var(--primary);
+  background: rgba(102, 126, 234, 0.08);
+}
+
+.search-result-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.search-result-snippet {
+  font-size: 14px;
+  color: var(--text-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result-meta {
+  font-size: 12px;
+  color: var(--text-light);
+}
+
+/* 底部工具栏 */
+.list-footer {
+  display: flex;
+  justify-content: center;
+  padding: 12px 16px;
+  background: white;
+  border-top: 1px solid var(--border-color);
+}
+
+.footer-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: white;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  font-size: 14px;
+  color: var(--text-light);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.footer-btn:hover {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.footer-btn:active {
+  background: rgba(102, 126, 234, 0.1);
+}
+
 /* ==================== 对话页面 ==================== */
 
 #chatPage {
@@ -914,3 +1056,35 @@ body {
     padding-bottom: calc(12px + env(safe-area-inset-bottom));
   }
 }
+
+/* 停止生成按钮 */
+.stop-generate-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 24px;
+  margin: 16px auto;
+  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
+  color: white;
+  border: none;
+  border-radius: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.3);
+}
+
+.stop-generate-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 16px rgba(229, 62, 62, 0.4);
+}
+
+.stop-generate-btn:active {
+  transform: scale(0.98);
+}
+
+.stop-generate-btn svg {
+  flex-shrink: 0;
+}