V4.8.20 feature (#3686)
* Aiproxy (#3649) * model config * feat: model config ui * perf: rename variable * feat: custom request url * perf: model buffer * perf: init model * feat: json model config * auto login * fix: ts * update packages * package * fix: dockerfile * feat: usage filter & export & dashbord (#3538) * feat: usage filter & export & dashbord * adjust ui * fix tmb scroll * fix code & selecte all * merge * perf: usages list；perf: move components (#3654) * perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components * add default model config (#3653) * 4.8.20 test (#3656) * provider * perf: model config * model perf (#3657) * fix: model * dataset quote * perf: model config * model tag * doubao model config * perf: config model * feat: model test * fix: POST 500 error on dingtalk bot (#3655) * feat: default model (#3662) * move model config * feat: default model * fix: false triggerd org selection (#3661) * export usage csv i18n (#3660) * export usage csv i18n * fix build * feat: markdown extension (#3663) * feat: markdown extension * media cros * rerank test * default price * perf: default model * fix: cannot custom provider * fix: default model select * update bg * perf: default model selector * fix: usage export * i18n * fix: rerank * update init extension * perf: ip limit check * doubao model order * web default modle * perf: tts selector * perf: tts error * qrcode package * reload buffer (#3665) * reload buffer * reload buffer * tts selector * fix: err tip (#3666) * fix: err tip * perf: training queue * doc * fix interactive edge (#3659) * fix interactive edge * fix * comment * add gemini model * fix: chat model select * perf: supplement assistant empty response (#3669) * perf: supplement assistant empty response * check array * perf: max_token count;feat: support resoner output;fix: member scroll (#3681) * perf: supplement assistant empty response * check array * perf: max_token count * feat: support resoner output * member scroll * update provider order * i18n * fix: stream response (#3682) * perf: supplement assistant empty response * check array * fix: stream response * fix: model config cannot set to null * fix: reasoning response (#3684) * perf: supplement assistant empty response * check array * fix: reasoning response * fix: reasoning response * doc (#3685) * perf: supplement assistant empty response * check array * doc * lock * animation * update doc * update compose * doc * doc --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
This commit is contained in:
Archer
281
projects/app/src/pageComponents/price/ExtraPlan.tsx
Normal file
281
projects/app/src/pageComponents/price/ExtraPlan.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import { Box, Flex, Grid, Button, VStack } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useToast } from '@fastgpt/web/hooks/useToast';
|
||||
import { getErrText } from '@fastgpt/global/common/error/utils';
|
||||
import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
|
||||
import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
|
||||
import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
|
||||
import MyNumberInput from '@fastgpt/web/components/common/Input/NumberInput';
|
||||
|
||||
const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => {
|
||||
const { t } = useTranslation();
|
||||
const { toast } = useToast();
|
||||
const { subPlans } = useSystemStore();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [qrPayData, setQRPayData] = useState<QRPayProps>();
|
||||
|
||||
// extra dataset
|
||||
const extraDatasetPrice = subPlans?.extraDatasetSize?.price || 0;
|
||||
const { register: registerDatasetSize, handleSubmit: handleSubmitDatasetSize } = useForm({
|
||||
defaultValues: {
|
||||
datasetSize: 0,
|
||||
month: 1
|
||||
}
|
||||
});
|
||||
const onclickBuyDatasetSize = useCallback(
|
||||
async ({ datasetSize, month }: { datasetSize: number; month: number }) => {
|
||||
try {
|
||||
datasetSize = Math.ceil(datasetSize);
|
||||
month = Math.ceil(month);
|
||||
|
||||
const datasetSizePayAmount = datasetSize * month * extraDatasetPrice;
|
||||
if (datasetSizePayAmount === 0) {
|
||||
return toast({
|
||||
status: 'warning',
|
||||
title: t('common:support.wallet.amount_0')
|
||||
});
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
const res = await getWxPayQRCode({
|
||||
type: BillTypeEnum.extraDatasetSub,
|
||||
month,
|
||||
extraDatasetSize: datasetSize
|
||||
});
|
||||
setQRPayData({
|
||||
readPrice: res.readPrice,
|
||||
codeUrl: res.codeUrl,
|
||||
billId: res.billId
|
||||
});
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: getErrText(err),
|
||||
status: 'error'
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
},
|
||||
[extraDatasetPrice, toast]
|
||||
);
|
||||
|
||||
// extra ai points
|
||||
const extraPointsPrice = subPlans?.extraPoints?.price || 0;
|
||||
const { register: registerExtraPoints, handleSubmit: handleSubmitExtraPoints } = useForm({
|
||||
defaultValues: {
|
||||
points: 0,
|
||||
month: 1
|
||||
}
|
||||
});
|
||||
const onclickBuyExtraPoints = useCallback(
|
||||
async ({ points }: { points: number }) => {
|
||||
try {
|
||||
points = Math.ceil(points);
|
||||
|
||||
const month = 1;
|
||||
const payAmount = points * month * extraPointsPrice;
|
||||
|
||||
if (payAmount === 0) {
|
||||
return toast({
|
||||
status: 'warning',
|
||||
title: t('common:support.wallet.amount_0')
|
||||
});
|
||||
}
|
||||
setLoading(true);
|
||||
|
||||
const res = await getWxPayQRCode({
|
||||
type: BillTypeEnum.extraPoints,
|
||||
extraPoints: points
|
||||
});
|
||||
|
||||
setQRPayData({
|
||||
readPrice: res.readPrice,
|
||||
codeUrl: res.codeUrl,
|
||||
billId: res.billId
|
||||
});
|
||||
} catch (err) {
|
||||
toast({
|
||||
title: getErrText(err),
|
||||
status: 'error'
|
||||
});
|
||||
}
|
||||
setLoading(false);
|
||||
},
|
||||
[extraPointsPrice, toast]
|
||||
);
|
||||
|
||||
return (
|
||||
<VStack>
|
||||
<Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
|
||||
<Box
|
||||
bg={'rgba(255, 255, 255, 0.90)'}
|
||||
px={'32px'}
|
||||
py={'24px'}
|
||||
borderRadius={'2xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
boxShadow={'1.5'}
|
||||
w={['100%', '500px']}
|
||||
>
|
||||
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
|
||||
<Box flex={'1 0 0'}>
|
||||
<Box fontSize={'lg'} color={'primary.700'}>
|
||||
{t('common:support.wallet.subscription.Extra dataset size')}
|
||||
</Box>
|
||||
<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.500'} fontWeight={'normal'}>
|
||||
/{t('common:common.month')}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<MyIcon
|
||||
display={['none', 'block']}
|
||||
mt={'-30px'}
|
||||
transform={'translateX(20px)'}
|
||||
name={'support/bill/extraDatasetsize'}
|
||||
fill={'none'}
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'120px'} w={'100%'}>
|
||||
<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']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Month amount')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
<MyNumberInput
|
||||
name="month"
|
||||
register={registerDatasetSize}
|
||||
min={1}
|
||||
max={12}
|
||||
size={'sm'}
|
||||
/>
|
||||
<Box position={'absolute'} right={'30px'} 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']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Update extra dataset size')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
<MyNumberInput
|
||||
name="datasetSize"
|
||||
register={registerDatasetSize}
|
||||
min={0}
|
||||
max={10000}
|
||||
size={'sm'}
|
||||
/>
|
||||
<Box position={'absolute'} right={'30px'} color={'myGray.600'} fontSize={'xs'}>
|
||||
000{t('common:core.dataset.data.unit')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Button
|
||||
mt={6}
|
||||
w={'100%'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={loading}
|
||||
onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)}
|
||||
color={'primary.700'}
|
||||
>
|
||||
{t('common:support.wallet.Buy')}
|
||||
</Button>
|
||||
</Box>
|
||||
{/* points */}
|
||||
<Box
|
||||
bg={'rgba(255, 255, 255, 0.90)'}
|
||||
w={['100%', '500px']}
|
||||
px={'32px'}
|
||||
py={'24px'}
|
||||
borderRadius={'2xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
boxShadow={'1.5'}
|
||||
>
|
||||
<Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
|
||||
<Box flex={'1 0 0'}>
|
||||
<Box fontSize={'lg'} color={'primary.700'}>
|
||||
{t('common:support.wallet.subscription.Extra ai points')}
|
||||
</Box>
|
||||
<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.500'} fontWeight={'normal'}>
|
||||
/{t('common:common.month')}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<MyIcon
|
||||
display={['none', 'block']}
|
||||
mt={'-30px'}
|
||||
transform={'translateX(20px)'}
|
||||
name={'support/bill/extraPoints'}
|
||||
fill={'none'}
|
||||
/>
|
||||
</Flex>
|
||||
<Box h={'120px'} w={'100%'}>
|
||||
<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']} color={'myGray.600'}>
|
||||
{t('common:support.wallet.subscription.Month amount')}
|
||||
</Box>
|
||||
<Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
|
||||
<Box>1</Box>
|
||||
<Box color={'myGray.600'}>{t('common:common.month')}</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex mt={4} alignItems={'center'}>
|
||||
<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'}
|
||||
color={'myGray.500'}
|
||||
>
|
||||
<MyNumberInput
|
||||
name="points"
|
||||
register={registerExtraPoints}
|
||||
min={0}
|
||||
max={10000}
|
||||
size={'sm'}
|
||||
/>
|
||||
<Box position={'absolute'} right={'30px'} color={'myGray.500'} fontSize={'xs'}>
|
||||
{'000' + t('common:support.wallet.subscription.point')}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
<Button
|
||||
mt={6}
|
||||
w={'100%'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={loading}
|
||||
onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)}
|
||||
color={'primary.700'}
|
||||
>
|
||||
{t('common:support.wallet.Buy')}
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{!!qrPayData && <QRCodePayModal onSuccess={onPaySuccess} {...qrPayData} />}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(ExtraPlan);
|
||||
80
projects/app/src/pageComponents/price/FAQ.tsx
Normal file
80
projects/app/src/pageComponents/price/FAQ.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
import React from 'react';
|
||||
import { Box, Flex, Grid } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
|
||||
const FAQ = () => {
|
||||
const { t } = useTranslation();
|
||||
const faqs = [
|
||||
{
|
||||
title: t('common:FAQ.switch_package_q'),
|
||||
desc: t('common:FAQ.switch_package_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.check_subscription_q'),
|
||||
desc: t('common:FAQ.check_subscription_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.ai_point_q'),
|
||||
desc: t('common:FAQ.ai_point_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.ai_point_expire_q'),
|
||||
desc: t('common:FAQ.ai_point_expire_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.dataset_compute_q'),
|
||||
desc: t('common:FAQ.dataset_compute_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.dataset_index_q'),
|
||||
desc: t('common:FAQ.dataset_index_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.package_overlay_q'),
|
||||
desc: t('common:FAQ.package_overlay_a')
|
||||
},
|
||||
{
|
||||
title: t('common:FAQ.free_user_clean_q'),
|
||||
desc: t('common:FAQ.free_user_clean_a')
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mt={['40px', '100px']}
|
||||
pb={'10vh'}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
position={'relative'}
|
||||
>
|
||||
<Box fontWeight={'bold'} fontSize={['24px', '36px']} color={'myGray.900'}>
|
||||
{t('common:support.wallet.subscription.FAQ')}
|
||||
</Box>
|
||||
<Grid mt={12} gridTemplateColumns={['1fr', '1fr 1fr']} gap={4} w={'100%'}>
|
||||
{faqs.map((item, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
py={8}
|
||||
px={9}
|
||||
borderRadius={'lg'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
_hover={{
|
||||
borderColor: 'primary.300'
|
||||
}}
|
||||
>
|
||||
<Box fontWeight={'bold'} pb={3} color={'myGray.900'}>
|
||||
{item.title}
|
||||
</Box>
|
||||
<Box fontSize={'sm'} color={'myGray.600'}>
|
||||
{item.desc}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Grid>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQ;
|
||||
156
projects/app/src/pageComponents/price/Points.tsx
Normal file
156
projects/app/src/pageComponents/price/Points.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
import React from 'react';
|
||||
import { Box, Flex, Grid, Link } from '@chakra-ui/react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import ModelTable from '@/components/core/ai/ModelTable';
|
||||
|
||||
const Points = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mt={['40px', '100px']}
|
||||
flexDirection={'column'}
|
||||
alignItems={'center'}
|
||||
position={'relative'}
|
||||
>
|
||||
<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" mb={['30px', 10]}>
|
||||
{t('common:support.wallet.subscription.token_compute')}
|
||||
</Link>
|
||||
<Box p={5} w={'100%'} h={'666px'} bg={'white'} borderRadius={'lg'} boxShadow={'md'}>
|
||||
<ModelTable />
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Points);
|
||||
|
||||
export const AiPointsTable = () => {
|
||||
const { t } = useTranslation();
|
||||
const { llmModelList, ttsModelList, embeddingModelList, sttModelList } = useSystemStore();
|
||||
|
||||
return (
|
||||
<Grid gap={6} w={'100%'} color={'myGray.900'}>
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
borderRadius={'xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
borderRightWidth={'1px'}
|
||||
borderRightColor={'myGray.150'}
|
||||
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.100' : ''}>
|
||||
<Box flex={'1 0 0'}>{item.name}</Box>
|
||||
<Box flex={'1 0 0'}>
|
||||
{item.charsPointsPrice +
|
||||
t('common:support.wallet.subscription.point') +
|
||||
' / 1000 Tokens'}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
borderRadius={'xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<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.600'}>
|
||||
{t('common:core.ai.model.doc_index_and_dialog')}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flex={4} textAlign={'center'}>
|
||||
{embeddingModelList?.map((item, i) => (
|
||||
<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 +
|
||||
t('common:support.wallet.subscription.point') +
|
||||
' / 1000 Tokens'}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
borderRadius={'xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={8} pl={10}>
|
||||
<Box fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('common:core.app.TTS')}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flex={4} textAlign={'center'}>
|
||||
{ttsModelList?.map((item, i) => (
|
||||
<Flex key={item.model} py={4} bg={i % 2 !== 0 ? 'myGray.50' : ''}>
|
||||
<Box flex={'1 0 0'}>{item.name}</Box>
|
||||
<Box flex={'1 0 0'}>
|
||||
{item.charsPointsPrice +
|
||||
t('common:support.wallet.subscription.point') +
|
||||
' / 1000' +
|
||||
t('common:unit.character')}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
display={['block', 'flex']}
|
||||
borderRadius={'xl'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'myGray.150'}
|
||||
bg={'rgba(255,255,255,0.9)'}
|
||||
overflow={'hidden'}
|
||||
>
|
||||
<Box flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} py={4} pl={10}>
|
||||
<Box fontSize={'md'} fontWeight={'bold'}>
|
||||
{t('common:core.app.Whisper')}
|
||||
</Box>
|
||||
</Box>
|
||||
<Box flex={4} textAlign={'center'} h={'100%'}>
|
||||
{sttModelList.map((item) => (
|
||||
<Flex key={item.model} py={4}>
|
||||
<Box flex={'1 0 0'}>{item.name}</Box>
|
||||
<Box flex={'1 0 0'}>
|
||||
{item.charsPointsPrice +
|
||||
t('common:support.wallet.subscription.point') +
|
||||
' / 60' +
|
||||
t('common:unit.seconds')}
|
||||
</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
336
projects/app/src/pageComponents/price/Standard.tsx
Normal file
336
projects/app/src/pageComponents/price/Standard.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import MyIcon from '@fastgpt/web/components/common/Icon';
|
||||
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 { useSystemStore } from '@/web/common/system/useSystemStore';
|
||||
import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
|
||||
import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
|
||||
import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
|
||||
import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
|
||||
import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
|
||||
|
||||
export enum PackageChangeStatusEnum {
|
||||
buy = 'buy',
|
||||
renewal = 'renewal',
|
||||
upgrade = 'upgrade'
|
||||
}
|
||||
|
||||
const Standard = ({
|
||||
standardPlan: myStandardPlan,
|
||||
onPaySuccess
|
||||
}: {
|
||||
standardPlan?: TeamSubSchema;
|
||||
onPaySuccess?: () => void;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const packagePayTextMap = {
|
||||
[PackageChangeStatusEnum.buy]: t('common:pay.package_tip.buy'),
|
||||
[PackageChangeStatusEnum.renewal]: t('common:pay.package_tip.renewal'),
|
||||
[PackageChangeStatusEnum.upgrade]: t('common:pay.package_tip.upgrade')
|
||||
};
|
||||
|
||||
const [packageChange, setPackageChange] = useState<PackageChangeStatusEnum>();
|
||||
const { subPlans, feConfigs } = useSystemStore();
|
||||
const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month);
|
||||
|
||||
const standardSubList = useMemo(() => {
|
||||
return subPlans?.standard
|
||||
? Object.entries(subPlans.standard).map(([level, value]) => {
|
||||
return {
|
||||
price: value.price * (selectSubMode === SubModeEnum.month ? 1 : 10),
|
||||
level: level as `${StandardSubLevelEnum}`,
|
||||
...standardSubLevelMap[level as `${StandardSubLevelEnum}`],
|
||||
label: value.name || standardSubLevelMap[level as `${StandardSubLevelEnum}`].label, // custom label
|
||||
maxTeamMember: value.maxTeamMember,
|
||||
maxAppAmount: value.maxAppAmount,
|
||||
maxDatasetAmount: value.maxDatasetAmount,
|
||||
chatHistoryStoreDuration: value.chatHistoryStoreDuration,
|
||||
maxDatasetSize: value.maxDatasetSize,
|
||||
permissionCustomApiKey: value.permissionCustomApiKey,
|
||||
permissionCustomCopyright: value.permissionCustomCopyright,
|
||||
trainingWeight: value.trainingWeight,
|
||||
permissionReRank: value.permissionReRank,
|
||||
totalPoints: value.totalPoints * (selectSubMode === SubModeEnum.month ? 1 : 12),
|
||||
permissionWebsiteSync: value.permissionWebsiteSync
|
||||
};
|
||||
})
|
||||
: [];
|
||||
}, [subPlans?.standard, selectSubMode]);
|
||||
|
||||
// Pay code
|
||||
const [qrPayData, setQRPayData] = useState<QRPayProps>();
|
||||
|
||||
/* Get pay code */
|
||||
const { runAsync: onPay, loading: isLoading } = useRequest2(getWxPayQRCode, {
|
||||
onSuccess(res) {
|
||||
setQRPayData({
|
||||
readPrice: res.readPrice,
|
||||
codeUrl: res.codeUrl,
|
||||
billId: res.billId
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex flexDirection={'column'} alignItems={'center'} position={'relative'}>
|
||||
<Box>
|
||||
<RowTabs
|
||||
list={[
|
||||
{
|
||||
label: t('common:support.wallet.subscription.mode.Month'),
|
||||
value: SubModeEnum.month
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Flex>
|
||||
<Box whiteSpace={'nowrap'}>
|
||||
{t('common:support.wallet.subscription.mode.Year')}
|
||||
</Box>
|
||||
<Box
|
||||
whiteSpace={'nowrap'}
|
||||
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>
|
||||
)}
|
||||
<Box fontSize={'md'} fontWeight={'500'} color={'myGray.900'}>
|
||||
{t(item.label as any)}
|
||||
</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>
|
||||
|
||||
{/* Button */}
|
||||
{(() => {
|
||||
if (item.level === StandardSubLevelEnum.free) {
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
_active={{}}
|
||||
_hover={{}}
|
||||
boxShadow={'0'}
|
||||
cursor={'default'}
|
||||
w={'100%'}
|
||||
isDisabled
|
||||
variant={'whiteBase'}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
mt={4}
|
||||
mb={6}
|
||||
w={'100%'}
|
||||
variant={'primaryGhost'}
|
||||
isLoading={isLoading}
|
||||
onClick={() => {
|
||||
setPackageChange(PackageChangeStatusEnum.buy);
|
||||
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>
|
||||
|
||||
{!!qrPayData && packageChange && (
|
||||
<QRCodePayModal
|
||||
tip={packagePayTextMap[packageChange]}
|
||||
onSuccess={onPaySuccess}
|
||||
{...qrPayData}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(Standard);
|
||||
|
||||
const RowTabs = ({
|
||||
list,
|
||||
value,
|
||||
onChange
|
||||
}: {
|
||||
list: {
|
||||
icon?: string;
|
||||
label: string | React.ReactNode;
|
||||
value: string;
|
||||
}[];
|
||||
value: string;
|
||||
onChange: (e: string) => void;
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
display={'inline-flex'}
|
||||
px={'3px'}
|
||||
py={'3px'}
|
||||
borderRadius={'md'}
|
||||
borderWidth={'1px'}
|
||||
borderColor={'primary.300'}
|
||||
bg={'primary.50'}
|
||||
gap={'4px'}
|
||||
>
|
||||
{list.map((item) => (
|
||||
<Flex
|
||||
key={item.value}
|
||||
alignItems={'center'}
|
||||
justifyContent={'center'}
|
||||
cursor={'pointer'}
|
||||
borderRadius={'sm'}
|
||||
px={'12px'}
|
||||
py={'7px'}
|
||||
userSelect={'none'}
|
||||
w={['150px', '170px']}
|
||||
{...(value === item.value
|
||||
? {
|
||||
color: 'white',
|
||||
boxShadow: '1.5',
|
||||
bg: 'primary.600'
|
||||
}
|
||||
: {
|
||||
onClick: () => onChange(item.value)
|
||||
})}
|
||||
>
|
||||
{item.icon && <MyIcon name={item.icon as any} mr={1} w={'14px'} />}
|
||||
<Box fontWeight={'500'}>{item.label}</Box>
|
||||
</Flex>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user