refactor: 全面重构前端 Dashboard 为 TDesign + TanStack Query 分组表格布局

- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer
- 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询）
- CSS 607行精简至73行，颜色迁移至 TDesign tokens
- 可用率进度条颜色按 10% 一档红→绿渐变
- 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值）
- 同步更新主 specs 并归档变更文档

src/web/constants/target-table-columns.tsx

@@ -0,0 +1,89 @@
+import type { PrimaryTableCol, PrimaryTableCellParams } from "tdesign-react";
+import { Tag, Progress } from "tdesign-react";
+import type { TargetStatus } from "../../shared/api";
+import { StatusDot } from "../components/StatusDot";
+import { StatusBar } from "../components/StatusBar";
+import { getTargetTypeDisplay } from "./target-type-display";
+import { getAvailabilityProgressColor, getLatencyColor } from "./color-threshold";
+import { availabilitySorter, latencySorter, nameSorter } from "./target-table-sorters";
+import { statusFilter, typeFilter } from "./target-table-filters";
+
+export const TARGET_TABLE_COLUMNS: PrimaryTableCol<TargetStatus>[] = [
+  {
+    colKey: "latestCheck.matched",
+    title: "状态",
+    width: 80,
+    fixed: "left",
+    align: "center",
+    filter: statusFilter,
+    cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => <StatusDot up={!!row.latestCheck?.matched} />,
+  },
+  {
+    colKey: "name",
+    title: "名称",
+    ellipsis: true,
+    sorter: nameSorter,
+    sortType: "all",
+  },
+  {
+    colKey: "type",
+    title: "类型",
+    width: 80,
+    filter: typeFilter,
+    cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => (
+      <Tag size="small" theme="primary" variant="light-outline">
+        {getTargetTypeDisplay(row.type)}
+      </Tag>
+    ),
+  },
+  {
+    colKey: "stats.availability",
+    title: "可用率",
+    width: 160,
+    sorter: availabilitySorter,
+    sortType: "all",
+    cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => {
+      const availability = row.stats?.availability;
+      if (availability === undefined || availability === null) return "-";
+      const color = getAvailabilityProgressColor(availability);
+      return (
+        <Progress
+          theme="line"
+          size="small"
+          percentage={availability}
+          color={color}
+          label={`${availability.toFixed(1)}%`}
+        />
+      );
+    },
+  },
+  {
+    colKey: "recentSamples",
+    title: "最近状态",
+    width: 220,
+    cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => <StatusBar samples={row.recentSamples} />,
+  },
+  {
+    colKey: "latestCheck.durationMs",
+    title: "延迟",
+    width: 80,
+    align: "right",
+    sorter: latencySorter,
+    sortType: "all",
+    cell: ({ row }: PrimaryTableCellParams<TargetStatus>) => {
+      const ms = row.latestCheck?.durationMs;
+      if (ms === null || ms === undefined) return <span style={{ color: "var(--td-text-color-disabled)" }}>-</span>;
+      const color = getLatencyColor(ms);
+      return <span style={{ color, fontVariantNumeric: "tabular-nums" }}>{Math.round(ms)}ms</span>;
+    },
+  },
+  {
+    colKey: "interval",
+    title: "间隔",
+    width: 72,
+    align: "center",
+  },
+];
+
+export { statusSorter, availabilitySorter, latencySorter, nameSorter } from "./target-table-sorters";
+export { statusFilter, typeFilter } from "./target-table-filters";