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/billing/apps-full-in-dialog/index.tsx | 79 ++++++++-------------------------------
1 files changed, 16 insertions(+), 63 deletions(-)
diff --git a/app/components/billing/apps-full-in-dialog/index.tsx b/app/components/billing/apps-full-in-dialog/index.tsx
index b721b94..b3601db 100644
--- a/app/components/billing/apps-full-in-dialog/index.tsx
+++ b/app/components/billing/apps-full-in-dialog/index.tsx
@@ -3,82 +3,35 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import UpgradeBtn from '../upgrade-btn'
-import ProgressBar from '@/app/components/billing/progress-bar'
-import Button from '@/app/components/base/button'
-import { mailToSupport } from '@/app/components/header/utils/util'
-import { useProviderContext } from '@/context/provider-context'
-import { useAppContext } from '@/context/app-context'
-import { Plan } from '@/app/components/billing/type'
+import AppsInfo from '../usage-info/apps-info'
import s from './style.module.css'
import cn from '@/utils/classnames'
+import GridMask from '@/app/components/base/grid-mask'
-const LOW = 50
-const MIDDLE = 80
-
-const AppsFull: FC<{ loc: string; className?: string; }> = ({
+const AppsFull: FC<{ loc: string; className?: string }> = ({
loc,
className,
}) => {
const { t } = useTranslation()
- const { plan } = useProviderContext()
- const { userProfile, langeniusVersionInfo } = useAppContext()
- const isTeam = plan.type === Plan.team
- const usage = plan.usage.buildApps
- const total = plan.total.buildApps
- const percent = usage / total * 100
- const color = (() => {
- if (percent < LOW)
- return 'bg-components-progress-bar-progress-solid'
- if (percent < MIDDLE)
- return 'bg-components-progress-warning-progress'
-
- return 'bg-components-progress-error-progress'
- })()
return (
- <div className={cn(
- 'flex flex-col gap-3 rounded-xl border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg p-4 shadow-xs backdrop-blur-sm',
- className,
- )}>
- <div className='flex justify-between'>
- {!isTeam && (
- <div>
- <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
- {t('billing.apps.fullTip1')}
- </div>
- <div className='system-xs-regular text-text-tertiary'>{t('billing.apps.fullTip1des')}</div>
+ <GridMask wrapperClassName='rounded-lg' canvasClassName='rounded-lg' gradientClassName='rounded-lg'>
+ <div className={cn(
+ 'mt-6 px-3.5 py-4 border-2 border-solid border-transparent rounded-lg shadow-md flex flex-col transition-all duration-200 ease-in-out cursor-pointer',
+ className,
+ )}>
+ <div className='flex justify-between items-center'>
+ <div className={cn(s.textGradient, 'leading-[24px] text-base font-semibold')}>
+ <div>{t('billing.apps.fullTipLine1')}</div>
+ <div>{t('billing.apps.fullTipLine2')}</div>
</div>
- )}
- {isTeam && (
- <div>
- <div className={cn('title-xl-semi-bold mb-1', s.textGradient)}>
- {t('billing.apps.fullTip2')}
- </div>
- <div className='system-xs-regular text-text-tertiary'>{t('billing.apps.fullTip2des')}</div>
+ <div className='flex'>
+ <UpgradeBtn loc={loc} />
</div>
- )}
- {(plan.type === Plan.sandbox || plan.type === Plan.professional) && (
- <UpgradeBtn isShort loc={loc} />
- )}
- {plan.type !== Plan.sandbox && plan.type !== Plan.professional && (
- <Button variant='secondary-accent'>
- <a target='_blank' rel='noopener noreferrer' href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}>
- {t('billing.apps.contactUs')}
- </a>
- </Button>
- )}
- </div>
- <div className='flex flex-col gap-2'>
- <div className='system-xs-medium flex items-center justify-between text-text-secondary'>
- <div>{t('billing.usagePage.buildApps')}</div>
- <div>{usage}/{total}</div>
</div>
- <ProgressBar
- percent={percent}
- color={color}
- />
+ <AppsInfo className='mt-4' />
</div>
- </div>
+ </GridMask>
)
}
export default React.memo(AppsFull)
--
Gitblit v1.8.0