hz4th_coder
76e24c4fa3
- 数据库新增 search_title 字段存储搜索结果标题 - product_names 存储抓取到的网页标题 - 搜索页面显示两个标题（搜索标题 + 网页标题） - 内容库页面也显示两个标题
487 lines
16 KiB
JavaScript
487 lines
16 KiB
JavaScript
// API基础地址
|
|
const API_BASE = '';
|
|
|
|
// 状态
|
|
let articles = [];
|
|
let currentPage = 1;
|
|
let pageSize = 20;
|
|
let totalCount = 0;
|
|
let selectedIds = new Set();
|
|
let currentArticleId = null;
|
|
|
|
// 页面加载
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadArticles();
|
|
loadCategories();
|
|
|
|
// 搜索防抖
|
|
let searchTimeout;
|
|
document.getElementById('search-input').addEventListener('input', (e) => {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
currentPage = 1;
|
|
loadArticles();
|
|
}, 300);
|
|
});
|
|
|
|
// 分类筛选
|
|
document.getElementById('category-filter').addEventListener('change', () => {
|
|
currentPage = 1;
|
|
loadArticles();
|
|
});
|
|
});
|
|
|
|
// 加载文章列表
|
|
async function loadArticles() {
|
|
const keyword = document.getElementById('search-input').value.trim();
|
|
const category = document.getElementById('category-filter').value;
|
|
|
|
const params = new URLSearchParams({
|
|
limit: pageSize,
|
|
offset: (currentPage - 1) * pageSize
|
|
});
|
|
|
|
if (keyword) {
|
|
const response = await fetch(`${API_BASE}/api/articles/search?q=${encodeURIComponent(keyword)}${category ? '&category=' + encodeURIComponent(category) : ''}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
articles = data.articles;
|
|
totalCount = data.count;
|
|
}
|
|
} else {
|
|
const response = await fetch(`${API_BASE}/api/articles?${params.toString()}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
articles = data.articles;
|
|
totalCount = data.count;
|
|
}
|
|
}
|
|
|
|
displayArticles();
|
|
updatePagination();
|
|
updateStats();
|
|
}
|
|
|
|
// 加载分类列表
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/articles?limit=1000`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
const categories = new Set();
|
|
data.articles.forEach(a => {
|
|
if (a.category) categories.add(a.category);
|
|
});
|
|
|
|
const select = document.getElementById('category-filter');
|
|
select.innerHTML = '<option value="">全部分类</option>' +
|
|
Array.from(categories).map(c => `<option value="${escapeHtml(c)}">${escapeHtml(c)}</option>`).join('');
|
|
}
|
|
} catch (error) {
|
|
console.error('加载分类失败:', error);
|
|
}
|
|
}
|
|
|
|
// 显示文章列表
|
|
function displayArticles() {
|
|
const container = document.getElementById('articles-list');
|
|
|
|
if (articles.length === 0) {
|
|
container.innerHTML = '<div class="empty-text">暂无文章</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = articles.map(article => {
|
|
const productNames = safeParseJSON(article.product_names, []);
|
|
const keywords = safeParseJSON(article.keywords, []);
|
|
|
|
return `
|
|
<div class="article-card ${selectedIds.has(article.id) ? 'selected' : ''}" id="article-${article.id}">
|
|
<div class="article-card-header">
|
|
<label class="checkbox-wrapper">
|
|
<input type="checkbox" class="article-select"
|
|
${selectedIds.has(article.id) ? 'checked' : ''}
|
|
onchange="toggleSelect(${article.id})">
|
|
</label>
|
|
<div class="article-title" onclick="showDetail(${article.id})">
|
|
${escapeHtml(productNames.join(', ') || '未命名')}
|
|
</div>
|
|
<div class="article-actions">
|
|
<button onclick="editArticle(${article.id})" class="btn btn-sm btn-secondary">
|
|
<i class="ri-edit-line"></i>
|
|
</button>
|
|
<button onclick="deleteArticle(${article.id})" class="btn btn-sm btn-danger">
|
|
<i class="ri-delete-bin-line"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
${article.search_title && article.search_title !== productNames.join(', ') ? `
|
|
<div class="article-search-title">
|
|
<i class="ri-search-line"></i> 搜索标题: ${escapeHtml(article.search_title)}
|
|
</div>
|
|
` : ''}
|
|
<div class="article-meta">
|
|
${article.category ? `<span class="article-category">${escapeHtml(article.category)}</span>` : ''}
|
|
<span><i class="ri-link"></i> ${escapeHtml(article.source || '未知来源')}</span>
|
|
<span><i class="ri-calendar-line"></i> ${formatDate(article.fetch_date)}</span>
|
|
</div>
|
|
<div class="article-summary">${escapeHtml(article.summary || '')}</div>
|
|
${keywords.length > 0 ? `
|
|
<div class="article-tags">
|
|
${keywords.slice(0, 5).map(k => `<span class="article-tag">${escapeHtml(k)}</span>`).join('')}
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// 更新分页
|
|
function updatePagination() {
|
|
const totalPages = Math.ceil(totalCount / pageSize);
|
|
document.getElementById('page-info').textContent = `第 ${currentPage} / ${totalPages || 1} 页`;
|
|
|
|
document.getElementById('prev-btn').disabled = currentPage <= 1;
|
|
document.getElementById('next-btn').disabled = currentPage >= totalPages;
|
|
}
|
|
|
|
// 更新统计
|
|
function updateStats() {
|
|
document.getElementById('total-count').textContent = `${totalCount} 篇文章`;
|
|
}
|
|
|
|
// 上一页
|
|
function prevPage() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
loadArticles();
|
|
}
|
|
}
|
|
|
|
// 下一页
|
|
function nextPage() {
|
|
const totalPages = Math.ceil(totalCount / pageSize);
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
loadArticles();
|
|
}
|
|
}
|
|
|
|
// 刷新列表
|
|
function refreshList() {
|
|
loadArticles();
|
|
}
|
|
|
|
// 全选/取消全选
|
|
function toggleSelectAll() {
|
|
const checked = document.getElementById('select-all').checked;
|
|
|
|
if (checked) {
|
|
articles.forEach(a => selectedIds.add(a.id));
|
|
} else {
|
|
selectedIds.clear();
|
|
}
|
|
|
|
displayArticles();
|
|
updateBatchActions();
|
|
}
|
|
|
|
// 切换单个选择
|
|
function toggleSelect(id) {
|
|
if (selectedIds.has(id)) {
|
|
selectedIds.delete(id);
|
|
} else {
|
|
selectedIds.add(id);
|
|
}
|
|
|
|
updateBatchActions();
|
|
}
|
|
|
|
// 更新批量操作按钮
|
|
function updateBatchActions() {
|
|
const batchActions = document.getElementById('batch-actions');
|
|
|
|
if (selectedIds.size > 0) {
|
|
batchActions.style.display = 'flex';
|
|
document.getElementById('selected-count').textContent = `已选 ${selectedIds.size} 篇`;
|
|
} else {
|
|
batchActions.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
// 显示详情
|
|
async function showDetail(id) {
|
|
currentArticleId = id;
|
|
const article = articles.find(a => a.id === id);
|
|
|
|
if (!article) {
|
|
const response = await fetch(`${API_BASE}/api/articles/${id}`);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
Object.assign(article, data.article);
|
|
}
|
|
}
|
|
|
|
const productNames = safeParseJSON(article.product_names, []);
|
|
const keywords = safeParseJSON(article.keywords, []);
|
|
|
|
const body = document.getElementById('detail-body');
|
|
body.innerHTML = `
|
|
<div class="detail-section">
|
|
<h4><i class="ri-price-tag-3-line"></i> 产品名称</h4>
|
|
<p>${escapeHtml(productNames.join(', '))}</p>
|
|
</div>
|
|
<div class="detail-meta" style="display: flex; gap: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
|
<div><strong>分类:</strong> ${escapeHtml(article.category || '未分类')}</div>
|
|
<div><strong>来源:</strong> ${escapeHtml(article.source)}</div>
|
|
<div><strong>时间:</strong> ${formatDate(article.fetch_date)}</div>
|
|
</div>
|
|
${article.url ? `<div class="detail-section"><h4><i class="ri-link"></i> 原文链接</h4><a href="${escapeHtml(article.url)}" target="_blank">${escapeHtml(article.url)}</a></div>` : ''}
|
|
${keywords.length > 0 ? `<div class="detail-section"><h4><i class="ri-keyword-line"></i> 关键词</h4><p>${escapeHtml(keywords.join(', '))}</p></div>` : ''}
|
|
<div class="detail-section">
|
|
<h4><i class="ri-file-text-line"></i> 摘要</h4>
|
|
<p>${escapeHtml(article.summary || '无')}</p>
|
|
</div>
|
|
<div class="detail-section">
|
|
<h4><i class="ri-align-left"></i> 内容</h4>
|
|
<div class="detail-content">${escapeHtml(article.content || '无内容')}</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('detail-modal').classList.add('active');
|
|
}
|
|
|
|
// 显示添加模态框
|
|
function showAddModal() {
|
|
currentArticleId = null;
|
|
document.getElementById('modal-title').innerHTML = '<i class="ri-file-add-line"></i> 添加文章';
|
|
document.getElementById('article-form').reset();
|
|
document.getElementById('article-modal').classList.add('active');
|
|
}
|
|
|
|
// 编辑文章
|
|
function editArticle(id) {
|
|
const article = articles.find(a => a.id === id);
|
|
if (!article) return;
|
|
|
|
currentArticleId = id;
|
|
document.getElementById('modal-title').innerHTML = '<i class="ri-edit-line"></i> 编辑文章';
|
|
|
|
const productNames = safeParseJSON(article.product_names, []);
|
|
const keywords = safeParseJSON(article.keywords, []);
|
|
|
|
document.getElementById('article-id').value = id;
|
|
document.getElementById('article-products').value = productNames.join(', ');
|
|
document.getElementById('article-category').value = article.category || '';
|
|
document.getElementById('article-keywords').value = keywords.join(', ');
|
|
document.getElementById('article-summary').value = article.summary || '';
|
|
document.getElementById('article-content').value = article.content || '';
|
|
document.getElementById('article-source').value = article.source || '';
|
|
document.getElementById('article-url').value = article.url || '';
|
|
|
|
document.getElementById('article-modal').classList.add('active');
|
|
}
|
|
|
|
// 编辑当前文章
|
|
function editCurrentArticle() {
|
|
if (currentArticleId) {
|
|
closeModal('detail-modal');
|
|
editArticle(currentArticleId);
|
|
}
|
|
}
|
|
|
|
// 保存文章
|
|
async function saveArticle() {
|
|
const id = document.getElementById('article-id').value;
|
|
const products = document.getElementById('article-products').value.trim();
|
|
const summary = document.getElementById('article-summary').value.trim();
|
|
const content = document.getElementById('article-content').value.trim();
|
|
const source = document.getElementById('article-source').value.trim();
|
|
|
|
if (!products || !summary || !content || !source) {
|
|
showToast('请填写必填字段', 'error');
|
|
return;
|
|
}
|
|
|
|
const articleData = {
|
|
product_names: products.split(',').map(p => p.trim()),
|
|
category: document.getElementById('article-category').value.trim(),
|
|
keywords: document.getElementById('article-keywords').value.split(',').map(k => k.trim()).filter(k => k),
|
|
summary: summary,
|
|
content: content,
|
|
source: source,
|
|
url: document.getElementById('article-url').value.trim()
|
|
};
|
|
|
|
try {
|
|
if (id) {
|
|
// 更新 - 先删除再添加
|
|
await fetch(`${API_BASE}/api/articles/${id}`, { method: 'DELETE' });
|
|
}
|
|
|
|
const response = await fetch(`${API_BASE}/api/articles`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(articleData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showToast(id ? '文章已更新' : '文章已添加', 'success');
|
|
closeModal('article-modal');
|
|
loadArticles();
|
|
} else {
|
|
showToast('保存失败: ' + data.error, 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('保存出错', 'error');
|
|
}
|
|
}
|
|
|
|
// 删除文章
|
|
async function deleteArticle(id) {
|
|
if (!confirm('确定要删除这篇文章吗？')) return;
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/articles/${id}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showToast('文章已删除', 'success');
|
|
loadArticles();
|
|
} else {
|
|
showToast('删除失败', 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast('删除出错', 'error');
|
|
}
|
|
}
|
|
|
|
// 删除当前文章
|
|
function deleteCurrentArticle() {
|
|
if (currentArticleId) {
|
|
deleteArticle(currentArticleId);
|
|
closeModal('detail-modal');
|
|
}
|
|
}
|
|
|
|
// 批量删除
|
|
async function batchDelete() {
|
|
if (selectedIds.size === 0) return;
|
|
|
|
if (!confirm(`确定要删除选中的 ${selectedIds.size} 篇文章吗？`)) return;
|
|
|
|
let deleted = 0;
|
|
for (const id of selectedIds) {
|
|
try {
|
|
await fetch(`${API_BASE}/api/articles/${id}`, { method: 'DELETE' });
|
|
deleted++;
|
|
} catch (error) {
|
|
console.error(`删除 ${id} 失败:`, error);
|
|
}
|
|
}
|
|
|
|
selectedIds.clear();
|
|
showToast(`已删除 ${deleted} 篇文章`, 'success');
|
|
loadArticles();
|
|
}
|
|
|
|
// 导出文章
|
|
async function exportArticles() {
|
|
const keyword = document.getElementById('search-input').value.trim();
|
|
const category = document.getElementById('category-filter').value;
|
|
|
|
let exportArticles = articles;
|
|
|
|
// 如果有搜索条件，获取全部匹配的
|
|
if (keyword || category) {
|
|
const params = new URLSearchParams();
|
|
if (keyword) params.append('q', keyword);
|
|
if (category) params.append('category', category);
|
|
|
|
const response = await fetch(`${API_BASE}/api/articles/search?${params.toString()}`);
|
|
const data = await response.json();
|
|
if (data.success) {
|
|
exportArticles = data.articles;
|
|
}
|
|
}
|
|
|
|
if (exportArticles.length === 0) {
|
|
showToast('没有可导出的文章', 'error');
|
|
return;
|
|
}
|
|
|
|
// 导出为 JSON
|
|
const exportData = exportArticles.map(a => ({
|
|
product_names: safeParseJSON(a.product_names, []),
|
|
category: a.category,
|
|
keywords: safeParseJSON(a.keywords, []),
|
|
summary: a.summary,
|
|
content: a.content,
|
|
source: a.source,
|
|
url: a.url
|
|
}));
|
|
|
|
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `articles_${new Date().toISOString().split('T')[0]}.json`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
|
|
showToast(`已导出 ${exportArticles.length} 篇文章`, 'success');
|
|
}
|
|
|
|
// 关闭模态框
|
|
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;
|
|
}
|
|
|
|
// 安全解析JSON
|
|
function safeParseJSON(str, defaultVal) {
|
|
try {
|
|
return JSON.parse(str || JSON.stringify(defaultVal));
|
|
} catch {
|
|
return defaultVal;
|
|
}
|
|
}
|
|
|
|
// 日期格式化
|
|
function formatDate(dateString) {
|
|
if (!dateString) return '-';
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
} |