前端增加人工互联网搜索功能

- 新增互联网搜索面板，支持手动输入关键词搜索 - 搜索结果展示为卡片形式，显示标题和链接 - 支持抓取单个结果的详细内容 - 可一键保存搜索结果到内容库 - 新增搜索 API 端点：/api/articles/internet-search - 搜索结果详情模态框展示 - 响应式设计，搜索结果自适应布局
2026-07-13 12:04:20 +08:00
parent 4f02a6a0ea
commit 7bb5a250c8
4 changed files with 419 additions and 1 deletions
@@ -133,3 +133,59 @@ def fetch_article():
        })
    else:
        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)
+    })
@@ -643,3 +643,96 @@ 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;
+}
@@ -613,3 +613,232 @@ function getStatusText(status) {
    };
    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">