1
0

feat: Dashboard 刷新频率可配置 — RadioGroup 选择器、动态轮询间隔、手动刷新按钮

- useDashboard hook 改为接受 refetchInterval 动态参数,移除固定 8 秒常量
- Header operations 区域重构为 RadioGroup(手动/10秒/30秒/1分钟/5分钟)+ 倒计时/刷新按钮
- 新增 formatCountdown 工具函数及单元测试
- 新增 .dashboard-refresh-control 和 .dashboard-countdown CSS 类
- 同步更新 DEVELOPMENT.md、README.md、主 specs
This commit is contained in:
2026-05-14 18:03:42 +08:00
parent c61a4a6091
commit 9904f198aa
12 changed files with 176 additions and 44 deletions

View File

@@ -554,7 +554,7 @@ main.tsx
└── ErrorBoundaryReact 错误边界)
└── QueryClientProviderTanStack Query 全局挂载)
├── App根组件Layout + HeadMenu 骨架)
│ ├── useDashboard() ─── GET /api/dashboard?window=24h&recentLimit=308s 轮询dataUpdatedAt 倒计时
│ ├── useDashboard(refreshInterval) ─── GET /api/dashboard?window=24h&recentLimit=30动态刷新间隔RadioGroup 频率选择 + 倒计时/手动刷新按钮
│ ├── SummaryCards单 Card 内嵌居中 Statistic无 shadow
│ └── TargetBoard目标列表Space 24px 间距)
│ ├── DashboardResponse.targets
@@ -573,12 +573,12 @@ main.tsx
```
hooks/use-queries.ts全局面板级查询
├── queryKeysdashboard/meta/metrics 结构化 query key
├── useDashboard() → /api/dashboard?window=24h&recentLimit=308s 自动轮询
├── useDashboard(refetchInterval) → /api/dashboard?window=24h&recentLimit=30动态刷新间隔,由调用方传入
├── useTargetMetrics() → /api/targets/:id/metrics详情按需加载
└── useMeta() → /api/metastaleTime: Infinity
hooks/use-target-detail.tsDrawer 状态与详情级条件查询)
├── 内部复用 useDashboard() 的缓存来查找 selectedTarget
├── 内部复用 useDashboard(false) 的缓存来查找 selectedTarget
├── useTargetMetrics(/api/targets/:id/metrics)条件查询enabled 仅当 Drawer 打开且时间范围有效)
└── useQuery(/api/targets/:id/history)(条件查询:含分页)
```
@@ -608,7 +608,7 @@ const queryKeys = {
useQuery({
queryKey: queryKeys.dashboard(),
queryFn: () => fetchJson<DashboardResponse>("/api/dashboard?window=24h&recentLimit=30"),
refetchInterval: 8000, // 自动轮询间隔
refetchInterval, // 由调用方传入的动态刷新间隔false 禁用轮询)
refetchIntervalInBackground: false, // 切后台不轮询
});