优化内容库分页

- 默认每页20条 - 列表上部也添加分页控件，方便翻页
修复内容库分页：返回总数而非当前页数量
2026-07-14 00:54:14 +08:00 · 2026-07-14 00:50:11 +08:00 · 2026-07-14 00:40:40 +08:00 · 2026-07-14 00:37:41 +08:00 · 2026-07-14 00:16:25 +08:00 · 2026-07-14 00:09:59 +08:00
5 changed files with 107 additions and 14 deletions
@@ -198,6 +198,14 @@ class Database:
            cursor.execute('DELETE FROM articles WHERE id = ?', (article_id,))
            conn.commit()
            return cursor.rowcount > 0
+    
+    def get_articles_count(self):
+        """获取文章总数"""
+        with self.get_connection() as conn:
+            cursor = conn.cursor()
+            cursor.execute('SELECT COUNT(*) as count FROM articles')
+            row = cursor.fetchone()
+            return row['count'] if row else 0

 # ========== 待处理产品操作 ==========
    def add_pending_product(self, product_name, category=None, subcategory=None, priority=0, source='manual'):
@@ -14,6 +14,7 @@ def list_articles():
    offset = request.args.get('offset', 0, type=int)
    
    articles = db.get_all_articles(limit=limit, offset=offset)
+    total_count = db.get_articles_count()  # 获取总数
    
    # 解析JSON字段
    for article in articles:
@@ -23,7 +24,7 @@ def list_articles():
    return jsonify({
        'success': True,
        'articles': articles,
-        'count': len(articles)
+        'count': total_count  # 返回总数
    })

@bp.route('/search', methods=['GET'])
@@ -31,11 +32,20 @@ def search_articles():
    """搜索文章"""
    keyword = request.args.get('q', '')
    category = request.args.get('category')
+    limit = request.args.get('limit', type=int)
+    offset = request.args.get('offset', 0, type=int)
    
    if not keyword:
        return jsonify({'error': '请提供搜索关键词'}), 400
    
-    articles = db.search_articles(keyword, category)
+    all_articles = db.search_articles(keyword, category)
+    total_count = len(all_articles)
+    
+    # 分页截取
+    if limit:
+        articles = all_articles[offset:offset + limit]
+    else:
+        articles = all_articles
    
    # 解析JSON字段
    for article in articles:
@@ -45,7 +55,7 @@ def search_articles():
    return jsonify({
        'success': True,
        'articles': articles,
-        'count': len(articles)
+        'count': total_count  # 返回总数，用于分页
    })

@bp.route('/<int:article_id>', methods=['GET'])
@@ -102,6 +102,15 @@
    cursor: pointer;
 }

+.page-size-select {
+    padding: 10px 15px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    font-size: 14px;
+    background: white;
+    cursor: pointer;
+}
+
 .toolbar-right {
    display: flex;
    gap: 10px;
@@ -241,6 +250,32 @@
    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;
+}
+
+/* 上部分页 */
+.pagination-top {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: auto;
+}
+
+.pagination-top span {
+    font-size: 14px;
+    color: #666;
+}
+
 .article-summary {
    font-size: 14px;
    color: #666;
@@ -4,7 +4,7 @@ const API_BASE = '';
 // 状态
 let articles = [];
 let currentPage = 1;
-let pageSize = 20;
+let pageSize = 20;  // 默认每页20条
 let totalCount = 0;
 let selectedIds = new Set();
 let currentArticleId = null;
@@ -31,6 +31,13 @@ document.addEventListener('DOMContentLoaded', () => {
    });
 });

