feat: 添加对话搜索功能 - 支持搜索标题和内容

This commit is contained in:
2026-04-26 17:43:01 +08:00
parent 2e5fcca49e
commit c8909595e4
3 changed files with 281 additions and 3 deletions

View File

@@ -115,6 +115,36 @@ 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 class="list-footer">
<button class="footer-btn search-toggle-btn" id="searchToggleBtn">
<svg viewBox="0 0 24 24" width="18" height="18"><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>
`;
<span id="pinText">置顶</span>
</div>
<div class="action-menu-item delete-action" data-action="delete">
<svg viewBox="0 0 24 24" width="18" height="18"><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>
<span>删除</span>
</div>
</div>
</div>
</div>
`;
@@ -126,6 +156,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 +319,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');