前端增加人工互联网搜索功能
- 新增互联网搜索面板，支持手动输入关键词搜索 - 搜索结果展示为卡片形式，显示标题和链接 - 支持抓取单个结果的详细内容 - 可一键保存搜索结果到内容库 - 新增搜索 API 端点：/api/articles/internet-search - 搜索结果详情模态框展示 - 响应式设计，搜索结果自适应布局
This commit is contained in:
+57
-1
@@ -132,4 +132,60 @@ def fetch_article():
|
||||
'data': result
|
||||
})
|
||||
else:
|
||||
return jsonify({'error': '抓取失败'}), 500
|
||||
return jsonify({'error': '抓取失败'}), 500
|
||||
|
||||
@bp.route('/internet-search', methods=['POST'])
|
||||
def internet_search():
|
||||
"""互联网搜索（浏览器方式）"""
|
||||
data = request.get_json()
|
||||
keyword = data.get('keyword', '')
|
||||
max_results = data.get('max_results', 10)
|
||||
save_to_library = data.get('save_to_library', False)
|
||||
|
||||
if not keyword:
|
||||
return jsonify({'error': '请提供搜索关键词'}), 400
|
||||
|
||||
# 执行互联网搜索
|
||||
results = search_service.search_internet(keyword, max_results)
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'keyword': keyword,
|
||||
'results': results,
|
||||
'count': len(results)
|
||||
})
|
||||
|
||||
@bp.route('/internet-search-and-fetch', methods=['POST'])
|
||||
def internet_search_and_fetch():
|
||||
"""互联网搜索并抓取内容"""
|
||||
data = request.get_json()
|
||||
keyword = data.get('keyword', '')
|
||||
max_results = data.get('max_results', 5)
|
||||
category = data.get('category')
|
||||
|
||||
if not keyword:
|
||||
return jsonify({'error': '请提供搜索关键词'}), 400
|
||||
|
||||
# 执行互联网搜索
|
||||
results = search_service.search_internet(keyword, max_results)
|
||||
|
||||
# 抓取每个结果的详细内容
|
||||
fetched_results = []
|
||||
for r in results:
|
||||
url = r.get('url')
|
||||
if url:
|
||||
content = search_service.fetch_url_content(url)
|
||||
if content:
|
||||
fetched_results.append({
|
||||
'title': r['title'],
|
||||
'url': url,
|
||||
'source': r['source'],
|
||||
'fetched_content': content
|
||||
})
|
||||
|
||||
return jsonify({
|
||||
'success': True,
|
||||
'keyword': keyword,
|
||||
'results': fetched_results,
|
||||
'count': len(fetched_results)
|
||||
})
|
||||
@@ -642,4 +642,97 @@ body {
|
||||
|
||||
.priority-low {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* 搜索结果卡片 */
|
||||
.search-results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.search-result-card {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.search-result-card:hover {
|
||||
border-color: #667eea;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.result-number {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
margin-bottom: 8px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.result-title:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.result-url {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-url a {
|
||||
color: #3b82f6;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.result-url a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.result-source {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 搜索状态 */
|
||||
#internet-search-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#internet-search-status i {
|
||||
font-size: 16px;
|
||||
}
|
||||
@@ -612,4 +612,233 @@ function getStatusText(status) {
|
||||
'completed': '已完成'
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
}
|
||||
|
||||
// ========== 互联网搜索功能 ==========
|
||||
|
||||
let currentSearchResult = null;
|
||||
|
||||
// 执行互联网搜索
|
||||
async function doInternetSearch() {
|
||||
const keyword = document.getElementById('internet-search-keyword').value.trim();
|
||||
const maxResults = parseInt(document.getElementById('internet-search-count').value) || 10;
|
||||
|
||||
if (!keyword) {
|
||||
showToast('请输入搜索关键词', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示搜索状态
|
||||
const statusDiv = document.getElementById('internet-search-status');
|
||||
const resultsDiv = document.getElementById('internet-search-results');
|
||||
const searchBtn = document.getElementById('search-btn');
|
||||
|
||||
statusDiv.innerHTML = '<i class="ri-loader-4-line"></i> 正在搜索...';
|
||||
resultsDiv.innerHTML = '<div class="empty-text">搜索中...</div>';
|
||||
searchBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/articles/internet-search`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ keyword, max_results: maxResults })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
statusDiv.innerHTML = `<i class="ri-check-line"></i> 搜索完成，找到 ${data.count} 条结果`;
|
||||
|
||||
if (data.results.length > 0) {
|
||||
resultsDiv.innerHTML = data.results.map((r, i) => `
|
||||
<div class="search-result-card">
|
||||
<div class="result-number">${i + 1}</div>
|
||||
<div class="result-content">
|
||||
<div class="result-title" onclick="showSearchResultDetail(${i})">${escapeHtml(r.title)}</div>
|
||||
<div class="result-url">
|
||||
<a href="${escapeHtml(r.url)}" target="_blank">
|
||||
<i class="ri-external-link-line"></i> ${escapeHtml(r.url.substring(0, 60))}${r.url.length > 60 ? '...' : ''}
|
||||
</a>
|
||||
</div>
|
||||
<div class="result-source">来源: ${escapeHtml(r.source)}</div>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button onclick="fetchAndShowResult(${i})" class="btn btn-sm btn-secondary">
|
||||
<i class="ri-download-line"></i> 抓取内容
|
||||
</button>
|
||||
<button onclick="quickSaveResult(${i})" class="btn btn-sm btn-success">
|
||||
<i class="ri-save-line"></i> 保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
// 存储搜索结果供后续使用
|
||||
window.lastSearchResults = data.results;
|
||||
} else {
|
||||
resultsDiv.innerHTML = '<div class="empty-text">未找到相关结果</div>';
|
||||
}
|
||||
} else {
|
||||
statusDiv.innerHTML = `<i class="ri-error-warning-line"></i> 搜索失败: ${escapeHtml(data.error)}`;
|
||||
resultsDiv.innerHTML = '<div class="empty-text">搜索失败</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
statusDiv.innerHTML = '<i class="ri-error-warning-line"></i> 搜索出错';
|
||||
resultsDiv.innerHTML = '<div class="empty-text">搜索出错，请稍后重试</div>';
|
||||
console.error('搜索错误:', error);
|
||||
}
|
||||
|
||||
searchBtn.disabled = false;
|
||||
}
|
||||
|
||||
// 显示搜索结果详情
|
||||
function showSearchResultDetail(index) {
|
||||
if (!window.lastSearchResults || !window.lastSearchResults[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentSearchResult = window.lastSearchResults[index];
|
||||
const body = document.getElementById('search-result-body');
|
||||
|
||||
body.innerHTML = `
|
||||
<div class="detail-meta">
|
||||
<div class="detail-meta-item">
|
||||
<label>标题</label>
|
||||
<span>${escapeHtml(currentSearchResult.title)}</span>
|
||||
</div>
|
||||
<div class="detail-meta-item">
|
||||
<label>URL</label>
|
||||
<a href="${escapeHtml(currentSearchResult.url)}" target="_blank">${escapeHtml(currentSearchResult.url)}</a>
|
||||
</div>
|
||||
<div class="detail-meta-item">
|
||||
<label>来源</label>
|
||||
<span>${escapeHtml(currentSearchResult.source)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h4><i class="ri-information-line"></i> 提示</h4>
|
||||
<p>点击"抓取内容"按钮可以获取页面详细内容，然后保存到内容库。</p>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('search-result-modal').classList.add('active');
|
||||
}
|
||||
|
||||
// 抓取并显示搜索结果内容
|
||||
async function fetchAndShowResult(index) {
|
||||
if (!window.lastSearchResults || !window.lastSearchResults[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = window.lastSearchResults[index];
|
||||
currentSearchResult = result;
|
||||
|
||||
showToast('正在抓取页面内容...', '');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/articles/fetch`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
url: result.url,
|
||||
product_names: [result.title],
|
||||
category: ''
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
// 更新当前搜索结果，添加抓取的内容
|
||||
currentSearchResult = {
|
||||
...result,
|
||||
fetched: true,
|
||||
fetchedContent: data.data
|
||||
};
|
||||
|
||||
const body = document.getElementById('search-result-body');
|
||||
body.innerHTML = `
|
||||
<div class="detail-meta">
|
||||
<div class="detail-meta-item">
|
||||
<label>标题</label>
|
||||
<span>${escapeHtml(data.data.title)}</span>
|
||||
</div>
|
||||
<div class="detail-meta-item">
|
||||
<label>URL</label>
|
||||
<a href="${escapeHtml(result.url)}" target="_blank">${escapeHtml(result.url)}</a>
|
||||
</div>
|
||||
<div class="detail-meta-item">
|
||||
<label>描述</label>
|
||||
<span>${escapeHtml(data.data.description || '无')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-section">
|
||||
<h4><i class="ri-file-text-line"></i> 页面内容</h4>
|
||||
<pre style="white-space: pre-wrap; max-height: 400px; overflow-y: auto; background: #f8f9fa; padding: 15px; border-radius: 8px;">${escapeHtml(data.data.content.substring(0, 2000))}${data.data.content.length > 2000 ? '\n... (内容过长，已截断)' : ''}</pre>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('search-result-modal').classList.add('active');
|
||||
showToast('内容抓取成功', 'success');
|
||||
} else {
|
||||
showToast('抓取失败: ' + data.error, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('抓取出错', 'error');
|
||||
console.error('抓取错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 快速保存搜索结果到内容库
|
||||
async function quickSaveResult(index) {
|
||||
if (!window.lastSearchResults || !window.lastSearchResults[index]) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = window.lastSearchResults[index];
|
||||
|
||||
// 先抓取内容再保存
|
||||
showToast('正在抓取并保存...', '');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/api/articles/fetch`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
url: result.url,
|
||||
product_names: [result.title],
|
||||
category: ''
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showToast('已保存到内容库', 'success');
|
||||
loadArticles();
|
||||
loadStats();
|
||||
} else {
|
||||
showToast('保存失败: ' + data.error, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('保存出错', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 从详情模态框保存到内容库
|
||||
async function saveSearchResultToLibrary() {
|
||||
if (!currentSearchResult) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果还没有抓取内容，先抓取
|
||||
if (!currentSearchResult.fetched) {
|
||||
await fetchAndShowResult(window.lastSearchResults.findIndex(r => r.url === currentSearchResult.url));
|
||||
return;
|
||||
}
|
||||
|
||||
showToast('已保存到内容库', 'success');
|
||||
closeModal('search-result-modal');
|
||||
loadArticles();
|
||||
loadStats();
|
||||
}
|
||||
@@ -116,6 +116,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 互联网搜索区域 -->
|
||||
<div class="panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2><i class="ri-search-line"></i> 互联网搜索</h2>
|
||||
<div class="panel-actions">
|
||||
<input type="text" id="internet-search-keyword" placeholder="输入关键词搜索..." class="search-input" style="width: 300px;">
|
||||
<input type="number" id="internet-search-count" value="10" min="1" max="20" style="width: 80px;" title="结果数量">
|
||||
<button onclick="doInternetSearch()" class="btn btn-primary" id="search-btn">
|
||||
<i class="ri-search-line"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="internet-search-status" style="margin-bottom: 10px; color: #666; font-size: 14px;"></div>
|
||||
<div class="search-results-grid" id="internet-search-results">
|
||||
<div class="empty-text">输入关键词进行互联网搜索</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 处理历史 -->
|
||||
<div class="panel full-width">
|
||||
<div class="panel-header">
|
||||
@@ -267,6 +287,26 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果详情模态框 -->
|
||||
<div id="search-result-modal" class="modal">
|
||||
<div class="modal-content large">
|
||||
<div class="modal-header">
|
||||
<h3><i class="ri-external-link-line"></i> 搜索结果详情</h3>
|
||||
<button onclick="closeModal('search-result-modal')" class="close-btn">
|
||||
<i class="ri-close-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="search-result-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button onclick="closeModal('search-result-modal')" class="btn btn-secondary">关闭</button>
|
||||
<button onclick="saveSearchResultToLibrary()" class="btn btn-success">
|
||||
<i class="ri-save-line"></i> 保存到内容库
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 文章详情模态框 -->
|
||||
<div id="article-detail-modal" class="modal">
|
||||
<div class="modal-content large">
|
||||
|
||||
Reference in New Issue
Block a user