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: 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 内部类名