lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
f8d563c668ab8d62fd4a94842e40a0aadbfff910
DiAL/openspec/changes/responsive-resizable-drawer/tasks.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.6 KiB
Raw Blame History

1. Drawer 宽度实现

  • 1.1 为 TargetDetailDrawer 的 Drawer 添加业务 className，并将 size 改为响应式默认宽度 CSS 变量
  • 1.2 使用 TDesign Drawer sizeDraggable 启用鼠标边缘拖拽，并配置基于视口安全范围的 min 和 max 边界
  • 1.3 确保拖拽后的宽度不写入 localStorage、URL、后端或其他跨刷新存储，并保持现有 Drawer 生命周期行为

2. 样式与文档

  • 2.1 在 src/web/styles.css 中定义目标详情 Drawer 响应式默认宽度变量和断点规则
  • 2.2 更新 DEVELOPMENT.md 中 TargetDetailDrawer 固定宽度描述为响应式默认宽度和拖拽调整
  • 2.3 检查 README.md 是否涉及该前端交互说明；若无需更新，在实现结果中说明原因

3. 测试与验证

  • 3.1 更新 tests/web/components/TargetDetailDrawer.test.tsx，覆盖 Drawer 响应式 size 配置、sizeDraggable 边界和不持久化约束
  • 3.2 运行 bun run verify，确保 schema、类型检查、lint、测试和构建全部通过

4. Apply 后修补

  • 4.1 将统计卡片改为上下布局（复用 Statistic title/value + .summary-stat-col），移除 .overview-stat-item/.overview-stat-value CSS 类
  • 4.2 调大 Drawer 各断点默认宽度（86/82/68/58/50vw），最窄屏从 calc(100vw - 24px) 调为 calc(100vw - 16px)
  • 4.3 Drawer header 间距从 size={8} 调为 size={12}
  • 4.4 同步回写变更文档（design.md 断点数值、proposal.md 卡片布局、新增 css-utility-classes delta spec、target-detail-drawer delta spec 补充概览面板布局）
View Git Blame Copy Permalink