1

video-gen-app/src/pages/CreditsPage.tsx

@@ -36,16 +36,25 @@ const CreditsPage: React.FC = () => {
   const { user } = useAuthStore();
   const [records, setRecords] = useState<CreditRecord[]>([]);
   const [loading, setLoading] = useState(false);
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [total, setTotal] = useState(0);
 
   useEffect(() => {
     const fetch = async () => {
       setLoading(true);
-      const data = await getCredits();
+      const data = await getCredits(page, pageSize);
       setRecords(data.records);
+      setTotal(data.total);
       setLoading(false);
     };
     fetch();
-  }, []);
+  }, [page, pageSize]);
+
+  const handlePageChange = (p: number, ps: number) => {
+    setPage(p);
+    setPageSize(ps);
+  };
 
   const totalRecharge = records.filter((r) => r.type === 'recharge').reduce((sum, r) => sum + r.amount, 0);
   const totalConsume = records.filter((r) => r.type === 'consume').reduce((sum, r) => sum + Math.abs(r.amount), 0);
@@ -129,7 +138,14 @@ const CreditsPage: React.FC = () => {
         </div>
         <div style={{ borderRadius: 16, background: '#fff', border: '1px solid #f0f0f5', overflow: 'hidden' }}>
           <Table columns={columns} dataSource={records} rowKey="id" loading={loading}
-            pagination={{ pageSize: 10, size: 'small' }}
+            pagination={{
+              current: page,
+              pageSize: pageSize,
+              total: total,
+              onChange: handlePageChange,
+              showSizeChanger: true,
+              showTotal: (t) => `共 ${t} 条`,
+            }}
             scroll={{ x: 500 }} />
         </div>
       </div>