lanyuanxiaoyao
f48e39a615
- 卡片式布局改为分组 PrimaryTable，Modal 改为 Drawer - 手写 hooks 替换为 TanStack Query（轮询/缓存/条件查询） - CSS 607行精简至73行，颜色迁移至 TDesign tokens - 可用率进度条颜色按 10% 一档红→绿渐变 - 新增纯函数测试 34 项全通过（排序/筛选/色阶阈值） - 同步更新主 specs 并归档变更文档
80 lines
2.9 KiB
Markdown
80 lines
2.9 KiB
Markdown
## Purpose
|
||
|
||
定义 TanStack Query 数据层：QueryClient 配置、queryKey 工厂、轮询策略、条件查询和开发调试面板。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: TanStack Query 数据层
|
||
前端 SHALL 使用 TanStack Query（@tanstack/react-query）管理所有 API 请求，替代手写 fetch hooks。
|
||
|
||
#### Scenario: QueryClient 配置
|
||
- **WHEN** 应用启动
|
||
- **THEN** 系统 SHALL 创建 QueryClient，默认配置 retry=1、refetchOnWindowFocus=true、staleTime=5000
|
||
|
||
#### Scenario: QueryClientProvider 挂载
|
||
- **WHEN** 应用渲染
|
||
- **THEN** 根组件 SHALL 包裹在 QueryClientProvider 中，提供 QueryClient 实例
|
||
|
||
### Requirement: queryKey 工厂
|
||
系统 SHALL 提供统一的 queryKey 工厂函数，确保 queryKey 的唯一性和一致性。
|
||
|
||
#### Scenario: summary queryKey
|
||
- **WHEN** 查询 summary 数据
|
||
- **THEN** queryKey SHALL 为 ["summary"]
|
||
|
||
#### Scenario: targets queryKey
|
||
- **WHEN** 查询 targets 数据
|
||
- **THEN** queryKey SHALL 为 ["targets"]
|
||
|
||
#### Scenario: trend queryKey
|
||
- **WHEN** 查询某目标的趋势数据
|
||
- **THEN** queryKey SHALL 为 ["trend", targetId, from, to]
|
||
|
||
#### Scenario: history queryKey
|
||
- **WHEN** 查询某目标的历史记录
|
||
- **THEN** queryKey SHALL 为 ["history", targetId, from, to, page]
|
||
|
||
### Requirement: Summary 轮询查询
|
||
系统 SHALL 使用 useQuery 实现总览统计的自动轮询。
|
||
|
||
#### Scenario: summary 自动轮询
|
||
- **WHEN** Dashboard 页面处于打开状态
|
||
- **THEN** 系统 SHALL 每 8 秒自动请求 /api/summary，使用 refetchInterval=8000
|
||
|
||
#### Scenario: summary 后台刷新
|
||
- **WHEN** 页面处于后台标签页
|
||
- **THEN** 系统 SHALL 暂停轮询（refetchIntervalInBackground=false）
|
||
|
||
### Requirement: Targets 轮询查询
|
||
系统 SHALL 使用 useQuery 实现目标列表的自动轮询。
|
||
|
||
#### Scenario: targets 自动轮询
|
||
- **WHEN** Dashboard 页面处于打开状态
|
||
- **THEN** 系统 SHALL 每 8 秒自动请求 /api/targets，使用 refetchInterval=8000
|
||
|
||
### Requirement: 条件查询
|
||
趋势和历史记录查询 SHALL 使用 enabled 条件控制，仅在目标被选中时触发。
|
||
|
||
#### Scenario: 未选中目标时不请求
|
||
- **WHEN** 用户未点击任何目标表格行
|
||
- **THEN** trend 和 history 的 useQuery SHALL enabled=false，不发起请求
|
||
|
||
#### Scenario: 选中目标时自动请求
|
||
- **WHEN** 用户点击目标表格行
|
||
- **THEN** trend 和 history 的 useQuery SHALL enabled=true，自动发起请求
|
||
|
||
#### Scenario: 时间范围变化时重新请求
|
||
- **WHEN** 用户更改时间范围
|
||
- **THEN** trend 和 history 的 useQuery SHALL 因 queryKey 变化自动重新请求
|
||
|
||
### Requirement: 开发调试面板
|
||
开发环境下 SHALL 挂载 TanStack Query Devtools。
|
||
|
||
#### Scenario: 开发环境显示 Devtools
|
||
- **WHEN** 应用在开发模式下运行
|
||
- **THEN** 页面 SHALL 显示 ReactQueryDevtools 浮动面板
|
||
|
||
#### Scenario: 生产环境排除 Devtools
|
||
- **WHEN** 应用在生产模式下构建
|
||
- **THEN** ReactQueryDevtools SHALL 不被包含在产物中
|