coder/article-writer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加网络搜索功能（Tavily Search）

Browse Source 
- 后端：新增 search_config 表存储搜索接口配置
- 后端：实现 /api/search 和 /api/search/detail API
- 前端：首页添加搜索配置入口（模态框）
- 前端：主题详情页添加搜索面板（搜索框+结果列表+详情查看）
- 搜索结果可一键添加为素材
- 支持搜索深度和时间范围筛选
- 更新 README 文档
This commit is contained in:
hubian
2026-05-23 23:22:30 +08:00
parent 8899b21aea
commit 6bf20062d2
4 changed files with 477 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
templates/topic.html
View File

@@ -108,6 +108,27 @@
.core-idea-edit-bar .edit-row { display: flex; gap: 6px; align-items: flex-end; }
.core-idea-edit-bar textarea { flex: 1; }
.core-idea-edit-bar .btn-group { display: flex; gap: 4px; flex-shrink: 0; }
/* 搜索面板样式 */
.search-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
.search-panel .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 12px 16px; }
.search-panel .card-body { padding: 16px; }
.search-bar { display: flex; gap: 6px; }
.search-bar input { flex: 1; }
.search-bar select { width: auto; min-width: 100px; }
.search-result-item { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; transition: all 0.15s; }
.search-result-item:hover { border-color: var(--accent); }
.search-result-item .result-title { color: var(--accent); font-weight: 600; font-size: 0.92rem; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.search-result-item .result-title:hover { text-decoration: underline; }
.search-result-item .result-url { color: var(--text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.search-result-item .result-snippet { color: var(--text); font-size: 0.85rem; line-height: 1.5; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.search-result-item .result-score { color: var(--text-muted); font-size: 0.72rem; margin-top: 4px; }
.search-result-item .result-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.search-result-item .result-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.search-result-item .result-detail.show { display: block; }
.search-result-item .result-detail-content { font-size: 0.85rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--text); max-height: 400px; overflow-y: auto; }
.search-loading { text-align: center; padding: 20px; color: var(--text-muted); }
.search-empty { text-align: center; padding: 20px; color: var(--text-muted); }
</style>
</head>
<body>
@@ -197,6 +218,41 @@
</div>
</div>
<!-- 搜索面板 -->
<div class="search-panel mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<span class="section-title mb-0"><i class="bi bi-search text-accent"></i>网络搜索</span>
<button class="btn btn-sm btn-link text-muted p-0" onclick="toggleSearchPanel()" title="折叠/展开">
<i class="bi bi-chevron-down" id="searchPanelToggle"></i>
</button>
</div>
<div class="card-body" id="searchPanelBody">
<div class="search-bar mb-3">
<input type="text" class="form-control form-control-sm" id="searchQuery" placeholder="输入关键词搜索相关资料..." onkeydown="if(event.key==='Enter'){event.preventDefault();doSearch();}">
<select class="form-select form-select-sm" id="searchDepth" style="width:auto;min-width:90px;">
<option value="basic">基础</option>
<option value="advanced">深度</option>
</select>
<select class="form-select form-select-sm" id="searchTimeRange" style="width:auto;min-width:90px;">
<option value="">不限时间</option>
<option value="day">最近一天</option>
<option value="week">最近一周</option>
<option value="month">最近一月</option>
<option value="year">最近一年</option>
</select>
<button class="btn btn-sm btn-accent" onclick="doSearch()" id="searchBtn">
<i class="bi bi-search me-1"></i>搜索
</button>
</div>
<div id="searchResults">
<div class="search-empty">
<i class="bi bi-globe2 d-block" style="font-size:2rem;opacity:0.3;"></i>
<small>搜索网络资料，结果可添加为素材</small>
</div>
</div>
</div>
</div>
<!-- 素材区 -->
<div class="card-dark">
<div class="card-header d-flex justify-content-between align-items-center">
@@ -922,6 +978,173 @@
// 初始化选择计数
updateSelectCount();
// ===== 网络搜索 =====
let searchPanelCollapsed = false;
let lastSearchQuery = '';
function toggleSearchPanel() {
const body = document.getElementById('searchPanelBody');
const icon = document.getElementById('searchPanelToggle');
searchPanelCollapsed = !searchPanelCollapsed;
body.style.display = searchPanelCollapsed ? 'none' : '';
icon.className = searchPanelCollapsed ? 'bi bi-chevron-right' : 'bi bi-chevron-down';
}
async function doSearch() {
const query = document.getElementById('searchQuery').value.trim();
if (!query) return;
const depth = document.getElementById('searchDepth').value;
const timeRange = document.getElementById('searchTimeRange').value;
const btn = document.getElementById('searchBtn');
const origBtn = btn.innerHTML;
btn.innerHTML = '<span class="spinner-generate" style="width:14px;height:14px;border-width:2px;"></span>';
btn.disabled = true;
const resultsEl = document.getElementById('searchResults');
resultsEl.innerHTML = '<div class="search-loading"><span class="spinner-generate" style="width:20px;height:20px;"></span><br><small class="mt-2 d-block">搜索中...</small></div>';
try {
const body = { query, search_depth: depth, max_results: 8 };
if (timeRange) body.time_range = timeRange;
const res = await fetch('/api/search', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(body)
});
if (!res.ok) { const d = await res.json(); throw new Error(d.error || '搜索失败'); }
const data = await res.json();
lastSearchQuery = query;
const results = data.results || [];
if (results.length === 0) {
resultsEl.innerHTML = '<div class="search-empty"><i class="bi bi-search d-block" style="font-size:1.5rem;opacity:0.3;"></i><small>未找到相关结果</small></div>';
} else {
resultsEl.innerHTML = `<div class="small text-muted mb-2"><i class="bi bi-info-circle me-1"></i>找到 ${results.length} 条结果（耗时 ${data.response_time ? data.response_time.toFixed(1) : '-'}s）</div>` +
results.map((r, i) => renderSearchResult(r, i, query)).join('');
}
} catch(e) {
resultsEl.innerHTML = `<div class="search-empty text-danger"><i class="bi bi-exclamation-triangle d-block" style="font-size:1.5rem;"></i><small>${escapeHtml(e.message)}</small></div>`;
} finally {
btn.innerHTML = origBtn;
btn.disabled = false;
}
}
function renderSearchResult(r, index, query) {
const scorePercent = r.score ? Math.round(r.score * 100) : 0;
return `<div class="search-result-item" id="search-result-${index}">
<a class="result-title" href="${escapeHtml(r.url)}" target="_blank" rel="noopener">
<i class="bi bi-box-arrow-up-right" style="font-size:0.8rem;"></i>
${escapeHtml(r.title)}
</a>
<div class="result-url">${escapeHtml(r.url)}</div>
<div class="result-snippet">${escapeHtml(r.content)}</div>
<div class="result-score">相关度: ${scorePercent}%</div>
<div class="result-actions">
<button class="btn btn-sm btn-outline-accent" onclick="toggleSearchDetail(${index}, '${escapeAttr(query)}', '${escapeAttr(r.url)}')" id="detail-btn-${index}">
<i class="bi bi-eye me-1"></i>查看详情
</button>
<button class="btn btn-sm btn-outline-success" onclick="addSearchResultAsMaterial(${index})" title="添加为文本素材">
<i class="bi bi-plus-circle me-1"></i>添加为素材
</button>
<a class="btn btn-sm btn-secondary" href="${escapeHtml(r.url)}" target="_blank" rel="noopener" title="在新窗口打开">
<i class="bi bi-box-arrow-up-right"></i>
</a>
</div>
<div class="result-detail" id="search-detail-${index}">
<div class="result-detail-content" id="search-detail-content-${index}"></div>
</div>
</div>`;
}
async function toggleSearchDetail(index, query, url) {
const detailEl = document.getElementById(`search-detail-${index}`);
const btnEl = document.getElementById(`detail-btn-${index}`);
const contentEl = document.getElementById(`search-detail-content-${index}`);
if (detailEl.classList.contains('show')) {
detailEl.classList.remove('show');
btnEl.innerHTML = '<i class="bi bi-eye me-1"></i>查看详情';
return;
}
// 如果已经有内容，直接展示
if (contentEl.textContent.trim()) {
detailEl.classList.add('show');
btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
return;
}
// 获取详细内容
btnEl.innerHTML = '<span class="spinner-generate" style="width:12px;height:12px;border-width:2px;"></span>';
btnEl.disabled = true;
try {
const res = await fetch('/api/search/detail', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ query, url })
});
if (!res.ok) { const d = await res.json(); throw new Error(d.error || '获取详情失败'); }
const data = await res.json();
const results = data.results || [];
if (results.length > 0 && results[0].raw_content) {
contentEl.textContent = results[0].raw_content;
} else if (results.length > 0) {
contentEl.textContent = results[0].content || '暂无详细内容';
} else {
contentEl.textContent = '未能获取详细内容';
}
detailEl.classList.add('show');
btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
} catch(e) {
contentEl.textContent = '获取详情失败: ' + e.message;
detailEl.classList.add('show');
btnEl.innerHTML = '<i class="bi bi-eye-slash me-1"></i>收起详情';
} finally {
btnEl.disabled = false;
}
}
async function addSearchResultAsMaterial(index) {
const item = document.querySelector(`#search-result-${index}`);
if (!item) return;
const title = item.querySelector('.result-title').textContent.trim();
const url = item.querySelector('.result-url').textContent.trim();
const snippet = item.querySelector('.result-snippet').textContent.trim();
const detailEl = document.getElementById(`search-detail-content-${index}`);
const detailContent = detailEl ? detailEl.textContent.trim() : '';
// 构建素材内容：标题 + URL + 摘要 + 详细内容
let content = `【${title}】\n来源: ${url}\n\n${snippet}`;
if (detailContent) {
content += `\n\n--- 详细内容 ---\n${detailContent}`;
}
const fd = new FormData();
fd.append('type', 'text');
fd.append('content', content);
try {
const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
if (res.ok) {
// 高亮提示
const btn = item.querySelector('.btn-outline-success');
btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>已添加';
btn.classList.replace('btn-outline-success', 'btn-success');
btn.disabled = true;
setTimeout(() => location.reload(), 800);
} else {
const d = await res.json(); alert(d.error || '添加失败');
}
} catch(e) {
alert('添加素材失败: ' + e.message);
}
}
</script>
</body>
</html>