perf: 分页组件

src/pages/number/components/BillTable.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import { Card, Box, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
-import ScrollData from '@/components/ScrollData';
 import { BillTypeMap } from '@/constants/user';
 import { getUserBills } from '@/api/user';
-import { usePaging } from '@/hooks/usePaging';
 import type { UserBillType } from '@/types/user';
+import { usePagination } from '@/hooks/usePagination';
+import { useLoading } from '@/hooks/useLoading';
 
 const BillTable = () => {
+  const { Loading } = useLoading();
+
   const {
-    nextPage,
-    isLoadAll,
-    requesting,
-    data: bills
-  } = usePaging<UserBillType>({
-    api: getUserBills,
-    pageSize: 30
+    data: bills,
+    isLoading,
+    Pagination
+  } = usePagination<UserBillType>({
+    api: getUserBills
   });
 
   return (
@@ -22,38 +22,34 @@ const BillTable = () => {
       <Box fontSize={'xl'} fontWeight={'bold'} px={6} mb={1}>
         使用记录
       </Box>
-      <ScrollData
-        maxH={'400px'}
-        px={6}
-        isLoadAll={isLoadAll}
-        requesting={requesting}
-        nextPage={nextPage}
-      >
-        <TableContainer>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>时间</Th>
-                <Th>类型</Th>
-                <Th>内容长度</Th>
-                <Th>Tokens 长度</Th>
-                <Th>消费</Th>
+      <TableContainer position={'relative'}>
+        <Table>
+          <Thead>
+            <Tr>
+              <Th>时间</Th>
+              <Th>类型</Th>
+              <Th>内容长度</Th>
+              <Th>Tokens 长度</Th>
+              <Th>消费</Th>
+            </Tr>
+          </Thead>
+          <Tbody fontSize={'sm'}>
+            {bills.map((item) => (
+              <Tr key={item.id}>
+                <Td>{item.time}</Td>
+                <Td>{BillTypeMap[item.type]}</Td>
+                <Td>{item.textLen}</Td>
+                <Td>{item.tokenLen}</Td>
+                <Td>{item.price}元</Td>
               </Tr>
-            </Thead>
-            <Tbody fontSize={'sm'}>
-              {bills.map((item) => (
-                <Tr key={item.id}>
-                  <Td>{item.time}</Td>
-                  <Td>{BillTypeMap[item.type]}</Td>
-                  <Td>{item.textLen}</Td>
-                  <Td>{item.tokenLen}</Td>
-                  <Td>{item.price}元</Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
-      </ScrollData>
+            ))}
+          </Tbody>
+        </Table>
+        <Box mt={4} mr={4} textAlign={'end'}>
+          <Pagination />
+        </Box>
+        <Loading loading={isLoading} fixed={false} />
+      </TableContainer>
     </Card>
   );
 };

src/pages/number/components/PayRecordTable.tsx

@@ -70,7 +70,7 @@ const PayRecordTable = () => {
             异常问题，wx联系
           </Button>
         </Flex>
-        <TableContainer maxH={'400px'} overflowY={'auto'} px={6}>
+        <TableContainer px={6}>
           <Table>
             <Thead>
               <Tr>