feat: 添加对话搜索功能 - 支持搜索标题和内容
This commit is contained in:
141
www/app.js
141
www/app.js
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user