## 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: Header 右侧操作区 - **WHEN** Dashboard 页面渲染 - **THEN** HeadMenu operations 区域 SHALL 包含主题模式 RadioGroup、刷新频率 RadioGroup 和倒计时文本(或手动刷新按钮),三者水平排列并垂直居中 #### Scenario: 主题选择器位置 - **WHEN** HeadMenu operations 区域渲染 - **THEN** 主题模式 RadioGroup SHALL 位于刷新频率 RadioGroup 前面 #### Scenario: Header 右侧操作区位置 - **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)`,内容卡片浮于当前 TDesign 主题背景之上 ### Requirement: Header 版本号展示 Dashboard SHALL 在顶部导航栏品牌区域展示当前运行实例的应用版本号,版本号 SHALL 使用 `/api/meta` 返回的 `version` 字段,并以 `v` 前缀显示。 #### Scenario: Meta 数据已加载 - **WHEN** Dashboard 成功获取 `/api/meta` 且返回 `version: "0.1.0"` - **THEN** Header 品牌区域 SHALL 展示 `v0.1.0` #### Scenario: Meta 数据尚未加载或请求失败 - **WHEN** Dashboard 尚未获取到有效 `version` - **THEN** Header SHALL 保持可用并省略版本号占位,不影响品牌名、主题模式选择器、刷新频率选择器和倒计时/刷新按钮渲染 #### Scenario: 版本号视觉层级 - **WHEN** Header 展示版本号 - **THEN** 版本号 SHALL 使用次级文本样式弱展示,不得使用内联 style、硬编码色值、`!important` 或覆盖 TDesign 内部类名