mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
feat: trigger billing (#28335)
Signed-off-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com> Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
@ -16,10 +16,12 @@ type Props = {
|
||||
total: number
|
||||
unit?: string
|
||||
unitPosition?: 'inline' | 'suffix'
|
||||
resetHint?: string
|
||||
resetInDays?: number
|
||||
hideIcon?: boolean
|
||||
}
|
||||
|
||||
const LOW = 50
|
||||
const MIDDLE = 80
|
||||
const WARNING_THRESHOLD = 80
|
||||
|
||||
const UsageInfo: FC<Props> = ({
|
||||
className,
|
||||
@ -30,28 +32,39 @@ const UsageInfo: FC<Props> = ({
|
||||
total,
|
||||
unit,
|
||||
unitPosition = 'suffix',
|
||||
resetHint,
|
||||
resetInDays,
|
||||
hideIcon = false,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
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'
|
||||
})()
|
||||
const color = percent >= 100
|
||||
? 'bg-components-progress-error-progress'
|
||||
: (percent >= WARNING_THRESHOLD ? 'bg-components-progress-warning-progress' : 'bg-components-progress-bar-progress-solid')
|
||||
const isUnlimited = total === NUM_INFINITE
|
||||
let totalDisplay: string | number = isUnlimited ? t('billing.plansCommon.unlimited') : total
|
||||
if (!isUnlimited && unit && unitPosition === 'inline')
|
||||
totalDisplay = `${total}${unit}`
|
||||
const showUnit = !!unit && !isUnlimited && unitPosition === 'suffix'
|
||||
const resetText = resetHint ?? (typeof resetInDays === 'number' ? t('billing.usagePage.resetsIn', { count: resetInDays }) : undefined)
|
||||
const rightInfo = resetText
|
||||
? (
|
||||
<div className='system-xs-regular ml-auto flex-1 text-right text-text-tertiary'>
|
||||
{resetText}
|
||||
</div>
|
||||
)
|
||||
: (showUnit && (
|
||||
<div className='system-xs-medium ml-auto text-text-tertiary'>
|
||||
{unit}
|
||||
</div>
|
||||
))
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2 rounded-xl bg-components-panel-bg p-4', className)}>
|
||||
<Icon className='h-4 w-4 text-text-tertiary' />
|
||||
{!hideIcon && Icon && (
|
||||
<Icon className='h-4 w-4 text-text-tertiary' />
|
||||
)}
|
||||
<div className='flex items-center gap-1'>
|
||||
<div className='system-xs-medium text-text-tertiary'>{name}</div>
|
||||
{tooltip && (
|
||||
@ -70,11 +83,7 @@ const UsageInfo: FC<Props> = ({
|
||||
<div className='system-md-regular text-text-quaternary'>/</div>
|
||||
<div>{totalDisplay}</div>
|
||||
</div>
|
||||
{showUnit && (
|
||||
<div className='system-xs-medium ml-auto text-text-tertiary'>
|
||||
{unit}
|
||||
</div>
|
||||
)}
|
||||
{rightInfo}
|
||||
</div>
|
||||
<ProgressBar
|
||||
percent={percent}
|
||||
|
||||
Reference in New Issue
Block a user