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

ui

This commit is contained in:
heheer 2025-12-23 18:55:29 +08:00 committed by archer
parent fa4c28db98
commit baf87473a4
No known key found for this signature in database
GPG Key ID: 4446499B846D4A9E
14 changed files with 608 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/global/support/wallet/sub/type.d.ts vendored
View File

@ -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;
};

6
packages/web/components/common/Icon/icons/price/right.svg
View File

@ -1,5 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.6262 3.29289C13.0167 2.90237 13.6499 2.90237 14.0404 3.29289C14.4309 3.68342 14.4309 4.31658 14.0404 4.70711L6.70707 12.0404C6.31654 12.431 5.68338 12.431 5.29285 12.0404L1.95952 8.70711C1.56899 8.31658 1.56899 7.68342 1.95952 7.29289C2.35004 6.90237 2.98321 6.90237 3.37373 7.29289L5.99996 9.91912L12.6262 3.29289Z"
fill="#3370FF" />
<svg viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6261 3.29289C13.0166 2.90237 13.6498 2.90237 14.0403 3.29289C14.4308 3.68342 14.4308 4.31658 14.0403 4.70711L6.70694 12.0404C6.31642 12.431 5.68325 12.431 5.29273 12.0404L1.9594 8.70711C1.56887 8.31658 1.56887 7.68342 1.9594 7.29289C2.34992 6.90237 2.98309 6.90237 3.37361 7.29289L5.99984 9.91912L12.6261 3.29289Z"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 475 B

After

Width:  |  Height:  |  Size: 416 B

1
packages/web/i18n/en/common.json
View File

@ -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",

1
packages/web/i18n/zh-CN/common.json
View File

@ -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个月",

1
packages/web/i18n/zh-Hant/common.json
View File

@ -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": "知識庫索引量",

61
projects/app/public/imgs/system/extraSnowflake1.svg Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<g opacity="0.13">
<path d="M19.375 1.1875L18.4375 2.8125V37.1875L19.375 38.8125L20.3125 37.1875V2.8125L19.375 1.1875Z" fill="url(#paint0_linear_30901_98056)"/>
<path d="M19.375 9.375L15.625 6.875V5L19.375 7.5V9.375ZM19.375 13.125L14.375 10V8.125L19.375 11.25V13.125ZM19.375 9.375L23.125 6.875V5L19.375 7.5V9.375ZM19.375 13.125L24.375 10V8.125L19.375 11.25V13.125ZM19.375 30.625L15.625 33.125V35L19.375 32.5V30.625ZM19.375 26.875L14.375 30V31.875L19.375 28.75V26.875ZM19.375 30.625L23.125 33.125V35L19.375 32.5V30.625ZM19.375 26.875L24.375 30V31.875L19.375 28.75V26.875Z" fill="url(#paint1_linear_30901_98056)"/>
<path d="M3.09375 29.4063H4.96875L34.7188 12.2188L35.6562 10.5938H33.7812L4.03125 27.7813L3.09375 29.4063Z" fill="url(#paint2_linear_30901_98056)"/>
<path d="M10.1563 25.3125L9.875 29.8125L8.25 30.75L8.53125 26.25L10.1563 25.3125ZM13.4063 23.4375L13.1875 29.3438L11.5625 30.2813L11.7813 24.375L13.4063 23.4375Z" fill="url(#paint3_linear_30901_98056)"/>
<path d="M10.1563 25.3125L6.125 23.3125L4.5 24.25L8.53125 26.25L10.1563 25.3125ZM13.4063 23.4375L8.1875 20.6875L6.5625 21.625L11.7813 24.375L13.4063 23.4375ZM28.5625 14.6875L32.5938 16.6875L34.2188 15.75L30.1875 13.75L28.5625 14.6875ZM25.3125 16.5625L30.5312 19.3438L32.1562 18.4063L26.9375 15.625L25.3125 16.5625Z" fill="url(#paint4_linear_30901_98056)"/>
<path d="M28.5625 14.6875L28.8438 10.1875L30.4688 9.25L30.1875 13.75L28.5625 14.6875ZM25.3125 16.5625L25.5312 10.6875L27.1562 9.75L26.9375 15.625L25.3125 16.5625Z" fill="url(#paint5_linear_30901_98056)"/>
<path d="M35.6562 29.4063H33.7812L4.03125 12.2188L3.09375 10.5938H4.96875L34.7188 27.7813L35.6562 29.4063Z" fill="url(#paint6_linear_30901_98056)"/>
<path d="M28.5938 25.3125L28.875 29.8125L30.5 30.75L30.2188 26.25L28.5938 25.3125ZM25.3438 23.4375L25.5625 29.3438L27.1875 30.2813L26.9688 24.375L25.3438 23.4375Z" fill="url(#paint7_linear_30901_98056)"/>
<path d="M28.5938 25.3125L32.625 23.3125L34.25 24.25L30.2188 26.25L28.5938 25.3125ZM25.3438 23.4375L30.5625 20.6875L32.1875 21.625L26.9688 24.375L25.3438 23.4375ZM10.1875 14.6875L6.15625 16.6875L4.53125 15.75L8.5625 13.75L10.1875 14.6875ZM13.4375 16.5625L8.21875 19.3438L6.59375 18.4063L11.8125 15.625L13.4375 16.5625ZM10.1875 14.6875L9.90625 10.1875L8.28125 9.25L8.5625 13.75L10.1875 14.6875Z" fill="url(#paint8_linear_30901_98056)"/>
<path d="M13.4375 16.5625L13.2188 10.6875L11.5938 9.75L11.8125 15.625L13.4375 16.5625Z" fill="url(#paint9_linear_30901_98056)"/>
<path d="M19.375 25.9063L14.25 22.9688V17.0625L19.375 14.0938L24.5 17.0313V22.9375L19.375 25.9063ZM15.8125 22.0625L19.375 24.0938L22.9375 22.0313V17.9688L19.375 15.9063L15.8125 17.9688V22.0625Z" fill="url(#paint10_linear_30901_98056)"/>
</g>
<defs>
<linearGradient id="paint0_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint1_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint2_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint3_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint4_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint5_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint6_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint7_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint8_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint9_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint10_linear_30901_98056" x1="36" y1="8" x2="6.5" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

