feat: 重构 Dashboard 为卡片式分组布局

表格布局替换为按分组展示的卡片式布局，新增 group 字段配置和 TargetBoard/TargetCard 等组件。模态框详情页支持时间范围筛选和分页，SummaryCards 减为 3 个。API 端点变更：trend/history 改用 from/to 参数，history 支持分页。recentSampleCount 硬编码为 30。

src/web/components/StatusDonut.tsx

@@ -0,0 +1,40 @@
+import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
+
+interface StatusDonutProps {
+  up: number;
+  down: number;
+}
+
+const UP_COLOR = "#1fbf75";
+const DOWN_COLOR = "#e5484d";
+const EMPTY_COLOR = "#e2e8f0";
+
+export function StatusDonut({ up, down }: StatusDonutProps) {
+  const total = up + down;
+  const availability = total > 0 ? ((up / total) * 100).toFixed(1) : "-";
+
+  const data =
+    total > 0
+      ? [
+          { name: "UP", value: up },
+          { name: "DOWN", value: down },
+        ]
+      : [{ name: "EMPTY", value: 1 }];
+
+  const colors = total > 0 ? [UP_COLOR, DOWN_COLOR] : [EMPTY_COLOR];
+
+  return (
+    <div className="status-donut">
+      <ResponsiveContainer width="100%" height={180}>
+        <PieChart>
+          <Pie data={data} cx="50%" cy="50%" innerRadius={50} outerRadius={70} dataKey="value" stroke="none">
+            {data.map((_, index) => (
+              <Cell key={index} fill={colors[index % colors.length]!} />
+            ))}
+          </Pie>
+        </PieChart>
+      </ResponsiveContainer>
+      <div className="donut-center-label">{availability}%</div>
+    </div>
+  );
+}