IP线路表 & 软件下载 页面手机端适配

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 (
-    <div className={`flex flex-wrap items-center gap-4 ${className || ""}`}>
-      <div className="flex-none flex items-center gap-2 text-sm text-muted-foreground">
+    <div
+      className={cn(
+        "flex flex-wrap items-center justify-center gap-2 md:justify-start md:gap-4",
+        className,
+      )}
+    >
+      <div className="flex-none flex items-center gap-2 text-xs sm:text-sm text-muted-foreground">
         共 {total} 条记录，每页
         <Select value={size.toString()} onValueChange={handlePageSizeChange}>
           <SelectTrigger className="h-8 w-20">
@@ -209,7 +230,10 @@ function PaginationContent({
   return (
     <ul
       data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
+      className={cn(
+        "flex flex-row flex-wrap items-center justify-center gap-1",
+        className,
+      )}
       {...props}
     />
   )
@@ -234,7 +258,7 @@ function PaginationLink({
       data-slot="pagination-link"
       data-active={isActive}
       className={cn(
-        "inline-flex items-center justify-center text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-9 w-9 rounded-md border border-input hover:bg-secondary hover:text-secondary-foreground",
+        "inline-flex items-center justify-center text-xs sm:text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-8 w-8 sm:h-9 sm:w-9 rounded-md border border-input hover:bg-secondary hover:text-secondary-foreground",
         `bg-card`,
         isActive &&
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground",
@@ -283,7 +307,10 @@ function PaginationEllipsis({
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
+      className={cn(
+        "flex size-8 sm:size-9 items-center justify-center",
+        className,
+      )}
       {...props}
     >
       <MoreHorizontalIcon className="size-4" />