应用 eslint 规则

src/components/ui/pagination.tsx

@@ -1,6 +1,6 @@
 'use client'
 import * as React from 'react'
-import {useState, useEffect} from 'react'
+import { useState, useEffect } from 'react'
 
 import {
   ChevronLeftIcon,
@@ -8,7 +8,7 @@ import {
   MoreHorizontalIcon,
 } from 'lucide-react'
 
-import {cn} from '@/lib/utils'
+import { cn } from '@/lib/utils'
 
 import {
   Select,
@@ -53,7 +53,7 @@ function Pagination({
 
     if (totalPages <= 7) {
       // 总页数少于7，全部显示
-      return Array.from({length: totalPages}, (_, i) => i + 1)
+      return Array.from({ length: totalPages }, (_, i) => i + 1)
     }
 
     // 是否需要显示左边的省略号
@@ -68,20 +68,20 @@ function Pagination({
       const rightSiblingIndex = Math.min(currentPage + SIBLINGS, totalPages)
 
       return [1, DOTS, ...Array.from(
-        {length: rightSiblingIndex - leftSiblingIndex + 1},
+        { length: rightSiblingIndex - leftSiblingIndex + 1 },
         (_, i) => leftSiblingIndex + i,
       ), DOTS, totalPages]
     }
 
     if (!showLeftDots && showRightDots) {
       // 只有右边有省略号
-      return [...Array.from({length: 3 + SIBLINGS * 2}, (_, i) => i + 1), DOTS, totalPages]
+      return [...Array.from({ length: 3 + SIBLINGS * 2 }, (_, i) => i + 1), DOTS, totalPages]
     }
 
     if (showLeftDots && !showRightDots) {
       // 只有左边有省略号
       return [1, DOTS, ...Array.from(
-        {length: 3 + SIBLINGS * 2},
+        { length: 3 + SIBLINGS * 2 },
         (_, i) => totalPages - (3 + SIBLINGS * 2) + i + 1,
       )]
     }
@@ -119,7 +119,7 @@ function Pagination({
           onValueChange={handlePageSizeChange}
         >
           <SelectTrigger className="h-8 w-20">
-            <SelectValue/>
+            <SelectValue />
           </SelectTrigger>
           <SelectContent>
             {sizeOptions.map(option => (
@@ -146,7 +146,7 @@ function Pagination({
             if (pageNum === -1) {
               return (
                 <PaginationItem key={`dots-${index}`}>
-                  <PaginationEllipsis/>
+                  <PaginationEllipsis />
                 </PaginationItem>
               )
             }
@@ -176,7 +176,7 @@ function Pagination({
   )
 }
 
-function PaginationLayout({className, ...props}: React.ComponentProps<'nav'>) {
+function PaginationLayout({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
       role="navigation"
@@ -201,8 +201,8 @@ function PaginationContent({
   )
 }
 
-function PaginationItem({...props}: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props}/>
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
+  return <li data-slot="pagination-item" {...props} />
 }
 
 type PaginationLinkProps = {
@@ -240,7 +240,7 @@ function PaginationPrevious({
       className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
       {...props}
     >
-      <ChevronLeftIcon/>
+      <ChevronLeftIcon />
     </PaginationLink>
   )
 }
@@ -255,7 +255,7 @@ function PaginationNext({
       className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
       {...props}
     >
-      <ChevronRightIcon/>
+      <ChevronRightIcon />
     </PaginationLink>
   )
 }
@@ -271,7 +271,7 @@ function PaginationEllipsis({
       className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
-      <MoreHorizontalIcon className="size-4"/>
+      <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
   )