lanyuanxiaoyao
76b47006fe
- frontend-architecture-refactor: 拆分 hooks/组件、类型筛选器动态化 - http-checker-quality-hardening: ReDoS 防护、failure 格式修正、测试补全
35 lines
2.3 KiB
Markdown
35 lines
2.3 KiB
Markdown
## 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 中前端目录结构和组件清单
|