Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 454a479f by papapatrick Committed by GitHub
Options

style: pay page perf (#2535) 

* style: pay page perf

* perf: package status logic && add pay text
parent d057ad3a
Showing with 265 additions and 83 deletions
packages/global/support/wallet/sub/constants.ts
......@@ -53,17 +53,17 @@ export const standardSubLevelMap = {
},
[StandardSubLevelEnum.experience]: {
label: i18nT('common:support.wallet.subscription.standardSubLevel.experience'),
desc: '',
desc: i18nT('common:support.wallet.subscription.standardSubLevel.experience_desc'),
weight: 2
},
[StandardSubLevelEnum.team]: {
label: i18nT('common:support.wallet.subscription.standardSubLevel.team'),
desc: '',
desc: i18nT('common:support.wallet.subscription.standardSubLevel.team_desc'),
weight: 3
},
[StandardSubLevelEnum.enterprise]: {
label: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise'),
desc: '',
desc: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise_desc'),
weight: 4
},
[StandardSubLevelEnum.custom]: {
......@@ -72,3 +72,15 @@ export const standardSubLevelMap = {
weight: 5
}
};
export enum PackageChangeStatusEnum {
buy = 'buy',
renewal = 'renewal',
upgrade = 'upgrade'
}
export const packagePayTextMap = {
[PackageChangeStatusEnum.buy]: i18nT('common:pay.package_tip.buy'),
[PackageChangeStatusEnum.renewal]: i18nT('common:pay.package_tip.renewal'),
[PackageChangeStatusEnum.upgrade]: i18nT('common:pay.package_tip.upgrade')
};
packages/web/i18n/en/common.json
......@@ -10,6 +10,8 @@
"auto_renew_q": "Will the subscription package automatically renew?",
"change_package_a": "When the current package price is greater than the new package, you cannot switch immediately. You will be switched in the form of \"renewal\" after the current package expires.\n\nWhen the current package price is lower than the new package, the system will automatically calculate the remaining balance of the current package, and you can pay the price difference to switch packages.",
"change_package_q": "Can I switch subscription plans?",
"check_subscription_a": "Account - personal information - package details - usage. \nYou can view the effective and expiry dates of the packages you own. \nWhen the paid package expires, it will automatically switch to the free version.",
"check_subscription_q": "Where can I check my subscribed plans?",
"dataset_compute_a": "1 knowledge base storage is equal to 1 knowledge base index. \nA piece of knowledge base data can contain one or more knowledge base indexes. \nDuring enhanced training, 1 piece of data will generate 5 indexes.",
"dataset_compute_q": "How to calculate knowledge base storage?",
"dataset_index_a": "Won't. \nHowever, when the knowledge base index exceeds, knowledge base content cannot be inserted and updated.",
......@@ -17,7 +19,9 @@
"free_user_clean_a": "After free version users (free version without purchasing additional packages) have no usage records for 30 days, the system will automatically clear all knowledge base content under the account.",
"free_user_clean_q": "Will the data in the free version be cleared?",
"package_overlay_a": "OK. \nEach resource package purchased is independent and will be used stacked within its validity period. \nAI points will be deducted from the resource package that expires first.",
"package_overlay_q": "Can additional resource packs be stacked?"
"package_overlay_q": "Can additional resource packs be stacked?",
"switch_package_a": "The package usage rule is to give priority to more advanced packages. Therefore, if the new package purchased is more advanced than the current package, the new package will take effect immediately: otherwise, the current package will continue to be used.",
"switch_package_q": "Switch subscription plans?"
},
"Folder": "Folder",
"Login": "Login",
......@@ -1070,6 +1074,7 @@
},
"extraction_results": "Extract results",
"field_name": "Name",
"free": "free",
"get_QR_failed": "Failed to obtain QR code",
"get_app_failed": "Failed to get app",
"get_laf_failed": "Failed to get Laf function list",
......@@ -1089,6 +1094,7 @@
},
"invalid_variable": "Invalid variable",
"is_open": "Opened",
"is_using": "in use",
"item_description": "Field description",
"item_name": "Field name",
"key_repetition": "key duplicate",
......@@ -1117,6 +1123,11 @@
"notice": "Do not close the page",
"old_package_price": "Old package price",
"other": "For other amounts, please round up the whole number",
"package_tip": {
"buy": "The package level you purchased is lower than the current package, and the package will take effect after the current package expires. \nYou can check the package usage in Account—Personal Information—Package Details.",
"renewal": "You are renewing your plan. \nYou can check the package usage in Account—Personal Information—Package Details.",
"upgrade": "If the package you purchased is higher than the current package, the package will take effect immediately, and the current package will take effect later. \nYou can check the package usage in Account—Personal Information—Package Details."
},
"to_recharge": "Insufficient balance, please recharge",
"wechat": "Please scan the QR code on WeChat to pay:",
"yuan": "Yuan"
......@@ -1205,6 +1216,7 @@
"AI Bonus Points": "AI points",
"Expired Time": "End time",
"Start Time": "Start time",
"due_date": "Expiration time",
"storage": "Storage amount",
"type": "Type"
},
......@@ -1365,10 +1377,18 @@
"standardSubLevel": {
"custom": "Customized version",
"enterprise": "Enterprise edition",
"enterprise_desc": "Suitable for small and medium-sized enterprises to build knowledge base applications in production environments",
"experience": "Experience edition",
"experience_desc": "Unlocks the full functionality of FastGPT",
"free": "Free edition",
"free desc": "Basic functions can be used for free every month, and the knowledge base will be cleared if there is no usage record for 30 days",
"team": "Team edition"
"team": "Team edition",
"team_desc": "Suitable for small teams to build knowledge base applications and provide external services"
},
"status": {
"active": "Taking effect",
"expired": "Expired",
"inactive": "To be used"
},
"token_compute": "Click to view the online Tokens calculator",
"type": {
......
packages/web/i18n/en/user.json
{
"bill": {
"balance": "Balance",
"buy_plan": "Buy a package",
"buy_standard_plan_success": "Package purchased successfully",
"contact_customer_service": "Contact customer service",
"conversion": "exchange",
"convert_error": "Redemption failed",
"convert_success": "Redemption successful",
"current_token_price": "Current points price",
"not_need_invoice": "Balance payment, unable to issue invoice",
"price": "price",
"renew_plan": "Renewal package",
"standard_valid_tip": "Package usage rules: The system gives priority to using more advanced packages, and the original unused packages will take effect later.",
"valid_time": "Effective time"
"token_expire_1year": "Points are valid for one year",
"tokens": "integral",
"use_balance": "Use balance",
"use_balance_hint": "Due to the system upgrade, the original \"automatic renewal and deduction from balance\" mode has been cancelled, and the balance recharge entrance has been closed. \nYour balance can be used to purchase points",
"valid_time": "Effective time",
"you_can_convert": "You can redeem",
"yuan": "Yuan"
},
"bind_inform_account_error": "Abnormal binding notification account",
"bind_inform_account_success": "Binding notification account successful",
......
packages/web/i18n/zh/common.json
......@@ -17,14 +17,20 @@
"free_user_clean_a": "免费版团队（免费版且未购买额外套餐）连续 30 天未登录系统，系统会自动清除该团队下所有知识库内容。",
"free_user_clean_q": "免费版数据会清除么？",
"package_overlay_a": "可以的。每次购买的资源包都是独立的，在其有效期内将会叠加使用。AI积分会优先扣除最先过期的资源包。",
"package_overlay_q": "额外资源包可以叠加么？"
"package_overlay_q": "额外资源包可以叠加么？",
"switch_package_q": "是否切换订阅套餐？",
"switch_package_a": "套餐使用规则为优先使用更高级的套餐，因此，购买的新套餐若比当前套餐更高级，则新套餐立即生效：否则将继续使用当前套餐。",
"check_subscription_q": "在哪里查看已订阅的套餐？",
"check_subscription_a": "账号-个人信息-套餐详情-使用情况。您可以查看所拥有套餐的生效和到期时间。当付费套餐到期后将自动切换免费版。"
},
"Folder": "文件夹",
"Login": "登录",
"is_using": "正在使用",
"Move": "移动",
"Name": "名称",
"Rename": "重命名",
"Resume": "恢复",
"free": "免费",
"Running": "运行中",
"UnKnow": "未知",
"Warning": "提示",
......@@ -631,8 +637,7 @@
"success": "开始同步"
}
},
"training": {
}
"training": {}
},
"data": {
"Auxiliary Data": "辅助数据",
......@@ -1119,7 +1124,12 @@
"other": "其他金额，请取整数",
"to_recharge": "余额不足，去充值",
"wechat": "请微信扫码支付: {{price}}元\n请勿关闭页面",
"yuan": "{{amount}}元"
"yuan": "{{amount}}元",
"package_tip": {
"buy": "您购买的套餐等级低于当前套餐，该套餐将在当前套餐过期后生效。您可在账号—个人信息—套餐详情里，查看套餐使用情况。",
"renewal": "您正在续费套餐。您可在账号—个人信息—套餐详情里，查看套餐使用情况。",
"upgrade": "您购买的套餐等级高于当前套餐，该套餐将即刻生效，当前套餐将延后生效。您可在账号—个人信息—套餐详情里，查看套餐使用情况。"
}
},
"permission": {
"Collaborator": "协作者",
......@@ -1204,6 +1214,7 @@
"standard": {
"AI Bonus Points": "AI 积分",
"Expired Time": "结束时间",
"due_date": "到期时间",
"Start Time": "开始时间",
"storage": "存储量",
"type": "类型"
......@@ -1320,6 +1331,11 @@
"noBill": "无账单记录~",
"no_invoice": "暂无开票记录",
"subscription": {
"status": {
"expired": "已过期",
"active": "生效中",
"inactive": "待使用"
},
"AI points": "AI 积分",
"AI points click to read tip": "每次调用 AI 模型时，都会消耗一定的 AI 积分（类似于 token）。点击可查看详细计算规则。",
"AI points usage": "AI 积分使用量",
......@@ -1368,7 +1384,10 @@
"experience": "体验版",
"free": "免费版",
"free desc": "每月均可免费使用基础功能，连续 30 天未登录系统，将会自动清除知识库",
"team": "团队版"
"team": "团队版",
"experience_desc": "可解锁 FastGPT 完整功能",
"team_desc": "适合小团队构建知识库应用并提供对外服务",
"enterprise_desc": "适合中小企业在生产环境构建知识库应用"
},
"token_compute": "点击查看在线 Tokens 计算器",
"type": {
......
packages/web/styles/theme.ts
......@@ -680,6 +680,19 @@ export const theme = extendTheme({
800: '#93370D',
900: '#7A2E0E'
},
adora: {
25: '#FCFCFF',
50: '#F0EEFF',
100: '#E4E1FC',
200: '#D3CAFF',
300: '#B6A8FC',
400: '#9E8DFB',
500: '#8774EE',
600: '#6F5DD7',
700: '#5E4EBD',
800: '#4E4198',
900: '#42387D'
},
borderColor: {
low: '#E8EBF0',
base: '#DFE2EA',
......
projects/app/src/components/support/wallet/QRCodePayModal.tsx
......@@ -74,7 +74,11 @@ const QRCodePayModal = ({
return (
<MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
<ModalBody textAlign={'center'} py={6} whiteSpace={'pre'}>
{tip && <Box mb={3}>{tip}</Box>}
{tip && (
<Box textAlign={'left'} whiteSpace={'normal'} mb={3}>
{tip}
</Box>
)}
<Box id={'payQRCode'} display={'inline-block'} h={'128px'}></Box>
<Box mt={3} textAlign={'center'}>
{t('common:pay.wechat', { price: readPrice })}
......
projects/app/src/components/support/wallet/StandardPlanContentList.tsx
......@@ -78,7 +78,7 @@ const StandardPlanContentList = ({
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<Box fontWeight={'bold'}>
<Box fontWeight={'bold'} color={'myGray.600'}>
{t('common:support.wallet.subscription.function.Max dataset size', {
amount: planContent.maxDatasetSize
})}
......@@ -87,7 +87,7 @@ const StandardPlanContentList = ({
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<Flex alignItems={'center'}>
<Box fontWeight={'bold'}>
<Box fontWeight={'bold'} color={'myGray.600'}>
{t('common:support.wallet.subscription.function.Points', {
amount: planContent.totalPoints
})}
......
projects/app/src/pages/account/components/Info/ConversionModal.tsx
......@@ -49,7 +49,9 @@ const ConversionModal = ({
<VStack px="2.25" gap={2} pb="6">
<HStack px="4" py="2" color="primary.600" bgColor="primary.50" borderRadius="md">
<Icon name="common/info" w="1rem" mr="1" />
<Box fontSize={'sm'}>{t('user:bill.use_balance_hint')}</Box>
<Box fontSize={'mini'} fontWeight={'500'}>
{t('user:bill.use_balance_hint')}
</Box>
</HStack>
<VStack mt={6}>
<Box fontSize={'sm'} color="myGray.600" fontWeight="500">
......@@ -74,7 +76,9 @@ const ConversionModal = ({
<Box fontSize={'xl'} fontWeight={'700'} color="myGray.900">
{points} {t('user:bill.tokens')}
</Box>
<Tag fontSize={'lg'}>{t('user:bill.token_expire_1year')}</Tag>
<Tag fontSize={'xs'} fontWeight={'500'}>
{t('user:bill.token_expire_1year')}
</Tag>
</VStack>
<VStack mt="6">
......@@ -88,7 +92,7 @@ const ConversionModal = ({
>
{t('user:bill.conversion')}
</Button>
<Link color="primary" mt="2" onClick={onOpenContact}>
<Link fontSize={'sm'} color="primary" mt="2" onClick={onOpenContact}>
{t('user:bill.contact_customer_service')}
</Link>
</VStack>
......
projects/app/src/pages/account/components/Info/standardDetailModal.tsx
import React from 'react';
import React, { useMemo } from 'react';
import {
ModalBody,
ModalFooter,
......@@ -11,7 +11,8 @@ import {
TableContainer,
ModalCloseButton,
HStack,
Box
Box,
Flex
} from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { useTranslation } from 'next-i18next';
......@@ -19,16 +20,47 @@ import { useQuery } from '@tanstack/react-query';
import { useLoading } from '@fastgpt/web/hooks/useLoading';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { getTeamPlans } from '@/web/support/user/team/api';
import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
import {
subTypeMap,
standardSubLevelMap,
SubTypeEnum
} from '@fastgpt/global/support/wallet/sub/constants';
import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
type packageStatus = 'active' | 'inactive' | 'expired';
const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
const { t } = useTranslation();
const { Loading } = useLoading();
const { subPlans } = useSystemStore();
const { data: teamPlans = [], isLoading } = useQuery(['getTeamPlans'], getTeamPlans);
const { data: teamPlans = [], loading: isLoading } = useRequest2(
() =>
getTeamPlans().then((res) => {
return [
...res.filter((plan) => plan.type === SubTypeEnum.standard),
...res.filter((plan) => plan.type === SubTypeEnum.extraDatasetSize),
...res.filter((plan) => plan.type === SubTypeEnum.extraPoints)
].map((item, index) => {
return {
...item,
status:
new Date(item.expiredTime).getTime() < new Date().getTime()
? 'expired'
: item.type === SubTypeEnum.standard
? index === 0
? 'active'
: 'inactive'
: 'active'
};
});
}),
{
manual: false
}
);
return (
<MyModal
......@@ -39,7 +71,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
isCentered
>
<ModalCloseButton onClick={onClose} />
<ModalBody>
<ModalBody px={'3.25rem'} py={'2rem'}>
<TableContainer mt={2} position={'relative'} minH={'300px'}>
<Table>
<Thead>
......@@ -48,7 +80,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
<Th>{t('common:support.standard.storage')}</Th>
<Th>{t('common:support.standard.AI Bonus Points')}</Th>
<Th>{t('user:bill.valid_time')}</Th>
<Th>{t('common:support.standard.Expired Time')}</Th>
<Th>{t('common:support.standard.due_date')}</Th>
</Tr>
</Thead>
<Tbody fontSize={'sm'}>
......@@ -61,25 +93,36 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
surplusPoints = 0,
totalPoints = 0,
startTime,
expiredTime
}: TeamSubSchema) => {
expiredTime,
status
}) => {
const standardPlan = currentSubLevel
? subPlans?.standard?.[currentSubLevel]
: undefined;
const datasetSize = standardPlan?.maxDatasetSize || currentExtraDatasetSize;
const now = new Date();
return (
<Tr key={_id}>
<Tr key={_id} fontWeight={500} fontSize={'mini'} color={'myGray.900'}>
<Td>
<MyIcon
mr={2}
name={subTypeMap[type]?.icon as any}
w={'20px'}
color={'myGray.800'}
/>
{t(subTypeMap[type]?.label as any)}
{currentSubLevel &&
`(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
<Flex>
<Flex align={'center'}>
<MyIcon
mr={2}
name={subTypeMap[type]?.icon as any}
w={'20px'}
h={'20px'}
color={'myGray.600'}
fontWeight={500}
/>
</Flex>
<Flex align={'center'} color={'myGray.900'}>
{t(subTypeMap[type]?.label as any)}
{currentSubLevel &&
`(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`}
</Flex>
<StatusTag status={status as packageStatus} />
</Flex>
</Td>
<Td>
{datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'}
......@@ -89,8 +132,8 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}`
: '-'}
</Td>
<Td>{formatTime2YMDHM(startTime)}</Td>
<Td>{formatTime2YMDHM(expiredTime)}</Td>
<Td color={'myGray.600'}>{formatTime2YMDHM(startTime)}</Td>
<Td color={'myGray.600'}>{formatTime2YMDHM(expiredTime)}</Td>
</Tr>
);
}
......@@ -100,14 +143,56 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
</Table>
<Loading loading={isLoading} fixed={false} />
</TableContainer>
<HStack mt={4} color={'primary.600'}>
<HStack mt={4} color={'primary.700'}>
<MyIcon name={'infoRounded'} w={'1rem'} />
<Box fontSize={'sm'}>{t('user:bill.standard_valid_tip')}</Box>
<Box fontSize={'mini'} fontWeight={'500'}>
{t('user:bill.standard_valid_tip')}
</Box>
</HStack>
</ModalBody>
<ModalFooter></ModalFooter>
</MyModal>
);
};
function StatusTag({ status }: { status: packageStatus }) {
const { t } = useTranslation();
const statusText = useMemo(() => {
return {
inactive: t('common:support.wallet.subscription.status.inactive'),
active: t('common:support.wallet.subscription.status.active'),
expired: t('common:support.wallet.subscription.status.expired')
};
}, [t]);
const styleMap = useMemo(() => {
return {
inactive: {
color: 'adora.600',
bg: 'adora.50'
},
active: {
color: 'green.600',
bg: 'green.50'
},
expired: {
color: 'myGray.700',
bg: 'myGray.100'
}
};
}, []);
return (
<Box
py={'0.25rem'}
ml={'0.375rem'}
px={'0.5rem'}
fontSize={'0.625rem'}
fontWeight={500}
borderRadius={'sm'}
bg={styleMap[status]?.bg}
color={styleMap[status]?.color}
>
{statusText[status]}
</Box>
);
}
export default StandDetailModal;
projects/app/src/pages/price/components/ExtraPlan.tsx
......@@ -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>
......
projects/app/src/pages/price/components/FAQ.tsx
......@@ -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>
......
projects/app/src/pages/price/components/Points.tsx
......@@ -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>
......
projects/app/src/pages/price/index.tsx
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>
</>
);
};
......
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