61
projects/app/public/imgs/system/extraSnowflake2.svg Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
<g opacity="0.24">
<path d="M12.1094 0.742188L11.5234 1.75781V23.2422L12.1094 24.2578L12.6953 23.2422V1.75781L12.1094 0.742188Z" fill="url(#paint0_linear_30901_98201)"/>
<path d="M12.1094 5.85938L9.76562 4.29688V3.125L12.1094 4.6875V5.85938ZM12.1094 8.20313L8.98438 6.25V5.07813L12.1094 7.03125V8.20313ZM12.1094 5.85938L14.4531 4.29688V3.125L12.1094 4.6875V5.85938ZM12.1094 8.20313L15.2344 6.25V5.07813L12.1094 7.03125V8.20313ZM12.1094 19.1406L9.76562 20.7031V21.875L12.1094 20.3125V19.1406ZM12.1094 16.7969L8.98438 18.75V19.9219L12.1094 17.9688V16.7969ZM12.1094 19.1406L14.4531 20.7031V21.875L12.1094 20.3125V19.1406ZM12.1094 16.7969L15.2344 18.75V19.9219L12.1094 17.9688V16.7969Z" fill="url(#paint1_linear_30901_98201)"/>
<path d="M1.93359 18.3789H3.10547L21.6992 7.63672L22.2852 6.6211H21.1133L2.51953 17.3633L1.93359 18.3789Z" fill="url(#paint2_linear_30901_98201)"/>
<path d="M6.34766 15.8203L6.17188 18.6328L5.15625 19.2188L5.33203 16.4063L6.34766 15.8203ZM8.37891 14.6484L8.24219 18.3398L7.22656 18.9258L7.36328 15.2344L8.37891 14.6484Z" fill="url(#paint3_linear_30901_98201)"/>
<path d="M6.34766 15.8203L3.82813 14.5703L2.8125 15.1563L5.33203 16.4063L6.34766 15.8203ZM8.37891 14.6484L5.11719 12.9297L4.10156 13.5156L7.36328 15.2344L8.37891 14.6484ZM17.8516 9.17969L20.3711 10.4297L21.3867 9.84375L18.8672 8.59375L17.8516 9.17969ZM15.8203 10.3516L19.082 12.0898L20.0977 11.5039L16.8359 9.76563L15.8203 10.3516Z" fill="url(#paint4_linear_30901_98201)"/>
<path d="M17.8516 9.17969L18.0273 6.36719L19.043 5.78125L18.8672 8.59375L17.8516 9.17969ZM15.8203 10.3516L15.957 6.67969L16.9727 6.09375L16.8359 9.76563L15.8203 10.3516Z" fill="url(#paint5_linear_30901_98201)"/>
<path d="M22.2852 18.3789H21.1133L2.51953 7.63672L1.93359 6.6211H3.10547L21.6992 17.3633L22.2852 18.3789Z" fill="url(#paint6_linear_30901_98201)"/>
<path d="M17.8711 15.8203L18.0469 18.6328L19.0625 19.2188L18.8867 16.4063L17.8711 15.8203ZM15.8398 14.6484L15.9766 18.3398L16.9922 18.9258L16.8555 15.2344L15.8398 14.6484Z" fill="url(#paint7_linear_30901_98201)"/>
<path d="M17.8711 15.8203L20.3906 14.5703L21.4062 15.1563L18.8867 16.4063L17.8711 15.8203ZM15.8398 14.6484L19.1016 12.9297L20.1172 13.5156L16.8555 15.2344L15.8398 14.6484ZM6.36719 9.17969L3.84766 10.4297L2.83203 9.84375L5.35156 8.59375L6.36719 9.17969ZM8.39844 10.3516L5.13672 12.0898L4.12109 11.5039L7.38281 9.76563L8.39844 10.3516ZM6.36719 9.17969L6.19141 6.36719L5.17578 5.78125L5.35156 8.59375L6.36719 9.17969Z" fill="url(#paint8_linear_30901_98201)"/>
<path d="M8.39844 10.3516L8.26172 6.67969L7.24609 6.09375L7.38281 9.76563L8.39844 10.3516Z" fill="url(#paint9_linear_30901_98201)"/>
<path d="M12.1094 16.1914L8.90625 14.3555V10.6641L12.1094 8.80859L15.3125 10.6445V14.3359L12.1094 16.1914ZM9.88281 13.7891L12.1094 15.0586L14.3359 13.7695V11.2305L12.1094 9.94141L9.88281 11.2305V13.7891Z" fill="url(#paint10_linear_30901_98201)"/>
</g>
<defs>
<linearGradient id="paint0_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint1_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint2_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint3_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint4_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint5_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint6_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint7_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint8_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint9_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint10_linear_30901_98201" x1="4" y1="13" x2="22" y2="11.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

