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/usage-info/index.tsx | 55 ++++++++++++++++++++++++++++++-------------------------
1 files changed, 30 insertions(+), 25 deletions(-)
diff --git a/app/components/billing/usage-info/index.tsx b/app/components/billing/usage-info/index.tsx
index 30b4bca..ee41508 100644
--- a/app/components/billing/usage-info/index.tsx
+++ b/app/components/billing/usage-info/index.tsx
@@ -5,7 +5,6 @@
import ProgressBar from '../progress-bar'
import { NUM_INFINITE } from '../config'
import Tooltip from '@/app/components/base/tooltip'
-import cn from '@/utils/classnames'
type Props = {
className?: string
@@ -34,37 +33,43 @@
const percent = usage / total * 100
const color = (() => {
if (percent < LOW)
- return 'bg-components-progress-bar-progress-solid'
+ return '#155EEF'
if (percent < MIDDLE)
- return 'bg-components-progress-warning-progress'
+ return '#F79009'
- return 'bg-components-progress-error-progress'
+ return '#F04438'
})()
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' />
- <div className='flex items-center gap-1'>
- <div className='system-xs-medium text-text-tertiary'>{name}</div>
- {tooltip && (
- <Tooltip
- popupContent={
- <div className='w-[180px]'>
- {tooltip}
- </div>
- }
- />
- )}
+ <div className={className}>
+ <div className='flex justify-between h-5 items-center'>
+ <div className='flex items-center'>
+ <Icon className='w-4 h-4 text-gray-700' />
+ <div className='mx-1 leading-5 text-sm font-medium text-gray-700'>{name}</div>
+ {tooltip && (
+ <Tooltip
+ popupContent={
+ <div className='w-[180px]'>
+ {tooltip}
+ </div>
+ }
+ />
+ )}
+ </div>
+ <div className='flex items-center leading-[18px] text-[13px] font-normal'>
+ <div style={{
+ color: percent < LOW ? '#344054' : color,
+ }}>{usage}{unit}</div>
+ <div className='mx-1 text-gray-300'>/</div>
+ <div className='text-gray-500'>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
+ </div>
</div>
- <div className='system-md-semibold flex items-center gap-1 text-text-primary'>
- {usage}
- <div className='system-md-regular text-text-quaternary'>/</div>
- <div>{total === NUM_INFINITE ? t('billing.plansCommon.unlimited') : `${total}${unit}`}</div>
+ <div className='mt-2'>
+ <ProgressBar
+ percent={percent}
+ color={color}
+ />
</div>
- <ProgressBar
- percent={percent}
- color={color}
- />
</div>
)
}
--
Gitblit v1.8.0