fix: 恢复对话页面头部样式 - 紫色渐变背景 + 搜索按钮 + 新建对话按钮

www/app.js

@@ -198,11 +198,16 @@ function bindPageEvents() {
 function renderChatsPage() {
   return `
     <div class="chats-page">
-      <header class="page-header">
+      <header class="chats-header">
         <h1>对话</h1>
-        <button class="header-btn new-chat-btn" 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 class="chats-header-actions">
+          <button class="chats-header-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="chats-header-btn" 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="chats-content">
@@ -219,6 +224,18 @@ function renderChatsPage() {
           }
         </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>
   `;
 }
@@ -229,6 +246,70 @@ function bindChatsPageEvents() {
     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', () => {
+      hideSearchBarInChats();
+    });
+  }
+  
+  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') {
+        hideSearchBarInChats();
+      }
+    });
+  }
+  
+  if (searchResults) {
+    searchResults.addEventListener('click', (e) => {
+      const item = e.target.closest('.search-result-item');
+      if (item) {
+        const id = item.getAttribute('data-id');
+        hideSearchBarInChats();
+        openConversation(id);
+      }
+    });
+  }
+  
+  function hideSearchBarInChats() {
+    if (searchBar) {
+      searchBar.classList.remove('show');
+    }
+    if (searchInput) {
+      searchInput.value = '';
+    }
+    if (searchResults) {
+      searchResults.innerHTML = '';
+    }
+  }
+  
   const conversationList = document.getElementById('conversationList');
   if (conversationList) {
     conversationList.addEventListener('click', (e) => {

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

www/style.css

@@ -108,29 +108,56 @@ body {
   height: 100%;
 }
 
+.chats-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.chats-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chats-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chats-header-btn {
+  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);
+}
+
+.chats-header-btn:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 16px rgba(102,126,234,0.4);
+  color: #5a67d8;
+}
+
+.chats-header-btn:active {
+  transform: scale(0.95);
+}
+
 .chats-content {
   flex: 1;
   padding: 16px;
   overflow-y: auto;
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: var(--primary);
-  border: none;
-  border-radius: 10px;
-  color: white;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.new-chat-btn:hover {
-  background: #5a67d8;
-  transform: scale(1.05);
+  background: #f5f5f5;
 }
 
 /* ==================== 智能体页面 ==================== */