61
projects/app/public/imgs/system/extraSnowflake3.svg Normal file
View File

@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" width="67" height="67" viewBox="0 0 67 67" fill="none">
<g opacity="0.24">
<path d="M32.4532 1.98901L30.8829 4.71089V62.289L32.4532 65.0109L34.0235 62.289V4.71089L32.4532 1.98901Z" fill="url(#paint0_linear_30901_96540)"/>
<path d="M32.4532 15.7031L26.172 11.5156V8.37495L32.4532 12.5625V15.7031ZM32.4532 21.9843L24.0782 16.75V13.6093L32.4532 18.8437V21.9843ZM32.4532 15.7031L38.7345 11.5156V8.37495L32.4532 12.5625V15.7031ZM32.4532 21.9843L40.8282 16.75V13.6093L32.4532 18.8437V21.9843ZM32.4532 51.2968L26.172 55.4843V58.625L32.4532 54.4375V51.2968ZM32.4532 45.0156L24.0782 50.25V53.3906L32.4532 48.1562V45.0156ZM32.4532 51.2968L38.7345 55.4843V58.625L32.4532 54.4375V51.2968ZM32.4532 45.0156L40.8282 50.25V53.3906L32.4532 48.1562V45.0156Z" fill="url(#paint1_linear_30901_96540)"/>
<path d="M5.18213 49.2554H8.32275L58.154 20.4664L59.7243 17.7445H56.5837L6.75244 46.5336L5.18213 49.2554Z" fill="url(#paint2_linear_30901_96540)"/>
<path d="M17.0118 42.3984L16.5407 49.9359L13.8188 51.5062L14.2899 43.9687L17.0118 42.3984ZM22.4556 39.2578L22.0892 49.1507L19.3673 50.721L19.7337 40.8281L22.4556 39.2578Z" fill="url(#paint3_linear_30901_96540)"/>
<path d="M17.0118 42.3984L10.2595 39.0484L7.5376 40.6187L14.2899 43.9687L17.0118 42.3984ZM22.4556 39.2578L13.7142 34.6515L10.9923 36.2218L19.7337 40.8281L22.4556 39.2578ZM47.8423 24.6015L54.5946 27.9515L57.3165 26.3812L50.5642 23.0312L47.8423 24.6015ZM42.3985 27.7421L51.1399 32.4007L53.8618 30.8304L45.1204 26.1718L42.3985 27.7421Z" fill="url(#paint4_linear_30901_96540)"/>
<path d="M47.8423 24.6015L48.3134 17.064L51.0353 15.4937L50.5642 23.0312L47.8423 24.6015ZM42.3985 27.7421L42.7649 17.9015L45.4868 16.3312L45.1204 26.1718L42.3985 27.7421Z" fill="url(#paint5_linear_30901_96540)"/>
<path d="M59.7243 49.2554H56.5837L6.75244 20.4664L5.18213 17.7445H8.32275L58.154 46.5336L59.7243 49.2554Z" fill="url(#paint6_linear_30901_96540)"/>
<path d="M47.8946 42.3984L48.3657 49.9359L51.0876 51.5062L50.6165 43.9687L47.8946 42.3984ZM42.4509 39.2578L42.8173 49.1507L45.5392 50.721L45.1728 40.8281L42.4509 39.2578Z" fill="url(#paint7_linear_30901_96540)"/>
<path d="M47.8946 42.3984L54.647 39.0484L57.3688 40.6187L50.6165 43.9687L47.8946 42.3984ZM42.4509 39.2578L51.1923 34.6515L53.9142 36.2218L45.1728 40.8281L42.4509 39.2578ZM17.0642 24.6015L10.3118 27.9515L7.58994 26.3812L14.3423 23.0312L17.0642 24.6015ZM22.5079 27.7421L13.7665 32.4007L11.0446 30.8304L19.786 26.1718L22.5079 27.7421ZM17.0642 24.6015L16.5931 17.064L13.8712 15.4937L14.3423 23.0312L17.0642 24.6015Z" fill="url(#paint8_linear_30901_96540)"/>
<path d="M22.5079 27.7421L22.1415 17.9015L19.4196 16.3312L19.786 26.1718L22.5079 27.7421Z" fill="url(#paint9_linear_30901_96540)"/>
<path d="M32.4532 43.3929L23.8688 38.4726V28.5796L32.4532 23.607L41.0376 28.5273V38.4203L32.4532 43.3929ZM26.486 36.9546L32.4532 40.357L38.4204 36.9023V30.0976L32.4532 26.6429L26.486 30.0976V36.9546Z" fill="url(#paint10_linear_30901_96540)"/>
</g>
<defs>
<linearGradient id="paint0_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint1_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint2_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint3_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint4_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint5_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint6_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint7_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint8_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint9_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint10_linear_30901_96540" x1="32.4532" y1="1.98901" x2="32.4532" y2="65.0109" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

