From 484bdf07fe087a91576fa6661f2be73c2bbeda8b Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Sun, 26 Apr 2026 23:06:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E5=AF=B9=E8=AF=9D?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=A4=B4=E9=83=A8=E6=A0=B7=E5=BC=8F=20-=20?= =?UTF-8?q?=E7=B4=AB=E8=89=B2=E6=B8=90=E5=8F=98=E8=83=8C=E6=99=AF=20+=20?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=8C=89=E9=92=AE=20+=20=E6=96=B0=E5=BB=BA?= =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- www/app.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++--- www/index.html | 6 ++-- www/style.css | 65 +++++++++++++++++++++++++----------- 3 files changed, 134 insertions(+), 26 deletions(-) diff --git a/www/app.js b/www/app.js index 06d990c..39216eb 100644 --- a/www/app.js +++ b/www/app.js @@ -198,11 +198,16 @@ function bindPageEvents() { function renderChatsPage() { return `
-
+ + + `; } @@ -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) => { diff --git a/www/index.html b/www/index.html index 3a36bac..109a581 100644 --- a/www/index.html +++ b/www/index.html @@ -8,12 +8,12 @@ AI助手 - +
- - + + \ No newline at end of file diff --git a/www/style.css b/www/style.css index 7d3643e..0718790 100644 --- a/www/style.css +++ b/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; } /* ==================== 智能体页面 ==================== */