refactor: 前端视觉重构 — Layout/HeadMenu 骨架、SummaryCards 合并、Card 分组、Drawer 概览重设计

DEVELOPMENT.md

@@ -541,7 +541,7 @@ CommandChecker.execute → 收集观测(exitCode/stdout/stderr/durationMs)
 | 语言   | TypeScript 6                                        | 类型安全                     |
 | UI 库  | TDesign React + tdesign-icons-react                 | UI 组件与图标                |
 | 数据层 | TanStack Query (React Query) + React Query Devtools | 服务端状态管理与自动轮询     |
-| 图表   | Recharts                                            | 拨测趋势折线图与状态环状图   |
+| 图表   | Recharts                                            | 拨测趋势折线图               |
 | 路由   | 无（单页面 Dashboard）                              | 仅需 Drawer/Tab 做页面内导航 |
 
 **不引入的依赖**：React Router（单页面场景不需要）、状态管理库（TanStack Query 即服务端状态层，组件内用 `useState` 足够）、Vite（已由 Bun 原生 fullstack 替代）
@@ -553,17 +553,17 @@ main.tsx
 └── StrictMode
     └── ErrorBoundary（React 错误边界）
         └── QueryClientProvider（TanStack Query 全局挂载）
-            ├── App（根组件）
-            │   ├── useDashboard() ─── GET /api/dashboard?window=24h&recentLimit=30（8s 轮询）
-            │   ├── SummaryCards（总览统计卡片）
-            │   └── TargetBoard（目标列表）
+            ├── App（根组件，Layout + HeadMenu 骨架）
+            │   ├── useDashboard() ─── GET /api/dashboard?window=24h&recentLimit=30（8s 轮询，dataUpdatedAt 倒计时）
+            │   ├── SummaryCards（单 Card 内嵌居中 Statistic，无 shadow）
+            │   └── TargetBoard（目标列表，Space 24px 间距）
             │       ├── DashboardResponse.targets
             │       ├── useMeta() ───── GET /api/meta（应用生命周期内缓存）
-            │       └── TargetGroup[]（按 group 字段分组）
+            │       └── TargetGroup[]（Card 包裹 PrimaryTable，headerBordered）
             │           └── PrimaryTable ← createTargetTableColumns(checkerTypes)
-            │   └── TargetDetailDrawer（目标详情抽屉）
+            │   └── TargetDetailDrawer（目标详情抽屉，width=52%）
             │       └── useTargetDetail() ── 按需发起 metrics + history 查询
-            │           ├── OverviewTab → Statistic + TrendChart + StatusDonut + Descriptions
+            │           ├── OverviewTab → Descriptions（直接展示）+ 4×2 统计卡片 + TrendChart
             │           └── HistoryTab  → PrimaryTable（分页历史记录）
             └── ReactQueryDevtools（开发工具，仅开发环境）
 ```
@@ -679,21 +679,19 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
 
 #### 现有组件清单
 
-| 组件                 | 文件                                | 用途                                      |
-| -------------------- | ----------------------------------- | ----------------------------------------- |
-| `App`                | `app.tsx`                           | 根组件，编排全局状态与布局                |
-| `ErrorBoundary`      | `components/ErrorBoundary.tsx`      | React 错误边界，捕获渲染异常并展示降级 UI |
-| `SummaryCards`       | `components/SummaryCards.tsx`       | 总览统计卡片（全部/正常/异常）            |
-| `TargetBoard`        | `components/TargetBoard.tsx`        | 按分组渲染目标表格列表                    |
-| `TargetGroup`        | `components/TargetGroup.tsx`        | 单个分组标题 + PrimaryTable               |
-| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉壳、时间选择和 Tab 切换       |
-| `OverviewTab`        | `components/OverviewTab.tsx`        | 目标详情概览（统计/趋势/状态分布/信息）   |
-| `HistoryTab`         | `components/HistoryTab.tsx`         | 目标历史记录表格和分页                    |
-| `TrendChart`         | `components/TrendChart.tsx`         | Recharts 双轴折线图（耗时/可用率）        |
-| `StatusDonut`        | `components/StatusDonut.tsx`        | Recharts 环状图（UP/DOWN 分布）           |
-| `StatusDot`          | `components/StatusDot.tsx`          | 圆形状态指示点（绿/红）                   |
-| `StatusBar`          | `components/StatusBar.tsx`          | 最近采样状态条（多色块）                  |
-| `GroupHeader`        | `components/GroupHeader.tsx`        | 分组标题（名称 + 统计）                   |
+| 组件                 | 文件                                | 用途                                                        |
+| -------------------- | ----------------------------------- | ----------------------------------------------------------- |
+| `App`                | `app.tsx`                           | 根组件，Layout + HeadMenu 骨架、刷新倒计时、Skeleton 加载   |
+| `ErrorBoundary`      | `components/ErrorBoundary.tsx`      | React 错误边界，捕获渲染异常并展示降级 UI                   |
+| `SummaryCards`       | `components/SummaryCards.tsx`       | 总览统计卡片（单 Card 内嵌居中 Statistic，无 shadow）       |
+| `TargetBoard`        | `components/TargetBoard.tsx`        | 按分组渲染目标表格列表（Space 24px 间距）                   |
+| `TargetGroup`        | `components/TargetGroup.tsx`        | 单个分组 Card（title+actions+headerBordered）+ PrimaryTable |
+| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉（width=52%）、时间选择器单行布局和 Tab 切换    |
+| `OverviewTab`        | `components/OverviewTab.tsx`        | 目标详情概览（Descriptions 直接展示 + 4×2 统计卡片 + 趋势） |
+| `HistoryTab`         | `components/HistoryTab.tsx`         | 目标历史记录表格和分页                                      |
+| `TrendChart`         | `components/TrendChart.tsx`         | Recharts 双轴折线图（耗时/可用率）                          |
+| `StatusDot`          | `components/StatusDot.tsx`          | 圆形状态指示点（绿/红）                                     |
+| `StatusBar`          | `components/StatusBar.tsx`          | 最近采样状态条（多色块 + Tooltip 提示时间和状态）           |
 
 ### 2.5 新增功能开发步骤