27
projects/app/public/imgs/system/ribbonLeft.svg Normal file
View File

@ -0,0 +1,27 @@
<svg width="29" height="12" viewBox="0 0 29 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_30901_97735)">
<path d="M23 1.59997L1 1.59998" stroke="url(#paint0_linear_30901_97735)" stroke-width="2" stroke-linecap="round" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_di_30901_97735" x="-4.6" y="-2.43187e-05" width="33.2" height="11.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2.3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.500815 0 0 0 0 0.168025 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_30901_97735"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_30901_97735" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.724544 0 0 0 0 0.338905 0 0 0 0.36 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_30901_97735"/>
</filter>
<linearGradient id="paint0_linear_30901_97735" x1="1" y1="2.09998" x2="23" y2="2.09997" gradientUnits="userSpaceOnUse">
<stop stop-color="#BB182C"/>
<stop offset="1" stop-color="#BB182C" stop-opacity="0.1"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

30
projects/app/public/imgs/system/ribbonRight.svg Normal file
View File

@ -0,0 +1,30 @@
<svg width="136" height="170" viewBox="0 0 136 170" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_di_30901_97737)">
<path d="M166.6 83.1323L5.6001 83.1323" stroke="url(#paint0_linear_30901_97737)" stroke-width="2" stroke-linecap="round"/>
<path d="M58.6001 94.2076C63.9919 93.5518 77.6171 90.3167 88.9836 82.6225M88.9836 82.6225C86.142 70.1629 70.8409 53.9874 62.3161 62.5125C53.7912 71.0376 63.1904 82.6225 88.9836 82.6225Z" stroke="#BB182C" stroke-width="2"/>
<path d="M119.6 94.3567C114.336 93.698 101.035 90.4488 89.939 82.7209M89.939 82.7209C92.7131 70.2068 107.65 53.9605 115.972 62.5229C124.295 71.0853 115.119 82.7209 89.939 82.7209Z" stroke="#BB182C" stroke-width="2"/>
<path d="M139.6 160.132L39.6001 1.13232" stroke="#BB182C" stroke-width="2"/>
</g>
<defs>
<filter id="filter0_di_30901_97737" x="9.77516e-05" y="-2.43187e-05" width="172.2" height="169.265" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2.3"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.500815 0 0 0 0 0.168025 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_30901_97737"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_30901_97737" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.724544 0 0 0 0 0.338905 0 0 0 0.36 0"/>
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_30901_97737"/>
</filter>
<linearGradient id="paint0_linear_30901_97737" x1="5.6001" y1="83.6323" x2="29.2468" y2="83.1261" gradientUnits="userSpaceOnUse">
<stop stop-color="#BB182C" stop-opacity="0.1"/>
<stop offset="1" stop-color="#BB182C"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

61
projects/app/public/imgs/system/snowflake.svg Normal file
View File

