1
0

feat: 优化目标详情 Drawer 性能 — TDesign 生命周期控制、Tab 感知延迟加载、滚动穿透修复

This commit is contained in:
2026-05-15 00:53:41 +08:00
parent 9904f198aa
commit 28e46b8431
7 changed files with 204 additions and 62 deletions

View File

@@ -91,19 +91,27 @@
- **THEN** 系统 SHALL 按用户选择的刷新间隔自动请求数据,轮询间隔与 summary 查询保持一致
### Requirement: 条件查询
趋势和历史记录查询 SHALL 使用 enabled 条件控制,仅在目标被选中时触发。
详情指标和历史记录查询 SHALL 使用 enabled 条件控制。指标查询 SHALL 在目标和时间范围有效时触发;历史记录查询 SHALL 仅在目标、时间范围有效且"记录"Tab 激活后触发。
#### Scenario: 未选中目标时不请求
- **WHEN** 用户未点击任何目标表格行
- **THEN** trend 和 history 的 useQuery SHALL enabled=false不发起请求
- **THEN** metrics 和 history 的 useQuery SHALL enabled=false不发起请求
#### Scenario: 选中目标时自动请求
- **WHEN** 用户点击目标表格行
- **THEN** trend 和 history 的 useQuery SHALL enabled=true自动发起请求
#### Scenario: 打开 Drawer 默认只请求指标
- **WHEN** 用户点击目标表格行并打开 Drawer
- **THEN** metrics 的 useQuery SHALL enabled=true 并自动发起请求,history 的 useQuery SHALL enabled=false 且不发起请求
#### Scenario: 时间范围变化时重新请求
- **WHEN** 用户更改时间范围
- **THEN** trend 和 history 的 useQuery SHALL 因 queryKey 变化自动重新请求
#### Scenario: 激活记录 Tab 时请求历史记录
- **WHEN** 用户切换到"记录"Tab 且目标与时间范围有效
- **THEN** history 的 useQuery SHALL enabled=true并请求当前页码对应的 `/api/targets/:id/history` 数据
#### Scenario: 概览 Tab 时间范围变化时不请求历史记录
- **WHEN** 用户在"概览"Tab 修改时间范围
- **THEN** metrics 的 useQuery SHALL 因 queryKey 变化自动重新请求history 的 useQuery SHALL 保持 enabled=false 且不发起请求
#### Scenario: 记录 Tab 时间范围变化时重新请求历史记录
- **WHEN** 用户在"记录"Tab 修改时间范围
- **THEN** metrics 和 history 的 useQuery SHALL 因 queryKey 变化自动重新请求,并将 history 页码重置为 1
### Requirement: 开发调试面板
开发环境下 SHALL 挂载 TanStack Query Devtools。