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} 条记录,每页 - + 暂无可用优惠券 - - 淘宝每次下单获得优惠券 - + 淘宝每次下单获得优惠券
) } @@ -178,8 +176,8 @@ function CouponSelector() { // ============ 批量注册说明 ============ function BatchInfo() { return ( -
-