lanyuanxiaoyao/DiAL
1
0
Fork 0
Code Activity
Files
f8d563c668ab8d62fd4a94842e40a0aadbfff910
DiAL/openspec/changes/responsive-resizable-drawer/proposal.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

2.0 KiB
Raw Blame History

Why

目标详情 Drawer 当前使用固定比例宽度，在宽屏下会占用过多横向空间，在窄屏下又容易压缩内容可读性。将宽度改为响应式默认值并支持用户拖拽调整，可以让详情查看在不同屏幕尺寸下更自然，同时保留用户对临时阅读空间的控制。

What Changes

  • 将目标详情 Drawer 从固定宽度改为按视口宽度响应式设置默认宽度：宽屏占比更小，窄屏占比更大。
  • 启用 TDesign Drawer 原生拖拽调整能力，允许用户通过拖动 Drawer 边缘在当前页面生命周期内调整宽度。
  • 为拖拽宽度设置最小值和最大值，避免内容不可读或 Drawer 超出视口安全范围。
  • 不持久化用户拖拽后的宽度到 localStorage、后端或其他跨刷新存储；页面刷新后恢复响应式默认宽度。
  • 将概览面板"统计"区域指标卡片从左右布局改为上下布局（与 Dashboard SummaryCards 一致），提升窄屏下的视觉体验。
  • 同步更新目标详情 Drawer 的规格、实现说明和测试要求。

Capabilities

New Capabilities

  • 无

Modified Capabilities

  • target-detail-drawer: Drawer 宽度要求从固定比例改为响应式默认宽度，并新增当前页面生命周期内的边缘拖拽调整行为和不持久化约束。
  • css-utility-classes: 移除 .overview-stat-item 和 .overview-stat-value 类，概览统计卡片改为复用 .summary-stat-col 实现上下居中布局。

Impact

  • 影响 src/web/components/TargetDetailDrawer.tsx 的 Drawer size、sizeDraggable 和拖拽结束处理。
  • 需要在 src/web/styles.css 中新增响应式宽度 CSS 变量和断点规则。
  • 需要更新 tests/web/components/TargetDetailDrawer.test.tsx，覆盖响应式宽度配置和拖拽能力。
  • 需要更新 openspec/specs/target-detail-drawer/spec.md 对应 delta spec，并同步 DEVELOPMENT.md 中组件说明。
  • 不影响后端 API、数据模型、配置文件和运行时依赖。
View Git Blame Copy Permalink