From baf87473a453b4915e1eb0a2f1614fa7194b9cb3 Mon Sep 17 00:00:00 2001 From: heheer Date: Tue, 23 Dec 2025 18:55:29 +0800 Subject: [PATCH] ui --- packages/global/support/wallet/sub/type.d.ts | 2 + .../common/Icon/icons/price/right.svg | 6 +- packages/web/i18n/en/common.json | 1 + packages/web/i18n/zh-CN/common.json | 1 + packages/web/i18n/zh-Hant/common.json | 1 + .../public/imgs/system/extraSnowflake1.svg | 61 ++++++ .../public/imgs/system/extraSnowflake2.svg | 61 ++++++ .../public/imgs/system/extraSnowflake3.svg | 61 ++++++ .../app/public/imgs/system/ribbonLeft.svg | 27 +++ .../app/public/imgs/system/ribbonRight.svg | 30 +++ projects/app/public/imgs/system/snowflake.svg | 61 ++++++ .../wallet/StandardPlanContentList.tsx | 62 ++++-- .../src/pageComponents/price/ExtraPlan.tsx | 107 ++++++++-- .../app/src/pageComponents/price/Standard.tsx | 195 +++++++++++++++--- 14 files changed, 608 insertions(+), 68 deletions(-) create mode 100644 projects/app/public/imgs/system/extraSnowflake1.svg create mode 100644 projects/app/public/imgs/system/extraSnowflake2.svg create mode 100644 projects/app/public/imgs/system/extraSnowflake3.svg create mode 100644 projects/app/public/imgs/system/ribbonLeft.svg create mode 100644 projects/app/public/imgs/system/ribbonRight.svg create mode 100644 projects/app/public/imgs/system/snowflake.svg diff --git a/packages/global/support/wallet/sub/type.d.ts b/packages/global/support/wallet/sub/type.d.ts index 034fd4f8b..56a0e24d9 100644 --- a/packages/global/support/wallet/sub/type.d.ts +++ b/packages/global/support/wallet/sub/type.d.ts @@ -41,6 +41,7 @@ export type PointsPackageItem = { month: number; price: number; activityBonusPoints?: number; + activityExpirationTime?: string; }; export type SubPlanType = { @@ -48,6 +49,7 @@ export type SubPlanType = { planDescriptionUrl?: string; appRegistrationUrl?: string; communitySupportTip?: string; + activityExpirationTime?: string; [SubTypeEnum.extraDatasetSize]: { price: number; }; diff --git a/packages/web/components/common/Icon/icons/price/right.svg b/packages/web/components/common/Icon/icons/price/right.svg index dfbe5859b..fe9a91de5 100644 --- a/packages/web/components/common/Icon/icons/price/right.svg +++ b/packages/web/components/common/Icon/icons/price/right.svg @@ -1,5 +1,3 @@ - - + + \ No newline at end of file diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json index 1b02b6fdb..17101aa10 100644 --- a/packages/web/i18n/en/common.json +++ b/packages/web/i18n/en/common.json @@ -1217,6 +1217,7 @@ "support.wallet.subscription.Dataset size": "Knowledge Base Index", "support.wallet.subscription.Extra ai points": "AI Points", "support.wallet.subscription.Extra ai points description": "The purchase amount of points is intelligently linked to the validity period. The more you buy, the longer you use it.", + "support.wallet.subscription.Activity expiration time": "Activity ends on {{month}}/{{day}}/{{year}} at {{hour}}:{{minute}}", "support.wallet.subscription.Extra dataset description": "Supports extending the validity period for the knowledge base index based on actual needs", "support.wallet.subscription.Extra dataset size": "Extra Dataset Capacity", "support.wallet.subscription.Extra dataset unit": " Groups/1 Month", diff --git a/packages/web/i18n/zh-CN/common.json b/packages/web/i18n/zh-CN/common.json index 4a1b09e9d..3091df2ed 100644 --- a/packages/web/i18n/zh-CN/common.json +++ b/packages/web/i18n/zh-CN/common.json @@ -1226,6 +1226,7 @@ "support.wallet.subscription.Dataset size": "知识库索引量", "support.wallet.subscription.Extra ai points": "额外 AI 积分", "support.wallet.subscription.Extra ai points description": "积分购买量与有效期智能联动, 买的越多用的越久", + "support.wallet.subscription.Activity expiration time": "活动截至{{year}}年{{month}}月{{day}}日{{hour}}:{{minute}}", "support.wallet.subscription.Extra dataset description": "支持根据实际需求为知识库索引量延长有效期", "support.wallet.subscription.Extra dataset size": "额外知识库容量", "support.wallet.subscription.Extra dataset unit": "组/1个月", diff --git a/packages/web/i18n/zh-Hant/common.json b/packages/web/i18n/zh-Hant/common.json index 13dc3e94e..87a7548b6 100644 --- a/packages/web/i18n/zh-Hant/common.json +++ b/packages/web/i18n/zh-Hant/common.json @@ -1209,6 +1209,7 @@ "support.wallet.subscription.AI points": "AI 點數", "support.wallet.subscription.AI points usage": "AI 點數使用量", "support.wallet.subscription.AI points usage tip": "每次呼叫 AI 模型時，都會消耗一定的 AI 點數。具體的計算標準可參考上方的「計費標準」", + "support.wallet.subscription.Activity expiration time": "活動截至{{year}}年{{month}}月{{day}}日{{hour}}:{{minute}}", "support.wallet.subscription.Ai points": "AI 點數計算標準", "support.wallet.subscription.Current plan": "目前方案", "support.wallet.subscription.Dataset size": "知識庫索引量", diff --git a/projects/app/public/imgs/system/extraSnowflake1.svg b/projects/app/public/imgs/system/extraSnowflake1.svg new file mode 100644 index 000000000..6de5f7c13 --- /dev/null +++ b/projects/app/public/imgs/system/extraSnowflake1.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/app/public/imgs/system/extraSnowflake2.svg b/projects/app/public/imgs/system/extraSnowflake2.svg new file mode 100644 index 000000000..950c3a599 --- /dev/null +++ b/projects/app/public/imgs/system/extraSnowflake2.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/app/public/imgs/system/extraSnowflake3.svg b/projects/app/public/imgs/system/extraSnowflake3.svg new file mode 100644 index 000000000..a8dffaca2 --- /dev/null +++ b/projects/app/public/imgs/system/extraSnowflake3.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/app/public/imgs/system/ribbonLeft.svg b/projects/app/public/imgs/system/ribbonLeft.svg new file mode 100644 index 000000000..ba968b0b6 --- /dev/null +++ b/projects/app/public/imgs/system/ribbonLeft.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/app/public/imgs/system/ribbonRight.svg b/projects/app/public/imgs/system/ribbonRight.svg new file mode 100644 index 000000000..4529bdb63 --- /dev/null +++ b/projects/app/public/imgs/system/ribbonRight.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/app/public/imgs/system/snowflake.svg b/projects/app/public/imgs/system/snowflake.svg new file mode 100644 index 000000000..47eef8d44 --- /dev/null +++ b/projects/app/public/imgs/system/snowflake.svg @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/projects/app/src/components/support/wallet/StandardPlanContentList.tsx b/projects/app/src/components/support/wallet/StandardPlanContentList.tsx index bb4ae99c7..1e64f3478 100644 --- a/projects/app/src/components/support/wallet/StandardPlanContentList.tsx +++ b/projects/app/src/components/support/wallet/StandardPlanContentList.tsx @@ -3,7 +3,7 @@ import type { StandardSubLevelEnum } from '@fastgpt/global/support/wallet/sub/co import { SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants'; import React, { useMemo } from 'react'; import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants'; -import { Box, Flex, Grid } from '@chakra-ui/react'; +import { Box, Flex, Grid, Text } from '@chakra-ui/react'; import MyIcon from '@fastgpt/web/components/common/Icon'; import { useTranslation } from 'next-i18next'; import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip'; @@ -71,20 +71,40 @@ const StandardPlanContentList = ({ standplan?.ticketResponseTime, standplan?.customDomain ]); - console.log('planContent', planContent); return planContent ? ( - + - - {t('common:n_ai_points', { - amount: planContent.annualBonusPoints - ? `${planContent.totalPoints} + ${planContent.annualBonusPoints}` - : planContent.totalPoints - })} - + {planContent.annualBonusPoints ? ( + <> + + {planContent.totalPoints} + + + {planContent.totalPoints + planContent.annualBonusPoints} + + + {t('common:support.wallet.subscription.point')} + + + ) : ( + + {planContent.totalPoints} + {t('common:support.wallet.subscription.point')} + + )} {({ onOpen }) => ( @@ -93,7 +113,7 @@ const StandardPlanContentList = ({ - + {t('common:n_dataset_size', { amount: planContent.maxDatasetSize @@ -101,7 +121,7 @@ const StandardPlanContentList = ({ - + {t('common:n_team_members', { amount: planContent.maxTeamMember @@ -109,7 +129,7 @@ const StandardPlanContentList = ({ - + {t('common:n_agent_amount', { amount: planContent.maxAppAmount @@ -117,7 +137,7 @@ const StandardPlanContentList = ({ - + {t('common:n_dataset_amount', { amount: planContent.maxDatasetAmount @@ -125,7 +145,7 @@ const StandardPlanContentList = ({ - + {t('common:n_chat_records_retain', { amount: planContent.chatHistoryStoreDuration @@ -134,7 +154,7 @@ const StandardPlanContentList = ({ {!!planContent.auditLogStoreDuration && ( - + {t('common:n_team_audit_day', { amount: planContent.auditLogStoreDuration @@ -143,7 +163,7 @@ const StandardPlanContentList = ({ )} - + {t('common:n_team_qpm', { amount: planContent.requestsPerMinute @@ -153,7 +173,7 @@ const StandardPlanContentList = ({ {!!planContent.websiteSyncPerDataset && ( - + {t('common:n_website_sync_max_pages', { amount: planContent.websiteSyncPerDataset @@ -162,7 +182,7 @@ const StandardPlanContentList = ({ )} - + {planContent.ticketResponseTime ? t('common:worker_order_support_time', { @@ -191,7 +211,7 @@ const StandardPlanContentList = ({ {!!planContent.appRegistrationCount && ( - + {t('common:n_app_registration_amount', { amount: planContent.appRegistrationCount @@ -201,7 +221,7 @@ const StandardPlanContentList = ({ )} {planContent.customDomain !== undefined && ( - + {t('common:n_custom_domain_amount', { amount: planContent.customDomain diff --git a/projects/app/src/pageComponents/price/ExtraPlan.tsx b/projects/app/src/pageComponents/price/ExtraPlan.tsx index 91263dc7a..6c749ab33 100644 --- a/projects/app/src/pageComponents/price/ExtraPlan.tsx +++ b/projects/app/src/pageComponents/price/ExtraPlan.tsx @@ -107,6 +107,7 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => { void }) => { borderWidth={'1px'} borderColor={'myGray.200'} boxShadow={'0 1px 2px 0 rgba(19, 51, 107, 0.10), 0 0 1px 0 rgba(19, 51, 107, 0.15)'} + overflow={'hidden'} > + {subPlans?.activityExpirationTime && ( + <> + + + + + )} {t('common:support.wallet.subscription.Extra ai points')} + + {subPlans?.activityExpirationTime + ? (() => { + const date = new Date(subPlans.activityExpirationTime); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours().toString().padStart(2, '0'); + const minute = date.getMinutes().toString().padStart(2, '0'); + return t('common:support.wallet.subscription.Activity expiration time', { + year, + month, + day, + hour, + minute + }); + })() + : ''} + void }) => { flexDir={'column'} alignItems={'center'} justifyContent={'center'} - p={[3, 4]} + py={2} + px={[3, 4]} borderRadius={['8px', 'sm']} borderWidth={'1px'} borderColor={selectedPackageIndex === index ? '#3E78FF' : 'myGray.200'} @@ -151,26 +214,31 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => { onClick={() => setSelectedPackageIndex(index)} transition={'all 0.2s'} position={'relative'} + overflow={'hidden'} > - {pkg.activityBonusPoints && pkg.activityBonusPoints > 0 && ( - +{formatNumberWithUnit(pkg.activityBonusPoints, i18n.language)} - + )} {formatNumberWithUnit(pkg.points, i18n.language)}{' '} - {t('common:support.wallet.subscription.point')} + + {t('common:support.wallet.subscription.point')} + void }) => { ))} - + void }) => { - + {t('common:support.wallet.subscription.Update extra ai points tips')} diff --git a/projects/app/src/pageComponents/price/Standard.tsx b/projects/app/src/pageComponents/price/Standard.tsx index c43781e34..76d6e641a 100644 --- a/projects/app/src/pageComponents/price/Standard.tsx +++ b/projects/app/src/pageComponents/price/Standard.tsx @@ -43,6 +43,8 @@ const Standard = ({ const { subPlans, feConfigs } = useSystemStore(); const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.year); + const hasActivityExpiration = !!subPlans?.activityExpirationTime; + const NEW_PLAN_LEVELS = [ StandardSubLevelEnum.free, StandardSubLevelEnum.basic, @@ -185,20 +187,100 @@ const Standard = ({ key={item.level} pos={'relative'} flex={'1 0 0'} - bg={isCurrentPlan ? 'blue.50' : 'rgba(255, 255, 255, 0.90)'} + bg={'rgba(255, 255, 255, 0.90)'} p={'28px'} borderRadius={'xl'} - borderWidth={isCurrentPlan ? '4px' : '1.5px'} + borderWidth={isCurrentPlan ? '2px' : '1.5px'} boxShadow={'1.5'} + overflow={'hidden'} {...(isCurrentPlan ? { - borderColor: 'primary.600' + borderColor: hasActivityExpiration ? '#BB182C' : 'primary.600' } : { borderColor: 'myGray.150' })} > - {isCurrentPlan && ( + {hasActivityExpiration && + (item.level === StandardSubLevelEnum.basic || + item.level === StandardSubLevelEnum.advanced) && ( + <> + + + + + )} + {hasActivityExpiration && + (item.level === StandardSubLevelEnum.basic || + item.level === StandardSubLevelEnum.advanced) && ( + + + {(() => { + const date = new Date(subPlans.activityExpirationTime || ''); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + const hour = date.getHours().toString().padStart(2, '0'); + const minute = date.getMinutes().toString().padStart(2, '0'); + return t('common:support.wallet.subscription.Activity expiration time', { + year, + month, + day, + hour, + minute + }); + })()} + + + )} + {isCurrentPlan && !hasActivityExpiration && ( )} - + {t(item.label as any)} @@ -228,12 +315,21 @@ const Standard = ({ {t('common:custom_plan_price')} ) : ( - - ￥ - {matchedCoupon?.discount && item.price > 0 - ? (matchedCoupon.discount * item.price).toFixed(1) - : item.price} - + + + ￥ + {matchedCoupon?.discount && item.price > 0 + ? (matchedCoupon.discount * item.price).toFixed(1) + : item.price} + + )} {item.level !== StandardSubLevelEnum.free && item.level !== StandardSubLevelEnum.custom && @@ -255,11 +351,16 @@ const Standard = ({ {/* Button */} {(() => { + const buttonHeight = 10; + const buttonMarginTop = 4; + const buttonMarginBottom = 6; + if (item.level === StandardSubLevelEnum.free) { return (