初始化

wwf

2 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

 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>
  )
}