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

@@ -0,0 +1,23 @@
## 1. Drawer 宽度实现
- [x] 1.1 为 `TargetDetailDrawer` 的 Drawer 添加业务 `className`,并将 `size` 改为响应式默认宽度 CSS 变量
- [x] 1.2 使用 TDesign Drawer `sizeDraggable` 启用鼠标边缘拖拽,并配置基于视口安全范围的 `min``max` 边界
- [x] 1.3 确保拖拽后的宽度不写入 `localStorage`、URL、后端或其他跨刷新存储并保持现有 Drawer 生命周期行为
## 2. 样式与文档
- [x] 2.1 在 `src/web/styles.css` 中定义目标详情 Drawer 响应式默认宽度变量和断点规则
- [x] 2.2 更新 `DEVELOPMENT.md``TargetDetailDrawer` 固定宽度描述为响应式默认宽度和拖拽调整
- [x] 2.3 检查 `README.md` 是否涉及该前端交互说明;若无需更新,在实现结果中说明原因
## 3. 测试与验证
- [x] 3.1 更新 `tests/web/components/TargetDetailDrawer.test.tsx`,覆盖 Drawer 响应式 `size` 配置、`sizeDraggable` 边界和不持久化约束
- [x] 3.2 运行 `bun run verify`,确保 schema、类型检查、lint、测试和构建全部通过
## 4. Apply 后修补
- [x] 4.1 将统计卡片改为上下布局(复用 `Statistic` title/value + `.summary-stat-col`),移除 `.overview-stat-item`/`.overview-stat-value` CSS 类
- [x] 4.2 调大 Drawer 各断点默认宽度86/82/68/58/50vw最窄屏从 `calc(100vw - 24px)` 调为 `calc(100vw - 16px)`
- [x] 4.3 Drawer header 间距从 `size={8}` 调为 `size={12}`
- [x] 4.4 同步回写变更文档design.md 断点数值、proposal.md 卡片布局、新增 css-utility-classes delta spec、target-detail-drawer delta spec 补充概览面板布局)