lanyuanxiaoyao
86b8cf1950
- 新建 RefreshCountdown 组件，内部持有 timer，消除 App 每秒重渲染 - TargetBoard 分组逻辑 useMemo 化，避免 targets 引用不变时重复计算 - TargetGroup 加 React.memo，阻断无效渲染 - TrendChart 加 React.memo + chartData useMemo，避免 recharts 不必要重绘 - OverviewTab 统计项去掉 Card 包裹，改用纯 CSS 实现视觉效果 - 同步更新 refresh-control 和 target-detail-drawer spec 性能提升：消除每秒全组件树重渲染，减少 DOM 节点数
85 lines
3.7 KiB
Markdown
85 lines
3.7 KiB
Markdown
## Purpose
|
||
|
||
定义 Header 刷新频率选择器组件的交互行为：频率切换、倒计时显示、手动刷新按钮、布局稳定性。
|
||
|
||
## Requirements
|
||
|
||
### Requirement: 刷新频率选择器
|
||
HeadMenu operations 区域 SHALL 提供 RadioGroup 组件供用户选择刷新频率。
|
||
|
||
#### Scenario: RadioGroup 渲染
|
||
- **WHEN** Dashboard 页面渲染
|
||
- **THEN** HeadMenu operations 区域 SHALL 显示 RadioGroup（theme="button", variant="default-filled"），选项为：手动、10秒、30秒、1分钟、5分钟
|
||
|
||
#### Scenario: 默认选中
|
||
- **WHEN** 页面首次加载
|
||
- **THEN** RadioGroup SHALL 默认选中"30秒"
|
||
|
||
#### Scenario: 切换频率立即刷新
|
||
- **WHEN** 用户切换刷新频率选项
|
||
- **THEN** 系统 SHALL 立即触发一次数据刷新，然后应用新的刷新间隔
|
||
|
||
### Requirement: 倒计时显示
|
||
RadioGroup 右侧 SHALL 显示距下次自动刷新的倒计时文本。倒计时逻辑 SHALL 封装在独立的 `RefreshCountdown` 组件中，App 组件 SHALL NOT 持有每秒更新的 `now` state。
|
||
|
||
#### Scenario: RefreshCountdown 组件封装
|
||
- **WHEN** Dashboard 页面渲染
|
||
- **THEN** 倒计时显示 SHALL 由独立的 `RefreshCountdown` 组件负责，该组件内部持有 `now` state 和每秒 `setInterval`，渲染边界限制在该组件内部
|
||
|
||
#### Scenario: RefreshCountdown props
|
||
- **WHEN** RefreshCountdown 组件渲染
|
||
- **THEN** 组件 SHALL 接收 `dashboardUpdatedAt: number`、`refreshInterval: number`、`isFetching: boolean`、`isManualRefresh: boolean`、`onRefresh: () => void` 作为 props
|
||
|
||
#### Scenario: 短时间格式
|
||
- **WHEN** 距下次刷新剩余时间小于 60 秒
|
||
- **THEN** 倒计时 SHALL 显示为"xx秒"格式（如"26秒"）
|
||
|
||
#### Scenario: 长时间格式
|
||
- **WHEN** 距下次刷新剩余时间大于等于 60 秒
|
||
- **THEN** 倒计时 SHALL 显示为"x分x秒"格式（如"4分30秒"）
|
||
|
||
#### Scenario: 无前缀
|
||
- **WHEN** 倒计时显示
|
||
- **THEN** 倒计时文本 SHALL 不包含任何前缀（如"下一次刷新："），直接显示时间
|
||
|
||
#### Scenario: 刷新中状态
|
||
- **WHEN** 数据正在刷新（isFetching=true 且 isLoading=false）
|
||
- **THEN** 倒计时文本 SHALL 显示为"刷新中..."
|
||
|
||
### Requirement: App 组件渲染隔离
|
||
App 组件 SHALL NOT 持有任何高频更新的 state（如每秒更新的时钟），确保 App 的重渲染频率与数据刷新频率一致（默认 30 秒一次）。
|
||
|
||
#### Scenario: App 无 now state
|
||
- **WHEN** App 组件渲染
|
||
- **THEN** App SHALL NOT 包含 `useState` 管理的时钟 state，也 SHALL NOT 包含每秒触发的 `setInterval`
|
||
|
||
#### Scenario: App 重渲染频率
|
||
- **WHEN** Dashboard 处于自动刷新模式
|
||
- **THEN** App 组件的重渲染 SHALL 仅由 TanStack Query 的 refetch 触发（频率等于用户选择的刷新间隔），而非每秒触发
|
||
|
||
### Requirement: 手动刷新按钮
|
||
选择"手动"模式时，倒计时区域 SHALL 替换为刷新按钮。
|
||
|
||
#### Scenario: 手动模式显示按钮
|
||
- **WHEN** 用户选择"手动"刷新频率
|
||
- **THEN** 倒计时区域 SHALL 替换为刷新图标按钮
|
||
|
||
#### Scenario: 点击刷新
|
||
- **WHEN** 用户点击刷新按钮
|
||
- **THEN** 系统 SHALL 触发一次数据刷新
|
||
|
||
#### Scenario: 刷新中禁用
|
||
- **WHEN** 数据正在刷新
|
||
- **THEN** 刷新按钮 SHALL 显示 loading 状态且 disabled，防止连续点击
|
||
|
||
### Requirement: 布局稳定性
|
||
倒计时/按钮容器 SHALL 保持布局稳定，避免内容变化导致的抖动。
|
||
|
||
#### Scenario: 数字等宽
|
||
- **WHEN** 倒计时数字变化
|
||
- **THEN** 容器 SHALL 使用 tabular-nums 字体特性，确保数字等宽不抖动
|
||
|
||
#### Scenario: 格式切换不抖动
|
||
- **WHEN** 倒计时在"秒"和"分秒"格式间切换
|
||
- **THEN** 容器 SHALL 使用 min-width 确保最小宽度，避免 RadioGroup 位移
|