补充上传协议和实名认证

src/admin/cashOut/page.tsx

@@ -1,10 +1,13 @@
 import type { ColumnDef } from "@tanstack/react-table"
+import { useMemo, useState } from "react"
 import { fetchCashOutList } from "@/api/cashOut"
 import DataTable from "@/components/data-table"
 import Page from "@/components/page"
 import { useList } from "@/lib/hooks/useList"
 import type { CashOutItem } from "@/lib/models/cashOut"
 
+const PAGE_SIZE = 10
+
 const columns: ColumnDef<CashOutItem>[] = [
   {
     accessorKey: "username",
@@ -41,19 +44,32 @@ const columns: ColumnDef<CashOutItem>[] = [
 
 export default function CashOutPage() {
   const { data, status } = useList(fetchCashOutList)
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(PAGE_SIZE)
+
+  // 接口返回全量列表，本地做前端分页
+  const paged = useMemo(
+    () => data.slice((page - 1) * pageSize, page * pageSize),
+    [data, page, pageSize],
+  )
 
   return (
     <Page>
       <div className="bg-white rounded-lg p-4">
         <h3 className="font-semibold text-lg">提现管理</h3>
         <DataTable<CashOutItem>
-          data={data}
+          data={paged}
           status={status}
           columns={columns}
           pagination={{
-            page: 0,
-            size: 10,
+            page,
+            size: pageSize,
             total: data.length,
+            onPageChange: setPage,
+            onSizeChange: size => {
+              setPageSize(size)
+              setPage(1)
+            },
           }}
         />
       </div>