1
0
Files
DiAL/openspec/changes/responsive-resizable-drawer/specs/css-utility-classes/spec.md
lanyuanxiaoyao 88f4119a4e feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化
Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。

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

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

Drawer header 间距调大,MutationObserver polyfill 补全。
2026-05-15 23:10:08 +08:00

15 lines
1.1 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
## MODIFIED Requirements
### Requirement: 辅助工具类
styles.css SHALL 定义前端组件复用的工具类,包含页面布局相关类。
#### Scenario: 概览统计卡片类
- **WHEN** Drawer 概览统计区渲染
- **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` 类。
## REMOVED Requirements
### Requirement: 概览统计卡片内部项与数值类定义
**Reason**: 概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),不再需要自定义的 `.overview-stat-item``.overview-stat-value` flex 左右布局类。
**Migration**: 使用 TDesign Statistic 组件的 `title` prop 设置标题、`value` prop 设置数值,搭配 `.summary-stat-col` 类实现居中。`.overview-stat-card` 类保留用于卡片背景和内边距。