From 51198f4c43b99e3d2996a585d9653b689cd4fd29 Mon Sep 17 00:00:00 2001 From: luke Date: Sat, 28 Jun 2025 10:06:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=80=BB=E8=BE=91=E4=BC=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 2 +- readme.md | 1 + scripts/popup.js | 79 ++++++++++++++++++++++++++++++++------------ styles/styles-es.css | 45 +++++++++++++++++++------ 4 files changed, 95 insertions(+), 32 deletions(-) diff --git a/manifest.json b/manifest.json index de79670..05255d5 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "渠道应用开发部知识库", - "version": "2.0.12", + "version": "2.0.13", "description": "通过关键词快速搜索内部文档", "permissions": ["storage"], "host_permissions": [ diff --git a/readme.md b/readme.md index a30447c..15bfa5f 100644 --- a/readme.md +++ b/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 | 优化分页展示 | diff --git a/scripts/popup.js b/scripts/popup.js index c577135..04c9dc4 100644 --- a/scripts/popup.js +++ b/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; diff --git a/styles/styles-es.css b/styles/styles-es.css index 49ed545..6a1fa73 100644 --- a/styles/styles-es.css +++ b/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;