@ -0,0 +1,61 @@
<svg width="78" height="81" viewBox="0 0 78 81" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.24">
<path d="M40.203 2.46411L38.2577 5.83599V77.1641L40.203 80.536L42.1483 77.1641V5.83599L40.203 2.46411Z" fill="url(#paint0_linear_30901_97724)"/>
<path d="M40.203 19.4532L32.4218 14.2657V10.375L40.203 15.5625V19.4532ZM40.203 27.2344L29.828 20.75V16.8594L40.203 23.3438V27.2344ZM40.203 19.4532L47.9843 14.2657V10.375L40.203 15.5625V19.4532ZM40.203 27.2344L50.578 20.75V16.8594L40.203 23.3438V27.2344ZM40.203 63.5469L32.4218 68.7344V72.625L40.203 67.4375V63.5469ZM40.203 55.7657L29.828 62.25V66.1407L40.203 59.6563V55.7657ZM40.203 63.5469L47.9843 68.7344V72.625L40.203 67.4375V63.5469ZM40.203 55.7657L50.578 62.25V66.1407L40.203 59.6563V55.7657Z" fill="url(#paint1_linear_30901_97724)"/>
<path d="M6.41943 61.018H10.3101L72.0413 25.354L73.9866 21.9821H70.096L8.36475 57.6461L6.41943 61.018Z" fill="url(#paint2_linear_30901_97724)"/>
<path d="M21.0741 52.5235L20.4905 61.861L17.1187 63.8063L17.7022 54.4688L21.0741 52.5235ZM27.8179 48.6329L27.364 60.8883L23.9921 62.8336L24.446 50.5782L27.8179 48.6329Z" fill="url(#paint3_linear_30901_97724)"/>
<path d="M21.0741 52.5235L12.7093 48.3735L9.3374 50.3188L17.7022 54.4688L21.0741 52.5235ZM27.8179 48.6329L16.989 42.9266L13.6171 44.8719L24.446 50.5782L27.8179 48.6329ZM59.2671 30.4766L67.6319 34.6266L71.0038 32.6813L62.639 28.5313L59.2671 30.4766ZM52.5233 34.3672L63.3522 40.1383L66.7241 38.193L55.8952 32.4219L52.5233 34.3672Z" fill="url(#paint4_linear_30901_97724)"/>
<path d="M59.2671 30.4766L59.8507 21.1391L63.2226 19.1938L62.639 28.5313L59.2671 30.4766ZM52.5233 34.3672L52.9772 22.1766L56.3491 20.2313L55.8952 32.4219L52.5233 34.3672Z" fill="url(#paint5_linear_30901_97724)"/>
<path d="M73.9866 61.018H70.096L8.36475 25.354L6.41943 21.9821H10.3101L72.0413 57.6461L73.9866 61.018Z" fill="url(#paint6_linear_30901_97724)"/>
<path d="M59.3319 52.5235L59.9155 61.861L63.2874 63.8063L62.7038 54.4688L59.3319 52.5235ZM52.5882 48.6329L53.0421 60.8883L56.414 62.8336L55.9601 50.5782L52.5882 48.6329Z" fill="url(#paint7_linear_30901_97724)"/>
<path d="M59.3319 52.5235L67.6968 48.3735L71.0687 50.3188L62.7038 54.4688L59.3319 52.5235ZM52.5882 48.6329L63.4171 42.9266L66.789 44.8719L55.9601 50.5782L52.5882 48.6329ZM21.139 30.4766L12.7741 34.6266L9.40225 32.6813L17.7671 28.5313L21.139 30.4766ZM27.8827 34.3672L17.0538 40.1383L13.6819 38.193L24.5108 32.4219L27.8827 34.3672ZM21.139 30.4766L20.5554 21.1391L17.1835 19.1938L17.7671 28.5313L21.139 30.4766Z" fill="url(#paint8_linear_30901_97724)"/>
<path d="M27.8827 34.3672L27.4288 22.1766L24.0569 20.2313L24.5108 32.4219L27.8827 34.3672Z" fill="url(#paint9_linear_30901_97724)"/>
<path d="M40.203 53.7555L29.5687 47.6602V35.4047L40.203 29.2446L50.8374 35.3399V47.5954L40.203 53.7555ZM32.8108 45.7797L40.203 49.9946L47.5952 45.7149V37.2852L40.203 33.0055L32.8108 37.2852V45.7797Z" fill="url(#paint10_linear_30901_97724)"/>
</g>
<defs>
<linearGradient id="paint0_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint1_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint2_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint3_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint4_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint5_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint6_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint7_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint8_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint9_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
<linearGradient id="paint10_linear_30901_97724" x1="40.203" y1="2.46411" x2="40.203" y2="80.536" gradientUnits="userSpaceOnUse">
<stop stop-color="#3370FF"/>
<stop offset="1" stop-color="#F0F4FF"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

