ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-08-02 20:58:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: pay page perf (#2535)

Browse Source 
* style: pay page perf

* perf: package status logic && add pay text
This commit is contained in:
papapatrick
2024-08-27 18:56:08 +08:00
committed by GitHub
parent d057ad3a45
commit 454a479fd8
15 changed files with 518 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
projects/app/src/pages/price/components/ExtraPlan.tsx
View File

@@ -119,15 +119,15 @@ const ExtraPlan = () => {
return (
<Flex
mt={['40px', '90px']}
mt={['40px', '200px']}
flexDirection={'column'}
alignItems={'center'}
position={'relative'}
>
<Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']}>
<Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
{t('common:support.wallet.subscription.Extra plan')}
</Box>
<Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
<Box mt={2} mb={8} color={'myGray.600'} fontSize={'md'}>
{t('common:support.wallet.subscription.Extra plan tip')}
</Box>
<Grid mt={8} gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
@@ -143,12 +143,12 @@ const ExtraPlan = () => {
>
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
<Box flex={'1 0 0'}>
<Box fontSize={'lg'} color={'primary.600'}>
<Box fontSize={'lg'} color={'primary.700'}>
{t('common:support.wallet.subscription.Extra dataset size')}
</Box>
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
{`￥${extraDatasetPrice}/1000` + t('common:core.dataset.data.group')}
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
/{t('common:common.month')}
</Box>
</Box>
@@ -162,12 +162,12 @@ const ExtraPlan = () => {
/>
</Flex>
<Box h={'120px'} w={'100%'}>
<Flex mt={4}>
<Flex mt={4} color={'myGray.900'}>
<MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
{t('common:support.wallet.buy_resource')}
</Flex>
<Flex mt={4} alignItems={'center'}>
<Box flex={['0 0 100px', '1 0 0']}>
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
{t('common:support.wallet.subscription.Month amount')}
</Box>
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
@@ -186,13 +186,13 @@ const ExtraPlan = () => {
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
<Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
{t('common:common.month')}
</Box>
</Flex>
</Flex>
<Flex mt={4} alignItems={'center'}>
<Box flex={['0 0 100px', '1 0 0']}>
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
{t('common:support.wallet.subscription.Update extra dataset size')}
</Box>
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
@@ -219,7 +219,7 @@ const ExtraPlan = () => {
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
<Box position={'absolute'} right={'20px'} color={'myGray.600'} fontSize={'xs'}>
000{t('common:core.dataset.data.unit')}
</Box>
</Flex>
@@ -231,6 +231,7 @@ const ExtraPlan = () => {
variant={'primaryGhost'}
isLoading={loading}
onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)}
color={'primary.700'}
>
{t('common:support.wallet.Buy')}
</Button>
@@ -248,12 +249,12 @@ const ExtraPlan = () => {
>
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
<Box flex={'1 0 0'}>
<Box fontSize={'lg'} color={'primary.600'}>
<Box fontSize={'lg'} color={'primary.700'}>
{t('common:support.wallet.subscription.Extra ai points')}
</Box>
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
<Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'} color={'black'}>
{`￥${extraPointsPrice}/1000` + t('common:support.wallet.subscription.point')}
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.600'} fontWeight={'normal'}>
<Box ml={1} as={'span'} fontSize={'md'} color={'myGray.500'} fontWeight={'normal'}>
/{t('common:common.month')}
</Box>
</Box>
@@ -267,7 +268,7 @@ const ExtraPlan = () => {
/>
</Flex>
<Box h={'120px'} w={'100%'}>
<Flex mt={4}>
<Flex mt={4} color={'myGray.900'}>
<MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
{t('common:support.wallet.buy_resource')}
</Flex>
@@ -297,10 +298,16 @@ const ExtraPlan = () => {
</Flex>
</Flex> */}
<Flex mt={4} alignItems={'center'}>
<Box flex={['0 0 100px', '1 0 0']}>
<Box flex={['0 0 100px', '1 0 0']} color={'myGray.600'}>
{t('common:support.wallet.subscription.Update extra ai points')}
</Box>
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
<Flex
alignItems={'center'}
mt={1}
w={'180px'}
position={'relative'}
color={'myGray.500'}
>
<NumberInput
size={'sm'}
flex={1}
@@ -336,6 +343,7 @@ const ExtraPlan = () => {
variant={'primaryGhost'}
isLoading={loading}
onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)}
color={'primary.700'}
>
{t('common:support.wallet.Buy')}
</Button>

24
projects/app/src/pages/price/components/FAQ.tsx
View File

@@ -6,12 +6,12 @@ const FAQ = () => {
const { t } = useTranslation();
const faqs = [
{
title: t('common:FAQ.auto_renew_q'),
desc: t('common:FAQ.auto_renew_a')
title: t('common:FAQ.switch_package_q'),
desc: t('common:FAQ.switch_package_a')
},
{
title: t('common:FAQ.change_package_q'),
desc: t('common:FAQ.change_package_a')
title: t('common:FAQ.check_subscription_q'),
desc: t('common:FAQ.check_subscription_a')
},
{
title: t('common:FAQ.ai_point_q'),
@@ -41,21 +41,21 @@ const FAQ = () => {
return (
<Flex
mt={['40px', '90px']}
mt={['40px', '200px']}
pb={'10vh'}
flexDirection={'column'}
alignItems={'center'}
position={'relative'}
>
<Box fontWeight={'bold'} fontSize={['24px', '36px']}>
<Box fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
{t('common:support.wallet.subscription.FAQ')}
</Box>
<Grid mt={4} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
<Grid mt={12} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
{faqs.map((item, i) => (
<Box
key={i}
py={4}
px={5}
py={8}
px={9}
borderRadius={'lg'}
borderWidth={'1px'}
borderColor={'myGray.150'}
@@ -64,8 +64,10 @@ const FAQ = () => {
borderColor: 'primary.300'
}}
>
<Box fontWeight={'bold'}>{item.title}</Box>
<Box fontSize={'sm'} color={'myGray.600'} whiteSpace={'pre-wrap'}>
<Box fontWeight={'bold'} pb={3} color={'myGray.900'}>
{item.title}
</Box>
<Box fontSize={'sm'} color={'myGray.600'}>
{item.desc}
</Box>
</Box>

23
projects/app/src/pages/price/components/Points.tsx
View File

@@ -9,18 +9,18 @@ const Points = () => {
return (
<Flex
mt={['40px', '90px']}
mt={['40px', '200px']}
flexDirection={'column'}
alignItems={'center'}
position={'relative'}
>
<Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']}>
<Box id="point-card" fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
{t('common:support.wallet.subscription.Ai points')}
</Box>
<Link href="https://tiktokenizer.vercel.app/" target="_blank">
{t('common:support.wallet.subscription.token_compute')}
</Link>
<Grid gap={6} mt={['30px', '40px']} w={'100%'}>
<Grid gap={6} mt={['30px', 14]} w={'100%'} color={'myGray.900'}>
<Box
display={['block', 'flex']}
borderRadius={'xl'}
@@ -33,16 +33,17 @@ const Points = () => {
flex={1}
borderRightWidth={'1px'}
borderRightColor={'myGray.150'}
py={4}
px={6}
py={8}
pl={10}
fontSize={'md'}
fontWeight={'bold'}
color={'myGray.900'}
>
{t('common:support.wallet.subscription.ai_model')}
</Box>
<Box flex={4} textAlign={'center'}>
{llmModelList?.map((item, i) => (
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
<Box flex={'1 0 0'}>{item.name}</Box>
<Box flex={'1 0 0'}>
{item.charsPointsPrice +
@@ -61,17 +62,17 @@ const Points = () => {
bg={'rgba(255,255,255,0.9)'}
overflow={'hidden'}
>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
<Box fontSize={'md'} fontWeight={'bold'}>
{t('common:core.ai.model.Vector Model')}
</Box>
<Box fontSize={'sm'} mt={1} color={'myGray.500'}>
<Box fontSize={'sm'} mt={1} color={'myGray.600'}>
{t('common:core.ai.model.doc_index_and_dialog')}
</Box>
</Box>
<Box flex={4} textAlign={'center'}>
{vectorModelList?.map((item, i) => (
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.100' : ''}>
<Box flex={'1 0 0'}>{item.name}</Box>
<Box flex={'1 0 0'}>
{item.charsPointsPrice +
@@ -90,7 +91,7 @@ const Points = () => {
bg={'rgba(255,255,255,0.9)'}
overflow={'hidden'}
>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
<Box fontSize={'md'} fontWeight={'bold'}>
{t('common:core.app.TTS')}
</Box>
@@ -117,7 +118,7 @@ const Points = () => {
bg={'rgba(255,255,255,0.9)'}
overflow={'hidden'}
>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} px={6}>
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} pl={10}>
<Box fontSize={'md'} fontWeight={'bold'}>
{t('common:core.app.Whisper')}
</Box>

315
projects/app/src/pages/price/components/Standard.tsx
View File

@@ -1,8 +1,13 @@
import React, { useMemo, useState } from 'react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { Box, Button, Flex, Grid } from '@chakra-ui/react';
import { Box, Button, Flex, Grid, HStack } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import { StandardSubLevelEnum, SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants';
import {
StandardSubLevelEnum,
SubModeEnum,
PackageChangeStatusEnum,
packagePayTextMap
} from '@fastgpt/global/support/wallet/sub/constants';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
@@ -24,7 +29,7 @@ const Standard = ({
const { t } = useTranslation();
const router = useRouter();
const { toast } = useToast();
const [packageChange, setPackageChange] = useState<PackageChangeStatusEnum>();
const { subPlans, feConfigs } = useSystemStore();
const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month);
@@ -66,103 +71,180 @@ const Standard = ({
});
return (
<Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
<Box fontWeight={'bold'} fontSize={['24px', '36px']}>
{t('common:support.wallet.subscription.Sub plan')}
</Box>
<Box mt={8} mb={10} color={'myGray.500'} fontSize={'md'}>
{t('common:support.wallet.subscription.Sub plan tip', {
title: feConfigs?.systemTitle
})}
</Box>
<Box>
<RowTabs
list={[
{ label: t('common:support.wallet.subscription.mode.Month'), value: SubModeEnum.month },
{
label: (
<Flex>
{t('common:support.wallet.subscription.mode.Year')}
<Box color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
({t('common:support.wallet.subscription.mode.Year sale')})
<>
<Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
<Box fontWeight={'600'} color={'myGray.900'} fontSize={['24px', '36px']}>
{t('common:support.wallet.subscription.Sub plan')}
</Box>
<Box mt={8} mb={10} fontWeight={'500'} color={'myGray.600'} fontSize={'md'}>
{t('common:support.wallet.subscription.Sub plan tip', {
title: feConfigs?.systemTitle
})}
</Box>
<Box>
<RowTabs
list={[
{
label: t('common:support.wallet.subscription.mode.Month'),
value: SubModeEnum.month
},
{
label: (
<Flex>
{t('common:support.wallet.subscription.mode.Year')}
<Box ml={1} color={selectSubMode === SubModeEnum.month ? 'red.600' : 'auto'}>
({t('common:support.wallet.subscription.mode.Year sale')})
</Box>
</Flex>
),
value: SubModeEnum.year
}
]}
value={selectSubMode}
onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
/>
</Box>
{/* card */}
<Grid
mt={[10, '48px']}
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
gap={[4, 6, 8]}
w={'100%'}
maxW={'1440px'}
minH={'550px'}
>
{standardSubList.map((item) => {
const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
const isHigherLevel =
standardSubLevelMap[item.level].weight >
standardSubLevelMap[myStandardPlan?.currentSubLevel || StandardSubLevelEnum.free]
.weight;
return (
<Box
key={item.level}
pos={'relative'}
flex={'1 0 0'}
bg={isCurrentPlan ? 'blue.50' : 'rgba(255, 255, 255, 0.90)'}
p={'28px'}
borderRadius={'xl'}
borderWidth={isCurrentPlan ? '4px' : '1.5px'}
boxShadow={'1.5'}
{...(isCurrentPlan
? {
borderColor: 'primary.600'
}
: {
borderColor: 'myGray.150'
})}
>
{isCurrentPlan && (
<Box
position={'absolute'}
right={0}
top={'1.62rem'}
px={3}
py={'0.38rem'}
color={'blue.700'}
fontSize={'xs'}
bg={'blue.200'}
fontWeight={'500'}
borderLeftRadius={'sm'}
>
{t('common:is_using')}
</Box>
</Flex>
),
value: SubModeEnum.year
}
]}
value={selectSubMode}
onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)}
/>
</Box>
{/* card */}
<Grid
mt={[10, '48px']}
gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(4,1fr)']}
gap={[4, 6, 8]}
w={'100%'}
maxW={'1440px'}
minH={'550px'}
>
{standardSubList.map((item) => {
const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
)}
<Box fontSize={'md'} fontWeight={'500'} color={'myGray.900'}>
{t(item.label)}
</Box>
<Box fontSize={['32px', '42px']} fontWeight={'bold'} color={'myGray.900'}>
￥{item.price}
</Box>
<Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
{t(item.desc as any, { title: feConfigs?.systemTitle })}
</Box>
return (
<Box
key={item.level}
flex={'1 0 0'}
bg={'rgba(255, 255, 255, 0.90)'}
p={'28px'}
borderRadius={'2xl'}
borderWidth={'1.5px'}
boxShadow={'1.5'}
{...(isCurrentPlan
? {
borderColor: 'primary.600'
{/* Button */}
{(() => {
if (item.level === StandardSubLevelEnum.free) {
return (
<Button
mt={4}
mb={6}
_active={{}}
_hover={{}}
boxShadow={'0'}
cursor={'default'}
w={'100%'}
variant={isCurrentPlan ? 'whiteBase' : 'solid'}
>
{t('common:free')}
</Button>
);
}
// feature:
// if (
// item.level === myStandardPlan?.nextSubLevel &&
// selectSubMode === myStandardPlan?.nextMode
// ) {
// return (
// <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
// {t('common:support.wallet.subscription.Next plan')}
// </Button>
// );
// }
if (isCurrentPlan) {
return (
<Button
mt={4}
mb={6}
w={'100%'}
variant={'primary'}
isLoading={isLoading}
onClick={() => {
setPackageChange(PackageChangeStatusEnum.renewal);
onPay({
type: BillTypeEnum.standSubPlan,
level: item.level,
subMode: selectSubMode
});
}}
>
{t('user:bill.renew_plan')}
</Button>
);
}
if (isHigherLevel) {
return (
<Button
mt={4}
mb={6}
w={'100%'}
variant={'primaryGhost'}
isLoading={isLoading}
onClick={() => {
setPackageChange(PackageChangeStatusEnum.upgrade);
onPay({
type: BillTypeEnum.standSubPlan,
level: item.level,
subMode: selectSubMode
});
}}
>
{t('common:support.wallet.subscription.Upgrade plan')}
</Button>
);
}
: {
borderColor: 'myGray.150'
})}
>
<Box fontSize={'md'} fontWeight={'500'}>
{t(item.label)}
</Box>
<Box fontSize={['32px', '42px']} fontWeight={'bold'}>
￥{item.price}
</Box>
<Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
{t(item.desc as any, { title: feConfigs?.systemTitle })}
</Box>
{/* Button */}
{(() => {
if (item.level === StandardSubLevelEnum.free) {
return (
<Button isDisabled mt={4} mb={6} w={'100%'} variant={'solid'}>
{t('common:support.wallet.subscription.Nonsupport')}
</Button>
);
}
// feature:
// if (
// item.level === myStandardPlan?.nextSubLevel &&
// selectSubMode === myStandardPlan?.nextMode
// ) {
// return (
// <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
// {t('common:support.wallet.subscription.Next plan')}
// </Button>
// );
// }
if (isCurrentPlan) {
return (
<Button
mt={4}
mb={6}
w={'100%'}
variant={'primary'}
variant={'primaryGhost'}
isLoading={isLoading}
onClick={() => {
setPackageChange(PackageChangeStatusEnum.buy);
onPay({
type: BillTypeEnum.standSubPlan,
level: item.level,
@@ -170,40 +252,29 @@ const Standard = ({
});
}}
>
{t('user:bill.renew_plan')}
{t('user:bill.buy_plan')}
</Button>
);
}
})()}
return (
<Button
mt={4}
mb={6}
w={'100%'}
variant={'primaryGhost'}
isLoading={isLoading}
onClick={() =>
onPay({
type: BillTypeEnum.standSubPlan,
level: item.level,
subMode: selectSubMode
})
}
>
{t('user:bill.buy_plan')}
</Button>
);
})()}
{/* function list */}
<StandardPlanContentList level={item.level} mode={selectSubMode} />
</Box>
);
})}
</Grid>
{/* function list */}
<StandardPlanContentList level={item.level} mode={selectSubMode} />
</Box>
);
})}
</Grid>
{!!qrPayData && <QRCodePayModal tip="您正在购买订阅套餐" {...qrPayData} />}
</Flex>
{!!qrPayData && packageChange && (
<QRCodePayModal tip={t(packagePayTextMap[packageChange])} {...qrPayData} />
)}
</Flex>
<HStack mt={8} color={'blue.700'} ml={8}>
<MyIcon name={'infoRounded'} w={'1rem'} />
<Box fontSize={'sm'} fontWeight={'500'}>
{t('user:bill.standard_valid_tip')}
</Box>
</HStack>
</>
);
};
@@ -239,7 +310,7 @@ const RowTabs = ({
alignItems={'center'}
justifyContent={'center'}
cursor={'pointer'}
borderRadius={'md'}
borderRadius={'sm'}
px={'12px'}
py={'7px'}
userSelect={'none'}
@@ -255,7 +326,7 @@ const RowTabs = ({
})}
>
{item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
<Box>{item.label}</Box>
<Box fontWeight={'500'}>{item.label}</Box>
</Flex>
))}
</Box>

9
projects/app/src/pages/price/index.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { serviceSideProps } from '@/web/common/utils/i18n';
import { Box } from '@chakra-ui/react';
import { Box, Flex } from '@chakra-ui/react';
import { useUserStore } from '@/web/support/user/useUserStore';
import { getTeamPlanStatus } from '@/web/support/user/team/api';
import { useQuery } from '@tanstack/react-query';
@@ -26,13 +26,14 @@ const PriceBox = () => {
return (
<>
<Script src="/js/qrcode.min.js" strategy="lazyOnload"></Script>
<Box
<Flex
h={'100%'}
flexDir={'column'}
overflow={'overlay'}
w={'100%'}
px={['20px', '5vw']}
py={['30px', '80px']}
backgroundImage={'url(/imgs/priceBg.svg)'}
bg={`linear-gradient(to right, #F8F8FD00, #F7F7FF),url(/imgs/priceBg.svg)`}
backgroundSize={'cover'}
backgroundRepeat={'no-repeat'}
>
@@ -49,7 +50,7 @@ const PriceBox = () => {
{/* question */}
<FAQ />
</Box>
</Flex>
</>
);
};