lanyuanxiaoyao
88f4119a4e
Drawer 宽度从固定百分比改为按视口响应式默认值（6段断点），宽屏占比更小、窄屏占比更大。 启用 TDesign sizeDraggable 原生拖拽调整能力，配置 min/max 视口安全边界，不持久化拖拽宽度。 概览统计卡片改为 TDesign Statistic 上下布局（与 SummaryCards 一致），提升窄屏视觉体验。 Drawer header 间距调大，MutationObserver polyfill 补全。
63 lines
3.9 KiB
Markdown
63 lines
3.9 KiB
Markdown
## MODIFIED Requirements
|
||
|
||
### Requirement: 目标详情 Drawer
|
||
Dashboard SHALL 在用户点击目标表格行后从右侧滑出 Drawer，展示该目标的详细统计信息和检查记录。Drawer 标题栏和内容不使用内联 style。Drawer 内容 SHALL 拆分为独立的 Tab 组件，并优先通过 TDesign Drawer 原生生命周期能力控制显示、隐藏和滚动穿透。
|
||
|
||
#### Scenario: 打开 Drawer
|
||
- **WHEN** 用户点击某个目标表格行
|
||
- **THEN** 系统 SHALL 从右侧滑出 Drawer（placement="right"），使用响应式默认宽度，并将当前 Tab 重置为"概览"
|
||
|
||
#### Scenario: Drawer 标题栏
|
||
- **WHEN** Drawer 渲染
|
||
- **THEN** 标题栏 SHALL 使用 TDesign Space 组件（align="center"）布局，包含 StatusDot、目标名称（TDesign Typography.Text strong）和类型标签（TDesign Tag，直接显示 target.type 原始文本），以及内建关闭按钮。不使用内联 style 的 flex 布局
|
||
|
||
#### Scenario: 关闭 Drawer
|
||
- **WHEN** 用户点击关闭按钮、ESC 键或遮罩层
|
||
- **THEN** Drawer SHALL 关闭并通过 TDesign Drawer 的 `visible` 状态隐藏
|
||
|
||
#### Scenario: Drawer 无底部按钮
|
||
- **WHEN** Drawer 渲染
|
||
- **THEN** Drawer SHALL 不显示底部操作栏（footer={false}）
|
||
|
||
#### Scenario: Drawer 数据同步
|
||
- **WHEN** Drawer 打开期间后台轮询刷新了 targets 数据
|
||
- **THEN** Drawer 中 selectedTarget 的状态 SHALL 随之同步更新
|
||
|
||
#### Scenario: 切换目标重置 Tab
|
||
- **WHEN** 用户从目标 A 切换到目标 B（点击不同的表格行）
|
||
- **THEN** Drawer SHALL 通过受控 Tab 状态重置为概览 Tab，且 MUST NOT 使用 `key={target.id}` 强制重建 Drawer 子树
|
||
|
||
#### Scenario: Drawer 内容区间距
|
||
- **WHEN** Drawer 内容渲染
|
||
- **THEN** 时间选择器、Tabs 等区块之间的间距 SHALL 通过 TDesign Space 组件（direction="vertical", size={16}）统一管理，不使用内联 style 的 marginBottom
|
||
|
||
### Requirement: Drawer 宽度
|
||
Drawer 宽度 SHALL 根据视口宽度设置响应式默认值，并 SHALL 支持用户通过鼠标拖拽边缘在当前页面生命周期内调整宽度。系统 MUST NOT 将拖拽后的宽度持久化到 `localStorage`、后端、URL 或其他跨刷新存储。
|
||
|
||
#### Scenario: Drawer 响应式默认宽度
|
||
- **WHEN** Drawer 打开且用户尚未在当前页面生命周期内拖拽调整宽度
|
||
- **THEN** Drawer size SHALL 使用响应式默认宽度，宽屏时占视口比例 SHALL 小于窄屏时占视口比例，且窄屏下 SHALL 不超过视口安全宽度
|
||
|
||
#### Scenario: Drawer 边缘拖拽宽度
|
||
- **WHEN** 用户使用鼠标拖动右侧 Drawer 的左边缘
|
||
- **THEN** Drawer SHALL 通过 TDesign Drawer 原生拖拽能力调整宽度，不通过自定义全局鼠标事件实现拖拽
|
||
|
||
#### Scenario: Drawer 拖拽边界
|
||
- **WHEN** 用户拖拽调整 Drawer 宽度
|
||
- **THEN** Drawer 宽度 SHALL 被限制在最小可读宽度和视口安全最大宽度之间，避免内容不可读或横向溢出
|
||
|
||
#### Scenario: Drawer 当前页面生命周期内保留拖拽宽度
|
||
- **WHEN** 用户拖拽调整 Drawer 宽度后关闭并再次打开 Drawer，且页面未刷新、组件未重新挂载
|
||
- **THEN** Drawer SHALL 保留当前页面生命周期内的拖拽后宽度
|
||
|
||
#### Scenario: Drawer 拖拽宽度不持久化
|
||
- **WHEN** 页面刷新后用户再次打开 Drawer
|
||
- **THEN** Drawer SHALL 恢复响应式默认宽度，且 MUST NOT 从 `localStorage`、后端、URL 或其他跨刷新存储恢复拖拽宽度
|
||
|
||
### Requirement: 概览面板
|
||
概览 Tab SHALL 按区域展示基本信息、多维度统计和趋势图。
|
||
|
||
#### Scenario: 统计区上下布局卡片
|
||
- **WHEN** 概览面板渲染且有统计数据
|
||
- **THEN** 面板 SHALL 在"统计"区域使用 4 列 × 2 行的 Row/Col 布局，每个统计项使用 `overview-stat-card` 包裹，内部使用 TDesign Statistic 组件自带的上下布局（title 在上、value 在下），通过 `summary-stat-col` 类居中。系统 SHALL NOT 使用已移除的 `overview-stat-item` 左右 flex 布局
|