From 29c5554f9ee441ff6cf30ff255c71e63428e2bf3 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Fri, 7 Apr 2023 21:34:51 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=88=86=E9=A1=B5=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePagination.tsx                   | 42 +++++++---
 src/pages/number/components/BillTable.tsx     | 76 +++++++++----------
 .../number/components/PayRecordTable.tsx      |  2 +-
 src/service/response.ts                       |  2 +-
 4 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/src/hooks/usePagination.tsx b/src/hooks/usePagination.tsx
index 685abf1934..0f04394453 100644
--- a/src/hooks/usePagination.tsx
+++ b/src/hooks/usePagination.tsx
@@ -1,8 +1,8 @@
-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>
diff --git a/src/pages/number/components/BillTable.tsx b/src/pages/number/components/BillTable.tsx
index 38d3ed584b..70728c6c91 100644
--- a/src/pages/number/components/BillTable.tsx
+++ b/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>
   );
 };
diff --git a/src/pages/number/components/PayRecordTable.tsx b/src/pages/number/components/PayRecordTable.tsx
index 306c586bc4..47ee6592db 100644
--- a/src/pages/number/components/PayRecordTable.tsx
+++ b/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>
diff --git a/src/service/response.ts b/src/service/response.ts
index 23f083ea4c..f1b8ca27e9 100644
--- a/src/service/response.ts
+++ b/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);
     }
   }