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,31 @@
## 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、数据模型、配置文件和运行时依赖。