1
0

feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化

Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。

启用 TDesign sizeDraggable 原生拖拽调整能力,配置 min/max 视口安全边界,不持久化拖拽宽度。

概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),提升窄屏视觉体验。

Drawer header 间距调大,MutationObserver polyfill 补全。
This commit is contained in:
2026-05-15 23:10:08 +08:00
parent c46ab14cce
commit 88f4119a4e
14 changed files with 331 additions and 49 deletions

View File

@@ -103,7 +103,7 @@ styles.css SHALL 定义前端组件复用的工具类,包含页面布局相关
#### 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
- **THEN** 统计卡片 SHALL 使用 `.overview-stat-card`background: var(--td-bg-color-container-hover)并使用 TDesign Statistic 组件自带的上下布局title 在上、value 在下),通过 `.summary-stat-col`text-align: center实现内容居中。系统 SHALL NOT 使用已移除的 `.overview-stat-item``.overview-stat-value` 类。
### Requirement: 异常行背景类
styles.css SHALL 定义 DOWN 行的背景色和左侧竖线,使用安全选择器且不使用 `!important`