优化内容库页面显示

1. 增加每页显示数量从20到100
2. 标题优先显示搜索标题,其次网页标题,最后来源
3. 详情页展示所有信息:搜索标题、网页标题、分类、来源、时间、链接、关键词、摘要、内容
This commit is contained in:
2026-07-14 00:09:59 +08:00
parent 76e24c4fa3
commit 00609980a8
2 changed files with 31 additions and 9 deletions
+13
View File
@@ -241,6 +241,19 @@
color: #667eea;
}
.article-page-title {
font-size: 13px;
color: #666;
margin-bottom: 10px;
padding: 4px 8px;
background: #e8f5e9;
border-radius: 4px;
}
.article-page-title i {
color: #4caf50;
}
.article-summary {
font-size: 14px;
color: #666;
+18 -9
View File
@@ -4,7 +4,7 @@ const API_BASE = '';
// 状态
let articles = [];
let currentPage = 1;
let pageSize = 20;
let pageSize = 100; // 增加每页数量
let totalCount = 0;
let selectedIds = new Set();
let currentArticleId = null;
@@ -98,6 +98,9 @@ function displayArticles() {
const productNames = safeParseJSON(article.product_names, []);
const keywords = safeParseJSON(article.keywords, []);
// 确定显示标题:优先 search_title,其次 product_names,最后来源
const displayTitle = article.search_title || productNames.join(', ') || article.source || '未命名';
return `
<div class="article-card ${selectedIds.has(article.id) ? 'selected' : ''}" id="article-${article.id}">
<div class="article-card-header">
@@ -107,7 +110,7 @@ function displayArticles() {
onchange="toggleSelect(${article.id})">
</label>
<div class="article-title" onclick="showDetail(${article.id})">
${escapeHtml(productNames.join(', ') || '未命名')}
${escapeHtml(displayTitle)}
</div>
<div class="article-actions">
<button onclick="editArticle(${article.id})" class="btn btn-sm btn-secondary">
@@ -118,9 +121,9 @@ function displayArticles() {
</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)}
${article.search_title && productNames.length > 0 && article.search_title !== productNames.join(', ') ? `
<div class="article-page-title">
<i class="ri-article-line"></i> 网页标题: ${escapeHtml(productNames.join(', '))}
</div>
` : ''}
<div class="article-meta">
@@ -230,16 +233,22 @@ async function showDetail(id) {
const body = document.getElementById('detail-body');
body.innerHTML = `
${article.search_title ? `
<div class="detail-section">
<h4><i class="ri-search-line"></i> 搜索标题</h4>
<p style="color: #667eea; font-weight: 500;">${escapeHtml(article.search_title)}</p>
</div>
` : ''}
<div class="detail-section">
<h4><i class="ri-price-tag-3-line"></i> 产品名称</h4>
<p>${escapeHtml(productNames.join(', '))}</p>
<h4><i class="ri-article-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 class="detail-meta" style="display: flex; gap: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; flex-wrap: wrap;">
<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>` : ''}
${article.url ? `<div class="detail-section"><h4><i class="ri-link"></i> 原文链接</h4><a href="${escapeHtml(article.url)}" target="_blank" style="color: #667eea;">${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>