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

openspec/specs/css-utility-classes/spec.md

@@ -73,9 +73,13 @@ styles.css SHALL 定义前端组件复用的工具类，包含页面布局相关
 - **WHEN** HeadMenu logo 区域渲染品牌名和副标题
 - **THEN** 品牌 SHALL 使用 `.dashboard-brand` 类（display: inline-flex; align-items: baseline; gap: var(--td-comp-margin-s)），品牌名 SHALL 使用 `.dashboard-logo` 类（font-size: calc(var(--td-font-size-title-large) + 6px); font-weight: 700），副标题 SHALL 使用 `.dashboard-subtitle` 类（font-size: var(--td-font-size-body-medium); color: var(--td-text-color-secondary)）
 
-#### Scenario: 刷新状态类
-- **WHEN** HeadMenu operations 区域渲染刷新倒计时
-- **THEN** 容器 SHALL 使用 `.dashboard-refresh-status` 类（display: inline-flex; align-items: center; margin-right: var(--td-comp-margin-xxl)）
+#### Scenario: 刷新控制区域类
+- **WHEN** HeadMenu operations 区域渲染刷新频率选择器和倒计时/按钮
+- **THEN** 容器 SHALL 使用 `.dashboard-refresh-control` 类（display: inline-flex; align-items: center; gap: var(--td-comp-margin-s); margin-right: var(--td-comp-margin-xxl)）
+
+#### Scenario: 倒计时文本类
+- **WHEN** 倒计时文本或刷新按钮渲染
+- **THEN** 容器 SHALL 使用 `.dashboard-countdown` 类（display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; min-width: 5ch），确保数字等宽且格式切换不抖动
 
 #### Scenario: SummaryCard 居中类
 - **WHEN** SummaryCards 内 Statistic 需要居中

openspec/specs/dashboard-layout/spec.md

@@ -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 向内收缩，避免紧贴浏览器右边缘
 

openspec/specs/refresh-control/spec.md

@@ -0,0 +1,65 @@
+## 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 显示距下次自动刷新的倒计时文本。
+
+#### 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: 手动刷新按钮
+选择"手动"模式时，倒计时区域 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 位移

openspec/specs/tanstack-query-data-layer/spec.md

@@ -71,9 +71,13 @@
 ### Requirement: Summary 轮询查询
 系统 SHALL 使用 useQuery 实现总览统计的自动轮询。
 
-#### Scenario: summary 自动轮询
+#### Scenario: summary 动态轮询间隔
 - **WHEN** Dashboard 页面处于打开状态
-- **THEN** 系统 SHALL 每 8 秒自动请求 /api/summary，使用 refetchInterval=8000
+- **THEN** 系统 SHALL 按用户选择的刷新间隔自动请求数据，`useDashboard` hook SHALL 接受 `refetchInterval` 参数（`false | number`），由调用方传入
+
+#### Scenario: summary 禁用自动轮询
+- **WHEN** 用户选择"手动"刷新模式
+- **THEN** `useDashboard` SHALL 接收 `refetchInterval: false`，禁用自动轮询
 
 #### Scenario: summary 后台刷新
 - **WHEN** 页面处于后台标签页
@@ -82,9 +86,9 @@
 ### Requirement: Targets 轮询查询
 系统 SHALL 使用 useQuery 实现目标列表的自动轮询。
 
-#### Scenario: targets 自动轮询
+#### Scenario: targets 动态轮询间隔
 - **WHEN** Dashboard 页面处于打开状态
-- **THEN** 系统 SHALL 每 8 秒自动请求 /api/targets，使用 refetchInterval=8000
+- **THEN** 系统 SHALL 按用户选择的刷新间隔自动请求数据，轮询间隔与 summary 查询保持一致
 
 ### Requirement: 条件查询
 趋势和历史记录查询 SHALL 使用 enabled 条件控制，仅在目标被选中时触发。