perf: 分页组件

src/hooks/usePagination.tsx

-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import type { PagingData } from '../types/index';
-import { IconButton, Flex, Box } from '@chakra-ui/react';
+import { IconButton, Flex, Box, Input } from '@chakra-ui/react';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
-import { useQuery, useMutation } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useToast } from './useToast';
 
 export const usePagination = <T = any,>({
@@ -40,10 +40,10 @@ export const usePagination = <T = any,>({
       }
     }
   });
-  useQuery(['init'], () => {
+
+  useEffect(() => {
     mutate(1);
-    return null;
-  });
+  }, []);
 
   const Pagination = useCallback(() => {
     return (
@@ -53,16 +53,40 @@ export const usePagination = <T = any,>({
           icon={<ArrowBackIcon />}
           aria-label={'left'}
           size={'sm'}
+          w={'28px'}
+          h={'28px'}
           onClick={() => mutate(pageNum - 1)}
         />
-        <Box mx={2}>
-          {pageNum}/{maxPage}
-        </Box>
+        <Flex mx={2} alignItems={'center'}>
+          <Input
+            defaultValue={pageNum}
+            w={'50px'}
+            size={'xs'}
+            type={'number'}
+            min={1}
+            max={maxPage}
+            onBlur={(e) => {
+              const val = +e.target.value;
+              if (val === pageNum) return;
+              if (val >= maxPage) {
+                mutate(maxPage);
+              } else if (val < 1) {
+                mutate(1);
+              } else {
+                mutate(+e.target.value);
+              }
+            }}
+          />
+          <Box mx={2}>/</Box>
+          {maxPage}
+        </Flex>
         <IconButton
           isDisabled={pageNum === maxPage}
           icon={<ArrowForwardIcon />}
           aria-label={'left'}
           size={'sm'}
+          w={'28px'}
+          h={'28px'}
           onClick={() => mutate(pageNum + 1)}
         />
       </Flex>

src/pages/number/components/BillTable.tsx

 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>

src/service/response.ts

@@ -34,7 +34,7 @@ export const jsonRes = <T = any>(
     // request 时候报错
     if (error?.response) {
       console.log('statusText:', error?.response?.statusText);
-      console.log('error data:', error?.response?.data);
+      console.log('openai error:', error?.response?.data?.error);
     }
   }