+// 改变每页数量
+function changePageSize() {
+    pageSize = parseInt(document.getElementById('page-size').value);
+    currentPage = 1;
+    loadArticles();
+}
+
 // 加载文章列表
 async function loadArticles() {
    const keyword = document.getElementById('search-input').value.trim();
@@ -42,7 +49,12 @@ async function loadArticles() {
    });
    
    if (keyword) {
-        const response = await fetch(`${API_BASE}/api/articles/search?q=${encodeURIComponent(keyword)}${category ? '&category=' + encodeURIComponent(category) : ''}`);
+        // 搜索时也传递 limit 和 offset 参数
+        let searchUrl = `${API_BASE}/api/articles/search?q=${encodeURIComponent(keyword)}`;
+        if (category) searchUrl += `&category=${encodeURIComponent(category)}`;
+        searchUrl += `&limit=${pageSize}&offset=${(currentPage - 1) * pageSize}`;
+        
+        const response = await fetch(searchUrl);
        const data = await response.json();
        
        if (data.success) {
@@ -98,6 +110,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 +122,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 +133,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">
@@ -142,8 +157,14 @@ function displayArticles() {
 // 更新分页
 function updatePagination() {
    const totalPages = Math.ceil(totalCount / pageSize);
-    document.getElementById('page-info').textContent = `第 ${currentPage} / ${totalPages || 1} 页`;
    
+    // 更新上部分页
+    document.getElementById('page-info-top').textContent = `第 ${currentPage} / ${totalPages || 1} 页`;
+    document.getElementById('prev-btn-top').disabled = currentPage <= 1;
+    document.getElementById('next-btn-top').disabled = currentPage >= totalPages;
+    
+    // 更新下部分页
+    document.getElementById('page-info').textContent = `第 ${currentPage} / ${totalPages || 1} 页`;
    document.getElementById('prev-btn').disabled = currentPage <= 1;
    document.getElementById('next-btn').disabled = currentPage >= totalPages;
 }
@@ -230,16 +251,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>
@@ -35,6 +35,13 @@
                <select id="category-filter" class="category-select">
                    <option value="">全部分类</option>
                </select>
+                <select id="page-size" class="page-size-select" onchange="changePageSize()">
+                    <option value="20" selected>每页 20 条</option>
+                    <option value="50">每页 50 条</option>
+                    <option value="100">每页 100 条</option>
+                    <option value="200">每页 200 条</option>
+                    <option value="500">每页 500 条</option>
+                </select>
            </div>
            <div class="toolbar-right">
                <button onclick="showAddModal()" class="btn btn-primary">
@@ -62,6 +69,12 @@
                        <i class="ri-delete-bin-line"></i> 批量删除
                    </button>
                </div>
+                <!-- 上部分页 -->
+                <div class="pagination-top" id="pagination-top">
+                    <button onclick="prevPage()" class="btn btn-secondary btn-sm" id="prev-btn-top">上一页</button>
+                    <span id="page-info-top">第 1 页</span>
+                    <button onclick="nextPage()" class="btn btn-secondary btn-sm" id="next-btn-top">下一页</button>
+                </div>
            </div>
            <div class="articles-body">
                <div id="articles-list" class="articles-list">
Author	SHA1	Message	Date
hz4th_coder	6dabc4d0b7	优化内容库分页 - 默认每页20条 - 列表上部也添加分页控件，方便翻页	2026-07-14 00:54:14 +08:00
hz4th_coder	981b3c9c5c	修复内容库分页：返回总数而非当前页数量 - 新增 get_articles_count 函数获取总数 - 列表API返回总数用于分页计算	2026-07-14 00:50:11 +08:00
hz4th_coder	127654a558	修复搜索分页功能 - 后端搜索API支持offset参数，返回总数用于分页 - 前端传递offset参数实现正确分页	2026-07-14 00:40:40 +08:00
hz4th_coder	322ca28cb4	修复每页数量选择功能 - 前端搜索时传递limit参数 - 后端搜索API支持limit参数	2026-07-14 00:37:41 +08:00
hz4th_coder	1a2d6ada88	新增内容库每页数量选择功能 - 添加每页数量选择下拉框（20/50/100/200/500条） - 默认100条，用户可自由选择	2026-07-14 00:16:25 +08:00
hz4th_coder	00609980a8	优化内容库页面显示 1. 增加每页显示数量从20到100 2. 标题优先显示搜索标题，其次网页标题，最后来源 3. 详情页展示所有信息：搜索标题、网页标题、分类、来源、时间、链接、关键词、摘要、内容	2026-07-14 00:09:59 +08:00