修改页面分页情况

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Table, Tag, Empty, Spin, Typography, Row, Col } from 'antd';
+import { Table, Tag, Empty, Spin, Typography, Row, Col, Pagination } from 'antd';
 import { WalletOutlined, PlusCircleOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { getCredits } from '../api';
 
@@ -7,23 +7,31 @@ const CreditRecordsPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [records, setRecords] = useState<any[]>([]);
   const [credits, setCredits] = useState(0);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [page]);
 
   const loadData = async () => {
     setLoading(true);
     try {
-      const data = await getCredits();
+      const data = await getCredits(page, pageSize);
       setRecords(data.records || []);
       setCredits(data.credits || 0);
+      setTotal(data.total || 0);
     } catch {
       setRecords([]);
     }
     setLoading(false);
   };
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
   const columns = [
     {
       title: '变动类型',
@@ -139,13 +147,24 @@ const CreditRecordsPage: React.FC = () => {
                 description={<span style={{ color: '#94a3b8' }}>暂无积分变动记录</span>}
               />
             ) : (
-              <Table
-                dataSource={records}
-                columns={columns}
-                rowKey="id"
-                pagination={{ pageSize: 10, size: 'small' }}
-                bordered={false}
-              />
+              <>
+                <Table
+                  dataSource={records}
+                  columns={columns}
+                  rowKey="id"
+                  pagination={false}
+                  bordered={false}
+                />
+                <div style={{ padding: '16px', textAlign: 'right' }}>
+                  <Pagination
+                    current={page}
+                    pageSize={pageSize}
+                    total={total}
+                    onChange={handlePageChange}
+                    size="small"
+                  />
+                </div>
+              </>
             )}
           </Spin>
         </div>

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

@@ -1,36 +1,54 @@
 import React, { useEffect, useState } from 'react';
-import { Table, Tag, Empty, Spin, Typography, Button } from 'antd';
+import { Table, Tag, Empty, Spin, Typography, Button, Pagination } from 'antd';
 import { BellOutlined, SettingOutlined, WalletOutlined, GiftOutlined } from '@ant-design/icons';
-import { getNotifications, markNotificationRead } from '../api';
+import { getNotifications, markNotificationRead, getUnreadCount } from '../api';
 
 const MessagesPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [notifications, setNotifications] = useState<any[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
 
   useEffect(() => {
     loadData();
-  }, []);
+    loadUnreadCount();
+  }, [page]);
 
   const loadData = async () => {
     setLoading(true);
     try {
-      const data = await getNotifications();
-      setNotifications(data || []);
-      setUnreadCount(data.filter((n: any) => !(n.isRead ?? n.is_read)).length);
+      const data = await getNotifications(page, pageSize);
+      setNotifications(data.items || []);
+      setTotal(data.total || 0);
     } catch {
       setNotifications([]);
     }
     setLoading(false);
   };
 
+  const loadUnreadCount = async () => {
+    try {
+      const count = await getUnreadCount();
+      setUnreadCount(count);
+    } catch {
+      setUnreadCount(0);
+    }
+  };
+
   const handleMarkRead = async (id: string) => {
     try {
       await markNotificationRead(id);
       loadData();
+      loadUnreadCount();
     } catch { /* ignore */ }
   };
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
   const columns = [
     {
       title: '类型',
@@ -131,13 +149,24 @@ const MessagesPage: React.FC = () => {
                 description={<span style={{ color: '#94a3b8' }}>暂无消息</span>}
               />
             ) : (
-              <Table
-                dataSource={notifications}
-                columns={columns}
-                rowKey="id"
-                pagination={{ pageSize: 10, size: 'small' }}
-                bordered={false}
-              />
+              <>
+                <Table
+                  dataSource={notifications}
+                  columns={columns}
+                  rowKey="id"
+                  pagination={false}
+                  bordered={false}
+                />
+                <div style={{ padding: '16px', textAlign: 'right' }}>
+                  <Pagination
+                    current={page}
+                    pageSize={pageSize}
+                    total={total}
+                    onChange={handlePageChange}
+                    size="small"
+                  />
+                </div>
+              </>
             )}
           </Spin>
         </div>

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

@@ -1,27 +1,35 @@
 import React, { useEffect, useState } from 'react';
-import { Table, Tag, Empty, Spin, Typography } from 'antd';
+import { Table, Tag, Empty, Spin, Typography, Pagination } from 'antd';
 import { FileTextOutlined, AlipayCircleOutlined, WechatOutlined } from '@ant-design/icons';
 import { getPaymentOrders } from '../api';
 
 const OrderRecordsPage: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [orders, setOrders] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
 
   useEffect(() => {
     loadData();
-  }, []);
+  }, [page]);
 
   const loadData = async () => {
     setLoading(true);
     try {
-      const data = await getPaymentOrders();
-      setOrders(data || []);
+      const data = await getPaymentOrders(page, pageSize);
+      setOrders(data.items || []);
+      setTotal(data.total || 0);
     } catch {
       setOrders([]);
     }
     setLoading(false);
   };
 
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
   const columns = [
     {
       title: '订单号',
@@ -140,13 +148,24 @@ const OrderRecordsPage: React.FC = () => {
                 description={<span style={{ color: '#94a3b8' }}>暂无订单记录</span>}
               />
             ) : (
-              <Table
-                dataSource={orders}
-                columns={columns}
-                rowKey="order_no"
-                pagination={{ pageSize: 10, size: 'small' }}
-                bordered={false}
-              />
+              <>
+                <Table
+                  dataSource={orders}
+                  columns={columns}
+                  rowKey="order_no"
+                  pagination={false}
+                  bordered={false}
+                />
+                <div style={{ padding: '16px', textAlign: 'right' }}>
+                  <Pagination
+                    current={page}
+                    pageSize={pageSize}
+                    total={total}
+                    onChange={handlePageChange}
+                    size="small"
+                  />
+                </div>
+              </>
             )}
           </Spin>
         </div>