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

1.1 KiB
Raw Blame History

MODIFIED Requirements

Requirement: 辅助工具类

styles.css SHALL 定义前端组件复用的工具类,包含页面布局相关类。

Scenario: 概览统计卡片类

  • WHEN Drawer 概览统计区渲染
  • THEN 统计卡片 SHALL 使用 .overview-stat-cardbackground: var(--td-bg-color-container-hover)),并使用 TDesign Statistic 组件自带的上下布局title 在上、value 在下),通过 .summary-stat-coltext-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 类保留用于卡片背景和内边距。