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

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

src/web/app.tsx

@@ -1,14 +1,12 @@
-import { useEffect } from "react";
-import { useSummary } from "./hooks/useSummary";
-import { useTargets } from "./hooks/useTargets";
-import { useTargetDetail } from "./hooks/useTargetDetail";
+import { Alert, Loading } from "tdesign-react";
+import { useSummary, useTargets, useTargetDetail } from "./hooks/useTargetDetail";
 import { SummaryCards } from "./components/SummaryCards";
 import { TargetBoard } from "./components/TargetBoard";
-import { TargetDetailModal } from "./components/TargetDetailModal";
+import { TargetDetailDrawer } from "./components/TargetDetailDrawer";
 
 export function App() {
-  const { data: summary, loading: summaryLoading, error: summaryError } = useSummary();
-  const { data: targets, error: targetsError } = useTargets();
+  const { data: summary, isLoading: summaryLoading, error: summaryError } = useSummary();
+  const { data: targets, isLoading: targetsLoading, error: targetsError } = useTargets();
   const {
     selectedTarget,
     trendData,
@@ -17,25 +15,14 @@ export function App() {
     historyLoading,
     timeFrom,
     timeTo,
-    openModal,
-    closeModal,
+    openDrawer,
+    closeDrawer,
     handleTimeChange,
     handlePageChange,
   } = useTargetDetail();
 
   const error = summaryError || targetsError;
 
-  useEffect(() => {
-    if (selectedTarget) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [selectedTarget]);
-
   return (
     <main className="dashboard">
       <header className="dashboard-header">
@@ -43,25 +30,29 @@ export function App() {
         <p className="dashboard-subtitle">统一拨测平台</p>
       </header>
 
-      {error && <div className="error-banner">请求失败: {error}，将在下一次轮询周期自动重试</div>}
+      {error && <Alert theme="error" message={`请求失败: ${error.message}`} closeBtn />}
 
-      <SummaryCards summary={summary} loading={summaryLoading} />
-      <TargetBoard targets={targets} onTargetClick={openModal} />
-
-      {selectedTarget && (
-        <TargetDetailModal
-          target={selectedTarget}
-          trendData={trendData}
-          trendLoading={trendLoading}
-          historyData={historyData}
-          historyLoading={historyLoading}
-          timeFrom={timeFrom}
-          timeTo={timeTo}
-          onTimeChange={handleTimeChange}
-          onPageChange={handlePageChange}
-          onClose={closeModal}
-        />
+      {summaryLoading && targetsLoading ? (
+        <Loading />
+      ) : (
+        <>
+          <SummaryCards summary={summary ?? null} />
+          <TargetBoard targets={targets ?? []} onTargetClick={openDrawer} />
+        </>
       )}
+
+      <TargetDetailDrawer
+        target={selectedTarget}
+        trendData={trendData}
+        trendLoading={trendLoading}
+        historyData={historyData}
+        historyLoading={historyLoading}
+        timeFrom={timeFrom}
+        timeTo={timeTo}
+        onTimeChange={handleTimeChange}
+        onPageChange={handlePageChange}
+        onClose={closeDrawer}
+      />
     </main>
   );
 }