分页逻辑优化

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "渠道应用开发部知识库",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "description": "通过关键词快速搜索内部文档",
   "permissions": ["storage"],
   "host_permissions": [

readme.md

@@ -16,4 +16,5 @@
 | 2025.06.22 | V2.0.10 | Luke.Ye | 搜索结果页分页展示优化                  |
 | 2025.06.23 | V2.0.11 | Luke.Ye | 准备做llm接口迁移                   |
 | 2025.06.24 | V2.0.12 | Luke.Ye | 添加测试页面                       |
+| 2025.06.28 | V2.0.13 | Luke.Ye | 优化分页展示                       |
 

scripts/popup.js

@@ -118,50 +118,87 @@ document.addEventListener("DOMContentLoaded", async () => {
         const pagination = document.createElement("div");
         pagination.className = "pagination";
 
-        // 上一页按钮（始终显示）
+        // 首页按钮
+        const first = document.createElement("button");
+        first.textContent = "« 首页";
+        first.disabled = currentPage === 1;
+        if (currentPage !== 1) first.onclick = () => fetchResults(lastKeywords, 1);
+        pagination.appendChild(first);
+
+        // 上一页按钮
         const prev = document.createElement("button");
-        prev.textContent = "上一页";
-        if (currentPage > 1) {
-            prev.onclick = () => fetchResults(lastKeywords, currentPage - 1);
-        } else {
-            prev.disabled = true;
-        }
+        prev.textContent = "‹ 上一页";
+        prev.disabled = currentPage === 1;
+        if (currentPage !== 1) prev.onclick = () => fetchResults(lastKeywords, currentPage - 1);
         pagination.appendChild(prev);
 
-        // 显示页码：前后最多各2个，加当前页（共5个）
-        const maxPages = 5;
-        let start = Math.max(1, currentPage - 2);
-        let end = Math.min(totalPages, start + maxPages - 1);
-        if (end - start < maxPages - 1) {
-            start = Math.max(1, end - maxPages + 1);
+        // 计算滑动窗口
+        let startPage, endPage;
+        if (totalPages <= 5) {
+            startPage = 1;
+            endPage = totalPages;
+        } else {
+            if (currentPage <= 3) {
+                startPage = 1;
+                endPage = 5;
+            } else if (currentPage >= totalPages - 2) {
+                startPage = totalPages - 4;
+                endPage = totalPages;
+            } else {
+                startPage = currentPage - 2;
+                endPage = currentPage + 2;
+            }
         }
 
-        for (let i = start; i <= end; i++) {
+        // 左侧省略号
+        if (startPage > 1) {
+            const dot = document.createElement("span");
+            dot.className = "ellipsis";
+            dot.textContent = "...";
+            pagination.appendChild(dot);
+        }
+
+        // 滑动窗口页码
+        for (let i = startPage; i <= endPage; i++) {
             const pageBtn = document.createElement("button");
             pageBtn.textContent = i;
             if (i === currentPage) {
                 pageBtn.className = "active-page";
+                pageBtn.disabled = true;
             } else {
                 pageBtn.onclick = () => fetchResults(lastKeywords, i);
             }
             pagination.appendChild(pageBtn);
         }
 
-        // 下一页按钮（始终显示）
-        const next = document.createElement("button");
-        next.textContent = "下一页";
-        if (currentPage < totalPages) {
-            next.onclick = () => fetchResults(lastKeywords, currentPage + 1);
-        } else {
-            next.disabled = true;
+        // 右侧省略号
+        if (endPage < totalPages) {
+            const dot = document.createElement("span");
+            dot.className = "ellipsis";
+            dot.textContent = "...";
+            pagination.appendChild(dot);
         }
+
+        // 下一页按钮
+        const next = document.createElement("button");
+        next.textContent = "下一页 ›";
+        next.disabled = currentPage === totalPages;
+        if (currentPage !== totalPages) next.onclick = () => fetchResults(lastKeywords, currentPage + 1);
         pagination.appendChild(next);
 
+        // 末页按钮
+        const last = document.createElement("button");
+        last.textContent = "末页 »";
+        last.disabled = currentPage === totalPages;
+        if (currentPage !== totalPages) last.onclick = () => fetchResults(lastKeywords, totalPages);
+        pagination.appendChild(last);
+
         resultBox.appendChild(pagination);
     }
 
 
 
+
     async function fetchResults(rawInput, page) {
         currentPage = page;
         lastKeywords = rawInput;

styles/styles-es.css

@@ -32,25 +32,50 @@
 }
 
 .pagination {
-    margin-top: 15px;
     display: flex;
+    align-items: center;
+    gap: 2px;
     justify-content: center;
-    gap: 10px;
+    margin: 18px 0 0 0;
+    padding: 8px;
+    border-radius: 8px;
+    background: #f8fafb;
+    border: 1px solid #e5e7eb;
 }
 
-.pagination button {
-    padding: 6px 12px;
-    font-size: 13px;
-    background-color: #eee;
-    border: 1px solid #ccc;
-    border-radius: 3px;
+.pagination button,
+.pagination .ellipsis {
+    min-width: 36px;
+    height: 32px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
     cursor: pointer;
+    font-size: 15px;
+    margin: 0 1px;
+    color: #374151;
+    transition: background 0.2s;
 }
 
-.pagination button:hover {
-    background-color: #ddd;
+.pagination .ellipsis {
+    cursor: default;
+    color: #bdbdbd;
 }
 
+.pagination button.active-page {
+    background: #e5eaf3;
+    color: #1976d2;
+    font-weight: bold;
+    cursor: default;
+}
+
+.pagination button:disabled {
+    background: #f3f3f3;
+    color: #aaa;
+    cursor: not-allowed;
+}
+
+
 #clearHistoryBtn {
     background: #f8f8f8;
     border: 1px solid #ccc;