更新样式匹配新设计方案

src/app/admin/extract/page.tsx

@@ -5,7 +5,7 @@ export type ExtractPageProps = {}
 
 export default async function ExtractPage(props: ExtractPageProps) {
   return (
-    <Page className={`p-0`}>
+    <Page>
       <Extract className={`p-8`}/>
     </Page>
   )

src/app/admin/resources/page.tsx

@@ -312,9 +312,6 @@ export default function ResourcesPage(props: ResourcesPageProps) {
             ),
           },
         ]}
-        classNames={{
-          dataRow: `h-14`,
-        }}
       />
     </Page>
   )

src/app/admin/whitelist/page.tsx

@@ -24,6 +24,7 @@ import {
 import {Pagination} from '@/components/ui/pagination'
 import {Checkbox} from '@/components/ui/checkbox'
 import Page from '@/components/page'
+import DataTable from '@/components/data-table'
 
 const schema = z.object({
   host: z.string().min(1, {message: 'IP地址不能为空'}),
@@ -72,17 +73,6 @@ export default function WhitelistPage(props: WhitelistPageProps) {
     }
   }
 
-
-  // 处理分页
-  const changePage = (newPage: number) => {
-    refresh(newPage, data.size).then()
-  }
-
-  // 处理每页数量变化
-  const changeSize = (newSize: number) => {
-    refresh(1, newSize).then()
-  }
-
   // ======================
   // 弹窗
   // ======================
@@ -254,80 +244,49 @@ export default function WhitelistPage(props: WhitelistPageProps) {
       </section>
 
       {/* 数据表 */}
-      <div className="rounded-md border overflow-hidden">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className={`w-12 text-center px-0`}>
-                <Checkbox checked={selection.size === data.list.length} onClick={() => toggleSelectAll()}/>
-              </TableHead>
-              <TableHead>IP</TableHead>
-              <TableHead>添加时间</TableHead>
-              <TableHead>备注</TableHead>
-              <TableHead>操作</TableHead>
-            </TableRow>
-          </TableHeader>
-
-          <TableBody>
-            {wait && data.list.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={5} className="h-24 text-center">
-                  <Loader2 className="w-6 h-6 animate-spin mx-auto"/>
-                </TableCell>
-              </TableRow>
-            ) : data.list.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={5} className="h-24 text-center">
-                  暂无数据
-                </TableCell>
-              </TableRow>
-            ) : (
-              data.list.map(item => (
-                <TableRow key={item.id}>
-                  <TableCell className={`w-12 text-center px-0`}>
-                    <Checkbox checked={selection.has(item.id)} onClick={() => toggleSelect(item.id)}/>
-                  </TableCell>
-                  <TableCell className="font-medium">{item.host}</TableCell>
-                  <TableCell>{item.createdAt}</TableCell>
-                  <TableCell>{item.remark || '无'}</TableCell>
-                  <TableCell className="text-right">
-                    <div className="flex justify-end gap-2">
-                      <Button
-                        className={`h-9 w-9`}
-                        theme="outline"
-                        onClick={() => openDialog('edit', item)}
-                        disabled={wait}
-                      >
-                        <Edit className="w-4 h-4"/>
-                      </Button>
-                      <Button
-                        className={`h-9 w-9`}
-                        onClick={() => confirmRemove(item.id)}
-                        theme={`error`}
-                        disabled={wait}
-                      >
-                        <Trash2 className="w-4 h-4"/>
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      {/* 分页器 */}
-      {data.total > 0 && (
-        <Pagination
-          page={data.page}
-          size={data.size}
-          total={data.total}
-          sizeOptions={[10, 20, 50, 100]}
-          onPageChange={changePage}
-          onSizeChange={changeSize}
-        />
-      )}
+      <DataTable
+        status={status}
+        data={data.list}
+        pagination={{
+          total: data.total,
+          page: data.page,
+          size: data.size,
+          onPageChange: (page: number) => refresh(page, data.size),
+          onSizeChange: (size: number) => refresh(1, size),
+        }}
+        columns={[
+          {
+            accessorKey: 'host', header: `IP 地址`,
+          }, {
+            accessorKey: 'createdAt', header: `添加时间`,
+          }, {
+            accessorKey: 'remark', header: `备注`,
+          }, {
+            id: 'actions',
+            header: `操作`,
+            cell: ({row}) => (
+              <div className="flex justify-end gap-2">
+                <Button
+                  className={`h-9 w-9`}
+                  theme="outline"
+                  onClick={() => openDialog('edit', row.original)}
+                  disabled={wait}
+                >
+                  <Edit className="w-4 h-4"/>
+                </Button>
+                <Button
+                  className={`h-9 w-9`}
+                  onClick={() => confirmRemove(row.original.id)}
+                  theme={`error`}
+                  disabled={wait}
+                >
+                  <Trash2 className="w-4 h-4"/>
+                </Button>
+              </div>
+            ),
+          },
+        ]}
+      />
 
       {/* 编辑表单 */}
       <Dialog open={dialogVisible} onOpenChange={toggleDialog}>