hz4th_coder
e13e4074f1
- 新增独立搜索页面 /search - 支持一键保存所有搜索结果到内容库 - 支持自动抓取和自动保存选项 - 显示保存进度条 - 主页添加搜索入口链接 - 搜索结果状态实时显示（已抓取/已保存）
384 lines
13 KiB
JavaScript
384 lines
13 KiB
JavaScript
// API基础地址
|
|
const API_BASE = '';
|
|
|
|
// 搜索结果存储
|
|
let searchResults = [];
|
|
let currentResultIndex = -1;
|
|
|
|
// 页面加载初始化
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 回车搜索
|
|
document.getElementById('search-keyword').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
doSearch();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 执行搜索
|
|
async function doSearch() {
|
|
const keyword = document.getElementById('search-keyword').value.trim();
|
|
const maxResults = parseInt(document.getElementById('search-count').value) || 10;
|
|
const autoFetch = document.getElementById('auto-fetch').checked;
|
|
const autoSave = document.getElementById('auto-save').checked;
|
|
|
|
if (!keyword) {
|
|
showToast('请输入搜索关键词', 'error');
|
|
return;
|
|
}
|
|
|
|
// 更新状态
|
|
updateStatus('searching', '搜索中...');
|
|
document.getElementById('search-btn').disabled = true;
|
|
|
|
// 显示进度
|
|
const progress = document.getElementById('search-progress');
|
|
progress.style.display = 'block';
|
|
document.getElementById('progress-fill').style.width = '0%';
|
|
document.getElementById('progress-text').textContent = '正在搜索...';
|
|
|
|
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) {
|
|
searchResults = data.results.map(r => ({
|
|
...r,
|
|
fetched: false,
|
|
saved: false,
|
|
content: ''
|
|
}));
|
|
|
|
displayResults();
|
|
updateStatus('success', `找到 ${searchResults.length} 条结果`);
|
|
document.getElementById('results-count').textContent = `${searchResults.length} 条结果`;
|
|
document.getElementById('save-all-btn').disabled = searchResults.length === 0;
|
|
|
|
document.getElementById('progress-fill').style.width = '100%';
|
|
document.getElementById('progress-text').textContent = '搜索完成！';
|
|
|
|
// 自动抓取和保存
|
|
if (autoFetch && searchResults.length > 0) {
|
|
setTimeout(() => fetchAllResults(autoSave), 500);
|
|
}
|
|
} else {
|
|
updateStatus('error', '搜索失败');
|
|
showToast('搜索失败: ' + data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
updateStatus('error', '搜索出错');
|
|
showToast('搜索出错', 'error');
|
|
console.error(error);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
progress.style.display = 'none';
|
|
}, 1000);
|
|
|
|
document.getElementById('search-btn').disabled = false;
|
|
}
|
|
|
|
// 显示搜索结果
|
|
function displayResults() {
|
|
const container = document.getElementById('search-results');
|
|
|
|
if (searchResults.length === 0) {
|
|
container.innerHTML = '<div class="empty-text">未找到相关结果</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = searchResults.map((r, i) => `
|
|
<div class="result-item ${r.saved ? 'saved' : ''} ${r.fetched ? 'fetched' : ''}" id="result-${i}">
|
|
<div class="result-number">${i + 1}</div>
|
|
<div class="result-main">
|
|
<div class="result-title" onclick="showResultDetail(${i})">
|
|
${r.saved ? '<i class="ri-check-line saved-icon"></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, 70))}${r.url.length > 70 ? '...' : ''}
|
|
</a>
|
|
</div>
|
|
${r.content ? `<div class="result-content-preview">${escapeHtml(r.content.substring(0, 100))}...</div>` : ''}
|
|
</div>
|
|
<div class="result-actions">
|
|
<button onclick="fetchResult(${i})" class="btn btn-sm btn-secondary" id="fetch-btn-${i}" ${r.fetched ? 'disabled' : ''}>
|
|
<i class="ri-download-line"></i> ${r.fetched ? '已抓取' : '抓取'}
|
|
</button>
|
|
<button onclick="saveResult(${i})" class="btn btn-sm btn-success" id="save-btn-${i}" ${r.saved ? 'disabled' : ''}>
|
|
<i class="ri-save-line"></i> ${r.saved ? '已保存' : '保存'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// 抓取单个结果
|
|
async function fetchResult(index) {
|
|
const result = searchResults[index];
|
|
if (!result || result.fetched) return;
|
|
|
|
const btn = document.getElementById(`fetch-btn-${index}`);
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="ri-loader-4-line"></i> 抓取中...';
|
|
|
|
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]
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
searchResults[index].fetched = true;
|
|
searchResults[index].content = data.data.content;
|
|
searchResults[index].title = data.data.title || result.title;
|
|
|
|
btn.innerHTML = '<i class="ri-check-line"></i> 已抓取';
|
|
|
|
// 更新结果显示
|
|
const item = document.getElementById(`result-${index}`);
|
|
item.classList.add('fetched');
|
|
|
|
showToast('抓取成功', 'success');
|
|
displayResults();
|
|
} else {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="ri-download-line"></i> 抓取';
|
|
showToast('抓取失败: ' + data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="ri-download-line"></i> 抓取';
|
|
showToast('抓取出错', 'error');
|
|
}
|
|
}
|
|
|
|
// 保存单个结果
|
|
async function saveResult(index) {
|
|
const result = searchResults[index];
|
|
if (!result) return;
|
|
|
|
// 如果未抓取，先抓取
|
|
if (!result.fetched) {
|
|
await fetchResult(index);
|
|
if (!searchResults[index].fetched) return;
|
|
}
|
|
|
|
const btn = document.getElementById(`save-btn-${index}`);
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="ri-loader-4-line"></i> 保存中...';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/articles`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
product_names: [searchResults[index].title],
|
|
category: '',
|
|
keywords: [],
|
|
summary: searchResults[index].content.substring(0, 200),
|
|
content: searchResults[index].content,
|
|
source: searchResults[index].url,
|
|
url: searchResults[index].url
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
searchResults[index].saved = true;
|
|
btn.innerHTML = '<i class="ri-check-line"></i> 已保存';
|
|
|
|
const item = document.getElementById(`result-${index}`);
|
|
item.classList.add('saved');
|
|
|
|
showToast('保存成功', 'success');
|
|
displayResults();
|
|
} else {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="ri-save-line"></i> 保存';
|
|
showToast('保存失败: ' + data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="ri-save-line"></i> 保存';
|
|
showToast('保存出错', 'error');
|
|
}
|
|
}
|
|
|
|
// 一键保存全部
|
|
async function saveAllResults() {
|
|
const unsaved = searchResults.filter(r => !r.saved);
|
|
if (unsaved.length === 0) {
|
|
showToast('没有需要保存的结果', 'error');
|
|
return;
|
|
}
|
|
|
|
const progress = document.getElementById('save-progress');
|
|
progress.style.display = 'block';
|
|
|
|
let saved = 0;
|
|
const total = unsaved.length;
|
|
|
|
for (let i = 0; i < searchResults.length; i++) {
|
|
if (searchResults[i].saved) continue;
|
|
|
|
document.getElementById('save-progress-text').textContent =
|
|
`正在保存 ${saved + 1}/${total}...`;
|
|
document.getElementById('save-fill').style.width =
|
|
`${(saved / total) * 100}%`;
|
|
|
|
await saveResult(i);
|
|
saved++;
|
|
}
|
|
|
|
document.getElementById('save-fill').style.width = '100%';
|
|
document.getElementById('save-progress-text').textContent = '保存完成！';
|
|
|
|
setTimeout(() => {
|
|
progress.style.display = 'none';
|
|
}, 1500);
|
|
|
|
showToast(`成功保存 ${saved} 条结果`, 'success');
|
|
}
|
|
|
|
// 抓取所有结果
|
|
async function fetchAllResults(autoSave) {
|
|
const progress = document.getElementById('search-progress');
|
|
progress.style.display = 'block';
|
|
|
|
const total = searchResults.length;
|
|
let fetched = 0;
|
|
|
|
for (let i = 0; i < searchResults.length; i++) {
|
|
if (searchResults[i].fetched) {
|
|
fetched++;
|
|
continue;
|
|
}
|
|
|
|
document.getElementById('progress-text').textContent =
|
|
`正在抓取 ${fetched + 1}/${total}...`;
|
|
document.getElementById('progress-fill').style.width =
|
|
`${(fetched / total) * 100}%`;
|
|
|
|
await fetchResult(i);
|
|
fetched++;
|
|
}
|
|
|
|
document.getElementById('progress-fill').style.width = '100%';
|
|
document.getElementById('progress-text').textContent = '抓取完成！';
|
|
|
|
setTimeout(() => {
|
|
progress.style.display = 'none';
|
|
}, 1000);
|
|
|
|
// 自动保存
|
|
if (autoSave) {
|
|
setTimeout(() => saveAllResults(), 500);
|
|
}
|
|
}
|
|
|
|
// 显示结果详情
|
|
function showResultDetail(index) {
|
|
currentResultIndex = index;
|
|
const result = searchResults[index];
|
|
|
|
const body = document.getElementById('result-detail-body');
|
|
body.innerHTML = `
|
|
<div class="detail-meta">
|
|
<div class="detail-meta-item">
|
|
<label>标题</label>
|
|
<span>${escapeHtml(result.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>${result.fetched ? '已抓取' : '未抓取'} / ${result.saved ? '已保存' : '未保存'}</span>
|
|
</div>
|
|
</div>
|
|
${result.content ? `
|
|
<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(result.content.substring(0, 3000))}${result.content.length > 3000 ? '\n...(内容过长，已截断)' : ''}</pre>
|
|
</div>
|
|
` : '<div class="detail-section"><p>尚未抓取内容，点击"保存到内容库"将自动抓取并保存</p></div>'}
|
|
`;
|
|
|
|
document.getElementById('result-detail-modal').classList.add('active');
|
|
}
|
|
|
|
// 保存当前结果
|
|
async function saveCurrentResult() {
|
|
if (currentResultIndex >= 0) {
|
|
await saveResult(currentResultIndex);
|
|
closeModal('result-detail-modal');
|
|
}
|
|
}
|
|
|
|
// 清空结果
|
|
function clearResults() {
|
|
searchResults = [];
|
|
displayResults();
|
|
document.getElementById('results-count').textContent = '0 条结果';
|
|
document.getElementById('save-all-btn').disabled = true;
|
|
updateStatus('ready', '就绪');
|
|
}
|
|
|
|
// 更新状态
|
|
function updateStatus(status, text) {
|
|
const dot = document.getElementById('search-status');
|
|
const statusText = document.getElementById('status-text');
|
|
|
|
dot.className = 'status-dot';
|
|
if (status === 'searching') {
|
|
dot.style.background = '#f59e0b';
|
|
} else if (status === 'success') {
|
|
dot.style.background = '#10b981';
|
|
} else if (status === 'error') {
|
|
dot.style.background = '#ef4444';
|
|
} else {
|
|
dot.style.background = '#10b981';
|
|
}
|
|
|
|
statusText.textContent = text;
|
|
}
|
|
|
|
// 关闭模态框
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.remove('active');
|
|
}
|
|
|
|
// 显示提示
|
|
function showToast(message, type = '') {
|
|
const toast = document.getElementById('toast');
|
|
toast.textContent = message;
|
|
toast.className = `toast active ${type}`;
|
|
|
|
setTimeout(() => {
|
|
toast.classList.remove('active');
|
|
}, 3000);
|
|
}
|
|
|
|
// HTML转义
|
|
function escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
} |