Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 29c5554f by archer
Options

perf: 分页组件

parent 9b18a464
Showing with 71 additions and 51 deletions
src/hooks/usePagination.tsx
import { useState, useCallback, useMemo } from 'react'; import { useState, useCallback, useMemo, useEffect } from 'react';
import type { PagingData } from '../types/index'; 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 { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
import { useQuery, useMutation } from '@tanstack/react-query'; import { useMutation } from '@tanstack/react-query';
import { useToast } from './useToast'; import { useToast } from './useToast';
export const usePagination = <T = any,>({ export const usePagination = <T = any,>({
...@@ -40,10 +40,10 @@ export const usePagination = <T = any,>({ ...@@ -40,10 +40,10 @@ export const usePagination = <T = any,>({
} }
} }
}); });
useQuery(['init'], () => {
useEffect(() => {
mutate(1); mutate(1);
return null; }, []);
});
const Pagination = useCallback(() => { const Pagination = useCallback(() => {
return ( return (
...@@ -53,16 +53,40 @@ export const usePagination = <T = any,>({ ...@@ -53,16 +53,40 @@ export const usePagination = <T = any,>({
icon={<ArrowBackIcon />} icon={<ArrowBackIcon />}
aria-label={'left'} aria-label={'left'}
size={'sm'} size={'sm'}
w={'28px'}
h={'28px'}
onClick={() => mutate(pageNum - 1)} onClick={() => mutate(pageNum - 1)}
/> />
<Box mx={2}> <Flex mx={2} alignItems={'center'}>
{pageNum}/{maxPage} <Input
</Box> 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 <IconButton
isDisabled={pageNum === maxPage} isDisabled={pageNum === maxPage}
icon={<ArrowForwardIcon />} icon={<ArrowForwardIcon />}
aria-label={'left'} aria-label={'left'}
size={'sm'} size={'sm'}
w={'28px'}
h={'28px'}
onClick={() => mutate(pageNum + 1)} onClick={() => mutate(pageNum + 1)}
/> />
</Flex> </Flex>
......
src/pages/number/components/BillTable.tsx
import React from 'react'; import React from 'react';
import { Card, Box, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/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 { BillTypeMap } from '@/constants/user';
import { getUserBills } from '@/api/user'; import { getUserBills } from '@/api/user';
import { usePaging } from '@/hooks/usePaging';
import type { UserBillType } from '@/types/user'; import type { UserBillType } from '@/types/user';
import { usePagination } from '@/hooks/usePagination';
import { useLoading } from '@/hooks/useLoading';
const BillTable = () => { const BillTable = () => {
const { Loading } = useLoading();
const { const {
nextPage, data: bills,
isLoadAll, isLoading,
requesting, Pagination
data: bills } = usePagination<UserBillType>({
} = usePaging<UserBillType>({ api: getUserBills
api: getUserBills,
pageSize: 30
}); });
return ( return (
...@@ -22,38 +22,34 @@ const BillTable = () => { ...@@ -22,38 +22,34 @@ const BillTable = () => {
<Box fontSize={'xl'} fontWeight={'bold'} px={6} mb={1}> <Box fontSize={'xl'} fontWeight={'bold'} px={6} mb={1}>
使用记录 使用记录
</Box> </Box>
<ScrollData <TableContainer position={'relative'}>
maxH={'400px'} <Table>
px={6} <Thead>
isLoadAll={isLoadAll} <Tr>
requesting={requesting} <Th>时间</Th>
nextPage={nextPage} <Th>类型</Th>
> <Th>内容长度</Th>
<TableContainer> <Th>Tokens 长度</Th>
<Table> <Th>消费</Th>
<Thead> </Tr>
<Tr> </Thead>
<Th>时间</Th> <Tbody fontSize={'sm'}>
<Th>类型</Th> {bills.map((item) => (
<Th>内容长度</Th> <Tr key={item.id}>
<Th>Tokens 长度</Th> <Td>{item.time}</Td>
<Th>消费</Th> <Td>{BillTypeMap[item.type]}</Td>
<Td>{item.textLen}</Td>
<Td>{item.tokenLen}</Td>
<Td>{item.price}元</Td>
</Tr> </Tr>
</Thead> ))}
<Tbody fontSize={'sm'}> </Tbody>
{bills.map((item) => ( </Table>
<Tr key={item.id}> <Box mt={4} mr={4} textAlign={'end'}>
<Td>{item.time}</Td> <Pagination />
<Td>{BillTypeMap[item.type]}</Td> </Box>
<Td>{item.textLen}</Td> <Loading loading={isLoading} fixed={false} />
<Td>{item.tokenLen}</Td> </TableContainer>
<Td>{item.price}元</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</ScrollData>
</Card> </Card>
); );
}; };
......
src/pages/number/components/PayRecordTable.tsx
...@@ -70,7 +70,7 @@ const PayRecordTable = () => { ...@@ -70,7 +70,7 @@ const PayRecordTable = () => {
异常问题，wx联系 异常问题，wx联系
</Button> </Button>
</Flex> </Flex>
<TableContainer maxH={'400px'} overflowY={'auto'} px={6}> <TableContainer px={6}>
<Table> <Table>
<Thead> <Thead>
<Tr> <Tr>
......
src/service/response.ts
...@@ -34,7 +34,7 @@ export const jsonRes = <T = any>( ...@@ -34,7 +34,7 @@ export const jsonRes = <T = any>(
// request 时候报错 // request 时候报错
if (error?.response) { if (error?.response) {
console.log('statusText:', error?.response?.statusText); console.log('statusText:', error?.response?.statusText);
console.log('error data:', error?.response?.data); console.log('openai error:', error?.response?.data?.error);
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment