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

openspec/specs/target-detail-drawer/spec.md

@@ -5,7 +5,7 @@
 ## Requirements
 
 ### Requirement: 目标详情 Drawer
-Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。Drawer 标题栏和内容不使用内联 style。
+Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。Drawer 标题栏和内容不使用内联 style。Drawer 内容 SHALL 拆分为独立的 Tab 组件。
 
 #### Scenario: 打开 Drawer
 - **WHEN** 用户点击某个目标表格行
@@ -13,7 +13,7 @@ Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示
 
 #### Scenario: Drawer 标题栏
 - **WHEN** Drawer 渲染
-- **THEN** 标题栏 SHALL 使用 TDesign Space 组件（align="center"）布局，包含 StatusDot、目标名称（TDesign Typography.Text strong）和类型标签（TDesign Tag），以及内建关闭按钮。不使用内联 style 的 flex 布局
+- **THEN** 标题栏 SHALL 使用 TDesign Space 组件（align="center"）布局，包含 StatusDot、目标名称（TDesign Typography.Text strong）和类型标签（TDesign Tag，直接显示 target.type 原始文本），以及内建关闭按钮。不使用内联 style 的 flex 布局
 
 #### Scenario: 关闭 Drawer
 - **WHEN** 用户点击关闭按钮、ESC 键或遮罩层
@@ -35,6 +35,65 @@ Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示
 - **WHEN** Drawer 内容渲染
 - **THEN** 时间选择器、Tabs 等区块之间的间距 SHALL 通过 TDesign Space 组件（direction="vertical", size={16}）统一管理，不使用内联 style 的 marginBottom
 
+### Requirement: 概览面板组件化
+概览 Tab SHALL 作为独立组件 `OverviewTab` 实现，接收数据 props 进行渲染。
+
+#### Scenario: OverviewTab 组件职责
+- **WHEN** 概览 Tab 渲染
+- **THEN** `OverviewTab` 组件 SHALL 负责统计卡片、趋势图、状态分布环形图和基本信息的渲染
+
+#### Scenario: 统计计算使用纯函数
+- **WHEN** OverviewTab 需要计算 totalChecks、upChecks、downChecks
+- **THEN** 计算逻辑 SHALL 通过 `utils/stats.ts` 中的纯函数实现，并使用 `useMemo` 缓存结果
+
+#### Scenario: OverviewTab props
+- **WHEN** OverviewTab 渲染
+- **THEN** 组件 SHALL 接收 `target: TargetStatus`、`trendData: TrendPoint[]`、`trendLoading: boolean` 作为 props
+
+### Requirement: 记录面板组件化
+记录 Tab SHALL 作为独立组件 `HistoryTab` 实现。
+
+#### Scenario: HistoryTab 组件职责
+- **WHEN** 记录 Tab 渲染
+- **THEN** `HistoryTab` 组件 SHALL 负责检查结果表格和分页的渲染
+
+#### Scenario: HistoryTab props
+- **WHEN** HistoryTab 渲染
+- **THEN** 组件 SHALL 接收 `historyData: HistoryResponse`、`historyLoading: boolean`、`onPageChange: (page: number) => void` 作为 props
+
+#### Scenario: 历史记录列定义外置
+- **WHEN** HistoryTab 渲染表格
+- **THEN** 列定义 SHALL 从 `constants/history-table-columns.tsx` 导入，不在组件内部定义
+
+### Requirement: TrendChart 简化
+TrendChart 组件 SHALL 仅接收数据 props，不处理 loading 状态。
+
+#### Scenario: TrendChart 无 loading prop
+- **WHEN** TrendChart 渲染
+- **THEN** 组件 SHALL 仅接收 `data: TrendPoint[]` prop，不接收 `loading` prop
+
+#### Scenario: TrendChart 空数据
+- **WHEN** TrendChart 接收空数组
+- **THEN** 组件 SHALL 显示"暂无趋势数据"占位文本
+
+### Requirement: StatusDonut key 修复
+StatusDonut 组件 SHALL 使用语义化的 key。
+
+#### Scenario: Pie Cell key
+- **WHEN** StatusDonut 渲染 Pie Cell 列表
+- **THEN** 每个 Cell 的 key SHALL 使用 data item 的 `name` 字段，不使用数组索引
+
+### Requirement: StatusBar 参数化
+StatusBar 组件 SHALL 支持可配置的格数。
+
+#### Scenario: maxSlots prop
+- **WHEN** StatusBar 渲染
+- **THEN** 组件 SHALL 接收可选的 `maxSlots` prop（默认 30），根据该值渲染对应数量的格子
+
+#### Scenario: 格子渲染逻辑
+- **WHEN** StatusBar 渲染且 samples 数量少于 maxSlots
+- **THEN** 多余的格子 SHALL 显示为 empty 状态
+
 ### Requirement: 时间范围选择器
 Drawer SHALL 在 Tabs 外层提供时间范围选择器，影响概览和记录两个面板的数据。时间选择器 SHALL 分两行显示：第一行为快捷按钮，第二行为日期时间范围选择器。