DiAL/openspec/changes/frontend-architecture-refactor/proposal.md

Why

前端代码经过多轮功能迭代后，出现了 hook 职责过重（useTargetDetail.ts 承载全部数据层）、组件体积膨胀（TargetDetailDrawer 228 行混合多种逻辑）、类型筛选器与后端硬编码重复维护等架构问题。需要通过拆分、动态化和测试补齐来提升可维护性，使新增 checker 类型时前端零改动。

What Changes

• 拆分 hooks/useTargetDetail.ts 为 use-queries.ts（全局查询）和 use-target-detail.ts（Drawer 状态管理）
• 拆分 TargetDetailDrawer.tsx 为 Drawer 壳、OverviewTab.tsx、HistoryTab.tsx 三个组件
• 将 HISTORY_COLUMNS 移至 constants/history-table-columns.tsx
• 提取统计计算逻辑为 utils/stats.ts 纯函数
• 后端新增 GET /api/meta 端点，返回 checkerTypes 列表
• 前端新增 useMeta() hook 消费 meta API，动态生成类型筛选器
• BREAKING 删除 constants/target-type-display.ts，前端直接使用 type 原始文本，不再做 label 转换
• 列定义从静态常量改为工厂函数 createTargetTableColumns(checkerTypes)
• 修复小问题：StatusDonut key、StatusBar 硬编码、TrendChart 冗余 prop、统计计算 useMemo
• 补充前端测试：utils/time.ts、utils/stats.ts、动态列生成

Capabilities

New Capabilities

• meta-api: 后端 meta 信息 API，提供 checker 类型列表等运行时元数据

Modified Capabilities

• target-type-display: 移除前端静态映射，改为直接使用后端返回的 type 原始文本，筛选器列表由 meta API 动态驱动
• tanstack-query-data-layer: hook 文件拆分为 use-queries.ts 和 use-target-detail.ts，新增 useMeta() 查询
• target-detail-drawer: 组件拆分为 Drawer 壳 + OverviewTab + HistoryTab，统计计算提取为纯函数
• target-table: 列定义从静态常量改为工厂函数，接收动态 checkerTypes 参数；类型列直接显示 type 原始文本

Impact

• 后端：新增 src/server/routes/meta.ts、src/shared/api.ts 增加 MetaResponse 类型、app.ts 注册路由
• 前端：hooks/components/constants 目录结构调整，删除 target-type-display.ts
• 测试：删除 target-type-display.test.ts，新增 time.test.ts、stats.test.ts，更新 target-table-filters.test.ts
• 文档：更新 DEVELOPMENT.md 中前端目录结构和组件清单