DiAL/openspec/specs/dashboard-layout/spec.md

Purpose

定义 Dashboard 页面骨架布局：顶部导航栏（含品牌标识和刷新倒计时）、内容区域居中与最大宽度、页面背景色。

Requirements

Requirement: 页面骨架布局

Dashboard SHALL 使用 TDesign Layout 组件体系构建页面骨架，包含顶部导航栏和内容区域。

Scenario: Layout 结构

• WHEN Dashboard 页面渲染
• THEN 页面 SHALL 使用 TDesign Layout 组件包裹 Layout.Header 和 Layout.Content

Scenario: 顶部导航栏

• WHEN Dashboard 页面渲染
• 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 正在重新获取数据（isFetching=true 且 isLoading=false）
• THEN 刷新倒计时文本 SHALL 展示为"刷新中..."

Scenario: 首次加载状态

• WHEN Dashboard 尚未获取过数据（dataUpdatedAt = 0）
• THEN 刷新倒计时文本 SHALL 展示为"等待首次刷新"

Scenario: 刷新倒计时位置

• WHEN HeadMenu 渲染
• THEN operations 区域 SHALL 使用右侧 margin 向内收缩，避免紧贴浏览器右边缘

Scenario: 内容区域居中

• WHEN Dashboard 内容区渲染
• THEN Layout.Content 内部 SHALL 使用 CSS 类限制最大宽度（max-width: 1400px）并水平居中

Scenario: 页面背景色

• WHEN Dashboard 页面渲染
• THEN 页面背景色 SHALL 使用 var(--td-bg-color-page)，内容卡片浮于浅灰背景之上