## 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)`,内容卡片浮于浅灰背景之上