perf: 账号页异步加载组件

src/pages/api/chat/vectorGpt.ts

@@ -71,7 +71,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       `idx:${VecModelDataPrefix}:hash`,
       `@modelId:{${String(
         chat.modelId._id
-      )}} @vector:[VECTOR_RANGE 0.22 $blob]=>{$YIELD_DISTANCE_AS: score}`,
+      )}} @vector:[VECTOR_RANGE 0.24 $blob]=>{$YIELD_DISTANCE_AS: score}`,
       // `@modelId:{${String(chat.modelId._id)}}=>[KNN 10 @vector $blob AS score]`,
       'RETURN',
       '1',
@@ -105,8 +105,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       throw new Error('对不起，我没有找到你的问题');
     }
 
-    // textArr 筛选，最多 3200 tokens
-    const systemPrompt = systemPromptFilter(formatRedisPrompt, 3200);
+    // textArr 筛选，最多 3000 tokens
+    const systemPrompt = systemPromptFilter(formatRedisPrompt, 3000);
 
     prompts.unshift({
       obj: 'SYSTEM',

src/pages/number/components/BillTable.tsx

@@ -0,0 +1,61 @@
+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';
+
+const BillTable = () => {
+  const {
+    nextPage,
+    isLoadAll,
+    requesting,
+    data: bills
+  } = usePaging<UserBillType>({
+    api: getUserBills,
+    pageSize: 30
+  });
+
+  return (
+    <Card mt={6} py={4}>
+      <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>
+              </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>
+    </Card>
+  );
+};
+
+export default BillTable;

src/pages/number/components/PayRecordTable.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Card,
+  Box,
+  Flex,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  useDisclosure
+} from '@chakra-ui/react';
+import { getPayOrders, checkPayResult } from '@/api/user';
+import { PaySchema } from '@/types/mongoSchema';
+import dayjs from 'dayjs';
+import { useQuery } from '@tanstack/react-query';
+import { formatPrice } from '@/utils/user';
+import WxConcat from '@/components/WxConcat';
+import { useGlobalStore } from '@/store/global';
+import { useToast } from '@/hooks/useToast';
+
+const PayRecordTable = () => {
+  const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
+  const [payOrders, setPayOrders] = useState<PaySchema[]>([]);
+  const { setLoading } = useGlobalStore();
+  const { toast } = useToast();
+
+  const handleRefreshPayOrder = useCallback(
+    async (payId: string) => {
+      setLoading(true);
+
+      try {
+        const data = await checkPayResult(payId);
+        toast({
+          title: data,
+          status: 'info'
+        });
+        const res = await getPayOrders();
+        setPayOrders(res);
+      } catch (error: any) {
+        toast({
+          title: error?.message,
+          status: 'warning'
+        });
+        console.log(error);
+      }
+
+      setLoading(false);
+    },
+    [setLoading, toast]
+  );
+
+  useQuery(['initPayOrder'], getPayOrders, {
+    onSuccess(res) {
+      setPayOrders(res);
+    }
+  });
+
+  return (
+    <>
+      <Card mt={6} py={4}>
+        <Flex alignItems={'flex-end'} px={6} mb={1}>
+          <Box fontSize={'xl'} fontWeight={'bold'}>
+            充值记录
+          </Box>
+          <Button onClick={onOpenWx} size={'xs'} ml={4} variant={'outline'}>
+            异常问题，wx联系
+          </Button>
+        </Flex>
+        <TableContainer maxH={'400px'} overflowY={'auto'} px={6}>
+          <Table>
+            <Thead>
+              <Tr>
+                <Th>订单号</Th>
+                <Th>时间</Th>
+                <Th>金额</Th>
+                <Th>消费</Th>
+                <Th></Th>
+              </Tr>
+            </Thead>
+            <Tbody fontSize={'sm'}>
+              {payOrders.map((item) => (
+                <Tr key={item._id}>
+                  <Td>{item.orderId}</Td>
+                  <Td>
+                    {item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
+                  </Td>
+                  <Td>{formatPrice(item.price)}元</Td>
+                  <Td>{item.status}</Td>
+                  <Td>
+                    {item.status === 'NOTPAY' && (
+                      <Button onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
+                        更新
+                      </Button>
+                    )}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </Card>
+      {/* wx 联系 */}
+      {isOpenWx && <WxConcat onClose={onCloseWx} />}
+    </>
+  );
+};
+
+export default PayRecordTable;

src/pages/number/setting.tsx

@@ -13,28 +13,22 @@ import {
   TableContainer,
   Select,
   Input,
-  IconButton,
-  useDisclosure
+  IconButton
 } from '@chakra-ui/react';
 import { DeleteIcon } from '@chakra-ui/icons';
 import { useForm, useFieldArray } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
-import { putUserInfo, getUserBills, getPayOrders, checkPayResult } from '@/api/user';
+import { putUserInfo } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
 import { useGlobalStore } from '@/store/global';
 import { useUserStore } from '@/store/user';
 import { UserType } from '@/types/user';
-import { usePaging } from '@/hooks/usePaging';
-import type { UserBillType } from '@/types/user';
+
 import { useQuery } from '@tanstack/react-query';
 import dynamic from 'next/dynamic';
-import { PaySchema } from '@/types/mongoSchema';
-import dayjs from 'dayjs';
-import { formatPrice } from '@/utils/user';
-import WxConcat from '@/components/WxConcat';
-import ScrollData from '@/components/ScrollData';
-import { BillTypeMap } from '@/constants/user';
 
+const PayRecordTable = dynamic(() => import('./components/PayRecordTable'));
+const BilTable = dynamic(() => import('./components/BillTable'));
 const PayModal = dynamic(() => import('./components/PayModal'));
 
 const NumberSetting = () => {
@@ -44,7 +38,6 @@ const NumberSetting = () => {
     defaultValues: userInfo as UserType
   });
   const [showPay, setShowPay] = useState(false);
-  const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
   const { toast } = useToast();
   const {
     fields: accounts,
@@ -54,16 +47,6 @@ const NumberSetting = () => {
     control,
     name: 'accounts'
   });
-  const {
-    nextPage,
-    isLoadAll,
-    requesting,
-    data: bills
-  } = usePaging<UserBillType>({
-    api: getUserBills,
-    pageSize: 30
-  });
-  const [payOrders, setPayOrders] = useState<PaySchema[]>([]);
 
   const onclickSave = useCallback(
     async (data: UserUpdateParams) => {
@@ -83,39 +66,9 @@ const NumberSetting = () => {
 
   useQuery(['init'], initUserInfo);
 
-  useQuery(['initPayOrder'], getPayOrders, {
-    onSuccess(res) {
-      setPayOrders(res);
-    }
-  });
-
-  const handleRefreshPayOrder = useCallback(
-    async (payId: string) => {
-      setLoading(true);
-
-      try {
-        const data = await checkPayResult(payId);
-        toast({
-          title: data,
-          status: 'info'
-        });
-        const res = await getPayOrders();
-        setPayOrders(res);
-      } catch (error: any) {
-        toast({
-          title: error?.message,
-          status: 'warning'
-        });
-        console.log(error);
-      }
-
-      setLoading(false);
-    },
-    [setLoading, toast]
-  );
-
   return (
     <>
+      {/* 核心信息 */}
       <Card px={6} py={4}>
         <Box fontSize={'xl'} fontWeight={'bold'}>
           账号信息
@@ -141,6 +94,7 @@ const NumberSetting = () => {
           </Box>
         </Box>
       </Card>
+      {/* 账号信息 */}
       <Card mt={6} px={6} py={4}>
         <Flex mb={5} justifyContent={'space-between'}>
           <Box fontSize={'xl'} fontWeight={'bold'}>
@@ -209,88 +163,11 @@ const NumberSetting = () => {
           </Table>
         </TableContainer>
       </Card>
-      <Card mt={6} py={4}>
-        <Flex alignItems={'flex-end'} px={6} mb={1}>
-          <Box fontSize={'xl'} fontWeight={'bold'}>
-            充值记录
-          </Box>
-          <Button onClick={onOpenWx} size={'xs'} ml={4} variant={'outline'}>
-            异常问题，wx联系
-          </Button>
-        </Flex>
-        <TableContainer maxH={'400px'} overflowY={'auto'} px={6}>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>订单号</Th>
-                <Th>时间</Th>
-                <Th>金额</Th>
-                <Th>消费</Th>
-                <Th></Th>
-              </Tr>
-            </Thead>
-            <Tbody fontSize={'sm'}>
-              {payOrders.map((item) => (
-                <Tr key={item._id}>
-                  <Td>{item.orderId}</Td>
-                  <Td>
-                    {item.createTime ? dayjs(item.createTime).format('YYYY/MM/DD HH:mm:ss') : '-'}
-                  </Td>
-                  <Td>{formatPrice(item.price)}元</Td>
-                  <Td>{item.status}</Td>
-                  <Td>
-                    {item.status === 'NOTPAY' && (
-                      <Button onClick={() => handleRefreshPayOrder(item._id)} size={'sm'}>
-                        更新
-                      </Button>
-                    )}
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
-      </Card>
-      <Card mt={6} py={4}>
-        <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>
-                </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>
-      </Card>
+      {/* 充值记录 */}
+      <PayRecordTable />
+      {/* 账单表 */}
+      <BilTable />
       {showPay && <PayModal onClose={() => setShowPay(false)} />}
-      {/* wx 联系 */}
-      {isOpenWx && <WxConcat onClose={onCloseWx} />}
     </>
   );
 };