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。

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>
+  );
+}

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"}`} />;
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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} />}
+    </>
+  );
+}

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>
+  );
+}