62
projects/app/src/components/support/wallet/StandardPlanContentList.tsx
View File

@ -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 ? (
<Grid gap={4} fontSize={'sm'} fontWeight={500}>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon
name={'price/right'}
w={'16px'}
mr={3}
color={planContent.annualBonusPoints ? '#BB182C' : 'primary.600'}
/>
<Flex alignItems={'center'}>
<Box fontWeight={'bold'} color={'myGray.600'}>
{t('common:n_ai_points', {
amount: planContent.annualBonusPoints
? `${planContent.totalPoints} + ${planContent.annualBonusPoints}`
: planContent.totalPoints
})}
</Box>
{planContent.annualBonusPoints ? (
<>
<Text
fontWeight={'medium'}
color={'myGray.600'}
textDecoration={'line-through'}
mr={1}
>
{planContent.totalPoints}
</Text>
<Text fontWeight={'medium'} color={'#DF531E'}>
{planContent.totalPoints + planContent.annualBonusPoints}
</Text>
<Text color={'myGray.600'} ml={1}>
{t('common:support.wallet.subscription.point')}
</Text>
</>
) : (
<Box fontWeight={'bold'} color={'myGray.600'} display={'flex'}>
<Text>{planContent.totalPoints}</Text>
<Text ml={1}>{t('common:support.wallet.subscription.point')}</Text>
</Box>
)}
<ModelPriceModal>
{({ onOpen }) => (
<QuestionTip ml={1} label={t('common:aipoint_desc')} onClick={onOpen} />
@ -93,7 +113,7 @@ const StandardPlanContentList = ({
</Flex>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box fontWeight={'bold'} color={'myGray.600'}>
{t('common:n_dataset_size', {
amount: planContent.maxDatasetSize
@ -101,7 +121,7 @@ const StandardPlanContentList = ({
</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_team_members', {
amount: planContent.maxTeamMember
@ -109,7 +129,7 @@ const StandardPlanContentList = ({
</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_agent_amount', {
amount: planContent.maxAppAmount
@ -117,7 +137,7 @@ const StandardPlanContentList = ({
</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_dataset_amount', {
amount: planContent.maxDatasetAmount
@ -125,7 +145,7 @@ const StandardPlanContentList = ({
</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_chat_records_retain', {
amount: planContent.chatHistoryStoreDuration
@ -134,7 +154,7 @@ const StandardPlanContentList = ({
</Flex>
{!!planContent.auditLogStoreDuration && (
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_team_audit_day', {
amount: planContent.auditLogStoreDuration
@ -143,7 +163,7 @@ const StandardPlanContentList = ({
</Flex>
)}
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_team_qpm', {
amount: planContent.requestsPerMinute
@ -153,7 +173,7 @@ const StandardPlanContentList = ({
</Flex>
{!!planContent.websiteSyncPerDataset && (
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box fontWeight={'bold'} color={'myGray.600'}>
{t('common:n_website_sync_max_pages', {
amount: planContent.websiteSyncPerDataset
@ -162,7 +182,7 @@ const StandardPlanContentList = ({
</Flex>
)}
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{planContent.ticketResponseTime
? t('common:worker_order_support_time', {
@ -191,7 +211,7 @@ const StandardPlanContentList = ({
</Flex>
{!!planContent.appRegistrationCount && (
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_app_registration_amount', {
amount: planContent.appRegistrationCount
@ -201,7 +221,7 @@ const StandardPlanContentList = ({
)}
{planContent.customDomain !== undefined && (
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>
{t('common:n_custom_domain_amount', {
amount: planContent.customDomain

107
projects/app/src/pageComponents/price/ExtraPlan.tsx
View File

@ -107,6 +107,7 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => {
<VStack>
<Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
<Box
position={'relative'}
bg={'white'}
w={'100%'}
px={[4, 8]}
@ -115,18 +116,79 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => 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 && (
<>
<Box
position={'absolute'}
top={8}
left={'36%'}
width={'55px'}
height={'64px'}
zIndex={1111}
bgImage={'url(/imgs/system/extraSnowflake1.svg)'}
backgroundSize="100% 100%"
backgroundRepeat="no-repeat"
/>
<Box
position={'absolute'}
top={1}
left={'60%'}
width={'25px'}
height={'25px'}
zIndex={0}
bgImage={'url(/imgs/system/extraSnowflake2.svg)'}
backgroundSize="100% 100%"
backgroundRepeat="no-repeat"
/>
<Box
position={'absolute'}
top={1}
right={3}
width={'67px'}
height={'72px'}
zIndex={0}
bgImage={'url(/imgs/system/extraSnowflake3.svg)'}
backgroundSize="100% 100%"
backgroundRepeat="no-repeat"
/>
</>
)}
<Box
position={'relative'}
zIndex={1}
fontSize={'18px'}
fontWeight={'500'}
color={'primary.700'}
pb={6}
pb={subPlans?.activityExpirationTime ? 2 : 6}
borderBottomWidth={'1px'}
borderBottomColor={'myGray.200'}
>
{t('common:support.wallet.subscription.Extra ai points')}
<Box fontSize={'12px'} fontWeight={'normal'} color={'myGray.600'} mt={0.5}>
{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
});
})()
: ''}
</Box>
</Box>
<Grid
position={'relative'}
zIndex={1}
gridTemplateColumns={['repeat(2, 1fr)', 'repeat(3, 1fr)']}
gap={[2, 3]}
py={[3, 4]}
@ -138,7 +200,8 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => 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 && (
<Box
{!!pkg.activityBonusPoints && (
<Flex
position={'absolute'}
top={[1, 2]}
right={[1, 2]}
fontSize={['10px', 'xs']}
top={0}
right={-4}
minW={20}
py={0.5}
justifyContent={'center'}
fontSize={'10px'}
fontWeight={'bold'}
color={'red.600'}
bg={'red.50'}
px={[1, 2]}
py={[0.5, 1]}
borderRadius={'sm'}
color={'white'}
bg={'#ED372C'}
transform={'rotate(28deg)'}
whiteSpace={'nowrap'}
>
+{formatNumberWithUnit(pkg.activityBonusPoints, i18n.language)}
</Box>
</Flex>
)}
<Box fontSize={'24px'} fontWeight={'medium'} color={'myGray.600'}>
{formatNumberWithUnit(pkg.points, i18n.language)}{' '}
{t('common:support.wallet.subscription.point')}
<Box as={'span'} fontSize={'12px'}>
{t('common:support.wallet.subscription.point')}
</Box>
</Box>
<Box
fontSize={['10px', '12px']}
@ -185,7 +253,12 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => {
))}
</Grid>
<Flex justifyContent={'space-between'} alignItems={'center'}>
<Flex
position={'relative'}
zIndex={1}
justifyContent={'space-between'}
alignItems={'center'}
>
<Box
fontSize={['13px', '14px']}
color={'myGray.600'}
@ -204,6 +277,8 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => {
</Flex>
<Button
position={'relative'}
zIndex={1}
w={'100%'}
h={['40px', '44px']}
variant={'primaryGhost'}
@ -227,7 +302,7 @@ const ExtraPlan = ({ onPaySuccess }: { onPaySuccess?: () => void }) => {
{t('common:support.wallet.Buy')}
</Button>
<HStack color={'blue.700'} mt={[4, 6]} spacing={[2, 0]}>
<HStack position={'relative'} zIndex={1} color={'blue.700'} mt={[4, 6]} spacing={[2, 0]}>
<MyIcon name={'infoRounded'} w={['16px', '18px']} />
<Box fontSize={['12px', '14px']} fontWeight={'medium'} lineHeight={['1.4', 'normal']}>
{t('common:support.wallet.subscription.Update extra ai points tips')}

195
projects/app/src/pageComponents/price/Standard.tsx
View File

@ -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) && (
<>
<Box
position={'absolute'}
top={24}
left={0}
w={'29px'}
h={'12px'}
bgImage={"url('/imgs/system/ribbonLeft.svg')"}
bgSize={'contain'}
bgRepeat={'no-repeat'}
zIndex={0}
/>
<Box
position={'absolute'}
top={4}
right={0}
w={'136px'}
h={'170px'}
bgImage={"url('/imgs/system/ribbonRight.svg')"}
bgSize={'contain'}
bgRepeat={'no-repeat'}
zIndex={0}
/>
<Box
position={'absolute'}
bottom={0}
right={0}
w={'78px'}
h={'81px'}
bgImage={"url('/imgs/system/snowflake.svg')"}
bgSize={'contain'}
bgRepeat={'no-repeat'}
zIndex={0}
/>
</>
)}
{hasActivityExpiration &&
(item.level === StandardSubLevelEnum.basic ||
item.level === StandardSubLevelEnum.advanced) && (
<Box
position={'absolute'}
top={0}
left={0}
right={0}
h={'28px'}
bg={'linear-gradient(180deg, #FFE0EB 7.14%, rgba(255, 255, 255, 0.00) 100%)'}
backdropFilter={'blur(0px)'}
zIndex={1}
display={'flex'}
alignItems={'center'}
justifyContent={'center'}
>
<Box
fontSize={'12px'}
fontWeight={'500'}
color={'#E45F5F'}
textAlign={'center'}
>
{(() => {
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
});
})()}
</Box>
</Box>
)}
{isCurrentPlan && !hasActivityExpiration && (
<Box
position={'absolute'}
right={0}
@ -214,7 +296,12 @@ const Standard = ({
{t('common:is_using')}
</Box>
)}
<Box fontSize={'md'} fontWeight={'500'} color={'myGray.900'}>
<Box
fontSize={'md'}
fontWeight={'500'}
color={'myGray.900'}
mt={hasActivityExpiration ? 2 : 0}
>
{t(item.label as any)}
</Box>
<Flex alignItems={'center'} gap={2.5}>
@ -228,12 +315,21 @@ const Standard = ({
{t('common:custom_plan_price')}
</Box>
) : (
<MyBox fontSize={['32px', '42px']} fontWeight={'bold'} color={'myGray.900'}>
￥
{matchedCoupon?.discount && item.price > 0
? (matchedCoupon.discount * item.price).toFixed(1)
: item.price}
</MyBox>
<Box
pr={8}
py={1}
borderRadius={'sm'}
display={'inline-block'}
zIndex={10}
bgGradient={'linear(to-r, #fff 90%, transparent)'}
>
<MyBox fontSize={['32px', '42px']} fontWeight={'bold'} color={'myGray.900'}>
￥
{matchedCoupon?.discount && item.price > 0
? (matchedCoupon.discount * item.price).toFixed(1)
: item.price}
</MyBox>
</Box>
)}
{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 (
<Button
mt={4}
mb={6}
mt={buttonMarginTop}
mb={buttonMarginBottom}
h={buttonHeight}
_active={{}}
_hover={{}}
boxShadow={'0'}
@ -275,8 +376,9 @@ const Standard = ({
if (item.level === StandardSubLevelEnum.custom) {
return (
<Button
mt={4}
mb={6}
mt={buttonMarginTop}
mb={buttonMarginBottom}
h={buttonHeight}
w={'100%'}
variant={'primaryGhost'}
onClick={() => {
@ -292,11 +394,39 @@ const Standard = ({
if (isCurrentPlan) {
return (
<Button
mt={4}
mb={6}
mt={buttonMarginTop}
mb={buttonMarginBottom}
h={buttonHeight}
w={'100%'}
variant={'primary'}
isLoading={isLoading}
variant={hasActivityExpiration ? 'solid' : 'primary'}
{...(hasActivityExpiration && {
bg: '#ED372C',
color: 'white',
borderRadius: '6px',
_hover: { bg: '#DE0D00' },
sx: {
'&::before': {
content: '""',
position: 'absolute',
left: '0',
top: '0',
width: '30px',
height: '30px',
backgroundImage: `url('/imgs/system/snowflakeLeft.svg')`,
backgroundRepeat: 'no-repeat'
},
'&::after': {
content: '""',
position: 'absolute',
right: '0',
bottom: '0',
width: '25px',
height: '25px',
backgroundImage: `url('/imgs/system/snowflakeRight.svg')`
}
}
})}
onClick={() => {
setPackageChange(PackageChangeStatusEnum.renewal);
onPay({
@ -314,8 +444,9 @@ const Standard = ({
if (isHigherLevel) {
return (
<Button
mt={4}
mb={6}
mt={buttonMarginTop}
mb={buttonMarginBottom}
h={buttonHeight}
w={'100%'}
variant={'primaryGhost'}
isLoading={isLoading}
@ -335,10 +466,20 @@ const Standard = ({
}
return (
<Button
mt={4}
mb={6}
mt={buttonMarginTop}
mb={buttonMarginBottom}
h={buttonHeight}
w={'100%'}
variant={'primaryGhost'}
{...(hasActivityExpiration
? {
variant: 'outline',
borderColor: '#ED372C',
color: '#ED372C',
_hover: { bg: 'rgba(237, 55, 44, 0.1)' }
}
: {
variant: 'primaryGhost'
})}
isLoading={isLoading}
onClick={() => {
setPackageChange(PackageChangeStatusEnum.buy);
@ -359,19 +500,19 @@ const Standard = ({
{item.level === StandardSubLevelEnum.custom ? (
<Grid gap={4} fontSize={'sm'}>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>{t('common:custom_plan_feature_1')}</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>{t('common:custom_plan_feature_2')}</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>{t('common:custom_plan_feature_3')}</Box>
</Flex>
<Flex alignItems={'center'}>
<MyIcon name={'price/right'} w={'16px'} mr={3} />
<MyIcon name={'price/right'} w={'16px'} mr={3} color={'primary.600'} />
<Box color={'myGray.600'}>{t('common:custom_plan_feature_4')}</Box>
</Flex>
</Grid>