fix: paginate operational list pages

src/apps/client/ClientBillingPage.tsx

@@ -12,23 +12,25 @@ export function ClientBillingPage() {
   const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [total, setTotal] = useState(0);
   const pageSize = 10;
-  const totalPages = Math.max(1, Math.ceil(orders.length / pageSize));
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = Math.min(page, totalPages);
-  const visibleOrders = orders.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+  const visibleOrders = orders;
 
   useEffect(() => {
     setLoading(true);
-    Promise.all([clientApi.getDashboard(), clientApi.listOrders()])
-      .then(([dashboard, nextOrders]) => {
+    Promise.all([clientApi.getDashboard(), clientApi.listOrdersPage({ page, pageSize })])
+      .then(([dashboard, result]) => {
         setBalanceCents(dashboard.accounts[0]?.balanceCents ?? 0);
         setCreditCents(dashboard.accounts[0]?.creditCents ?? 0);
-        setOrders(nextOrders);
+        setOrders(result.items);
+        setTotal(result.total);
         setError('');
       })
       .catch((reason: Error) => setError(reason.message || '账户信息加载失败'))
       .finally(() => setLoading(false));
-  }, []);
+  }, [page]);
 
   return (
     <section className="page-stack">
@@ -46,7 +48,7 @@ export function ClientBillingPage() {
         </div>
       </div>
       <div className="surface section-stack">
-        <div className="section-heading"><div><h2>充值记录</h2><p className="muted">如需充值，请联系平台运营人员。</p></div><Tag tone="info">{orders.length} 条</Tag></div>
+        <div className="section-heading"><div><h2>充值记录</h2><p className="muted">如需充值，请联系平台运营人员。</p></div><Tag tone="info">{total} 条</Tag></div>
         {loading ? <p className="muted">正在加载账户信息...</p> : null}
         {error ? <p className="form-error">{error}</p> : null}
         {!loading && !error ? (
@@ -67,7 +69,7 @@ export function ClientBillingPage() {
             </table>
           </div>
         ) : null}
-        <Pagination nextDisabled={currentPage >= totalPages} onNext={() => setPage((value) => Math.min(totalPages, value + 1))} onPrevious={() => setPage((value) => Math.max(1, value - 1))} page={currentPage} totalPages={totalPages} onPageChange={setPage} previousDisabled={currentPage <= 1} total={orders.length} />
+        <Pagination nextDisabled={currentPage >= totalPages} onNext={() => setPage((value) => Math.min(totalPages, value + 1))} onPrevious={() => setPage((value) => Math.max(1, value - 1))} page={currentPage} totalPages={totalPages} onPageChange={setPage} previousDisabled={currentPage <= 1} total={total} />
       </div>
     </section>
   );