refactor: 前端架构重构 — hook拆分、组件拆分、类型筛选器动态化、Meta API

- 后端新增 GET /api/meta 端点（checkerRegistry.supportedTypes）及 MetaResponse 类型
- 前端 hook 拆分为 use-queries.ts（全局查询+useMeta）和 use-target-detail.ts（Drawer状态）
- TargetDetailDrawer 拆分为 OverviewTab + HistoryTab + history-table-columns + stats.ts
- 类型筛选器由 meta API 动态驱动，删除 target-type-display 静态映射
- 列定义改为工厂函数 createTargetTableColumns(checkerTypes)，TargetGroup 新增 columns prop
- 修复 StatusDonut key、StatusBar maxSlots prop、TrendChart 移除 loading prop
- 补充 utils/time、utils/stats、动态列工厂测试，删除旧 mapping 测试
- 同步 delta specs 到主 specs，归档 frontend-architecture-refactor change

src/web/hooks/use-queries.ts

@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+
+import type { MetaResponse, SummaryResponse, TargetStatus } from "../../shared/api";
+
+const queryKeys = {
+  meta: () => ["meta"] as const,
+  summary: () => ["summary"] as const,
+  targets: () => ["targets"] as const,
+};
+
+export async function fetchJson<T>(url: string): Promise<T> {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  return response.json() as Promise<T>;
+}
+
+export function useMeta() {
+  return useQuery({
+    queryFn: () => fetchJson<MetaResponse>("/api/meta"),
+    queryKey: queryKeys.meta(),
+    staleTime: Infinity,
+  });
+}
+
+export function useSummary() {
+  return useQuery({
+    queryFn: () => fetchJson<SummaryResponse>("/api/summary"),
+    queryKey: queryKeys.summary(),
+    refetchInterval: 8000,
+    refetchIntervalInBackground: false,
+  });
+}
+
+export function useTargets() {
+  return useQuery({
+    queryFn: () => fetchJson<TargetStatus[]>("/api/targets"),
+    queryKey: queryKeys.targets(),
+    refetchInterval: 8000,
+    refetchIntervalInBackground: false,
+  });
+}

src/web/hooks/use-target-detail.ts

@@ -1,26 +1,16 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 
-import type { HistoryResponse, SummaryResponse, TargetStatus, TrendPoint } from "../../shared/api";
+import type { HistoryResponse, TargetStatus, TrendPoint } from "../../shared/api";
 
 import { subtractHours } from "../utils/time";
+import { fetchJson, useTargets } from "./use-queries";
 
-const queryKeys = {
+const detailQueryKeys = {
   history: (targetId: number, from: string, to: string, page: number) => ["history", targetId, from, to, page] as const,
-  summary: () => ["summary"] as const,
-  targets: () => ["targets"] as const,
   trend: (targetId: number, from: string, to: string) => ["trend", targetId, from, to] as const,
 };
 
-export function useSummary() {
-  return useQuery({
-    queryFn: () => fetchJson<SummaryResponse>("/api/summary"),
-    queryKey: queryKeys.summary(),
-    refetchInterval: 8000,
-    refetchIntervalInBackground: false,
-  });
-}
-
 export function useTargetDetail() {
   const queryClient = useQueryClient();
   const [selectedTargetId, setSelectedTargetId] = useState<null | number>(null);
@@ -29,9 +19,8 @@ export function useTargetDetail() {
   const [historyPage, setHistoryPage] = useState(1);
 
   const { data: targetsData } = useTargets();
-
   const selectedTarget =
-    selectedTargetId !== null ? (targetsData?.find((t) => t.id === selectedTargetId) ?? null) : null;
+    selectedTargetId !== null ? (targetsData?.find((target) => target.id === selectedTargetId) ?? null) : null;
 
   const trend = useQuery({
     enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
@@ -41,7 +30,7 @@ export function useTargetDetail() {
       ),
     queryKey:
       selectedTargetId !== null && timeFrom && timeTo
-        ? queryKeys.trend(selectedTargetId, timeFrom, timeTo)
+        ? detailQueryKeys.trend(selectedTargetId, timeFrom, timeTo)
         : ["trend", "disabled"],
   });
 
@@ -53,7 +42,7 @@ export function useTargetDetail() {
       ),
     queryKey:
       selectedTargetId !== null && timeFrom && timeTo
-        ? queryKeys.history(selectedTargetId, timeFrom, timeTo, historyPage)
+        ? detailQueryKeys.history(selectedTargetId, timeFrom, timeTo, historyPage)
         : ["history", "disabled"],
   });
 
@@ -96,18 +85,3 @@ export function useTargetDetail() {
     trendLoading: trend.isLoading,
   };
 }
-
-export function useTargets() {
-  return useQuery({
-    queryFn: () => fetchJson<TargetStatus[]>("/api/targets"),
-    queryKey: queryKeys.targets(),
-    refetchInterval: 8000,
-    refetchIntervalInBackground: false,
-  });
-}
-
-async function fetchJson<T>(url: string): Promise<T> {
-  const response = await fetch(url);
-  if (!response.ok) throw new Error(`HTTP ${response.status}`);
-  return response.json() as Promise<T>;
-}