lanyuanxiaoyao
88f4119a4e
Drawer 宽度从固定百分比改为按视口响应式默认值（6段断点），宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力，配置 min/max 视口安全边界，不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局（与 SummaryCards 一致），提升窄屏视觉体验。 Drawer header 间距调大，MutationObserver polyfill 补全。
24 lines
1.6 KiB
Markdown
24 lines
1.6 KiB
Markdown
## 1. Drawer 宽度实现
|
||
|
||
- [x] 1.1 为 `TargetDetailDrawer` 的 Drawer 添加业务 `className`，并将 `size` 改为响应式默认宽度 CSS 变量
|
||
- [x] 1.2 使用 TDesign Drawer `sizeDraggable` 启用鼠标边缘拖拽，并配置基于视口安全范围的 `min` 和 `max` 边界
|
||
- [x] 1.3 确保拖拽后的宽度不写入 `localStorage`、URL、后端或其他跨刷新存储，并保持现有 Drawer 生命周期行为
|
||
|
||
## 2. 样式与文档
|
||
|
||
- [x] 2.1 在 `src/web/styles.css` 中定义目标详情 Drawer 响应式默认宽度变量和断点规则
|
||
- [x] 2.2 更新 `DEVELOPMENT.md` 中 `TargetDetailDrawer` 固定宽度描述为响应式默认宽度和拖拽调整
|
||
- [x] 2.3 检查 `README.md` 是否涉及该前端交互说明；若无需更新，在实现结果中说明原因
|
||
|
||
## 3. 测试与验证
|
||
|
||
- [x] 3.1 更新 `tests/web/components/TargetDetailDrawer.test.tsx`，覆盖 Drawer 响应式 `size` 配置、`sizeDraggable` 边界和不持久化约束
|
||
- [x] 3.2 运行 `bun run verify`，确保 schema、类型检查、lint、测试和构建全部通过
|
||
|
||
## 4. Apply 后修补
|
||
|
||
- [x] 4.1 将统计卡片改为上下布局（复用 `Statistic` title/value + `.summary-stat-col`），移除 `.overview-stat-item`/`.overview-stat-value` CSS 类
|
||
- [x] 4.2 调大 Drawer 各断点默认宽度（86/82/68/58/50vw），最窄屏从 `calc(100vw - 24px)` 调为 `calc(100vw - 16px)`
|
||
- [x] 4.3 Drawer header 间距从 `size={8}` 调为 `size={12}`
|
||
- [x] 4.4 同步回写变更文档（design.md 断点数值、proposal.md 卡片布局、新增 css-utility-classes delta spec、target-detail-drawer delta spec 补充概览面板布局）
|