feat: Drawer 响应式默认宽度与拖拽调整,统计卡片上下布局优化
Drawer 宽度从固定百分比改为按视口响应式默认值(6段断点),宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力,配置 min/max 视口安全边界,不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局(与 SummaryCards 一致),提升窄屏视觉体验。 Drawer header 间距调大,MutationObserver polyfill 补全。
This commit is contained in:
31
openspec/changes/responsive-resizable-drawer/proposal.md
Normal file
31
openspec/changes/responsive-resizable-drawer/proposal.md
Normal 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、数据模型、配置文件和运行时依赖。
|
||||
Reference in New Issue
Block a user