refactor: 前端视觉重构 — Layout/HeadMenu 骨架、SummaryCards 合并、Card 分组、Drawer 概览重设计

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

@@ -31,11 +31,11 @@ styles.css SHALL 定义 10 级可用率色阶 CSS 自定义属性，使用项目
 - **THEN** 色阶 SHALL 从红色（0-30%）经橙色（30-60%）过渡到绿色（60-100%）
 
 ### Requirement: 辅助工具类
-styles.css SHALL 定义前端组件复用的工具类。
+styles.css SHALL 定义前端组件复用的工具类，包含页面布局相关类。
 
 #### Scenario: 文本禁用色类
 - **WHEN** 延迟列无数据需要显示占位符
-- **THEN** 组件 SHALL 使用 `.text-disabled` 类（color: `--td-text-color-disabled`），不使用内联 style
+- **THEN** 组件 SHALL 使用 `.text-disabled` 类（color: `--td-text-color-disabled`）
 
 #### Scenario: 等宽数字类
 - **WHEN** 数值需要等宽显示
@@ -43,26 +43,70 @@ styles.css SHALL 定义前端组件复用的工具类。
 
 #### Scenario: 延迟色值类
 - **WHEN** 延迟数值渲染
-- **THEN** 组件 SHALL 使用 `.latency-ok`（color: `--td-success-color`）、`.latency-warn`（color: `--td-warning-color`）或 `.latency-error`（color: `--td-error-color`）类，不使用内联 style
+- **THEN** 组件 SHALL 使用 `.latency-ok`、`.latency-warn` 或 `.latency-error` 类
+
+#### Scenario: 延迟值容器类
+- **WHEN** 延迟数值需要固定宽度对齐
+- **THEN** 组件 SHALL 使用 `.latency-value` 类（display: inline-block; min-width: 7ch; white-space: nowrap）
 
 #### Scenario: 全宽布局类
 - **WHEN** 组件需要占满父容器宽度
-- **THEN** 组件 SHALL 使用 `.full-width` 类（width: 100%），不使用内联 style
+- **THEN** 组件 SHALL 使用 `.full-width` 类（width: 100%）
 
 #### Scenario: 可点击表格类
 - **WHEN** PrimaryTable 行支持点击交互
-- **THEN** 表格 SHALL 使用 `.clickable-table` 类（cursor: pointer），不使用内联 style
+- **THEN** 表格 SHALL 使用 `.clickable-table` 类（cursor: pointer）
 
 #### Scenario: Tab 面板内边距类
 - **WHEN** Drawer 内 Tabs 面板需要内边距
-- **THEN** TabPanel SHALL 使用 `className="tab-panel-padded"` prop 传入类名，不通过入侵 TDesign 内部类名覆盖
+- **THEN** TabPanel SHALL 使用 `className="tab-panel-padded"` prop 传入类名
+
+#### Scenario: 内容区居中类
+- **WHEN** Dashboard 内容区需要居中且限制最大宽度
+- **THEN** 内容区 SHALL 使用 `.dashboard-content` 类（max-width: 1400px; margin: 0 auto; padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl)）
+
+#### Scenario: 页面背景色
+- **WHEN** Dashboard 页面渲染
+- **THEN** `.dashboard` 类 SHALL 设置 background: var(--td-bg-color-page)，min-height: 100vh，width: 100%
+
+#### Scenario: 品牌标识类
+- **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: SummaryCard 居中类
+- **WHEN** SummaryCards 内 Statistic 需要居中
+- **THEN** Statistic 所在的 Col SHALL 使用 `.summary-stat-col` 类（text-align: center）
+
+#### Scenario: SummaryCards 行间距类
+- **WHEN** SummaryCards 容器需要与下方内容保持间距
+- **THEN** 容器 SHALL 使用 `.summary-cards-row` 类（margin-bottom: var(--td-comp-margin-xl)）
+
+#### Scenario: Drawer 时间控件单行类
+- **WHEN** Drawer 时间选择器需要单行布局
+- **THEN** 控件容器 SHALL 使用 `.drawer-time-controls` 类（display: flex; align-items: center; gap: var(--td-comp-margin-m); width: 100%），日期选择器 SHALL 使用 `.drawer-date-range` 类（flex: 1; min-width: 360px）
+
+#### Scenario: Drawer 时间控件响应式
+- **WHEN** 视口宽度 ≤ 768px
+- **THEN** `.drawer-time-controls` SHALL 启用 flex-wrap，`.drawer-date-range` min-width 改为 100%
+
+#### Scenario: 概览统计卡片类
+- **WHEN** Drawer 概览统计区渲染
+- **THEN** 统计卡片 SHALL 使用 `.overview-stat-card` 类（background: var(--td-bg-color-container-hover)），内部项 SHALL 使用 `.overview-stat-item` 类（display: flex; align-items: center; justify-content: space-between），数值 SHALL 使用 `.overview-stat-value` 类（font-size: var(--td-font-size-body-medium); text-align: right）
 
 ### Requirement: 异常行背景类
-styles.css SHALL 定义 DOWN 行的背景色，使用安全选择器且不使用 `!important`。
+styles.css SHALL 定义 DOWN 行的背景色和左侧竖线，使用安全选择器且不使用 `!important`。
 
 #### Scenario: DOWN 行背景色
 - **WHEN** 表格行标记为 DOWN 状态
-- **THEN** 行 SHALL 通过 `.t-table tr.row-down` 选择器获得浅红色背景（引用 `--td-error-color-light` token），不使用 `!important`
+- **THEN** 行 SHALL 通过 `.t-table tr.row-down` 选择器获得浅红色背景
+
+#### Scenario: DOWN 行左侧竖线
+- **WHEN** 表格行标记为 DOWN 状态
+- **THEN** 行 SHALL 通过 `.t-table tr.row-down` 选择器获得 `border-left: 3px solid var(--td-error-color)`
 
 #### Scenario: DOWN 行 hover 状态
 - **WHEN** 鼠标悬停在 DOWN 行上