perf: 账号api结构

src/pages/number/setting.tsx

@@ -1,22 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import {
-  Card,
-  Box,
-  Flex,
-  Button,
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  TableContainer,
-  Select,
-  Input,
-  IconButton
-} from '@chakra-ui/react';
-import { DeleteIcon } from '@chakra-ui/icons';
-import { useForm, useFieldArray } from 'react-hook-form';
+import { Card, Box, Flex, Button, Input } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
 import { putUserInfo } from '@/api/user';
 import { useToast } from '@/hooks/useToast';
@@ -34,22 +18,15 @@ const PayModal = dynamic(() => import('./components/PayModal'));
 const NumberSetting = () => {
   const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
   const { setLoading } = useGlobalStore();
-  const { register, handleSubmit, control } = useForm<UserUpdateParams>({
+  const { register, handleSubmit } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
   });
   const [showPay, setShowPay] = useState(false);
   const { toast } = useToast();
-  const {
-    fields: accounts,
-    append: appendAccount,
-    remove: removeAccount
-  } = useFieldArray({
-    control,
-    name: 'accounts'
-  });
 
   const onclickSave = useCallback(
     async (data: UserUpdateParams) => {
+      if (data.openaiKey === userInfo?.openaiKey) return;
       setLoading(true);
       try {
         await putUserInfo(data);
@@ -61,7 +38,7 @@ const NumberSetting = () => {
       } catch (error) {}
       setLoading(false);
     },
-    [setLoading, toast, updateUserInfo]
+    [setLoading, toast, updateUserInfo, userInfo?.openaiKey]
   );
 
   useQuery(['init'], initUserInfo);
@@ -73,12 +50,10 @@ const NumberSetting = () => {
         <Box fontSize={'xl'} fontWeight={'bold'}>
           账号信息
         </Box>
-        <Box mt={6}>
-          <Flex alignItems={'center'}>
-            <Box flex={'0 0 60px'}>邮箱:</Box>
-            <Box>{userInfo?.email}</Box>
-          </Flex>
-        </Box>
+        <Flex mt={6} alignItems={'center'}>
+          <Box flex={'0 0 60px'}>邮箱:</Box>
+          <Box>{userInfo?.email}</Box>
+        </Flex>
         <Box mt={6}>
           <Flex alignItems={'center'}>
             <Box flex={'0 0 60px'}>余额:</Box>
@@ -93,76 +68,23 @@ const NumberSetting = () => {
             如果填写了自己的 openai 账号，将不会计费
           </Box>
         </Box>
-      </Card>
-      {/* 账号信息 */}
-      <Card mt={6} px={6} py={4}>
-        <Flex mb={5} justifyContent={'space-between'}>
-          <Box fontSize={'xl'} fontWeight={'bold'}>
-            关联账号
-          </Box>
-          <Box>
-            {accounts.length === 0 && (
-              <Button
-                mr={5}
-                variant="outline"
-                onClick={() =>
-                  appendAccount({
-                    type: 'openai',
-                    value: ''
-                  })
-                }
-              >
-                新增
-              </Button>
-            )}
-            <Button onClick={handleSubmit(onclickSave)}>保存</Button>
-          </Box>
+        <Flex mt={6} alignItems={'center'}>
+          <Box flex={'0 0 85px'}>openaiKey:</Box>
+          <Input
+            {...register(`openaiKey`)}
+            maxW={'300px'}
+            placeholder={'openai账号。回车或失去焦点保存'}
+            size={'sm'}
+            onBlur={handleSubmit(onclickSave)}
+            onKeyDown={(e) => {
+              if (e.keyCode === 13) {
+                handleSubmit(onclickSave)();
+              }
+            }}
+          ></Input>
         </Flex>
-        <TableContainer>
-          <Table>
-            <Thead>
-              <Tr>
-                <Th>账号类型</Th>
-                <Th>值</Th>
-                <Th></Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              {accounts.map((item, i) => (
-                <Tr key={item.id}>
-                  <Td minW={'200px'}>
-                    <Select
-                      {...register(`accounts.${i}.type`, {
-                        required: '类型不能为空'
-                      })}
-                    >
-                      <option value="openai">openai</option>
-                    </Select>
-                  </Td>
-                  <Td minW={'200px'} whiteSpace="pre-wrap" wordBreak={'break-all'}>
-                    <Input
-                      {...register(`accounts.${i}.value`, {
-                        required: '账号不能为空'
-                      })}
-                    ></Input>
-                  </Td>
-                  <Td>
-                    <IconButton
-                      aria-label="删除账号"
-                      icon={<DeleteIcon />}
-                      colorScheme={'red'}
-                      onClick={() => {
-                        removeAccount(i);
-                        handleSubmit(onclickSave)();
-                      }}
-                    />
-                  </Td>
-                </Tr>
-              ))}
-            </Tbody>
-          </Table>
-        </TableContainer>
       </Card>
+
       {/* 充值记录 */}
       <PayRecordTable />
       {/* 账单表 */}