优化内容库页面显示
1. 增加每页显示数量从20到100 2. 标题优先显示搜索标题,其次网页标题,最后来源 3. 详情页展示所有信息:搜索标题、网页标题、分类、来源、时间、链接、关键词、摘要、内容
This commit is contained in:
@@ -241,6 +241,19 @@
|
|||||||
color: #667eea;
|
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 {
|
.article-summary {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
|
|||||||
+18
-9
@@ -4,7 +4,7 @@ const API_BASE = '';
|
|||||||
// 状态
|
// 状态
|
||||||
let articles = [];
|
let articles = [];
|
||||||
let currentPage = 1;
|
let currentPage = 1;
|
||||||
let pageSize = 20;
|
let pageSize = 100; // 增加每页数量
|
||||||
let totalCount = 0;
|
let totalCount = 0;
|
||||||
let selectedIds = new Set();
|
let selectedIds = new Set();
|
||||||
let currentArticleId = null;
|
let currentArticleId = null;
|
||||||
@@ -98,6 +98,9 @@ function displayArticles() {
|
|||||||
const productNames = safeParseJSON(article.product_names, []);
|
const productNames = safeParseJSON(article.product_names, []);
|
||||||
const keywords = safeParseJSON(article.keywords, []);
|
const keywords = safeParseJSON(article.keywords, []);
|
||||||
|
|
||||||
|
// 确定显示标题:优先 search_title,其次 product_names,最后来源
|
||||||
|
const displayTitle = article.search_title || productNames.join(', ') || article.source || '未命名';
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<div class="article-card ${selectedIds.has(article.id) ? 'selected' : ''}" id="article-${article.id}">
|
<div class="article-card ${selectedIds.has(article.id) ? 'selected' : ''}" id="article-${article.id}">
|
||||||
<div class="article-card-header">
|
<div class="article-card-header">
|
||||||
@@ -107,7 +110,7 @@ function displayArticles() {
|
|||||||
onchange="toggleSelect(${article.id})">
|
onchange="toggleSelect(${article.id})">
|
||||||
</label>
|
</label>
|
||||||
<div class="article-title" onclick="showDetail(${article.id})">
|
<div class="article-title" onclick="showDetail(${article.id})">
|
||||||
${escapeHtml(productNames.join(', ') || '未命名')}
|
${escapeHtml(displayTitle)}
|
||||||
</div>
|
</div>
|
||||||
<div class="article-actions">
|
<div class="article-actions">
|
||||||
<button onclick="editArticle(${article.id})" class="btn btn-sm btn-secondary">
|
<button onclick="editArticle(${article.id})" class="btn btn-sm btn-secondary">
|
||||||
@@ -118,9 +121,9 @@ function displayArticles() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${article.search_title && article.search_title !== productNames.join(', ') ? `
|
${article.search_title && productNames.length > 0 && article.search_title !== productNames.join(', ') ? `
|
||||||
<div class="article-search-title">
|
<div class="article-page-title">
|
||||||
<i class="ri-search-line"></i> 搜索标题: ${escapeHtml(article.search_title)}
|
<i class="ri-article-line"></i> 网页标题: ${escapeHtml(productNames.join(', '))}
|
||||||
</div>
|
</div>
|
||||||
` : ''}
|
` : ''}
|
||||||
<div class="article-meta">
|
<div class="article-meta">
|
||||||
@@ -230,16 +233,22 @@ async function showDetail(id) {
|
|||||||
|
|
||||||
const body = document.getElementById('detail-body');
|
const body = document.getElementById('detail-body');
|
||||||
body.innerHTML = `
|
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">
|
<div class="detail-section">
|
||||||
<h4><i class="ri-price-tag-3-line"></i> 产品名称</h4>
|
<h4><i class="ri-article-line"></i> 网页标题(产品名称)</h4>
|
||||||
<p>${escapeHtml(productNames.join(', '))}</p>
|
<p>${escapeHtml(productNames.join(', ') || '无')}</p>
|
||||||
</div>
|
</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.category || '未分类')}</div>
|
||||||
<div><strong>来源:</strong> ${escapeHtml(article.source)}</div>
|
<div><strong>来源:</strong> ${escapeHtml(article.source)}</div>
|
||||||
<div><strong>时间:</strong> ${formatDate(article.fetch_date)}</div>
|
<div><strong>时间:</strong> ${formatDate(article.fetch_date)}</div>
|
||||||
</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>` : ''}
|
${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">
|
<div class="detail-section">
|
||||||
<h4><i class="ri-file-text-line"></i> 摘要</h4>
|
<h4><i class="ri-file-text-line"></i> 摘要</h4>
|
||||||
|
|||||||
Reference in New Issue
Block a user