From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/custom/custom-page/index.tsx | 44 ++++++++++++++++++++++++++------------------
1 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/app/components/custom/custom-page/index.tsx b/app/components/custom/custom-page/index.tsx
index 90ce16b..75d5923 100644
--- a/app/components/custom/custom-page/index.tsx
+++ b/app/components/custom/custom-page/index.tsx
@@ -1,36 +1,44 @@
import { useTranslation } from 'react-i18next'
import CustomWebAppBrand from '../custom-web-app-brand'
+import s from '../style.module.css'
+import GridMask from '@/app/components/base/grid-mask'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import { contactSalesUrl } from '@/app/components/billing/config'
-import { useModalContext } from '@/context/modal-context'
const CustomPage = () => {
const { t } = useTranslation()
const { plan, enableBilling } = useProviderContext()
- const { setShowPricingModal } = useModalContext()
+
const showBillingTip = enableBilling && plan.type === Plan.sandbox
const showContact = enableBilling && (plan.type === Plan.professional || plan.type === Plan.team)
return (
<div className='flex flex-col'>
- {showBillingTip && (
- <div className='mb-1 flex justify-between rounded-xl bg-gradient-to-r from-components-input-border-active-prompt-1 to-components-input-border-active-prompt-2 p-4 pl-6 shadow-lg backdrop-blur-sm'>
- <div className='space-y-1 text-text-primary-on-surface'>
- <div className='title-xl-semi-bold'>{t('custom.upgradeTip.title')}</div>
- <div className='system-sm-regular'>{t('custom.upgradeTip.des')}</div>
- </div>
- <div className='system-md-semibold flex h-10 w-[120px] cursor-pointer items-center justify-center rounded-3xl bg-white text-text-accent shadow-xs hover:opacity-95' onClick={() => setShowPricingModal()}>{t('billing.upgradeBtn.encourageShort')}</div>
- </div>
- )}
+ {
+ showBillingTip && (
+ <GridMask canvasClassName='!rounded-xl'>
+ <div className='flex justify-between mb-1 px-6 py-5 h-[88px] shadow-md rounded-xl border-[0.5px] border-gray-200'>
+ <div className={`${s.textGradient} leading-[24px] text-base font-semibold`}>
+ <div>{t('custom.upgradeTip.prefix')}</div>
+ <div>{t('custom.upgradeTip.suffix')}</div>
+ </div>
+ <UpgradeBtn />
+ </div>
+ </GridMask>
+ )
+ }
<CustomWebAppBrand />
- {showContact && (
- <div className='absolute bottom-0 h-[50px] text-xs leading-[50px] text-text-quaternary'>
- {t('custom.customize.prefix')}
- <a className='text-text-accent' href={contactSalesUrl} target='_blank' rel='noopener noreferrer'>{t('custom.customize.contactUs')}</a>
- {t('custom.customize.suffix')}
- </div>
- )}
+ {
+ showContact && (
+ <div className='absolute bottom-0 h-[50px] leading-[50px] text-xs text-gray-500'>
+ {t('custom.customize.prefix')}
+ <a className='text-[#155EEF]' href={contactSalesUrl} target='_blank' rel='noopener noreferrer'>{t('custom.customize.contactUs')}</a>
+ {t('custom.customize.suffix')}
+ </div>
+ )
+ }
</div>
)
}
--
Gitblit v1.8.0