diff --git a/src/components/ui/pagination.tsx b/src/components/ui/pagination.tsx
index bb596fb..ab3f84d 100644
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@@ -40,6 +40,21 @@ function Pagination({
const [currentPage, setCurrentPage] = useState(page)
const totalPages = Math.ceil(total / size)
+ // 移动端检测:小屏幕减少页码按钮数量,避免溢出
+ const [isMobile, setIsMobile] = useState(
+ () =>
+ typeof window !== "undefined" &&
+ window.matchMedia("(max-width: 640px)").matches,
+ )
+
+ useEffect(() => {
+ const mql = window.matchMedia("(max-width: 640px)")
+ const handleChange = () => setIsMobile(mql.matches)
+ handleChange()
+ mql.addEventListener("change", handleChange)
+ return () => mql.removeEventListener("change", handleChange)
+ }, [])
+
// 同步外部 page 变化
useEffect(() => {
setCurrentPage(page)
@@ -47,12 +62,13 @@ function Pagination({
// 分页器逻辑
const generatePaginationItems = () => {
- // 最多显示7个页码,其余用省略号
- const SIBLINGS = 1 // 当前页左右各显示的页码数
+ // 桌面端最多显示7个页码,移动端最多显示5个,其余用省略号
+ const SIBLINGS = isMobile ? 0 : 1 // 当前页左右各显示的页码数
+ const MAX_VISIBLE = isMobile ? 5 : 7
const DOTS = -1 // 省略号标记
- if (totalPages <= 7) {
- // 总页数少于7,全部显示
+ if (totalPages <= MAX_VISIBLE) {
+ // 总页数较少,全部显示
return Array.from({ length: totalPages }, (_, i) => i + 1)
}
@@ -121,8 +137,13 @@ function Pagination({
const paginationItems = generatePaginationItems()
return (
-
-
+
+
共 {total} 条记录,每页