lanyuanxiaoyao
88f4119a4e
Drawer 宽度从固定百分比改为按视口响应式默认值（6段断点），宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力，配置 min/max 视口安全边界，不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局（与 SummaryCards 一致），提升窄屏视觉体验。 Drawer header 间距调大，MutationObserver polyfill 补全。
32 lines
2.0 KiB
Markdown
32 lines
2.0 KiB
Markdown
## 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、数据模型、配置文件和运行时依赖。
|