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:
@@ -1,6 +1,6 @@
|
||||
## Purpose
|
||||
|
||||
定义 Dashboard 页面骨架布局:顶部导航栏(含品牌标识和刷新倒计时)、内容区域居中与最大宽度、页面背景色。
|
||||
定义 Dashboard 页面骨架布局:顶部导航栏(含品牌标识和刷新频率选择器/倒计时控件)、内容区域居中与最大宽度、页面背景色。
|
||||
|
||||
## Requirements
|
||||
|
||||
@@ -13,21 +13,13 @@ Dashboard SHALL 使用 TDesign Layout 组件体系构建页面骨架,包含顶
|
||||
|
||||
#### Scenario: 顶部导航栏
|
||||
- **WHEN** Dashboard 页面渲染
|
||||
- **THEN** `Layout.Header` SHALL 内嵌 TDesign `HeadMenu` 组件,`logo` prop 渲染品牌名 "DiAL" 和副标题 "统一拨测平台"(水平排列),`operations` prop 渲染数据刷新倒计时文字
|
||||
- **THEN** `Layout.Header` SHALL 内嵌 TDesign `HeadMenu` 组件,`logo` prop 渲染品牌名 "DiAL" 和副标题 "统一拨测平台"(水平排列),`operations` prop 渲染刷新频率选择器和倒计时/刷新按钮组合控件
|
||||
|
||||
#### Scenario: 刷新倒计时
|
||||
- **WHEN** Dashboard 数据已成功获取(dataUpdatedAt > 0)
|
||||
- **THEN** HeadMenu operations 区域 SHALL 展示刷新倒计时文本(如"下一次刷新:5秒"),使用 TDesign Typography.Text(theme="secondary"),基于 React Query `dataUpdatedAt` 和轮询间隔常量计算
|
||||
#### Scenario: 刷新控制区域
|
||||
- **WHEN** Dashboard 页面渲染
|
||||
- **THEN** HeadMenu operations 区域 SHALL 包含 RadioGroup 刷新频率选择器和倒计时文本(或手动刷新按钮),两者水平排列并垂直居中
|
||||
|
||||
#### Scenario: 刷新中状态
|
||||
- **WHEN** Dashboard 正在重新获取数据(isFetching=true 且 isLoading=false)
|
||||
- **THEN** 刷新倒计时文本 SHALL 展示为"刷新中..."
|
||||
|
||||
#### Scenario: 首次加载状态
|
||||
- **WHEN** Dashboard 尚未获取过数据(dataUpdatedAt = 0)
|
||||
- **THEN** 刷新倒计时文本 SHALL 展示为"等待首次刷新"
|
||||
|
||||
#### Scenario: 刷新倒计时位置
|
||||
#### Scenario: 刷新控制区域位置
|
||||
- **WHEN** HeadMenu 渲染
|
||||
- **THEN** operations 区域 SHALL 使用右侧 margin 向内收缩,避免紧贴浏览器右边缘
|
||||
|
||||
|
||||
Reference in New Issue
Block a user