feat: 将 demo 项目转化为 HTTP 拨测监控工具

新增 YAML 配置解析（Bun 内置 YAML）、SQLite 数据存储（bun:sqlite）、按 interval 分组并发拨测引擎、REST API（/api/summary、/api/targets、/api/targets/:id/history、/api/targets/:id/trend）、React 前端 Dashboard（统计卡片、目标表格、可展开详情面板、recharts 趋势图）。CLI 简化为仅接受配置文件路径。移除 /api/demo 路由和相关 demo 代码。保留 /health、静态资源服务和 SPA fallback。
2026-05-09 17:04:25 +08:00
parent 9267f6585c
commit 57d3a5cfb4
43 changed files with 2910 additions and 525 deletions
--- a/src/server/app.ts
+++ b/src/server/app.ts
@@ -1,4 +1,14 @@
-import type { ApiErrorResponse, DemoResponse, HealthResponse, RuntimeMode } from "../shared/api";
+import type {
+  ApiErrorResponse,
+  CheckResult,
+  HealthResponse,
+  RuntimeMode,
+  SummaryResponse,
+  TargetStatus,
+  TrendPoint,
+} from "../shared/api";
+import type { StoredCheckResult } from "./checker/types";
+import type { ProbeStore } from "./checker/store";

 export interface StaticAssets {
  indexHtml: Blob;
@@ -8,6 +18,7 @@ export interface StaticAssets {
 export interface AppOptions {
  mode: RuntimeMode;
  staticAssets?: StaticAssets;
+  store?: ProbeStore;
 }

 export function createFetchHandler(options: AppOptions) {
@@ -22,19 +33,15 @@ export function createFetchHandler(options: AppOptions) {
      return jsonResponse(createHealthResponse(), { method: request.method, mode: options.mode });
    }

-    if (url.pathname === "/api/demo") {
-      if (!allowsGetHead(request.method)) {
-        return methodNotAllowedResponse(["GET", "HEAD"], options.mode);
-      }
-
-      return jsonResponse(createDemoResponse(options.mode), { method: request.method, mode: options.mode });
+    if (url.pathname.startsWith("/api/") && options.store) {
+      return handleApiRoute(url, request, options.store, options.mode);
    }

    if (url.pathname.startsWith("/api/")) {
-      return jsonResponse(createApiError("API route not found", 404), {
+      return jsonResponse(createApiError("Service not ready", 503), {
        method: request.method,
        mode: options.mode,
-        status: 404,
+        status: 503,
      });
    }

@@ -49,19 +56,159 @@ export function createFetchHandler(options: AppOptions) {
  };
 }

-function createDemoResponse(mode: RuntimeMode): DemoResponse {
+function handleApiRoute(url: URL, request: Request, store: ProbeStore, mode: RuntimeMode): Response {
+  const { method } = request;
+
+  if (!allowsGetHead(method)) {
+    return methodNotAllowedResponse(["GET", "HEAD"], mode);
+  }
+
+  if (url.pathname === "/api/summary") {
+    return jsonResponse(createSummaryResponse(store), { method, mode });
+  }
+
+  if (url.pathname === "/api/targets") {
+    return jsonResponse(createTargetsResponse(store), { method, mode });
+  }
+
+  const historyMatch = url.pathname.match(/^\/api\/targets\/([^/]+)\/history$/);
+  if (historyMatch) {
+    return handleHistory(historyMatch[1]!, url, method, store, mode);
+  }
+
+  const trendMatch = url.pathname.match(/^\/api\/targets\/([^/]+)\/trend$/);
+  if (trendMatch) {
+    return handleTrend(trendMatch[1]!, url, method, store, mode);
+  }
+
+  return jsonResponse(createApiError("API route not found", 404), { method, mode, status: 404 });
+}
+
+function handleHistory(
+  idStr: string,
+  url: URL,
+  method: string,
+  store: ProbeStore,
+  mode: RuntimeMode,
+): Response {
+  const id = Number(idStr);
+
+  if (!Number.isInteger(id) || id <= 0) {
+    return jsonResponse(createApiError("Invalid target ID", 400), { method, mode, status: 400 });
+  }
+
+  const target = store.getTargetById(id);
+  if (!target) {
+    return jsonResponse(createApiError("Target not found", 404), { method, mode, status: 404 });
+  }
+
+  const limitParam = url.searchParams.get("limit");
+  let limit = 20;
+
+  if (limitParam !== null) {
+    limit = Number(limitParam);
+    if (!Number.isInteger(limit) || limit <= 0) {
+      return jsonResponse(createApiError("Invalid limit parameter", 400), { method, mode, status: 400 });
+    }
+  }
+
+  const rows = store.getHistory(id, limit);
+  const results: CheckResult[] = rows.map(mapCheckResult);
+
+  return jsonResponse(results, { method, mode });
+}
+
+function handleTrend(
+  idStr: string,
+  url: URL,
+  method: string,
+  store: ProbeStore,
+  mode: RuntimeMode,
+): Response {
+  const id = Number(idStr);
+
+  if (!Number.isInteger(id) || id <= 0) {
+    return jsonResponse(createApiError("Invalid target ID", 400), { method, mode, status: 400 });
+  }
+
+  const target = store.getTargetById(id);
+  if (!target) {
+    return jsonResponse(createApiError("Target not found", 404), { method, mode, status: 404 });
+  }
+
+  const hoursParam = url.searchParams.get("hours");
+  let hours = 24;
+
+  if (hoursParam !== null) {
+    hours = Number(hoursParam);
+    if (!Number.isInteger(hours) || hours <= 0) {
+      return jsonResponse(createApiError("Invalid hours parameter", 400), { method, mode, status: 400 });
+    }
+  }
+
+  const trend: TrendPoint[] = store.getTrend(id, hours).map((row) => ({
+    hour: row.hour,
+    avgLatencyMs: row.avgLatencyMs,
+    availability: Math.round(row.availability * 100) / 100,
+    totalChecks: row.totalChecks,
+  }));
+
+  return jsonResponse(trend, { method, mode });
+}
+
+function createSummaryResponse(store: ProbeStore): SummaryResponse {
+  const summary = store.getSummary();
  return {
-    message: "Bun 后端已通过 /api/demo 连接到 React 前端。",
-    runtime: {
-      mode,
-      bunVersion: Bun.version,
-      platform: process.platform,
-      arch: process.arch,
-      timestamp: new Date().toISOString(),
-    },
+    total: summary.total,
+    up: summary.up,
+    down: summary.down,
+    avgLatencyMs: summary.avgLatencyMs,
+    lastCheckTime: summary.lastCheckTime,
  };
 }

+function createTargetsResponse(store: ProbeStore): TargetStatus[] {
+  const targets = store.getTargets();
+
+  return targets.map((target) => {
+    const latest = store.getLatestCheck(target.id);
+    const stats = store.getTargetStats(target.id);
+
+    return {
+      id: target.id,
+      name: target.name,
+      url: target.url,
+      method: target.method,
+      interval: formatDuration(target.interval_ms),
+      latestCheck: latest ? mapCheckResult(latest) : null,
+      sparkline: store.getSparkline(target.id),
+      stats: {
+        totalChecks: stats.totalChecks,
+        availability: stats.availability,
+        avgLatencyMs: stats.avgLatencyMs,
+        p99LatencyMs: stats.p99LatencyMs,
+      },
+    };
+  });
+}
+
+function mapCheckResult(row: StoredCheckResult): CheckResult {
+  return {
+    timestamp: row.timestamp,
+    success: row.success === 1,
+    statusCode: row.status_code,
+    latencyMs: row.latency_ms,
+    error: row.error,
+    matched: row.matched === 1,
+  };
+}
+
+function formatDuration(ms: number): string {
+  if (ms >= 60000 && ms % 60000 === 0) return `${ms / 60000}m`;
+  if (ms >= 1000 && ms % 1000 === 0) return `${ms / 1000}s`;
+  return `${ms}ms`;
+}
+
 function createHealthResponse(): HealthResponse {
  return {
    ok: true,
@@ -87,7 +234,7 @@ function methodNotAllowedResponse(allow: string[], mode: RuntimeMode): Response
 }

 function jsonResponse(
-  body: ApiErrorResponse | DemoResponse | HealthResponse,
+  body: unknown,
  options: { method?: string; mode: RuntimeMode; status?: number; headers?: HeadersInit },
 ): Response {
  const headers = createHeaders(options.mode, {
--- a/src/server/checker/config-loader.ts
+++ b/src/server/checker/config-loader.ts
@@ -0,0 +1,104 @@
+import type { ProbeConfig, ResolvedTarget } from "./types";
+
+const DEFAULT_HOST = "127.0.0.1";
+const DEFAULT_PORT = 3000;
+const DEFAULT_DATA_DIR = "./data";
+const DEFAULT_INTERVAL = "30s";
+const DEFAULT_TIMEOUT = "10s";
+const DEFAULT_METHOD = "GET";
+
+export interface ResolvedConfig {
+  host: string;
+  port: number;
+  dataDir: string;
+  targets: ResolvedTarget[];
+}
+
+export async function loadConfig(configPath: string): Promise<ResolvedConfig> {
+  const file = Bun.file(configPath);
+
+  if (!(await file.exists())) {
+    throw new Error(`配置文件不存在: ${configPath}`);
+  }
+
+  const content = await file.text();
+  const raw = Bun.YAML.parse(content) as ProbeConfig | null;
+
+  if (!raw) {
+    throw new Error("配置文件内容为空或格式无效");
+  }
+
+  validateConfig(raw);
+
+  const server = raw.server ?? {};
+  const defaults = raw.defaults ?? {};
+
+  const host = server.host ?? DEFAULT_HOST;
+  const port = server.port ?? DEFAULT_PORT;
+  const dataDir = server.dataDir ?? DEFAULT_DATA_DIR;
+
+  if (!Number.isInteger(port) || port < 0 || port > 65535) {
+    throw new Error(`无效端口号: ${port}，需要 0-65535 之间的整数`);
+  }
+
+  const defaultIntervalMs = parseDuration(defaults.interval ?? DEFAULT_INTERVAL);
+  const defaultTimeoutMs = parseDuration(defaults.timeout ?? DEFAULT_TIMEOUT);
+  const defaultMethod = defaults.method ?? DEFAULT_METHOD;
+  const defaultHeaders = defaults.headers ?? {};
+
+  const targets: ResolvedTarget[] = raw.targets.map((target) => ({
+    name: target.name,
+    url: target.url,
+    method: target.method ?? defaultMethod,
+    headers: { ...defaultHeaders, ...(target.headers ?? {}) },
+    body: target.body,
+    intervalMs: parseDuration(target.interval ?? defaults.interval ?? DEFAULT_INTERVAL),
+    timeoutMs: parseDuration(target.timeout ?? defaults.timeout ?? DEFAULT_TIMEOUT),
+    expect: target.expect,
+  }));
+
+  return { host, port, dataDir, targets };
+}
+
+function validateConfig(config: ProbeConfig): void {
+  if (!config.targets || !Array.isArray(config.targets) || config.targets.length === 0) {
+    throw new Error("配置文件必须包含至少一个 target");
+  }
+
+  const names = new Set<string>();
+
+  for (let i = 0; i < config.targets.length; i++) {
+    const target = config.targets[i]!;
+
+    if (!target.name || typeof target.name !== "string" || target.name.trim() === "") {
+      throw new Error(`第 ${i + 1} 个 target 缺少 name 字段`);
+    }
+
+    if (!target.url || typeof target.url !== "string" || target.url.trim() === "") {
+      throw new Error(`target "${target.name}" 缺少 url 字段`);
+    }
+
+    if (names.has(target.name)) {
+      throw new Error(`target name 重复: "${target.name}"`);
+    }
+
+    names.add(target.name);
+  }
+}
+
+const DURATION_REGEX = /^(\d+(?:\.\d+)?)(ms|s|m)$/;
+
+export function parseDuration(value: string): number {
+  const match = DURATION_REGEX.exec(value);
+
+  if (!match) {
+    throw new Error(`无效的时长格式: "${value}"，支持格式如 "30s"、"5m"、"500ms"`);
+  }
+
+  const num = parseFloat(match[1]!);
+  const unit = match[2]!;
+
+  if (unit === "ms") return num;
+  if (unit === "s") return num * 1000;
+  return num * 60 * 1000;
+}
--- a/src/server/checker/engine.ts
+++ b/src/server/checker/engine.ts
@@ -0,0 +1,87 @@
+import type { CheckResult, ResolvedTarget } from "./types";
+import type { ProbeStore } from "./store";
+import { fetchTarget } from "./fetcher";
+
+export class ProbeEngine {
+  private timers: ReturnType<typeof setInterval>[] = [];
+  private store: ProbeStore;
+  private targetNameToId: Map<string, number> = new Map();
+
+  constructor(store: ProbeStore, targets: ResolvedTarget[]) {
+    this.store = store;
+    this.targets = targets;
+    this.refreshCache();
+  }
+
+  start(): void {
+    const groups = this.groupByInterval(this.targets);
+
+    for (const [intervalMs, groupTargets] of groups) {
+      void this.probeGroup(groupTargets);
+
+      const timer = setInterval(() => {
+        void this.probeGroup(groupTargets);
+      }, intervalMs);
+
+      this.timers.push(timer);
+    }
+  }
+
+  stop(): void {
+    for (const timer of this.timers) {
+      clearInterval(timer);
+    }
+    this.timers = [];
+  }
+
+  private groupByInterval(targets: ResolvedTarget[]): Map<number, ResolvedTarget[]> {
+    const groups = new Map<number, ResolvedTarget[]>();
+
+    for (const target of targets) {
+      const group = groups.get(target.intervalMs) ?? [];
+      group.push(target);
+      groups.set(target.intervalMs, group);
+    }
+
+    return groups;
+  }
+
+  private async probeGroup(targets: ResolvedTarget[]): Promise<void> {
+    const results = await Promise.allSettled(targets.map((t) => this.probeOne(t)));
+
+    for (const result of results) {
+      if (result.status === "fulfilled") {
+        this.writeResult(result.value);
+      }
+    }
+  }
+
+  private async probeOne(target: ResolvedTarget): Promise<CheckResult> {
+    return fetchTarget(target);
+  }
+
+  private writeResult(result: CheckResult): void {
+    const targetId = this.targetNameToId.get(result.targetName);
+
+    if (!targetId) return;
+
+    this.store.insertCheckResult({
+      targetId,
+      timestamp: result.timestamp,
+      success: result.success,
+      statusCode: result.statusCode,
+      latencyMs: result.latencyMs,
+      error: result.error,
+      matched: result.matched,
+    });
+  }
+
+  private refreshCache(): void {
+    this.targetNameToId.clear();
+    for (const target of this.store.getTargets()) {
+      this.targetNameToId.set(target.name, target.id);
+    }
+  }
+
+  private targets: ResolvedTarget[];
+}
--- a/src/server/checker/fetcher.ts
+++ b/src/server/checker/fetcher.ts
@@ -0,0 +1,65 @@
+import type { CheckResult, ExpectConfig, ResolvedTarget } from "./types";
+
+export async function fetchTarget(target: ResolvedTarget): Promise<CheckResult> {
+  const timestamp = new Date().toISOString();
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), target.timeoutMs);
+
+  try {
+    const start = performance.now();
+
+    const response = await fetch(target.url, {
+      method: target.method,
+      headers: target.headers,
+      body: target.method !== "GET" && target.method !== "HEAD" ? target.body : undefined,
+      signal: controller.signal,
+    });
+
+    const latencyMs = Math.round(performance.now() - start);
+    const body = await response.text();
+
+    const matched = checkExpect(response.status, body, latencyMs, target.expect);
+
+    return {
+      targetName: target.name,
+      timestamp,
+      success: true,
+      statusCode: response.status,
+      latencyMs,
+      error: null,
+      matched,
+    };
+  } catch (error) {
+    const isTimeout = error instanceof DOMException && error.name === "AbortError";
+
+    return {
+      targetName: target.name,
+      timestamp,
+      success: false,
+      statusCode: null,
+      latencyMs: null,
+      error: isTimeout ? `请求超时 (${target.timeoutMs}ms)` : (error instanceof Error ? error.message : String(error)),
+      matched: false,
+    };
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
+
+export function checkExpect(statusCode: number, body: string, latencyMs: number, expect?: ExpectConfig): boolean {
+  if (!expect) return true;
+
+  if (expect.status && !expect.status.includes(statusCode)) {
+    return false;
+  }
+
+  if (expect.bodyContains && !body.includes(expect.bodyContains)) {
+    return false;
+  }
+
+  if (expect.maxLatencyMs !== undefined && latencyMs > expect.maxLatencyMs) {
+    return false;
+  }
+
+  return true;
+}
--- a/src/server/checker/store.ts
+++ b/src/server/checker/store.ts
@@ -0,0 +1,277 @@
+import { Database } from "bun:sqlite";
+import { mkdirSync as fsMkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import type { ResolvedTarget, StoredCheckResult, StoredTarget } from "./types";
+
+const CREATE_TARGETS_TABLE = `
+CREATE TABLE IF NOT EXISTS targets (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  name TEXT NOT NULL UNIQUE,
+  url TEXT NOT NULL,
+  method TEXT NOT NULL DEFAULT 'GET',
+  headers TEXT NOT NULL DEFAULT '{}',
+  body TEXT,
+  interval_ms INTEGER NOT NULL,
+  timeout_ms INTEGER NOT NULL,
+  expect TEXT
+)
+`;
+
+const CREATE_CHECK_RESULTS_TABLE = `
+CREATE TABLE IF NOT EXISTS check_results (
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
+  target_id INTEGER NOT NULL,
+  timestamp TEXT NOT NULL,
+  success INTEGER NOT NULL,
+  status_code INTEGER,
+  latency_ms REAL,
+  error TEXT,
+  matched INTEGER NOT NULL,
+  FOREIGN KEY (target_id) REFERENCES targets(id)
+)
+`;
+
+const CREATE_INDEX = `
+CREATE INDEX IF NOT EXISTS idx_check_results_target_timestamp
+ON check_results (target_id, timestamp)
+`;
+
+export class ProbeStore {
+  private db: Database;
+  private closed = false;
+
+  constructor(dbPath: string) {
+    ensureDir(dirname(dbPath));
+    this.db = new Database(dbPath, { create: true });
+    this.db.run("PRAGMA journal_mode = WAL");
+    this.db.run(CREATE_TARGETS_TABLE);
+    this.db.run(CREATE_CHECK_RESULTS_TABLE);
+    this.db.run(CREATE_INDEX);
+  }
+
+  syncTargets(targets: ResolvedTarget[]): void {
+    if (this.closed) return;
+    const existingRows = this.db.query("SELECT id, name FROM targets").all() as Array<{
+      id: number;
+      name: string;
+    }>;
+    const existingMap = new Map(existingRows.map((r) => [r.name, r.id]));
+    const configNames = new Set(targets.map((t) => t.name));
+
+    const insertStmt = this.db.prepare(
+      "INSERT INTO targets (name, url, method, headers, body, interval_ms, timeout_ms, expect) VALUES (?, ?, ?, ?, ?, ?, ?, ?)",
+    );
+    const updateStmt = this.db.prepare(
+      "UPDATE targets SET url = ?, method = ?, headers = ?, body = ?, interval_ms = ?, timeout_ms = ?, expect = ? WHERE id = ?",
+    );
+    const deleteStmt = this.db.prepare("DELETE FROM targets WHERE id = ?");
+
+    const tx = this.db.transaction(() => {
+      for (const target of targets) {
+        const headers = JSON.stringify(target.headers);
+        const expect = target.expect ? JSON.stringify(target.expect) : null;
+
+        if (existingMap.has(target.name)) {
+          updateStmt.run(
+            target.url,
+            target.method,
+            headers,
+            target.body ?? null,
+            target.intervalMs,
+            target.timeoutMs,
+            expect,
+            existingMap.get(target.name)!,
+          );
+        } else {
+          insertStmt.run(target.name, target.url, target.method, headers, target.body ?? null, target.intervalMs, target.timeoutMs, expect);
+        }
+      }
+
+      for (const [name, id] of existingMap) {
+        if (!configNames.has(name)) {
+          deleteStmt.run(id);
+        }
+      }
+    });
+
+    tx();
+  }
+
+  getTargets(): StoredTarget[] {
+    if (this.closed) return [];
+    return this.db.query("SELECT * FROM targets ORDER BY id").all() as StoredTarget[];
+  }
+
+  getTargetById(id: number): StoredTarget | null {
+    if (this.closed) return null;
+    return this.db.query("SELECT * FROM targets WHERE id = ?").get(id) as StoredTarget | null;
+  }
+
+  insertCheckResult(result: {
+    targetId: number;
+    timestamp: string;
+    success: boolean;
+    statusCode: number | null;
+    latencyMs: number | null;
+    error: string | null;
+    matched: boolean;
+  }): void {
+    if (this.closed) return;
+    this.db
+      .prepare(
+        "INSERT INTO check_results (target_id, timestamp, success, status_code, latency_ms, error, matched) VALUES (?, ?, ?, ?, ?, ?, ?)",
+      )
+      .run(
+        result.targetId,
+        result.timestamp,
+        result.success ? 1 : 0,
+        result.statusCode,
+        result.latencyMs,
+        result.error,
+        result.matched ? 1 : 0,
+      );
+  }
+
+  getLatestCheck(targetId: number): StoredCheckResult | null {
+    return this.db.query("SELECT * FROM check_results WHERE target_id = ? ORDER BY timestamp DESC LIMIT 1").get(targetId) as
+      | StoredCheckResult
+      | null;
+  }
+
+  getHistory(targetId: number, limit = 20): StoredCheckResult[] {
+    return this.db
+      .prepare("SELECT * FROM check_results WHERE target_id = ? ORDER BY timestamp DESC LIMIT ?")
+      .all(targetId, limit) as StoredCheckResult[];
+  }
+
+  getTargetStats(targetId: number): {
+    totalChecks: number;
+    availability: number;
+    avgLatencyMs: number | null;
+    p99LatencyMs: number | null;
+  } {
+    const row = this.db
+      .prepare(
+        `SELECT
+          COUNT(*) as totalChecks,
+          COALESCE(SUM(CASE WHEN matched = 1 THEN 1 ELSE 0 END), 0) as upCount,
+          AVG(CASE WHEN success = 1 THEN latency_ms END) as avgLatencyMs
+        FROM check_results
+        WHERE target_id = ?`,
+      )
+      .get(targetId) as { totalChecks: number; upCount: number; avgLatencyMs: number | null };
+
+    const p99Row = this.db
+      .prepare(
+        `SELECT latency_ms as p99LatencyMs
+        FROM check_results
+        WHERE target_id = ? AND success = 1
+        ORDER BY latency_ms DESC
+        LIMIT 1
+        OFFSET (SELECT COUNT(*) FROM check_results WHERE target_id = ? AND success = 1) * 99 / 100`,
+      )
+      .get(targetId, targetId) as { p99LatencyMs: number | null } | undefined;
+
+    const totalChecks = row.totalChecks;
+    const availability = totalChecks > 0 ? (row.upCount / totalChecks) * 100 : 0;
+
+    return {
+      totalChecks,
+      availability: Math.round(availability * 100) / 100,
+      avgLatencyMs: row.avgLatencyMs !== null ? Math.round(row.avgLatencyMs * 100) / 100 : null,
+      p99LatencyMs: p99Row?.p99LatencyMs ?? null,
+    };
+  }
+
+  getTrend(targetId: number, hours = 24): Array<{
+    hour: string;
+    avgLatencyMs: number | null;
+    availability: number;
+    totalChecks: number;
+  }> {
+    return this.db
+      .prepare(
+        `SELECT
+          strftime('%Y-%m-%dT%H:00:00', timestamp) as hour,
+          AVG(CASE WHEN success = 1 THEN latency_ms END) as avgLatencyMs,
+          CASE WHEN COUNT(*) > 0 THEN (SUM(CASE WHEN matched = 1 THEN 1 ELSE 0 END) * 100.0 / COUNT(*)) ELSE 0 END as availability,
+          COUNT(*) as totalChecks
+        FROM check_results
+        WHERE target_id = ? AND timestamp >= datetime('now', '-' || ? || ' hours')
+        GROUP BY hour
+        ORDER BY hour`,
+      )
+      .all(targetId, hours) as Array<{
+      hour: string;
+      avgLatencyMs: number | null;
+      availability: number;
+      totalChecks: number;
+    }>;
+  }
+
+  getSummary(): {
+    total: number;
+    up: number;
+    down: number;
+    avgLatencyMs: number | null;
+    lastCheckTime: string | null;
+  } {
+    const targets = this.getTargets();
+    let up = 0;
+    let down = 0;
+    let totalLatency = 0;
+    let latencyCount = 0;
+    let lastCheckTime: string | null = null;
+
+    for (const target of targets) {
+      const latest = this.getLatestCheck(target.id);
+
+      if (latest) {
+        if (latest.success && latest.matched) {
+          up++;
+        } else {
+          down++;
+        }
+
+        if (latest.latency_ms !== null) {
+          totalLatency += latest.latency_ms;
+          latencyCount++;
+        }
+
+        if (!lastCheckTime || latest.timestamp > lastCheckTime) {
+          lastCheckTime = latest.timestamp;
+        }
+      } else {
+        down++;
+      }
+    }
+
+    return {
+      total: targets.length,
+      up,
+      down,
+      avgLatencyMs: latencyCount > 0 ? Math.round((totalLatency / latencyCount) * 100) / 100 : null,
+      lastCheckTime,
+    };
+  }
+
+  getSparkline(targetId: number, limit = 20): number[] {
+    const rows = this.db
+      .prepare("SELECT latency_ms FROM check_results WHERE target_id = ? AND success = 1 ORDER BY timestamp DESC LIMIT ?")
+      .all(targetId, limit) as Array<{ latency_ms: number }>;
+    return rows.map((r) => r.latency_ms).reverse();
+  }
+
+  close(): void {
+    this.closed = true;
+    this.db.close();
+  }
+}
+
+function ensureDir(dir: string): void {
+  try {
+    fsMkdirSync(dir, { recursive: true });
+  } catch {
+    // already exists
+  }
+}
--- a/src/server/checker/types.ts
+++ b/src/server/checker/types.ts
@@ -0,0 +1,79 @@
+export interface ProbeConfig {
+  server?: ServerConfig;
+  defaults?: DefaultsConfig;
+  targets: TargetConfig[];
+}
+
+export interface ServerConfig {
+  host?: string;
+  port?: number;
+  dataDir?: string;
+}
+
+export interface DefaultsConfig {
+  interval?: string;
+  timeout?: string;
+  method?: string;
+  headers?: Record<string, string>;
+}
+
+export interface TargetConfig {
+  name: string;
+  url: string;
+  method?: string;
+  headers?: Record<string, string>;
+  body?: string;
+  interval?: string;
+  timeout?: string;
+  expect?: ExpectConfig;
+}
+
+export interface ExpectConfig {
+  status?: number[];
+  bodyContains?: string;
+  maxLatencyMs?: number;
+}
+
+export interface ResolvedTarget {
+  name: string;
+  url: string;
+  method: string;
+  headers: Record<string, string>;
+  body?: string;
+  intervalMs: number;
+  timeoutMs: number;
+  expect?: ExpectConfig;
+}
+
+export interface CheckResult {
+  targetName: string;
+  timestamp: string;
+  success: boolean;
+  statusCode: number | null;
+  latencyMs: number | null;
+  error: string | null;
+  matched: boolean;
+}
+
+export interface StoredTarget {
+  id: number;
+  name: string;
+  url: string;
+  method: string;
+  headers: string;
+  body: string | null;
+  interval_ms: number;
+  timeout_ms: number;
+  expect: string | null;
+}
+
+export interface StoredCheckResult {
+  id: number;
+  target_id: number;
+  timestamp: string;
+  success: number;
+  status_code: number | null;
+  latency_ms: number | null;
+  error: string | null;
+  matched: number;
+}
--- a/src/server/config.ts
+++ b/src/server/config.ts
@@ -1,39 +1,12 @@
+export function readRuntimeConfig(argv: string[] = process.argv.slice(2)): { configPath: string } {
+  if (argv.length === 0) {
+    throw new Error("需要指定 YAML 配置文件路径\n用法: gateway-checker <config.yaml>");
+  }
+
+  return { configPath: argv[0]! };
+}
+
 export interface RuntimeConfig {
  host: string;
  port: number;
 }
-
-const DEFAULT_HOST = "127.0.0.1";
-const DEFAULT_PORT = 3000;
-
-export function readRuntimeConfig(
-  argv: string[] = process.argv.slice(2),
-  env: Record<string, string | undefined> = Bun.env,
-): RuntimeConfig {
-  const host = readOption(argv, "host") ?? env.HOST ?? DEFAULT_HOST;
-  const portValue = readOption(argv, "port") ?? env.PORT ?? String(DEFAULT_PORT);
-  const port = Number(portValue);
-
-  if (!Number.isInteger(port) || port < 0 || port > 65535) {
-    throw new Error(`无效端口: ${portValue}`);
-  }
-
-  return { host, port };
-}
-
-function readOption(argv: string[], name: string): string | undefined {
-  const prefix = `--${name}=`;
-  const inline = argv.find((value) => value.startsWith(prefix));
-
-  if (inline) {
-    return inline.slice(prefix.length);
-  }
-
-  const index = argv.indexOf(`--${name}`);
-
-  if (index >= 0) {
-    return argv[index + 1];
-  }
-
-  return undefined;
-}
--- a/src/server/dev.ts
+++ b/src/server/dev.ts
@@ -1,7 +1,27 @@
-import { readRuntimeConfig } from "./config";
+import { loadConfig } from "./checker/config-loader";
+import { ProbeStore } from "./checker/store";
+import { ProbeEngine } from "./checker/engine";
 import { startServer } from "./server";
+import { readRuntimeConfig } from "./config";

-startServer({
-  config: readRuntimeConfig(),
-  mode: "development",
+async function main() {
+  const { configPath } = readRuntimeConfig();
+  const config = await loadConfig(configPath);
+
+  const store = new ProbeStore(`${config.dataDir}/probe.db`);
+  store.syncTargets(config.targets);
+
+  const engine = new ProbeEngine(store, config.targets);
+  engine.start();
+
+  startServer({
+    config: { host: config.host, port: config.port },
+    mode: "development",
+    store,
+  });
+}
+
+void main().catch((error) => {
+  console.error("启动失败:", error instanceof Error ? error.message : error);
+  process.exit(1);
 });
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -1,21 +1,25 @@
 import type { RuntimeMode } from "../shared/api";
-import { createFetchHandler, type StaticAssets } from "./app";
-import { readRuntimeConfig, type RuntimeConfig } from "./config";
+import type { StaticAssets } from "./app";
+import type { ProbeStore } from "./checker/store";
+import { createFetchHandler } from "./app";
+import type { RuntimeConfig } from "./config";

 export interface StartServerOptions {
-  config?: RuntimeConfig;
+  config: RuntimeConfig;
  mode: RuntimeMode;
  staticAssets?: StaticAssets;
+  store?: ProbeStore;
 }

 export function startServer(options: StartServerOptions) {
-  const config = options.config ?? readRuntimeConfig();
+  const { config, mode, staticAssets, store } = options;
  const server = Bun.serve({
    hostname: config.host,
    port: config.port,
    fetch: createFetchHandler({
-      mode: options.mode,
-      staticAssets: options.staticAssets,
+      mode,
+      staticAssets,
+      store,
    }),
  });

--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -1,16 +1,5 @@
 export type RuntimeMode = "development" | "production" | "test";

-export interface DemoResponse {
-  message: string;
-  runtime: {
-    mode: RuntimeMode;
-    bunVersion: string;
-    platform: string;
-    arch: string;
-    timestamp: string;
-  };
-}
-
 export interface HealthResponse {
  ok: true;
  service: "gateway-checker";
@@ -21,3 +10,45 @@ export interface ApiErrorResponse {
  error: string;
  status: number;
 }
+
+export interface SummaryResponse {
+  total: number;
+  up: number;
+  down: number;
+  avgLatencyMs: number | null;
+  lastCheckTime: string | null;
+}
+
+export interface TargetStatus {
+  id: number;
+  name: string;
+  url: string;
+  method: string;
+  interval: string;
+  latestCheck: CheckResult | null;
+  stats: TargetStats;
+  sparkline: number[];
+}
+
+export interface TargetStats {
+  totalChecks: number;
+  availability: number;
+  avgLatencyMs: number | null;
+  p99LatencyMs: number | null;
+}
+
+export interface CheckResult {
+  timestamp: string;
+  success: boolean;
+  statusCode: number | null;
+  latencyMs: number | null;
+  error: string | null;
+  matched: boolean;
+}
+
+export interface TrendPoint {
+  hour: string;
+  avgLatencyMs: number | null;
+  availability: number;
+  totalChecks: number;
+}
--- a/src/web/app.tsx
+++ b/src/web/app.tsx
@@ -1,91 +1,29 @@
-import { useEffect, useState } from "react";
-import type { DemoResponse } from "../shared/api";
-
-type DemoState =
-  | { status: "loading" }
-  | { status: "success"; data: DemoResponse }
-  | { status: "error"; message: string };
+import { useSummary } from "./hooks/useSummary";
+import { useTargets } from "./hooks/useTargets";
+import { SummaryCards } from "./components/SummaryCards";
+import { TargetTable } from "./components/TargetTable";

 export function App() {
-  const [demoState, setDemoState] = useState<DemoState>({ status: "loading" });
+  const { data: summary, loading: summaryLoading, error: summaryError } = useSummary();
+  const { data: targets, loading: targetsLoading, error: targetsError } = useTargets();

-  useEffect(() => {
-    const abortController = new AbortController();
-
-    async function loadDemo() {
-      try {
-        const response = await fetch("/api/demo", { signal: abortController.signal });
-
-        if (!response.ok) {
-          throw new Error(`请求失败: ${response.status}`);
-        }
-
-        const data = (await response.json()) as DemoResponse;
-        setDemoState({ status: "success", data });
-      } catch (error) {
-        if (abortController.signal.aborted) return;
-
-        setDemoState({
-          status: "error",
-          message: error instanceof Error ? error.message : "未知错误",
-        });
-      }
-    }
-
-    void loadDemo();
-
-    return () => abortController.abort();
-  }, []);
+  const error = summaryError || targetsError;

  return (
-    <main className="shell">
-      <section className="hero" aria-labelledby="page-title">
-        <p className="eyebrow">Vite + React + Bun</p>
-        <h1 id="page-title">Gateway Checker Demo</h1>
-        <p className="summary">这个页面用于验证前端开发、Bun 后端 API 和单可执行文件打包链路已经跑通。</p>
-      </section>
+    <main className="dashboard">
+      <header className="dashboard-header">
+        <h1>Gateway Checker</h1>
+        <p className="dashboard-subtitle">HTTP 拨测监控面板</p>
+      </header>

-      <section className="card" aria-live="polite">
-        <div className="card-header">
-          <span className="status-dot" data-state={demoState.status} />
-          <h2>后端连接状态</h2>
+      {error && (
+        <div className="error-banner">
+          请求失败: {error}，将在下一次轮询周期自动重试
        </div>
+      )}

-        {demoState.status === "loading" ? <p>正在请求 /api/demo...</p> : null}
-
-        {demoState.status === "error" ? (
-          <div className="error">
-            <strong>请求失败</strong>
-            <p>{demoState.message}</p>
-          </div>
-        ) : null}
-
-        {demoState.status === "success" ? (
-          <div className="result">
-            <p className="message">{demoState.data.message}</p>
-            <dl>
-              <div>
-                <dt>运行模式</dt>
-                <dd>{demoState.data.runtime.mode}</dd>
-              </div>
-              <div>
-                <dt>Bun 版本</dt>
-                <dd>{demoState.data.runtime.bunVersion}</dd>
-              </div>
-              <div>
-                <dt>平台</dt>
-                <dd>
-                  {demoState.data.runtime.platform}/{demoState.data.runtime.arch}
-                </dd>
-              </div>
-              <div>
-                <dt>响应时间</dt>
-                <dd>{demoState.data.runtime.timestamp}</dd>
-              </div>
-            </dl>
-          </div>
-        ) : null}
-      </section>
+      <SummaryCards summary={summary} loading={summaryLoading} />
+      <TargetTable targets={targets} loading={targetsLoading} />
    </main>
  );
 }
--- a/src/web/components/SparklineChart.tsx
+++ b/src/web/components/SparklineChart.tsx
@@ -0,0 +1,19 @@
+import { Line, LineChart, ResponsiveContainer } from "recharts";
+
+interface SparklineChartProps {
+  data: Array<{ latency: number }>;
+}
+
+export function SparklineChart({ data }: SparklineChartProps) {
+  if (data.length === 0) {
+    return <span className="sparkline-empty">-</span>;
+  }
+
+  return (
+    <ResponsiveContainer width={80} height={32}>
+      <LineChart data={data}>
+        <Line type="monotone" dataKey="latency" stroke="#356dd2" strokeWidth={1.5} dot={false} />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
--- a/src/web/components/StatusDot.tsx
+++ b/src/web/components/StatusDot.tsx
@@ -0,0 +1,7 @@
+interface StatusDotProps {
+  up: boolean;
+}
+
+export function StatusDot({ up }: StatusDotProps) {
+  return <span className={`status-dot ${up ? "status-up" : "status-down"}`} />;
+}
--- a/src/web/components/SummaryCards.tsx
+++ b/src/web/components/SummaryCards.tsx
@@ -0,0 +1,36 @@
+import type { SummaryResponse } from "../../shared/api";
+
+interface SummaryCardsProps {
+  summary: SummaryResponse | null;
+  loading: boolean;
+}
+
+export function SummaryCards({ summary, loading }: SummaryCardsProps) {
+  if (loading && !summary) {
+    return <div className="summary-cards">加载中...</div>;
+  }
+
+  if (!summary) return null;
+
+  const cards = [
+    { label: "全部目标", value: summary.total, className: "card-total" },
+    { label: "正常", value: summary.up, className: "card-up" },
+    { label: "异常", value: summary.down, className: "card-down" },
+    {
+      label: "平均延迟",
+      value: summary.avgLatencyMs !== null ? `${Math.round(summary.avgLatencyMs)}ms` : "-",
+      className: "card-latency",
+    },
+  ];
+
+  return (
+    <div className="summary-cards">
+      {cards.map((card) => (
+        <div key={card.className} className={`summary-card ${card.className}`}>
+          <div className="card-value">{card.value}</div>
+          <div className="card-label">{card.label}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/web/components/TargetDetail.tsx
+++ b/src/web/components/TargetDetail.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from "react";
+import type { CheckResult, TargetStatus } from "../../shared/api";
+import { useTrend } from "../hooks/useTrend";
+import { TrendChart } from "./TrendChart";
+
+interface TargetDetailProps {
+  target: TargetStatus;
+}
+
+export function TargetDetail({ target }: TargetDetailProps) {
+  const { data: trendData, loading: trendLoading, fetchTrend } = useTrend(target.id);
+  const [history, setHistory] = useState<CheckResult[]>([]);
+  const [historyLoading, setHistoryLoading] = useState(false);
+
+  const fetchHistory = useCallback(async () => {
+    setHistoryLoading(true);
+    try {
+      const response = await fetch(`/api/targets/${target.id}/history?limit=10`);
+      if (response.ok) {
+        const data = (await response.json()) as CheckResult[];
+        setHistory(data);
+      }
+    } finally {
+      setHistoryLoading(false);
+    }
+  }, [target.id]);
+
+  useEffect(() => {
+    void fetchTrend();
+    void fetchHistory();
+  }, [fetchTrend, fetchHistory]);
+
+  const { stats } = target;
+  const isUp = target.latestCheck?.success && target.latestCheck?.matched;
+
+  return (
+    <tr>
+      <td colSpan={6} className="detail-cell">
+        <div className="target-detail">
+          <div className="detail-stats">
+            <div className="detail-stat">
+              <span className="detail-stat-label">状态</span>
+              <span className={`detail-stat-value ${isUp ? "text-up" : "text-down"}`}>
+                {isUp ? "UP" : "DOWN"}
+              </span>
+            </div>
+            <div className="detail-stat">
+              <span className="detail-stat-label">可用率</span>
+              <span className="detail-stat-value">
+                {stats.totalChecks > 0 ? `${stats.availability.toFixed(1)}%` : "-"}
+              </span>
+            </div>
+            <div className="detail-stat">
+              <span className="detail-stat-label">平均延迟</span>
+              <span className="detail-stat-value">
+                {stats.avgLatencyMs !== null ? `${Math.round(stats.avgLatencyMs)}ms` : "-"}
+              </span>
+            </div>
+            <div className="detail-stat">
+              <span className="detail-stat-label">P99 延迟</span>
+              <span className="detail-stat-value">
+                {stats.p99LatencyMs !== null ? `${Math.round(stats.p99LatencyMs)}ms` : "-"}
+              </span>
+            </div>
+          </div>
+
+          <div className="detail-trend">
+            <h4>24 小时趋势</h4>
+            <TrendChart data={trendData} loading={trendLoading} />
+          </div>
+
+          <div className="detail-history">
+            <h4>最近检查记录</h4>
+            {historyLoading ? (
+              <p className="history-empty">加载中...</p>
+            ) : history.length > 0 ? (
+              <div className="history-list">
+                {history.map((item, idx) => (
+                  <div key={idx} className="history-item">
+                    <span className={`history-status ${item.success && item.matched ? "text-up" : "text-down"}`}>
+                      {item.success && item.matched ? "UP" : "DOWN"}
+                    </span>
+                    <span className="history-time">
+                      {new Date(item.timestamp).toLocaleString("zh-CN")}
+                    </span>
+                    {item.statusCode && (
+                      <span className="history-code">{item.statusCode}</span>
+                    )}
+                    {item.latencyMs !== null && (
+                      <span className="history-latency">{Math.round(item.latencyMs)}ms</span>
+                    )}
+                    {item.error && (
+                      <span className="history-error">{item.error}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="history-empty">暂无检查记录</p>
+            )}
+          </div>
+        </div>
+      </td>
+    </tr>
+  );
+}
--- a/src/web/components/TargetRow.tsx
+++ b/src/web/components/TargetRow.tsx
@@ -0,0 +1,34 @@
+import type { TargetStatus } from "../../shared/api";
+import { StatusDot } from "./StatusDot";
+import { SparklineChart } from "./SparklineChart";
+
+interface TargetRowProps {
+  target: TargetStatus;
+  expanded: boolean;
+  onToggle: () => void;
+}
+
+export function TargetRow({ target, expanded, onToggle }: TargetRowProps) {
+  const isUp = target.latestCheck?.success && target.latestCheck?.matched;
+
+  const sparklineData = target.sparkline.map((latency) => ({ latency }));
+
+  return (
+    <tr className={`target-row ${expanded ? "expanded" : ""}`} onClick={onToggle}>
+      <td className="col-status">
+        <StatusDot up={!!isUp} />
+      </td>
+      <td className="col-name">{target.name}</td>
+      <td className="col-url">{target.url}</td>
+      <td className="col-method">{target.method}</td>
+      <td className="col-latency">
+        {target.latestCheck?.latencyMs !== null && target.latestCheck?.latencyMs !== undefined
+          ? `${Math.round(target.latestCheck.latencyMs)}ms`
+          : "-"}
+      </td>
+      <td className="col-sparkline">
+        <SparklineChart data={sparklineData} />
+      </td>
+    </tr>
+  );
+}
--- a/src/web/components/TargetTable.tsx
+++ b/src/web/components/TargetTable.tsx
@@ -0,0 +1,66 @@
+import { useState } from "react";
+import type { TargetStatus } from "../../shared/api";
+import { TargetRow } from "./TargetRow";
+import { TargetDetail } from "./TargetDetail";
+
+interface TargetTableProps {
+  targets: TargetStatus[];
+  loading: boolean;
+}
+
+export function TargetTable({ targets, loading }: TargetTableProps) {
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+
+  if (loading && targets.length === 0) {
+    return <div className="table-loading">加载目标列表...</div>;
+  }
+
+  if (targets.length === 0) {
+    return <div className="table-empty">暂无拨测目标</div>;
+  }
+
+  return (
+    <table className="target-table">
+      <thead>
+        <tr>
+          <th className="col-status">状态</th>
+          <th className="col-name">名称</th>
+          <th className="col-url">URL</th>
+          <th className="col-method">方法</th>
+          <th className="col-latency">延迟</th>
+          <th className="col-sparkline">趋势</th>
+        </tr>
+      </thead>
+      <tbody>
+        {targets.map((target) => {
+          const isExpanded = expandedId === target.id;
+          return (
+            <TargetRowWrapper
+              key={target.id}
+              target={target}
+              expanded={isExpanded}
+              onToggle={() => setExpandedId(isExpanded ? null : target.id)}
+            />
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function TargetRowWrapper({
+  target,
+  expanded,
+  onToggle,
+}: {
+  target: TargetStatus;
+  expanded: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <>
+      <TargetRow target={target} expanded={expanded} onToggle={onToggle} />
+      {expanded && <TargetDetail target={target} />}
+    </>
+  );
+}
--- a/src/web/components/TrendChart.tsx
+++ b/src/web/components/TrendChart.tsx
@@ -0,0 +1,46 @@
+import { Line, LineChart, ResponsiveContainer, XAxis, YAxis, Tooltip, CartesianGrid } from "recharts";
+import type { TrendPoint } from "../../shared/api";
+
+interface TrendChartProps {
+  data: TrendPoint[];
+  loading: boolean;
+}
+
+export function TrendChart({ data, loading }: TrendChartProps) {
+  if (loading) {
+    return <div className="trend-loading">加载趋势数据...</div>;
+  }
+
+  if (data.length === 0) {
+    return <div className="trend-empty">暂无趋势数据</div>;
+  }
+
+  const chartData = data.map((point) => ({
+    ...point,
+    hour: point.hour.slice(11, 16),
+  }));
+
+  return (
+    <div className="trend-chart">
+      <ResponsiveContainer width="100%" height={240}>
+        <LineChart data={chartData}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
+          <XAxis dataKey="hour" tick={{ fontSize: 12 }} stroke="#94a3b8" />
+          <YAxis yAxisId="latency" tick={{ fontSize: 12 }} stroke="#94a3b8" label={{ value: "ms", position: "insideTopRight", fontSize: 11 }} />
+          <YAxis yAxisId="availability" orientation="right" domain={[0, 100]} tick={{ fontSize: 12 }} stroke="#94a3b8" label={{ value: "%", position: "insideTopLeft", fontSize: 11 }} />
+          <Tooltip
+            formatter={(value: unknown, name: unknown) => {
+              const num = Number(value);
+              const nameStr = String(name);
+              if (nameStr === "avgLatencyMs") return [`${Math.round(num)}ms`, "平均延迟"];
+              if (nameStr === "availability") return [`${num.toFixed(1)}%`, "可用率"];
+              return [String(value), nameStr];
+            }}
+          />
+          <Line yAxisId="latency" type="monotone" dataKey="avgLatencyMs" stroke="#356dd2" strokeWidth={2} dot={false} name="avgLatencyMs" />
+          <Line yAxisId="availability" type="monotone" dataKey="availability" stroke="#1fbf75" strokeWidth={2} dot={false} name="availability" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/src/web/hooks/useSummary.ts
+++ b/src/web/hooks/useSummary.ts
@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { SummaryResponse } from "../../shared/api";
+
+export function useSummary(intervalMs = 8000) {
+  const [data, setData] = useState<SummaryResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchSummary = useCallback(async () => {
+    try {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const response = await fetch("/api/summary", { signal: controller.signal });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      const result = (await response.json()) as SummaryResponse;
+      setData(result);
+      setError(null);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      setError(err instanceof Error ? err.message : "请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchSummary();
+    const timer = setInterval(fetchSummary, intervalMs);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [fetchSummary, intervalMs]);
+
+  return { data, error, loading, refresh: fetchSummary };
+}
--- a/src/web/hooks/useTargets.ts
+++ b/src/web/hooks/useTargets.ts
@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { TargetStatus } from "../../shared/api";
+
+export function useTargets(intervalMs = 8000) {
+  const [data, setData] = useState<TargetStatus[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const abortRef = useRef<AbortController | null>(null);
+
+  const fetchTargets = useCallback(async () => {
+    try {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const response = await fetch("/api/targets", { signal: controller.signal });
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      const result = (await response.json()) as TargetStatus[];
+      setData(result);
+      setError(null);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      setError(err instanceof Error ? err.message : "请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchTargets();
+    const timer = setInterval(fetchTargets, intervalMs);
+    return () => {
+      clearInterval(timer);
+      abortRef.current?.abort();
+    };
+  }, [fetchTargets, intervalMs]);
+
+  return { data, error, loading, refresh: fetchTargets };
+}
--- a/src/web/hooks/useTrend.ts
+++ b/src/web/hooks/useTrend.ts
@@ -0,0 +1,30 @@
+import { useCallback, useState } from "react";
+import type { TrendPoint } from "../../shared/api";
+
+export function useTrend(targetId: number | null) {
+  const [data, setData] = useState<TrendPoint[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const fetchTrend = useCallback(async () => {
+    if (targetId === null) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/targets/${targetId}/trend?hours=24`);
+
+      if (!response.ok) throw new Error(`HTTP ${response.status}`);
+
+      const result = (await response.json()) as TrendPoint[];
+      setData(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "请求失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [targetId]);
+
+  return { data, error, loading, fetchTrend };
+}
--- a/src/web/index.html
+++ b/src/web/index.html
@@ -3,8 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Gateway Checker Vite React Bun executable demo" />
-    <title>Gateway Checker Demo</title>
+    <meta name="description" content="Gateway Checker - HTTP 拨测监控面板" />
+    <title>Gateway Checker</title>
  </head>
  <body>
    <div id="root"></div>
--- a/src/web/styles.css
+++ b/src/web/styles.css
@@ -21,155 +21,308 @@ body {
  margin: 0;
 }

-.shell {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
-  gap: 32px;
-  align-items: center;
-  min-height: 100vh;
-  padding: 56px;
-  background:
-    radial-gradient(circle at top left, rgba(55, 125, 255, 0.18), transparent 34rem),
-    linear-gradient(135deg, #f8fbff 0%, #e3edf7 100%);
+.dashboard {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 32px 24px;
 }

-.hero,
-.card {
-  border: 1px solid rgba(49, 83, 126, 0.14);
-  border-radius: 28px;
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0 24px 80px rgba(34, 57, 91, 0.16);
-  backdrop-filter: blur(18px);
+.dashboard-header {
+  margin-bottom: 32px;
 }

-.hero {
-  padding: 48px;
+.dashboard-header h1 {
+  margin: 0 0 4px;
+  font-size: 1.75rem;
+  letter-spacing: -0.03em;
 }

-.eyebrow {
-  margin: 0 0 18px;
-  color: #356dd2;
-  font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-}
-
-h1,
-h2,
-p {
-  margin-top: 0;
-}
-
-h1 {
-  max-width: 760px;
-  margin-bottom: 20px;
-  font-size: clamp(3rem, 8vw, 7rem);
-  line-height: 0.9;
-  letter-spacing: -0.08em;
-}
-
-.summary {
-  max-width: 620px;
-  margin-bottom: 0;
-  color: #42546c;
-  font-size: 1.2rem;
-  line-height: 1.8;
-}
-
-.card {
-  padding: 32px;
-}
-
-.card-header {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.card-header h2 {
+.dashboard-subtitle {
  margin: 0;
-  font-size: 1.25rem;
+  color: #61728a;
+  font-size: 0.9rem;
+}
+
+.error-banner {
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  border: 1px solid rgba(229, 72, 77, 0.25);
+  border-radius: 12px;
+  color: #9f2228;
+  background: rgba(255, 240, 240, 0.8);
+  font-size: 0.85rem;
+}
+
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.summary-card {
+  padding: 20px;
+  border: 1px solid rgba(49, 83, 126, 0.12);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.85);
+  box-shadow: 0 4px 16px rgba(34, 57, 91, 0.08);
+}
+
+.card-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.card-label {
+  margin-top: 4px;
+  color: #61728a;
+  font-size: 0.8rem;
+}
+
+.card-up .card-value {
+  color: #1fbf75;
+}
+
+.card-down .card-value {
+  color: #e5484d;
+}
+
+.card-latency .card-value {
+  color: #356dd2;
+}
+
+.target-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(49, 83, 126, 0.12);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(34, 57, 91, 0.08);
+}
+
+.target-table thead th {
+  padding: 12px 16px;
+  text-align: left;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #61728a;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-bottom: 1px solid rgba(49, 83, 126, 0.1);
+  background: rgba(236, 243, 252, 0.5);
+}
+
+.target-row {
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.target-row:hover {
+  background: rgba(236, 243, 252, 0.6);
+}
+
+.target-row.expanded {
+  background: rgba(236, 243, 252, 0.5);
+}
+
+.target-row td {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgba(49, 83, 126, 0.06);
+  font-size: 0.9rem;
+}
+
+.col-status {
+  width: 48px;
+}
+
+.col-name {
+  font-weight: 600;
+}
+
+.col-url {
+  color: #61728a;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.82rem;
+  max-width: 260px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.col-method {
+  width: 64px;
+  text-align: center;
+}
+
+.col-latency {
+  width: 80px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.col-sparkline {
+  width: 100px;
 }

 .status-dot {
+  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 999px;
-  background: #f5a524;
-  box-shadow: 0 0 0 8px rgba(245, 165, 36, 0.14);
 }

-.status-dot[data-state="success"] {
+.status-up {
  background: #1fbf75;
-  box-shadow: 0 0 0 8px rgba(31, 191, 117, 0.14);
+  box-shadow: 0 0 0 6px rgba(31, 191, 117, 0.14);
 }

-.status-dot[data-state="error"] {
+.status-down {
  background: #e5484d;
-  box-shadow: 0 0 0 8px rgba(229, 72, 77, 0.14);
+  box-shadow: 0 0 0 6px rgba(229, 72, 77, 0.14);
 }

-.error {
-  padding: 16px;
-  border: 1px solid rgba(229, 72, 77, 0.25);
-  border-radius: 18px;
-  color: #9f2228;
-  background: rgba(255, 240, 240, 0.8);
+.sparkline-empty {
+  color: #94a3b8;
+  font-size: 0.85rem;
 }

-.error p,
-.message {
-  margin-bottom: 0;
+.detail-cell {
+  padding: 0 !important;
+  border-bottom: 1px solid rgba(49, 83, 126, 0.1) !important;
+  background: rgba(240, 246, 252, 0.6);
 }

-.result {
+.target-detail {
+  padding: 20px 24px;
+}
+
+.detail-stats {
  display: grid;
-  gap: 24px;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
 }

-.message {
-  color: #1c3f73;
-  font-size: 1.05rem;
-  font-weight: 700;
-  line-height: 1.6;
+.detail-stat {
+  padding: 12px 16px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.7);
 }

-dl {
-  display: grid;
-  gap: 12px;
-  margin: 0;
-}
-
-dl div {
-  display: grid;
-  gap: 4px;
-  padding: 14px 16px;
-  border-radius: 16px;
-  background: rgba(236, 243, 252, 0.74);
-}
-
-dt {
+.detail-stat-label {
+  display: block;
+  font-size: 0.75rem;
  color: #61728a;
+  margin-bottom: 4px;
+}
+
+.detail-stat-value {
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.text-up {
+  color: #1fbf75;
+}
+
+.text-down {
+  color: #e5484d;
+}
+
+.detail-trend {
+  margin-bottom: 20px;
+}
+
+.detail-trend h4,
+.detail-history h4 {
+  margin: 0 0 12px;
+  font-size: 0.9rem;
+  color: #42546c;
+}
+
+.trend-loading,
+.trend-empty {
+  padding: 24px;
+  text-align: center;
+  color: #94a3b8;
+  font-size: 0.85rem;
+}
+
+.detail-history {
+  margin-top: 16px;
+}
+
+.history-item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.6);
+  font-size: 0.85rem;
+}
+
+.history-status {
+  font-weight: 700;
  font-size: 0.78rem;
 }

-dd {
-  margin: 0;
-  overflow-wrap: anywhere;
+.history-time {
+  color: #61728a;
+}
+
+.history-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: #42546c;
 }

-@media (max-width: 860px) {
-  .shell {
-    grid-template-columns: 1fr;
-    padding: 24px;
+.history-latency {
+  font-variant-numeric: tabular-nums;
+  color: #356dd2;
+}
+
+.history-error {
+  color: #e5484d;
+  font-size: 0.8rem;
+}
+
+.history-empty {
+  color: #94a3b8;
+  font-size: 0.85rem;
+  margin: 0;
+}
+
+.table-loading,
+.table-empty {
+  padding: 40px;
+  text-align: center;
+  color: #94a3b8;
+  background: rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(49, 83, 126, 0.12);
+  border-radius: 16px;
+}
+
+@media (max-width: 768px) {
+  .dashboard {
+    padding: 16px;
  }

-  .hero,
-  .card {
-    padding: 28px;
-    border-radius: 22px;
+  .summary-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .detail-stats {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .col-method,
+  .col-sparkline {
+    display: none;
+  }
+
+  .target-row td {
+    padding: 10px 12px;
  }
 }