1
0

refactor: 目标卡片改为垂直三层布局

- 卡片宽度从 280px 调整为 270px,确保 StatusBar 30 个色块完整显示
- 布局从水平两行改为垂直三层:标题行、StatusBar、Sparkline 各占一行
- Sparkline 从固定 80x32px 改为占满宽度(约 238px x 40px)
- 三层之间使用 12px gap 间距
- 类名重构:card-row-1 -> card-header,拆分 card-row-2 为 card-status-bar 和 card-sparkline
This commit is contained in:
2026-05-11 17:04:55 +08:00
parent d873484938
commit 48a9e96ec2
4 changed files with 31 additions and 17 deletions

View File

@@ -16,7 +16,7 @@ export function MiniSparkline({ data }: MiniSparklineProps) {
}
return (
<ResponsiveContainer width={80} height={32}>
<ResponsiveContainer width="100%" height={40}>
<LineChart data={chartData}>
<Line type="monotone" dataKey="duration" stroke="#356dd2" strokeWidth={1.5} dot={false} />
</LineChart>