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:
@@ -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>
|
||||
|
||||
@@ -13,13 +13,15 @@ export function TargetCard({ target, onClick }: TargetCardProps) {
|
||||
|
||||
return (
|
||||
<div className="target-card" onClick={onClick} role="button" tabIndex={0}>
|
||||
<div className="card-row-1">
|
||||
<div className="card-header">
|
||||
<StatusDot up={!!isUp} />
|
||||
<span className="card-name">{target.name}</span>
|
||||
<span className="card-type-badge">{target.type === "http" ? "HTTP" : "Command"}</span>
|
||||
</div>
|
||||
<div className="card-row-2">
|
||||
<div className="card-status-bar">
|
||||
<StatusBar samples={target.recentSamples} />
|
||||
</div>
|
||||
<div className="card-sparkline">
|
||||
<MiniSparkline data={target.recentSamples} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user