5dd3c4ff1c
Some checks failed
CI / test (push) Failing after 44s
累计执行卡片的“/ 今日 N”后缀按数值字号渲染导致换行、卡片高度不一。 StatCard 改为紧凑三行固定高度布局（标题/数值/副行），今日次数移到 副行小字显示，六张卡片高度一致。
61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import { Card } from 'antd'
|
|
import type { CSSProperties, ReactNode } from 'react'
|
|
|
|
type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red'
|
|
|
|
const colorMap: Record<Color, { bg: string; color: string }> = {
|
|
blue: { bg: '#e6f4ff', color: '#1677ff' },
|
|
green: { bg: '#f6ffed', color: '#52c41a' },
|
|
orange: { bg: '#fff7e6', color: '#fa8c16' },
|
|
purple: { bg: '#f9f0ff', color: '#722ed1' },
|
|
red: { bg: '#fff1f0', color: '#ff4d4f' },
|
|
}
|
|
|
|
interface StatCardProps {
|
|
icon: ReactNode
|
|
color?: Color
|
|
title: string
|
|
value: number | string
|
|
suffix?: string
|
|
precision?: number
|
|
valueStyle?: CSSProperties
|
|
subText?: string
|
|
}
|
|
|
|
export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle, subText }: StatCardProps) {
|
|
const c = colorMap[color]
|
|
const display = typeof value === 'number' && precision != null ? value.toFixed(precision) : value
|
|
return (
|
|
<Card styles={{ body: { padding: '14px 16px' } }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
|
<div style={{
|
|
width: 42, height: 42, borderRadius: 10,
|
|
background: c.bg,
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
flexShrink: 0,
|
|
}}>
|
|
<span style={{ fontSize: 20, color: c.color, display: 'flex' }}>{icon}</span>
|
|
</div>
|
|
<div style={{ minWidth: 0, flex: 1 }}>
|
|
<div style={{
|
|
fontSize: 12, color: 'rgba(0,0,0,0.45)', lineHeight: '18px',
|
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
|
}}>
|
|
{title}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' }}>
|
|
<span style={{ fontSize: 24, fontWeight: 600, lineHeight: '30px', ...valueStyle }}>{display}</span>
|
|
{suffix && <span style={{ fontSize: 13, color: 'rgba(0,0,0,0.45)' }}>{suffix}</span>}
|
|
</div>
|
|
<div style={{
|
|
fontSize: 11, color: 'rgba(0,0,0,0.35)', lineHeight: '16px', height: 16,
|
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
|
}}>
|
|
{subText ?? ''}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)
|
|
}
|