refactor: 前端性能优化 — 倒计时组件隔离、React memoization 链路

- 新建 RefreshCountdown 组件，内部持有 timer，消除 App 每秒重渲染
- TargetBoard 分组逻辑 useMemo 化，避免 targets 引用不变时重复计算
- TargetGroup 加 React.memo，阻断无效渲染
- TrendChart 加 React.memo + chartData useMemo，避免 recharts 不必要重绘
- OverviewTab 统计项去掉 Card 包裹，改用纯 CSS 实现视觉效果
- 同步更新 refresh-control 和 target-detail-drawer spec

性能提升：消除每秒全组件树重渲染，减少 DOM 节点数

src/web/app.tsx

@@ -1,15 +1,14 @@
 import type { SkeletonProps } from "tdesign-react";
 
-import { useEffect, useState } from "react";
-import { RefreshIcon } from "tdesign-icons-react";
-import { Alert, Button, Layout, Menu, RadioGroup, Skeleton, Typography } from "tdesign-react";
+import { useState } from "react";
+import { Alert, Layout, Menu, RadioGroup, Skeleton } from "tdesign-react";
 
+import { RefreshCountdown } from "./components/RefreshCountdown";
 import { SummaryCards } from "./components/SummaryCards";
 import { TargetBoard } from "./components/TargetBoard";
 import { TargetDetailDrawer } from "./components/TargetDetailDrawer";
 import { useDashboard } from "./hooks/use-queries";
 import { useTargetDetail } from "./hooks/use-target-detail";
-import { formatCountdown } from "./utils/time";
 
 const { Content, Header } = Layout;
 const DEFAULT_REFRESH_INTERVAL_MS = 30000;
@@ -27,7 +26,6 @@ const REFRESH_OPTIONS = [
 ] as const;
 
 export function App() {
-  const [now, setNow] = useState(() => new Date());
   const [refreshInterval, setRefreshInterval] = useState(DEFAULT_REFRESH_INTERVAL_MS);
   const dashboardRefetchInterval = refreshInterval === 0 ? false : refreshInterval;
   const {
@@ -54,27 +52,12 @@ export function App() {
     timeTo,
   } = useTargetDetail();
   const isManualRefresh = refreshInterval === 0;
-  const nextRefreshSeconds =
-    dashboardUpdatedAt > 0 && !isManualRefresh
-      ? Math.max(0, Math.ceil((dashboardUpdatedAt + refreshInterval - now.getTime()) / 1000))
-      : null;
-  const refreshText =
-    dashboardUpdatedAt > 0
-      ? dashboardFetching && !dashboardLoading
-        ? "刷新中..."
-        : formatCountdown(nextRefreshSeconds ?? 0)
-      : "等待首次刷新";
 
   const handleIntervalChange = (value: number) => {
     void refetchDashboard();
     setRefreshInterval(value);
   };
 
-  useEffect(() => {
-    const timer = window.setInterval(() => setNow(new Date()), 1000);
-    return () => window.clearInterval(timer);
-  }, []);
-
   return (
     <Layout className="dashboard">
       <Header>
@@ -95,19 +78,13 @@ export function App() {
                 variant="default-filled"
               />
               <span className="dashboard-countdown">
-                {isManualRefresh ? (
-                  <Button
-                    aria-label="刷新 Dashboard"
-                    disabled={dashboardFetching}
-                    icon={<RefreshIcon />}
-                    loading={dashboardFetching}
-                    onClick={() => void refetchDashboard()}
-                    shape="circle"
-                    variant="outline"
-                  />
-                ) : (
-                  <Typography.Text theme="secondary">{refreshText}</Typography.Text>
-                )}
+                <RefreshCountdown
+                  dashboardUpdatedAt={dashboardUpdatedAt}
+                  isFetching={dashboardFetching && !dashboardLoading}
+                  isManualRefresh={isManualRefresh}
+                  onRefresh={() => void refetchDashboard()}
+                  refreshInterval={refreshInterval}
+                />
               </span>
             </div>
           }