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 并归档变更
2026-05-14 12:32:41 +08:00
parent e983e5d75d
commit 1c5cfafda6
47 changed files with 1768 additions and 1231 deletions
--- a/src/web/app.tsx
+++ b/src/web/app.tsx
@@ -3,28 +3,25 @@ import { Alert, Loading, Typography } from "tdesign-react";
 import { SummaryCards } from "./components/SummaryCards";
 import { TargetBoard } from "./components/TargetBoard";
 import { TargetDetailDrawer } from "./components/TargetDetailDrawer";
-import { useSummary, useTargets } from "./hooks/use-queries";
+import { useDashboard } from "./hooks/use-queries";
 import { useTargetDetail } from "./hooks/use-target-detail";

 export function App() {
-  const { data: summary, error: summaryError, isLoading: summaryLoading } = useSummary();
-  const { data: targets, error: targetsError, isLoading: targetsLoading } = useTargets();
+  const { data: dashboard, error: dashboardError, isLoading: dashboardLoading } = useDashboard();
  const {
    closeDrawer,
    handlePageChange,
    handleTimeChange,
    historyData,
    historyLoading,
+    metricsData,
+    metricsLoading,
    openDrawer,
    selectedTarget,
    timeFrom,
    timeTo,
-    trendData,
-    trendLoading,
  } = useTargetDetail();

-  const error = summaryError ?? targetsError;
-
  return (
    <main className="dashboard">
      <header className="dashboard-header">
@@ -32,14 +29,14 @@ export function App() {
        <Typography.Text theme="secondary">统一拨测平台</Typography.Text>
      </header>

-      {error && <Alert closeBtn message={`请求失败: ${error.message}`} theme="error" />}
+      {dashboardError && <Alert closeBtn message={`请求失败: ${dashboardError.message}`} theme="error" />}

-      {summaryLoading && targetsLoading ? (
+      {dashboardLoading ? (
        <Loading />
      ) : (
        <>
-          <SummaryCards summary={summary ?? null} />
-          <TargetBoard onTargetClick={openDrawer} targets={targets ?? []} />
+          <SummaryCards summary={dashboard?.summary ?? null} />
+          <TargetBoard onTargetClick={openDrawer} targets={dashboard?.targets ?? []} />
        </>
      )}

@@ -47,14 +44,14 @@ export function App() {
        historyData={historyData}
        historyLoading={historyLoading}
        key={selectedTarget?.id}
+        metricsData={metricsData}
+        metricsLoading={metricsLoading}
        onClose={closeDrawer}
        onPageChange={handlePageChange}
        onTimeChange={handleTimeChange}
        target={selectedTarget}
        timeFrom={timeFrom}
        timeTo={timeTo}
-        trendData={trendData}
-        trendLoading={trendLoading}
      />
    </main>
  );
--- a/src/web/components/OverviewTab.tsx
+++ b/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
--- a/src/web/components/StatusDonut.tsx
+++ b/src/web/components/StatusDonut.tsx
@@ -34,7 +34,7 @@ export function StatusDonut({ down, up }: StatusDonutProps) {
          </Pie>
        </PieChart>
      </ResponsiveContainer>
-      <div className="donut-center-label">{availability}%</div>
+      <div className="donut-center-label">{total > 0 ? `${availability}%` : "-"}</div>
    </div>
  );
 }
--- a/src/web/components/SummaryCards.tsx
+++ b/src/web/components/SummaryCards.tsx
@@ -1,29 +1,49 @@
-import { Card, Col, Row, Statistic } from "tdesign-react";
+import { useEffect, useState } from "react";
+import { Card, Col, Row, Statistic, Typography } from "tdesign-react";

-import type { SummaryResponse } from "../../shared/api";
+import type { DashboardResponse } from "../../shared/api";
+
+import { formatRelativeTime, isOlderThan } from "../utils/time";

 interface SummaryCardsProps {
-  summary: null | SummaryResponse;
+  summary: DashboardResponse["summary"] | null;
 }

 export function SummaryCards({ summary }: SummaryCardsProps) {
+  const [now, setNow] = useState(() => new Date());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(new Date()), 1000);
+    return () => window.clearInterval(timer);
+  }, []);
+
  if (!summary) return null;

  const cards = [
    { color: "blue" as const, label: "全部目标", value: summary.total },
    { color: "green" as const, label: "正常", value: summary.up },
    { color: "red" as const, label: "异常", value: summary.down },
+    { color: "orange" as const, label: `${summary.window.label} 异常事件数`, value: summary.incidents },
  ];
+  const freshnessWarning = isOlderThan(summary.lastCheckTime, 60000, now);

  return (
-    <Row className="summary-cards-row" gutter={16}>
-      {cards.map((card) => (
-        <Col key={card.label} span={4}>
-          <Card bordered>
-            <Statistic color={card.color} title={card.label} value={card.value} />
-          </Card>
-        </Col>
-      ))}
-    </Row>
+    <section className="summary-cards-row">
+      <Row gutter={16}>
+        {cards.map((card) => (
+          <Col key={card.label} span={3}>
+            <Card bordered>
+              <Statistic color={card.color} title={card.label} value={card.value} />
+            </Card>
+          </Col>
+        ))}
+      </Row>
+      <Typography.Text
+        className={freshnessWarning ? "summary-freshness summary-freshness--warning" : "summary-freshness"}
+        theme="secondary"
+      >
+        {summary.lastCheckTime ? `最后更新: ${formatRelativeTime(summary.lastCheckTime, now)}` : "尚无检查数据"}
+      </Typography.Text>
+    </section>
  );
 }
--- a/src/web/components/TargetDetailDrawer.tsx
+++ b/src/web/components/TargetDetailDrawer.tsx
@@ -3,7 +3,7 @@ import type { TabValue } from "tdesign-react";
 import { useCallback, useState } from "react";
 import { DateRangePicker, Drawer, RadioGroup, Space, Tabs, Tag, Typography } from "tdesign-react";

-import type { HistoryResponse, TargetStatus, TrendPoint } from "../../shared/api";
+import type { HistoryResponse, TargetMetricsResponse, TargetStatus } from "../../shared/api";

 import { subtractHours } from "../utils/time";
 import { HistoryTab } from "./HistoryTab";
@@ -13,14 +13,14 @@ import { StatusDot } from "./StatusDot";
 interface TargetDetailDrawerProps {
  historyData: HistoryResponse;
  historyLoading: boolean;
+  metricsData: null | TargetMetricsResponse;
+  metricsLoading: boolean;
  onClose: () => void;
  onPageChange: (page: number) => void;
  onTimeChange: (from: string, to: string) => void;
  target: null | TargetStatus;
  timeFrom: string;
  timeTo: string;
-  trendData: TrendPoint[];
-  trendLoading: boolean;
 }

 const TIME_SHORTCUTS = [
@@ -33,14 +33,14 @@ const TIME_SHORTCUTS = [
 export function TargetDetailDrawer({
  historyData,
  historyLoading,
+  metricsData,
+  metricsLoading,
  onClose,
  onPageChange,
  onTimeChange,
  target,
  timeFrom,
  timeTo,
-  trendData,
-  trendLoading,
 }: TargetDetailDrawerProps) {
  const [activeShortcut, setActiveShortcut] = useState<string>("24h");
  const [activeTab, setActiveTab] = useState<TabValue>("overview");
@@ -109,7 +109,7 @@ export function TargetDetailDrawer({
        />
        <Tabs onChange={(val: TabValue) => setActiveTab(val)} value={activeTab}>
          <Tabs.TabPanel className="tab-panel-padded" label="概览" value="overview">
-            <OverviewTab target={target} trendData={trendData} trendLoading={trendLoading} />
+            <OverviewTab metricsData={metricsData} metricsLoading={metricsLoading} target={target} />
          </Tabs.TabPanel>

          <Tabs.TabPanel className="tab-panel-padded" label="记录" value="history">
--- a/src/web/components/TrendChart.tsx
+++ b/src/web/components/TrendChart.tsx
@@ -1,7 +1,13 @@
-import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Area, CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

 import type { TrendPoint } from "../../shared/api";

+interface IncidentDotProps {
+  cx?: number | string;
+  cy?: number | string;
+  payload?: TrendPoint;
+}
+
 interface TrendChartProps {
  data: TrendPoint[];
 }
@@ -13,7 +19,9 @@ export function TrendChart({ data }: TrendChartProps) {

  const chartData = data.map((point) => ({
    ...point,
-    hour: point.hour.slice(11, 16),
+    durationRange:
+      point.minDurationMs !== null && point.maxDurationMs !== null ? [point.minDurationMs, point.maxDurationMs] : null,
+    label: formatBucketLabel(point.bucketStart),
  }));

  return (
@@ -21,50 +29,64 @@ export function TrendChart({ data }: TrendChartProps) {
      <ResponsiveContainer height={240} width="100%">
        <LineChart data={chartData}>
          <CartesianGrid stroke="var(--td-border-level-2-color)" strokeDasharray="3 3" />
-          <XAxis dataKey="hour" stroke="var(--td-text-color-secondary)" tick={{ fontSize: 12 }} />
+          <XAxis dataKey="label" stroke="var(--td-text-color-secondary)" tick={{ fontSize: 12 }} />
          <YAxis
            label={{ fontSize: 11, position: "insideTopRight", value: "ms" }}
            stroke="var(--td-text-color-secondary)"
            tick={{ fontSize: 12 }}
            yAxisId="duration"
          />
-          <YAxis
-            domain={[0, 100]}
-            label={{ fontSize: 11, position: "insideTopLeft", value: "%" }}
-            orientation="right"
-            stroke="var(--td-text-color-secondary)"
-            tick={{ fontSize: 12 }}
-            yAxisId="availability"
-          />
          <Tooltip
            formatter={(value: unknown, name: unknown) => {
-              const num = Number(value);
              const nameStr = String(name);
+              if (nameStr === "durationRange" && Array.isArray(value)) {
+                return [`${Math.round(Number(value[0]))}ms - ${Math.round(Number(value[1]))}ms`, "延迟范围"];
+              }
+              const num = Number(value);
              if (nameStr === "avgDurationMs") return [`${Math.round(num)}ms`, "平均耗时"];
-              if (nameStr === "availability") return [`${num.toFixed(1)}%`, "可用率"];
              return [String(value), nameStr];
            }}
          />
+          <Area
+            dataKey="durationRange"
+            fill="var(--td-brand-color-light)"
+            fillOpacity={0.2}
+            name="durationRange"
+            stroke="var(--td-brand-color-light)"
+            type="monotone"
+            yAxisId="duration"
+          />
          <Line
            dataKey="avgDurationMs"
-            dot={false}
+            dot={renderIncidentDot}
            name="avgDurationMs"
            stroke="var(--td-brand-color)"
            strokeWidth={2}
            type="monotone"
            yAxisId="duration"
          />
-          <Line
-            dataKey="availability"
-            dot={false}
-            name="availability"
-            stroke="var(--td-success-color)"
-            strokeWidth={2}
-            type="monotone"
-            yAxisId="availability"
-          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
 }
+
+function formatBucketLabel(bucketStart: string): string {
+  return new Date(bucketStart).toLocaleTimeString("zh-CN", { hour: "2-digit", hour12: false, minute: "2-digit" });
+}
+
+function renderIncidentDot(props: IncidentDotProps) {
+  const { cx, cy, payload } = props;
+  if (!payload || payload.availability >= 100 || payload.avgDurationMs === null) return <></>;
+
+  return (
+    <circle
+      cx={Number(cx)}
+      cy={Number(cy)}
+      fill="var(--td-error-color)"
+      r={4}
+      stroke="var(--td-bg-color-container)"
+      strokeWidth={2}
+    />
+  );
+}
--- a/src/web/constants/target-table-columns.tsx
+++ b/src/web/constants/target-table-columns.tsx
@@ -57,7 +57,7 @@ export function createTargetTableColumns(checkerTypes: string[]): Array<PrimaryT
      colKey: "stats.availability",
      sorter: availabilitySorter,
      sortType: "all",
-      title: "可用率",
+      title: "可用率(24h)",
      width: 160,
    },
    {
@@ -66,6 +66,22 @@ export function createTargetTableColumns(checkerTypes: string[]): Array<PrimaryT
      title: "最近状态",
      width: 220,
    },
+    {
+      align: "center",
+      cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => {
+        const streak = row.currentStreak;
+        if (!streak) return "-";
+        return (
+          <Tag size="small" theme={streak.up ? "success" : "danger"} variant="light">
+            {streak.up ? "▲" : "▼"} {streak.count}
+            {streak.capped ? "+" : "次"}
+          </Tag>
+        );
+      },
+      colKey: "currentStreak",
+      title: "连续",
+      width: 100,
+    },
    {
      align: "right",
      cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => {
--- a/src/web/hooks/use-queries.ts
+++ b/src/web/hooks/use-queries.ts
@@ -1,11 +1,12 @@
 import { useQuery } from "@tanstack/react-query";

-import type { MetaResponse, SummaryResponse, TargetStatus } from "../../shared/api";
+import type { DashboardResponse, MetaResponse, TargetMetricsResponse } from "../../shared/api";

 const queryKeys = {
+  dashboard: () => ["dashboard", "24h", 30] as const,
  meta: () => ["meta"] as const,
-  summary: () => ["summary"] as const,
-  targets: () => ["targets"] as const,
+  metrics: (targetId: number, from: string, to: string, bucket: "1h") =>
+    ["metrics", targetId, from, to, bucket] as const,
 };

 export async function fetchJson<T>(url: string): Promise<T> {
@@ -14,6 +15,15 @@ export async function fetchJson<T>(url: string): Promise<T> {
  return response.json() as Promise<T>;
 }

+export function useDashboard() {
+  return useQuery({
+    queryFn: () => fetchJson<DashboardResponse>("/api/dashboard?window=24h&recentLimit=30"),
+    queryKey: queryKeys.dashboard(),
+    refetchInterval: 8000,
+    refetchIntervalInBackground: false,
+  });
+}
+
 export function useMeta() {
  return useQuery({
    queryFn: () => fetchJson<MetaResponse>("/api/meta"),
@@ -22,20 +32,15 @@ export function useMeta() {
  });
 }

-export function useSummary() {
+export function useTargetMetrics(targetId: null | number, from: string, to: string, bucket: "1h") {
  return useQuery({
-    queryFn: () => fetchJson<SummaryResponse>("/api/summary"),
-    queryKey: queryKeys.summary(),
-    refetchInterval: 8000,
-    refetchIntervalInBackground: false,
-  });
-}
-
-export function useTargets() {
-  return useQuery({
-    queryFn: () => fetchJson<TargetStatus[]>("/api/targets"),
-    queryKey: queryKeys.targets(),
-    refetchInterval: 8000,
-    refetchIntervalInBackground: false,
+    enabled: targetId !== null && !!from && !!to,
+    queryFn: () => {
+      if (targetId === null) throw new Error("未选择目标");
+      return fetchJson<TargetMetricsResponse>(
+        `/api/targets/${targetId}/metrics?from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}&bucket=${bucket}`,
+      );
+    },
+    queryKey: targetId !== null && from && to ? queryKeys.metrics(targetId, from, to, bucket) : ["metrics", "disabled"],
  });
 }
--- a/src/web/hooks/use-target-detail.ts
+++ b/src/web/hooks/use-target-detail.ts
@@ -1,14 +1,13 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";

-import type { HistoryResponse, TargetStatus, TrendPoint } from "../../shared/api";
+import type { HistoryResponse, TargetStatus } from "../../shared/api";

 import { subtractHours } from "../utils/time";
-import { fetchJson, useTargets } from "./use-queries";
+import { fetchJson, useDashboard, useTargetMetrics } from "./use-queries";

 const detailQueryKeys = {
  history: (targetId: number, from: string, to: string, page: number) => ["history", targetId, from, to, page] as const,
-  trend: (targetId: number, from: string, to: string) => ["trend", targetId, from, to] as const,
 };

 export function useTargetDetail() {
@@ -18,28 +17,22 @@ export function useTargetDetail() {
  const [timeTo, setTimeTo] = useState("");
  const [historyPage, setHistoryPage] = useState(1);

-  const { data: targetsData } = useTargets();
+  const { data: dashboardData } = useDashboard();
  const selectedTarget =
-    selectedTargetId !== null ? (targetsData?.find((target) => target.id === selectedTargetId) ?? null) : null;
+    selectedTargetId !== null
+      ? (dashboardData?.targets.find((target) => target.id === selectedTargetId) ?? null)
+      : null;

-  const trend = useQuery({
-    enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
-    queryFn: () =>
-      fetchJson<TrendPoint[]>(
-        `/api/targets/${selectedTargetId}/trend?from=${encodeURIComponent(timeFrom)}&to=${encodeURIComponent(timeTo)}`,
-      ),
-    queryKey:
-      selectedTargetId !== null && timeFrom && timeTo
-        ? detailQueryKeys.trend(selectedTargetId, timeFrom, timeTo)
-        : ["trend", "disabled"],
-  });
+  const metrics = useTargetMetrics(selectedTargetId, timeFrom, timeTo, "1h");

  const history = useQuery({
    enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
-    queryFn: () =>
-      fetchJson<HistoryResponse>(
+    queryFn: () => {
+      if (selectedTargetId === null) throw new Error("未选择目标");
+      return fetchJson<HistoryResponse>(
        `/api/targets/${selectedTargetId}/history?from=${encodeURIComponent(timeFrom)}&to=${encodeURIComponent(timeTo)}&page=${historyPage}&pageSize=20`,
-      ),
+      );
+    },
    queryKey:
      selectedTargetId !== null && timeFrom && timeTo
        ? detailQueryKeys.history(selectedTargetId, timeFrom, timeTo, historyPage)
@@ -57,7 +50,7 @@ export function useTargetDetail() {

  const closeDrawer = useCallback(() => {
    setSelectedTargetId(null);
-    queryClient.removeQueries({ queryKey: ["trend"] });
+    queryClient.removeQueries({ queryKey: ["metrics"] });
    queryClient.removeQueries({ queryKey: ["history"] });
  }, [queryClient]);

@@ -77,11 +70,11 @@ export function useTargetDetail() {
    handleTimeChange,
    historyData: history.data ?? { items: [], page: 1, pageSize: 20, total: 0 },
    historyLoading: history.isLoading,
+    metricsData: metrics.data ?? null,
+    metricsLoading: metrics.isLoading,
    openDrawer,
    selectedTarget,
    timeFrom,
    timeTo,
-    trendData: trend.data ?? [],
-    trendLoading: trend.isLoading,
  };
 }
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -157,6 +157,15 @@
  margin-bottom: var(--td-comp-margin-xl);
 }

+.summary-freshness {
+  display: block;
+  margin-top: var(--td-comp-margin-s);
+}
+
+.summary-freshness--warning {
+  color: var(--td-warning-color);
+}
+
 .error-boundary-fallback {
  padding-top: 20vh;
  width: 100%;
--- a/src/web/utils/stats.ts
+++ b/src/web/utils/stats.ts
@@ -1,23 +0,0 @@
-import type { TrendPoint } from "../../shared/api";
-
-export interface TrendStats {
-  downChecks: number;
-  totalChecks: number;
-  upChecks: number;
-}
-
-export function computeTrendStats(points: TrendPoint[]): TrendStats {
-  let totalChecks = 0;
-  let upChecks = 0;
-
-  for (const point of points) {
-    totalChecks += point.totalChecks;
-    upChecks += Math.round((point.availability / 100) * point.totalChecks);
-  }
-
-  return {
-    downChecks: totalChecks - upChecks,
-    totalChecks,
-    upChecks,
-  };
-}
--- a/src/web/utils/time.ts
+++ b/src/web/utils/time.ts
@@ -1,5 +1,41 @@
+export function formatDurationUnit(ms: null | number): { suffix: string; value: number } {
+  if (ms === null) return { suffix: "", value: 0 };
+  if (ms < 60000) return { suffix: "秒", value: roundToOne(ms / 1000) };
+  if (ms < 3600000) return { suffix: "分钟", value: roundToOne(ms / 60000) };
+  return { suffix: "小时", value: roundToOne(ms / 3600000) };
+}
+
+export function formatRelativeTime(timestamp: null | string, now = new Date()): string {
+  if (!timestamp) return "尚无检查数据";
+
+  const time = new Date(timestamp).getTime();
+  if (Number.isNaN(time)) return "尚无检查数据";
+
+  const diffSeconds = Math.max(0, Math.floor((now.getTime() - time) / 1000));
+  if (diffSeconds < 60) return `${diffSeconds}秒前`;
+
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  if (diffMinutes < 60) return `${diffMinutes}分钟前`;
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}小时前`;
+
+  return `${Math.floor(diffHours / 24)}天前`;
+}
+
+export function isOlderThan(timestamp: null | string, ageMs: number, now = new Date()): boolean {
+  if (!timestamp) return false;
+  const time = new Date(timestamp).getTime();
+  if (Number.isNaN(time)) return false;
+  return now.getTime() - time > ageMs;
+}
+
 export function subtractHours(date: Date, hours: number): Date {
  const result = new Date(date);
  result.setTime(result.getTime() - hours * 60 * 60 * 1000);
  return result;
 }
+
+function roundToOne(value: number): number {
+  return Math.round(value * 10) / 10;
+}