优化首页统计显示：加载前显示-而非0

- 默认每页20条
- 列表上部也添加分页控件，方便翻页

models/database.py

@@ -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'):

routes/articles.py

@@ -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'])

static/css/library.css

@@ -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;
@@ -254,6 +263,19 @@
     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;

static/js/library.js

@@ -4,7 +4,7 @@ const API_BASE = '';
 // 状态
 let articles = [];
 let currentPage = 1;
-let pageSize = 100;  // 增加每页数量
+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) {
@@ -145,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;
 }

templates/index.html

@@ -108,15 +108,15 @@
                 <div class="panel-body">
                     <div class="quick-stats">
                         <div class="quick-stat-item">
-                            <span class="quick-stat-value" id="quick-articles-count">0</span>
+                            <span class="quick-stat-value" id="quick-articles-count">-</span>
                             <span class="quick-stat-label">篇文章</span>
                         </div>
                         <div class="quick-stat-item">
-                            <span class="quick-stat-value" id="quick-categories-count">0</span>
+                            <span class="quick-stat-value" id="quick-categories-count">-</span>
                             <span class="quick-stat-label">个分类</span>
                         </div>
                         <div class="quick-stat-item">
-                            <span class="quick-stat-value" id="quick-today-count">0</span>
+                            <span class="quick-stat-value" id="quick-today-count">-</span>
                             <span class="quick-stat-label">今日新增</span>
                         </div>
                     </div>
@@ -133,7 +133,7 @@
                 <div class="panel-body">
                     <div class="quick-stats">
                         <div class="quick-stat-item">
-                            <span class="quick-stat-value" id="quick-failed-count">0</span>
+                            <span class="quick-stat-value" id="quick-failed-count">-</span>
                             <span class="quick-stat-label">抓取失败</span>
                         </div>
                         <div class="quick-stat-item">

templates/library.html

@@ -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">