perf: ui

client/src/components/Tabs/index.tsx

@@ -0,0 +1,74 @@
+import React, { useMemo } from 'react';
+import { Box, Grid, useTheme } from '@chakra-ui/react';
+import type { GridProps } from '@chakra-ui/react';
+
+// @ts-ignore
+interface Props extends GridProps {
+  list: { id: string; label: string }[];
+  activeId: string;
+  size?: 'sm' | 'md' | 'lg';
+  onChange: (id: string) => void;
+}
+
+const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
+  const theme = useTheme();
+  const sizeMap = useMemo(() => {
+    switch (size) {
+      case 'sm':
+        return {
+          fontSize: 'sm',
+          outP: '3px',
+          inlineP: 1
+        };
+      case 'md':
+        return {
+          fontSize: 'md',
+          outP: '4px',
+          inlineP: 2
+        };
+      case 'lg':
+        return {
+          fontSize: 'lg',
+          outP: '5px',
+          inlineP: 3
+        };
+    }
+  }, [size]);
+
+  return (
+    <Grid
+      gridTemplateColumns={`repeat(${list.length},1fr)`}
+      p={sizeMap.outP}
+      borderRadius={'sm'}
+      fontSize={sizeMap.fontSize}
+      {...props}
+    >
+      {list.map((item) => (
+        <Box
+          key={item.id}
+          py={sizeMap.inlineP}
+          borderRadius={'sm'}
+          textAlign={'center'}
+          {...(activeId === item.id
+            ? {
+                boxShadow: '0px 2px 2px rgba(137, 156, 171, 0.25)',
+                backgroundImage: theme.lgColor.primary2,
+                color: 'white',
+                cursor: 'default'
+              }
+            : {
+                cursor: 'pointer'
+              })}
+          onClick={() => {
+            if (activeId === item.id) return;
+            onChange(item.id);
+          }}
+        >
+          {item.label}
+        </Box>
+      ))}
+    </Grid>
+  );
+};
+
+export default Tabs;

client/src/components/WxConcat/index.tsx

