style(dashboard): redesign stat cards with fixed-height compact layout
Some checks failed
CI / test (push) Failing after 44s

累计执行卡片的“/ 今日 N”后缀按数值字号渲染导致换行、卡片高度不一。
StatCard 改为紧凑三行固定高度布局(标题/数值/副行),今日次数移到
副行小字显示,六张卡片高度一致。
This commit is contained in:
sinohqb 2026-07-29 15:26:38 +08:00
parent d23b321225
commit 5dd3c4ff1c
2 changed files with 29 additions and 10 deletions

View File

@ -1,5 +1,5 @@
import { Card, Statistic } from 'antd' import { Card } from 'antd'
import type { ReactNode } from 'react' import type { CSSProperties, ReactNode } from 'react'
type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red' type Color = 'blue' | 'green' | 'orange' | 'purple' | 'red'
@ -18,23 +18,42 @@ interface StatCardProps {
value: number | string value: number | string
suffix?: string suffix?: string
precision?: number precision?: number
valueStyle?: React.CSSProperties valueStyle?: CSSProperties
subText?: string
} }
export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle }: StatCardProps) { export default function StatCard({ icon, color = 'blue', title, value, suffix, precision, valueStyle, subText }: StatCardProps) {
const c = colorMap[color] const c = colorMap[color]
const display = typeof value === 'number' && precision != null ? value.toFixed(precision) : value
return ( return (
<Card> <Card styles={{ body: { padding: '14px 16px' } }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<div style={{ <div style={{
width: 48, height: 48, borderRadius: 10, width: 42, height: 42, borderRadius: 10,
background: c.bg, background: c.bg,
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
flexShrink: 0, flexShrink: 0,
}}> }}>
<span style={{ fontSize: 22, color: c.color, display: 'flex' }}>{icon}</span> <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>
<Statistic title={title} value={value} suffix={suffix} precision={precision} valueStyle={valueStyle} />
</div> </div>
</Card> </Card>
) )

View File

@ -92,7 +92,7 @@ export default function HomePage() {
<StatCard <StatCard
icon={<PlayCircleOutlined />} color="orange" title="累计执行" icon={<PlayCircleOutlined />} color="orange" title="累计执行"
value={stats?.runs_count ?? 0} value={stats?.runs_count ?? 0}
suffix={stats?.today_runs ? ` / 今日 ${stats.today_runs}` : undefined} subText={stats?.today_runs ? `今日 ${stats.today_runs}` : undefined}
/> />
</Col> </Col>
<Col xs={12} sm={8} xl={4}> <Col xs={12} sm={8} xl={4}>