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

src/web/components/MiniSparkline.tsx

@@ -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>

src/web/components/TargetCard.tsx

@@ -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>

src/web/styles.css

@@ -133,7 +133,7 @@ body {
 }
 
 .target-card {
-  width: 280px;
+  width: 270px;
   flex-shrink: 0;
   padding: 16px;
   border: 1px solid rgba(49, 83, 126, 0.12);
@@ -144,6 +144,9 @@ body {
   transition:
     box-shadow 0.3s ease,
     transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .target-card:hover {
@@ -151,11 +154,10 @@ body {
   transform: translateY(-2px);
 }
 
-.card-row-1 {
+.card-header {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 12px;
 }
 
 .card-name {
@@ -178,10 +180,15 @@ body {
   letter-spacing: 0.04em;
 }
 
-.card-row-2 {
+.card-status-bar {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  width: 100%;
+}
+
+.card-sparkline {
+  display: flex;
+  width: 100%;
+  height: 40px;
 }
 
 .status-dot {
@@ -206,6 +213,7 @@ body {
   display: flex;
   gap: 2px;
   align-items: center;
+  width: 100%;
 }
 
 .status-bar-block {