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 `
-
+

对话

- +
+ + +
@@ -219,6 +224,18 @@ function renderChatsPage() { }
+ + + `; } @@ -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; } /* ==================== 智能体页面 ==================== */