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

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

src/web/components/TargetGroup.tsx

@@ -1,6 +1,7 @@
 import type { TargetStatus } from "../../shared/api";
 import { GroupHeader } from "./GroupHeader";
-import { CardGrid } from "./CardGrid";
+import { PrimaryTable } from "tdesign-react";
+import { TARGET_TABLE_COLUMNS } from "../constants/target-table-columns";
 
 interface TargetGroupProps {
   name: string;
@@ -13,9 +14,24 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
   const down = targets.length - up;
 
   return (
-    <div className="target-group">
+    <div>
       <GroupHeader name={name} total={targets.length} up={up} down={down} />
-      <CardGrid targets={targets} onTargetClick={onTargetClick} />
+      <PrimaryTable
+        columns={TARGET_TABLE_COLUMNS}
+        data={targets}
+        rowKey="id"
+        size="small"
+        stripe
+        hover
+        bordered
+        defaultSort={[{ sortBy: "latestCheck.matched", descending: true }]}
+        onRowClick={({ row }) => onTargetClick(row as TargetStatus)}
+        rowClassName={({ row }) => {
+          const target = row as TargetStatus;
+          return target.latestCheck?.matched === false ? "row-down" : "";
+        }}
+        style={{ cursor: "pointer" }}
+      />
     </div>
   );
 }