Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 623018f4 by archer
Options

perf: ui

parent 6b6da76a
Showing with 236 additions and 162 deletions
client/src/components/Tabs/index.tsx 0 → 100644
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
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,29 +165,49 @@ 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>
<Button
my={5}
fontSize={['xl', '3xl']}
h={'auto'}
py={[2, 3]}
onClick={() => router.push(`/model`)}
>
点击开始
</Button>
<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
fontSize={['xl', '3xl']}
h={'auto'}
py={[2, 3]}
onClick={() => router.push(`/model`)}
>
点击开始
</Button>
</Flex>
</Flex>
<Box w={'100%'} mt={'100vh'} px={[5, 10]} pb={[5, 10]}>
......
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
import React, { useCallback, useMemo, useRef, useState } from 'react';
import {
Box,
Flex,
Input,
IconButton,
Tooltip,
Tabs,
TabList,
Tab,
useTheme
} from '@chakra-ui/react';
import { Box, Flex, Input, IconButton, Tooltip, 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"
defaultIndex={tabs.current.findIndex((item) => item.value === currentTab)}
onChange={(i) => setCurrentTab(tabs.current[i].value)}
>
<TabList whiteSpace={'nowrap'}>
{tabs.current.map((item) => (
<Tab
key={item.value}
py={'2px'}
px={4}
borderRadius={'sm'}
mr={2}
transition={'none'}
_selected={{ color: 'white', bg: 'myBlue.600' }}
>
{item.label}
</Tab>
))}
</TabList>
</Tabs>
w={'130px'}
list={[
{ label: '我的', id: MyModelsTypeEnum.my },
{ label: '收藏', id: MyModelsTypeEnum.collection }
]}
activeId={currentTab}
size={'sm'}
onChange={(id: any) => setCurrentTab(id)}
/>
</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
size={'sm'}
variant={'outline'}
colorScheme={'myBlue'}
onClick={onOpenKbSelect}
>
<Button size={'sm'} variant={'base'} 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
import React, { useCallback, useRef, useState } from 'react';
import {
Card,
Box,
Flex,
Button,
Input,
Grid,
useDisclosure,
Tabs,
TabList,
TabPanels,
Tab,
TabPanel
} from '@chakra-ui/react';
import { Card, Box, Flex, Button, Input, Grid, useDisclosure } 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: '充值', value: TableEnum.pay, Component: PayRecordTable },
{ label: '佣金', value: TableEnum.promotion, Component: PromotionTable },
{ label: '通知', value: TableEnum.inform, Component: InformTable }
{ label: '账单', id: TableEnum.bill, Component: <BilTable /> },
{ label: '充值', id: TableEnum.pay, Component: <PayRecordTable /> },
{ label: '佣金', id: TableEnum.promotion, Component: <PromotionTable /> },
{ 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);
updateUserInfo(data);
await putUserInfo({
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"
isLazy
defaultIndex={tableList.current.findIndex((item) => item.value === tableType)}
onChange={(i) => router.replace(`/number?type=${tableList.current[i].value}`)}
>
<TabList whiteSpace={'nowrap'}>
{tableList.current.map((item) => (
<Tab
key={item.value}
py={'2px'}
px={4}
borderRadius={'sm'}
mr={2}
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>
w={'200px'}
list={tableList.current}
activeId={currentTab}
size={'sm'}
onChange={(id: any) => setCurrentTab(id)}
/>
<Box>
{(() => {
const item = tableList.current.find((item) => item.id === currentTab);
return item ? item.Component : null;
})()}
</Box>
</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)}
/>
......
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