新增独立内容库页面
- 创建 /library 内容库独立页面 - 支持文章列表展示、搜索、分类筛选 - 支持查看详情、编辑、删除 - 支持批量选择和批量删除 - 支持导出为 JSON 文件 - 分页显示 - 主页内容库区域改为入口链接
This commit is contained in:
@@ -0,0 +1,327 @@
|
||||
/* 内容库页面专用样式 */
|
||||
|
||||
.library-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
.library-header {
|
||||
background: white;
|
||||
padding: 20px 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.library-header h1 {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.toolbar {
|
||||
background: white;
|
||||
padding: 15px 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
padding: 10px 15px 10px 35px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.category-select {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 文章列表区域 */
|
||||
.articles-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.articles-header {
|
||||
padding: 15px 20px;
|
||||
background: #f8f9fa;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.checkbox-wrapper input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#selected-count {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.articles-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.articles-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* 文章卡片 */
|
||||
.article-card {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.article-card:hover {
|
||||
border-color: #667eea;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.article-card.selected {
|
||||
border-color: #667eea;
|
||||
background: #f0f4ff;
|
||||
}
|
||||
|
||||
.article-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.article-select {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.article-title:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.article-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.article-meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.article-category {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.article-summary {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.article-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.article-tag {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 分页 */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#page-info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-text {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
/* 详情模态框 */
|
||||
#detail-body .detail-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#detail-body .detail-section h4 {
|
||||
color: #667eea;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#detail-body .detail-content {
|
||||
white-space: pre-wrap;
|
||||
background: #f8f9fa;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 768px) {
|
||||
.toolbar {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.toolbar-left, .toolbar-right {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.article-card-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.article-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -768,4 +768,37 @@ body {
|
||||
.search-entrance-link small {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 内容库入口链接 */
|
||||
.library-entrance-link {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 40px 80px;
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.library-entrance-link:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
.library-entrance-link i {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.library-entrance-link span {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.library-entrance-link small {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
// 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>
|
||||
<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'
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user