@@ -30,7 +30,7 @@ const WxConcat = ({ onClose }: { onClose: () => void }) => {
         </ModalBody>
 
         <ModalFooter>
-          <Button variant={'outline'} onClick={onClose}>
+          <Button variant={'base'} onClick={onClose}>
             关闭
           </Button>
         </ModalFooter>

client/src/constants/theme.ts

@@ -66,10 +66,11 @@ const Button = defineStyleConfig({
   },
   variants: {
     primary: {
-      background: 'myBlue.700 !important',
+      backgroundImage:
+        'linear-gradient(to bottom right, #2152d9 0%,#3370ff 40%, #4e83fd 100%) !important',
       color: 'white',
       _hover: {
-        filter: 'brightness(110%)'
+        filter: 'brightness(115%)'
       }
     },
     base: {
@@ -77,12 +78,15 @@ const Button = defineStyleConfig({
       border: '1px solid',
       borderColor: 'myGray.200',
       bg: 'transparent',
+      transition: 'background 0.3s',
       _hover: {
-        color: 'myBlue.600'
+        color: 'myBlue.600',
+        bg: 'myWhite.400'
       },
       _active: {
         color: 'myBlue.700'
-      }
+      },
+      _disabled: { bg: 'myGray.100 !important', color: 'myGray.700 !important' }
     }
   },
   defaultProps: {
@@ -180,6 +184,18 @@ export const theme = extendTheme({
     }
   },
   colors: {
+    myWhite: {
+      100: '#FEFEFE',
+      200: '#FDFDFE',
+      300: '#FBFBFC',
+      400: '#F8FAFB',
+      500: '#F6F8F9',
+      600: '#F4F6F8',
+      700: '#C3C5C6',
+      800: '#929495',
+      900: '#626263',
+      1000: '#313132'
+    },
     myGray: {
       100: '#EFF0F1',
       200: '#DEE0E2',
@@ -204,6 +220,7 @@ export const theme = extendTheme({
       900: '#1237b3',
       1000: '#07228c'
     },
+
     myRead: {
       600: '#ff4d4f'
     }
@@ -232,9 +249,11 @@ export const theme = extendTheme({
     xl: '1800px',
     '2xl': '2100px'
   },
-  active: {
+  lgColor: {
     activeBlueGradient: 'linear-gradient(120deg, #d6e8ff 0%, #f0f7ff 100%)',
-    hoverBlueGradient: 'linear-gradient(60deg, #f0f7ff 0%, #d6e8ff 100%)'
+    hoverBlueGradient: 'linear-gradient(60deg, #f0f7ff 0%, #d6e8ff 100%)',
+    primary: 'linear-gradient(to bottom right, #2152d9 0%,#3370ff 40%, #4e83fd 100%)',
+    primary2: 'linear-gradient(to bottom right, #2152d9 0%,#3370ff 30%,#4e83fd 80%, #85b1ff 100%)'
   },
   components: {
     Modal: ModalTheme,

client/src/hooks/useConfirm.tsx

@@ -39,7 +39,7 @@ export const useConfirm = ({ title = '提示', content }: { title?: string; cont
 
               <AlertDialogFooter>
                 <Button
-                  variant={'outline'}
+                  variant={'base'}
                   onClick={() => {
                     onClose();
                     typeof cancelCb.current === 'function' && cancelCb.current();

client/src/hooks/useEditInfo.tsx

@@ -73,7 +73,7 @@ export const useEditInfo = ({
             />
           </ModalBody>
           <ModalFooter>
-            <Button mr={3} variant={'outline'} onClick={onClose}>
+            <Button mr={3} variant={'base'} onClick={onClose}>
               取消
             </Button>
             <Button onClick={onclickConfirm}>确认</Button>

client/src/pages/chat/components/History.tsx

@@ -158,11 +158,11 @@ const PcSliderBar = ({
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
             _hover={{
-              backgroundImage: ['', theme.active.hoverBlueGradient]
+              backgroundImage: ['', theme.lgColor.hoverBlueGradient]
             }}
             {...(item._id === chatId
               ? {
-                  backgroundImage: `${theme.active.activeBlueGradient}`
+                  backgroundImage: `${theme.lgColor.activeBlueGradient}`
                 }
               : {
                   bg: item.top ? 'myGray.200' : ''

client/src/pages/chat/components/PhoneSliderBar.tsx

@@ -78,7 +78,7 @@ const PhoneSliderBar = ({
         {/* 新对话 */}
         <Button
           w={'50%'}
-          variant={'outline'}
+          variant={'base'}
           colorScheme={'white'}
           mb={2}
           leftIcon={<AddIcon />}

client/src/pages/chat/index.tsx

@@ -749,7 +749,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                                 size={'xs'}
                                 fontWeight={'normal'}
                                 colorScheme={'gray'}
-                                variant={'outline'}
+                                variant={'base'}
                                 px={[2, 4]}
                                 onClick={() => setShowSystemPrompt(item.systemPrompt || '')}
                               >
@@ -762,7 +762,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
                                 size={'xs'}
                                 fontWeight={'normal'}
                                 colorScheme={'gray'}
-                                variant={'outline'}
+                                variant={'base'}
                                 px={[2, 4]}
                                 onClick={() => setShowHistoryQuote(item._id)}
                               >

client/src/pages/chat/share.tsx

@@ -828,7 +828,7 @@ const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) =>
               </Flex>
             </ModalBody>
             <ModalFooter>
-              <Button variant={'outline'} mr={3} onClick={onClosePassword}>
+              <Button variant={'base'} mr={3} onClick={onClosePassword}>
                 取消
               </Button>
               <Button onClick={loadChatInfo}>确定</Button>

client/src/pages/index.module.scss

@@ -2,4 +2,16 @@
   * {
     position: relative;
   }
+
+  .textlg {
+    background: linear-gradient(
+      to bottom right,
+      #1237b3 0%,
+      #3370ff 40%,
+      #4e83fd 80%,
+      #85b1ff 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
 }

client/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Card, Box, Link, Flex, Image, Button } from '@chakra-ui/react';
 import Markdown from '@/components/Markdown';
 import { useMarkdown } from '@/hooks/useMarkdown';
@@ -6,6 +6,8 @@ import { useRouter } from 'next/router';
 import { useGlobalStore } from '@/store/global';
 
 import styles from './index.module.scss';
+import axios from 'axios';
+import MyIcon from '@/components/Icon';
 
 const Home = () => {
   const router = useRouter();
@@ -15,6 +17,7 @@ const Home = () => {
     isPc,
     initData: { beianText }
   } = useGlobalStore();
+  const [star, setStar] = useState(1500);
 
   useEffect(() => {
     if (inviterId) {
@@ -135,6 +138,13 @@ const Home = () => {
     }, 500);
   }, [isPc]);
 
+  useEffect(() => {
+    (async () => {
+      const { data: git } = await axios.get('https://api.github.com/repos/c121914yu/FastGPT');
+      setStar(git.stargazers_count);
+    })();
+  }, []);
+
   return (
     <Flex
       className={styles.home}
@@ -155,22 +165,41 @@ const Home = () => {
       >
         <Image src="/icon/logo.png" w={['70px', '120px']} h={['70px', '120px']} alt={''}></Image>
         <Box
+          className={styles.textlg}
           fontWeight={'bold'}
           fontSize={['40px', '70px']}
           letterSpacing={'5px'}
-          color={'myBlue.600'}
         >
           FastGpt
         </Box>
-        <Box color={'myBlue.600'} fontSize={['30px', '50px']}>
+        <Box className={styles.textlg} fontWeight={'bold'} fontSize={['30px', '50px']}>
           三分钟
         </Box>
-        <Box color={'myBlue.600'} fontSize={['30px', '50px']}>
+        <Box className={styles.textlg} fontWeight={'bold'} fontSize={['30px', '50px']}>
           搭建 AI 知识库
         </Box>
 
+        <Flex flexDirection={['column', 'row']} my={5}>
+          <Button
+            mr={[0, 5]}
+            mb={[5, 0]}
+            fontSize={['xl', '3xl']}
+            h={'auto'}
+            py={[2, 3]}
+            variant={'base'}
+            border={'2px solid'}
+            borderColor={'myGray.800'}
+            transition={'0.3s'}
+            _hover={{
+              bg: 'myGray.800',
+              color: 'white'
+            }}
+            leftIcon={<MyIcon name={'git'} w={'20px'} />}
+            onClick={() => window.open('https://github.com/c121914yu/FastGPT', '_blank')}
+          >
+            Stars {(star / 1000).toFixed(1)}k
+          </Button>
           <Button
-          my={5}
             fontSize={['xl', '3xl']}
             h={'auto'}
             py={[2, 3]}
@@ -179,6 +208,7 @@ const Home = () => {
             点击开始
           </Button>
         </Flex>
+      </Flex>
 
       <Box w={'100%'} mt={'100vh'} px={[5, 10]} pb={[5, 10]}>
         <Card p={5} lineHeight={2}>

client/src/pages/kb/components/DataCard.tsx

@@ -157,7 +157,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
         <IconButton
           icon={<RepeatIcon />}
           aria-label={'refresh'}
-          variant={'outline'}
+          variant={'base'}
           mr={[2, 4]}
           size={'sm'}
           onClick={() => {
@@ -166,7 +166,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
           }}
         />
         <Button
-          variant={'outline'}
+          variant={'base'}
           mr={2}
           size={'sm'}
           isLoading={isLoadingExport}
@@ -259,7 +259,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
                   <IconButton
                     mr={5}
                     icon={<EditIcon />}
-                    variant={'outline'}
+                    variant={'base'}
                     aria-label={'delete'}
                     size={'sm'}
                     onClick={() =>
@@ -272,7 +272,7 @@ const DataCard = ({ kbId }: { kbId: string }) => {
                   />
                   <IconButton
                     icon={<DeleteIcon />}
-                    variant={'outline'}
+                    variant={'base'}
                     colorScheme={'gray'}
                     aria-label={'delete'}
                     size={'sm'}

client/src/pages/kb/components/Info.tsx

@@ -211,7 +211,7 @@ const Info = (
               .split(' ')
               .filter((item) => item)
               .map((item, i) => (
-                <Tag mr={2} mb={2} key={i} variant={'outline'} colorScheme={'blue'}>
+                <Tag mr={2} mb={2} key={i} variant={'base'} colorScheme={'blue'}>
                   {item}
                 </Tag>
               ))}

client/src/pages/kb/components/InputDataModal.tsx

@@ -171,7 +171,7 @@ const InputDataModal = ({
 
         <Flex px={6} pt={2} pb={4}>
           <Box flex={1}></Box>
-          <Button variant={'outline'} mr={3} onClick={onClose}>
+          <Button variant={'base'} mr={3} onClick={onClose}>
             取消
           </Button>
           <Button

client/src/pages/kb/components/KbList.tsx

@@ -82,7 +82,7 @@ const KbList = ({ kbId }: { kbId: string }) => {
             h={'32px'}
             icon={<AddIcon />}
             aria-label={''}
-            variant={'outline'}
+            variant={'base'}
             onClick={handleCreateModel}
           />
         </Tooltip>
@@ -98,11 +98,11 @@ const KbList = ({ kbId }: { kbId: string }) => {
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
             _hover={{
-              backgroundImage: ['', theme.active.hoverBlueGradient]
+              backgroundImage: ['', theme.lgColor.hoverBlueGradient]
             }}
             {...(kbId === item._id
               ? {
-                  backgroundImage: `${theme.active.activeBlueGradient} !important`
+                  backgroundImage: `${theme.lgColor.activeBlueGradient} !important`
                 }
               : {})}
             onClick={() => {
@@ -121,7 +121,7 @@ const KbList = ({ kbId }: { kbId: string }) => {
                   <>{item.tags || '你还没设置标签~'}</>
                 ) : (
                   item.tags.split(' ').map((item, i) => (
-                    <Tag key={i} mr={2} mb={2} variant={'outline'} colorScheme={'blue'} size={'sm'}>
+                    <Tag key={i} mr={2} mb={2} variant={'base'} colorScheme={'blue'} size={'sm'}>
                       {item}
                     </Tag>
                   ))

client/src/pages/kb/components/SelectCsvModal.tsx

@@ -159,7 +159,7 @@ const SelectJsonModal = ({
 
         <Flex px={6} pt={2} pb={4}>
           <Box flex={1}></Box>
-          <Button variant={'outline'} isLoading={uploading} mr={3} onClick={onClose}>
+          <Button variant={'base'} isLoading={uploading} mr={3} onClick={onClose}>
             取消
           </Button>
           <Button isDisabled={fileData.length === 0 || uploading} onClick={openConfirm(mutate)}>

client/src/pages/kb/components/SelectFileModal.tsx

@@ -292,7 +292,7 @@ const SelectFileModal = ({
             选择文件
           </Button>
           <Box flex={1}></Box>
-          <Button variant={'outline'} isLoading={uploading} mr={3} onClick={onClose}>
+          <Button variant={'base'} isLoading={uploading} mr={3} onClick={onClose}>
             取消
           </Button>
           <Button

client/src/pages/model/components/ModelList.tsx

@@ -1,15 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
-import {
+import { Box, Flex, Input, IconButton, Tooltip, Tab, useTheme } from '@chakra-ui/react';
-  Box,
-  Flex,
-  Input,
-  IconButton,
-  Tooltip,
-  Tabs,
-  TabList,
-  Tab,
-  useTheme
-} from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { useRouter } from 'next/router';
 import MyIcon from '@/components/Icon';
@@ -18,14 +8,12 @@ import { useLoading } from '@/hooks/useLoading';
 import { useToast } from '@/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { useUserStore } from '@/store/user';
-import Avatar from '@/components/Avatar';
 import { MyModelsTypeEnum } from '@/constants/user';
 
+import Avatar from '@/components/Avatar';
+import Tabs from '@/components/Tabs';
+
 const ModelList = ({ modelId }: { modelId: string }) => {
-  const tabs = useRef([
-    { label: '我的', value: MyModelsTypeEnum.my },
-    { label: '收藏', value: MyModelsTypeEnum.collection }
-  ]);
   const [currentTab, setCurrentTab] = useState(MyModelsTypeEnum.my);
 
   const theme = useTheme();
@@ -86,7 +74,7 @@ const ModelList = ({ modelId }: { modelId: string }) => {
       bg={'white'}
       borderRight={['', theme.borders.base]}
     >
-      <Flex w={'90%'} my={5} mx={'auto'}>
+      <Flex w={'90%'} mt={5} mb={3} mx={'auto'}>
         <Flex flex={1} mr={2} position={'relative'} alignItems={'center'}>
           <Input
             h={'32px'}
@@ -113,34 +101,23 @@ const ModelList = ({ modelId }: { modelId: string }) => {
             h={'32px'}
             icon={<AddIcon />}
             aria-label={''}
-            variant={'outline'}
+            variant={'base'}
             onClick={onclickCreateModel}
           />
         </Tooltip>
       </Flex>
-      <Flex mb={4} userSelect={'none'}>
+      <Flex mb={3} userSelect={'none'}>
         <Box flex={1}></Box>
         <Tabs
-          variant="unstyled"
+          w={'130px'}
-          defaultIndex={tabs.current.findIndex((item) => item.value === currentTab)}
+          list={[
-          onChange={(i) => setCurrentTab(tabs.current[i].value)}
+            { label: '我的', id: MyModelsTypeEnum.my },
-        >
+            { label: '收藏', id: MyModelsTypeEnum.collection }
-          <TabList whiteSpace={'nowrap'}>
+          ]}
-            {tabs.current.map((item) => (
+          activeId={currentTab}
-              <Tab
+          size={'sm'}
-                key={item.value}
+          onChange={(id: any) => setCurrentTab(id)}
-                py={'2px'}
+        />
-                px={4}
-                borderRadius={'sm'}
-                mr={2}
-                transition={'none'}
-                _selected={{ color: 'white', bg: 'myBlue.600' }}
-              >
-                {item.label}
-              </Tab>
-            ))}
-          </TabList>
-        </Tabs>
       </Flex>
       <Box flex={'1 0 0'} h={0} overflow={'overlay'} userSelect={'none'}>
         {currentModels.list.map((item) => (
@@ -153,11 +130,11 @@ const ModelList = ({ modelId }: { modelId: string }) => {
             cursor={'pointer'}
             transition={'background-color .2s ease-in'}
             _hover={{
-              backgroundImage: ['', theme.active.hoverBlueGradient]
+              backgroundImage: ['', theme.lgColor.hoverBlueGradient]
             }}
             {...(modelId === item._id
               ? {
-                  backgroundImage: `${theme.active.activeBlueGradient} !important`
+                  backgroundImage: `${theme.lgColor.activeBlueGradient} !important`
                 }
               : {})}
             onClick={() => {

client/src/pages/model/components/detail/components/ModelEditForm.tsx

@@ -278,7 +278,7 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
             <Box flex={'0 0 100px'}>删除应用</Box>
             <Button
               colorScheme={'gray'}
-              variant={'outline'}
+              variant={'base'}
               size={'sm'}
               onClick={openConfirm(handleDelModel)}
             >
@@ -388,20 +388,6 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
                     setRefresh(!refresh);
                   }}
                 />
-
-                <Box ml={12} mr={1} fontSize={['sm', 'md']}>
-                  分享模型细节:
-                </Box>
-                <Tooltip label="开启分享详情后，其他用户可以查看该模型的特有数据：温度、提示词和数据集。">
-                  <QuestionOutlineIcon mr={3} />
-                </Tooltip>
-                <Switch
-                  isChecked={getValues('share.isShareDetail')}
-                  onChange={() => {
-                    setValue('share.isShareDetail', !getValues('share.isShareDetail'));
-                    setRefresh(!refresh);
-                  }}
-                />
               </Flex>
               <Box mt={5}>
                 <Box>模型介绍</Box>
@@ -418,12 +404,7 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
           <Card p={4}>
             <Flex justifyContent={'space-between'}>
               <Box fontWeight={'bold'}>关联的知识库</Box>
-              <Button
+              <Button size={'sm'} variant={'base'} colorScheme={'myBlue'} onClick={onOpenKbSelect}>
-                size={'sm'}
-                variant={'outline'}
-                colorScheme={'myBlue'}
-                onClick={onOpenKbSelect}
-              >
                 选择
               </Button>
             </Flex>
@@ -443,7 +424,7 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
           </Box>
           <Button
             size={'sm'}
-            variant={'outline'}
+            variant={'base'}
             colorScheme={'myBlue'}
             {...(shareChatList.length >= 10
               ? {
@@ -585,7 +566,7 @@ ${e.password ? `密码为: ${e.password}` : ''}`;
           </ModalBody>
 
           <ModalFooter>
-            <Button variant={'outline'} mr={3} onClick={onCloseCreateShareChat}>
+            <Button variant={'base'} mr={3} onClick={onCloseCreateShareChat}>
               取消
             </Button>
             <Button onClick={submitShareChat(onclickCreateShareChat)}>确认</Button>

client/src/pages/model/components/detail/index.tsx

@@ -141,7 +141,7 @@ const ModelDetail = ({ modelId, isPc }: { modelId: string; isPc: boolean }) => {
               {modelDetail.name}
             </Box>
             <Box flex={1} />
-            <Button variant={'outline'} onClick={handlePreviewChat}>
+            <Button variant={'base'} onClick={handlePreviewChat}>
               开始对话
             </Button>
             {isOwner && (
@@ -173,7 +173,7 @@ const ModelDetail = ({ modelId, isPc }: { modelId: string; isPc: boolean }) => {
               </Box>
             </Flex>
             <Box mt={4} textAlign={'right'}>
-              <Button variant={'outline'} size={'sm'} onClick={handlePreviewChat}>
+              <Button variant={'base'} size={'sm'} onClick={handlePreviewChat}>
                 开始对话
               </Button>
               {isOwner && (

client/src/pages/model/share/components/list.tsx

@@ -68,7 +68,7 @@ const ShareModelList = ({
             <Box>
               <Button
                 size={'sm'}
-                variant={'outline'}
+                variant={'base'}
                 w={['60px', '70px']}
                 onClick={() => router.push(`/chat?modelId=${model._id}`)}
               >

client/src/pages/number/components/InformTable.tsx

@@ -31,7 +31,7 @@ const BillTable = () => {
   });
 
   return (
-    <>
+    <Box mt={2}>
       <Accordion defaultIndex={[0, 1, 2]} allowMultiple>
         {informs.map((item) => (
           <AccordionItem
@@ -84,7 +84,7 @@ const BillTable = () => {
         </Flex>
       )}
       <Loading loading={isLoading && informs.length === 0} fixed={false} />
-    </>
+    </Box>
   );
 };
 

client/src/pages/number/components/PayModal.tsx

@@ -130,7 +130,7 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
           <ModalFooter>
             {!payId && (
               <>
-                <Button variant={'outline'} onClick={onClose}>
+                <Button variant={'base'} onClick={onClose}>
                   取消
                 </Button>
                 <Button

client/src/pages/number/index.tsx

@@ -1,18 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import {
+import { Card, Box, Flex, Button, Input, Grid, useDisclosure } from '@chakra-ui/react';
-  Card,
-  Box,
-  Flex,
-  Button,
-  Input,
-  Grid,
-  useDisclosure,
-  Tabs,
-  TabList,
-  TabPanels,
-  Tab,
-  TabPanel
-} from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
 import { putUserInfo, getPromotionInitData } from '@/api/user';
@@ -30,6 +17,7 @@ import { useCopyData } from '@/utils/tools';
 import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
+import Tabs from '@/components/Tabs';
 
 const PayRecordTable = dynamic(() => import('./components/PayRecordTable'), {
   loading: () => <Loading fixed={false} />,
@@ -65,11 +53,13 @@ enum TableEnum {
 
 const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
   const tableList = useRef([
-    { label: '账单', value: TableEnum.bill, Component: BilTable },
+    { label: '账单', id: TableEnum.bill, Component: <BilTable /> },
-    { label: '充值', value: TableEnum.pay, Component: PayRecordTable },
+    { label: '充值', id: TableEnum.pay, Component: <PayRecordTable /> },
-    { label: '佣金', value: TableEnum.promotion, Component: PromotionTable },
+    { label: '佣金', id: TableEnum.promotion, Component: <PromotionTable /> },
-    { label: '通知', value: TableEnum.inform, Component: InformTable }
+    { label: '通知', id: TableEnum.inform, Component: <InformTable /> }
   ]);
+  const [currentTab, setCurrentTab] = useState(tableType);
+
   const router = useRouter();
   const { copyData } = useCopyData();
   const { userInfo, updateUserInfo, initUserInfo, setUserInfo } = useUserStore();
@@ -98,8 +88,14 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
     async (data: UserUpdateParams) => {
       setLoading(true);
       try {
-        await putUserInfo(data);
+        await putUserInfo({
-        updateUserInfo(data);
+          openaiKey: data.openaiKey,
+          avatar: data.avatar
+        });
+        updateUserInfo({
+          openaiKey: data.openaiKey,
+          avatar: data.avatar
+        });
         reset(data);
         toast({
           title: '更新成功',
@@ -159,7 +155,7 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
             <Box fontSize={'xl'} fontWeight={'bold'}>
               账号信息
             </Box>
-            <Button variant={'outline'} size={'xs'} onClick={onclickLogOut}>
+            <Button variant={'base'} size={'xs'} onClick={onclickLogOut}>
               退出登录
             </Button>
           </Flex>
@@ -224,7 +220,7 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
           ))}
           <Button
             mt={4}
-            variant={'outline'}
+            variant={'base'}
             w={'100%'}
             onClick={() =>
               copyData(`${location.origin}/?inviterId=${userInfo?._id}`, '已复制邀请链接')
@@ -238,7 +234,7 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
             px={4}
             title={residueAmount < 50 ? '最低提现额度为50元' : ''}
             isDisabled={residueAmount < 50}
-            variant={'outline'}
+            variant={'base'}
             colorScheme={'myBlue'}
             onClick={onOpenWxConcat}
           >
@@ -249,34 +245,19 @@ const NumberSetting = ({ tableType }: { tableType: `${TableEnum}` }) => {
 
       <Card mt={4} px={[3, 6]} py={4}>
         <Tabs
-          variant="unstyled"
+          w={'200px'}
-          isLazy
+          list={tableList.current}
-          defaultIndex={tableList.current.findIndex((item) => item.value === tableType)}
+          activeId={currentTab}
-          onChange={(i) => router.replace(`/number?type=${tableList.current[i].value}`)}
+          size={'sm'}
-        >
+          onChange={(id: any) => setCurrentTab(id)}
-          <TabList whiteSpace={'nowrap'}>
+        />
-            {tableList.current.map((item) => (
+        <Box>
-              <Tab
+          {(() => {
-                key={item.value}
+            const item = tableList.current.find((item) => item.id === currentTab);
-                py={'2px'}
+
-                px={4}
+            return item ? item.Component : null;
-                borderRadius={'sm'}
+          })()}
-                mr={2}
+        </Box>
-                transition={'none'}
-                _selected={{ color: 'white', bg: 'myBlue.600' }}
-              >
-                {item.label}
-              </Tab>
-            ))}
-          </TabList>
-          <TabPanels>
-            {tableList.current.map((Item) => (
-              <TabPanel minH={'550px'} key={Item.value}>
-                <Item.Component />
-              </TabPanel>
-            ))}
-          </TabPanels>
-        </Tabs>
       </Card>
 
       {isOpenPayModal && <PayModal onClose={onClosePayModal} />}

client/src/pages/openapi/index.tsx

@@ -97,7 +97,7 @@ const OpenApi = () => {
                       icon={<DeleteIcon />}
                       size={'xs'}
                       aria-label={'delete'}
-                      variant={'outline'}
+                      variant={'base'}
                       colorScheme={'gray'}
                       onClick={() => onclickRemove(id)}
                     />