perf: ui

623018f4 · archer · 6b6da76a · 623018f4 · 623018f4 · 623018f4
Commit 623018f4 authored Jun 11, 2023 by archer
25 changed files
--- a/client/src/components/Tabs/index.tsx
+++ b/client/src/components/Tabs/index.tsx
+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;
--- a/client/src/components/WxConcat/index.tsx
+++ b/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>

--- a/client/src/constants/theme.ts
+++ b/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,

--- a/client/src/hooks/useConfirm.tsx
+++ b/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();

--- a/client/src/hooks/useEditInfo.tsx
+++ b/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>

--- a/client/src/pages/chat/components/History.tsx
+++ b/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' : ''

--- a/client/src/pages/chat/components/PhoneSliderBar.tsx
+++ b/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 />}

--- a/client/src/pages/chat/index.tsx
+++ b/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)}
                              >

--- a/client/src/pages/chat/share.tsx
+++ b/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>

--- a/client/src/pages/index.module.scss
+++ b/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;
+  }
 }
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
-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}>

--- a/client/src/pages/kb/components/DataCard.tsx
+++ b/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'}

--- a/client/src/pages/kb/components/Info.tsx
+++ b/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>
              ))}

--- a/client/src/pages/kb/components/InputDataModal.tsx
+++ b/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

--- a/client/src/pages/kb/components/KbList.tsx
+++ b/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>
                  ))

--- a/client/src/pages/kb/components/SelectCsvModal.tsx
+++ b/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)}>

--- a/client/src/pages/kb/components/SelectFileModal.tsx
+++ b/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

--- a/client/src/pages/model/components/ModelList.tsx
+++ b/client/src/pages/model/components/ModelList.tsx
 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={() => {

--- a/client/src/pages/model/components/detail/components/ModelEditForm.tsx
+++ b/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>

--- a/client/src/pages/model/components/detail/index.tsx
+++ b/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 && (

--- a/client/src/pages/model/share/components/list.tsx
+++ b/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}`)}
              >

--- a/client/src/pages/number/components/InformTable.tsx
+++ b/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>
  );
 };

--- a/client/src/pages/number/components/PayModal.tsx
+++ b/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

--- a/client/src/pages/number/index.tsx
+++ b/client/src/pages/number/index.tsx
 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} />}

--- a/client/src/pages/openapi/index.tsx
+++ b/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)}
                    />