feat: 前端指标体系增强 — Dashboard/Metrics API、2×4 统计区、趋势图面积+异常标记、连续状态列

- 新增 GET /api/dashboard 合并原 summary+targets 首屏接口
- 新增 GET /api/targets/:id/metrics 合并原 stats+trend 概览接口
- 后端指标纯函数：可用率、百分位、故障段分析、连续状态、UTC 小时分桶
- ProbeStore 窗口取数方法替代全量历史查询
- SummaryCards 扩展为 4 卡片（新增异常事件数）+ 数据新鲜度展示
- 表格新增「连续」列（Tag 渲染 capped 状态）
- OverviewTab 重构为 2×4 Statistic 多维度布局
- TrendChart 改为延迟范围面积图 + 红色异常标记点
- 删除旧路由（summary/targets/trend）和 computeTrendStats
- 同步 delta specs 到主 specs 并归档变更

src/web/components/OverviewTab.tsx

@@ -1,44 +1,88 @@
-import { useMemo } from "react";
 import { Col, Descriptions, Divider, Row, Skeleton, Space, Statistic } from "tdesign-react";
 
-import type { TargetStatus, TrendPoint } from "../../shared/api";
+import type { TargetMetricsResponse, TargetStatus } from "../../shared/api";
 
-import { computeTrendStats } from "../utils/stats";
+import { formatDurationUnit } from "../utils/time";
 import { StatusDonut } from "./StatusDonut";
 import { TrendChart } from "./TrendChart";
 
 interface OverviewTabProps {
+  metricsData: null | TargetMetricsResponse;
+  metricsLoading: boolean;
   target: TargetStatus;
-  trendData: TrendPoint[];
-  trendLoading: boolean;
 }
 
-export function OverviewTab({ target, trendData, trendLoading }: OverviewTabProps) {
-  const { downChecks, totalChecks, upChecks } = useMemo(() => computeTrendStats(trendData), [trendData]);
+export function OverviewTab({ metricsData, metricsLoading, target }: OverviewTabProps) {
+  const stats = metricsData?.stats ?? null;
+  const mttr = formatDurationUnit(stats?.mttr ?? null);
+  const longestOutage = formatDurationUnit(stats?.longestOutage ?? null);
+  const currentUpStreak = stats?.currentStreak?.up ? stats.currentStreak.count : 0;
 
   return (
     <Space className="full-width" direction="vertical" size={16}>
       <Divider align="left">统计</Divider>
-      <Row gutter={16}>
-        <Col span={3}>
-          <Statistic color="blue" title="总检查" value={totalChecks} />
-        </Col>
-        <Col span={3}>
-          <Statistic color="green" title="正常" value={upChecks} />
-        </Col>
-        <Col span={3}>
-          <Statistic color="red" title="异常" value={downChecks} />
-        </Col>
-        <Col span={3}>
-          <Statistic color="green" suffix="%" title="可用率" value={target.stats?.availability ?? 0} />
-        </Col>
-      </Row>
+      {metricsLoading ? (
+        <Skeleton animation="gradient" />
+      ) : stats ? (
+        <Space className="full-width" direction="vertical" size={16}>
+          <Row gutter={16}>
+            <Col span={3}>
+              <Statistic color="green" suffix="%" title="可用率" value={stats.availability} />
+            </Col>
+            <Col span={3}>
+              <Statistic
+                suffix={stats.avgDurationMs === null ? "" : "ms"}
+                title="平均延迟"
+                value={stats.avgDurationMs ?? 0}
+              />
+            </Col>
+            <Col span={3}>
+              <Statistic
+                suffix={stats.p95DurationMs === null ? "" : "ms"}
+                title="P95 延迟"
+                value={stats.p95DurationMs ?? 0}
+              />
+            </Col>
+            <Col span={3}>
+              <Statistic color="blue" title="检查总数" value={stats.totalChecks} />
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={3}>
+              <Statistic suffix={mttr.suffix} title="MTTR" value={mttr.value} />
+            </Col>
+            <Col span={3}>
+              <Statistic suffix={longestOutage.suffix} title="最长故障" value={longestOutage.value} />
+            </Col>
+            <Col span={3}>
+              <Statistic color="red" suffix="次" title="故障次数" value={stats.incidentCount} />
+            </Col>
+            <Col span={3}>
+              <Statistic color="green" suffix="次" title="连续正常" value={currentUpStreak} />
+            </Col>
+          </Row>
+        </Space>
+      ) : (
+        <div className="trend-empty">暂无指标数据</div>
+      )}
 
       <Divider align="left">趋势</Divider>
-      {trendLoading ? <Skeleton animation="gradient" /> : <TrendChart data={trendData} />}
+      {metricsLoading ? (
+        <Skeleton animation="gradient" />
+      ) : metricsData ? (
+        <TrendChart data={metricsData.trend} />
+      ) : (
+        <div className="trend-empty">暂无趋势数据</div>
+      )}
 
       <Divider align="left">状态分布</Divider>
-      <StatusDonut down={downChecks} up={upChecks} />
+      {metricsLoading ? (
+        <Skeleton animation="gradient" />
+      ) : stats ? (
+        <StatusDonut down={stats.downChecks} up={stats.upChecks} />
+      ) : (
+        <div className="trend-empty">暂无状态数据</div>
+      )}
 
       <Divider align="left">基本信息</Divider>
       <Descriptions