67 lines
5.0 KiB
Markdown
67 lines
5.0 KiB
Markdown
# 自动化配置工作区重构
|
||
|
||
## 目标
|
||
|
||
把原本偏小、依赖整窗滚动的自动化弹窗改成可连续完成“事件与条件 → 车辆范围 → 执行动作 → 测试并发布”的近全屏工作区。桌面端让步骤、当前表单、实时摘要和主操作同屏；移动端固定步骤与操作区，只滚动当前表单。
|
||
|
||
## 设计与实现证据
|
||
|
||
- `automation-editor-desktop-concept.png`：使用内置 Image Gen 生成并选定的 1440 × 900 高保真设计基准。
|
||
- `automation-editor-desktop-implementation.png`：真实 React / Semi UI 在 1440 × 900 的桌面实现。
|
||
- `automation-editor-mobile-implementation.png`：真实页面在 390 × 844 的移动实现。
|
||
|
||
内置 Image Gen 最终提示以 `ui-mockup` 为用途，要求近全屏弹窗、固定头尾、四步横向导航、左侧当前表单、右侧 320px 实时摘要，并明确禁止小型居中弹窗、卡片墙、渐变、装饰图和可见外层滚动条。
|
||
|
||
## 实现结果
|
||
|
||
- 桌面弹窗由最多 1068px 扩展为最多 1360px，视口四周保留 12px 安全边距；最大高度使用 `100dvh - 24px`。
|
||
- 弹窗头部、步骤导航和底部操作区固定；常规数值规则在 1440 × 900 无需滚动即可完成第一步。
|
||
- 左侧表单只在围栏地图或车辆长列表等确有需要时独立滚动；右侧摘要始终保持可见。
|
||
- 四个触发类型在桌面改为单行排列，减少无意义纵向占用。
|
||
- 校验和保存错误进入固定底部操作区，不再隐藏在滚动内容末端。
|
||
- 移动端高度提升到最多 `96dvh`；步骤导航由两行 112px 压缩为单行 58px，页面本身不滚动，当前表单是唯一滚动容器。
|
||
- 移动端摘要保留紧凑标题，隐藏重复的三段明细与发布说明；完整摘要仍在测试发布步骤呈现。
|
||
- 自动化搜索、状态、协议与选中规则写入 URL；刷新、分享和前进/后退可以恢复工作位置。
|
||
- 筛选隐藏当前规则时自动修复为首个可见规则；没有匹配项时清空详情，避免“列表为空但仍显示旧规则”的幽灵详情。
|
||
|
||
## Fidelity ledger
|
||
|
||
| 检查项 | 概念要求 | 实现结果 |
|
||
| --- | --- | --- |
|
||
| 工作区尺寸 | 接近填满 1440 × 900 | 已实现；1360 × 876，四周 12px |
|
||
| 信息同屏 | 步骤、表单、摘要、操作同屏 | 已实现；桌面第一步无需滚动 |
|
||
| 滚动边界 | 外层不滚动，长内容局部滚动 | 已实现；桌面页面 900/900，移动页面 844/844 |
|
||
| 表单效率 | 四触发类型单行，字段双列 | 已实现；常规规则首屏完整 |
|
||
| 实时摘要 | 约 320px、持续可见 | 已实现；桌面 320px × 545px |
|
||
| 固定操作 | 取消、上一步、下一步持续可见 | 已实现；桌面与移动均固定在底部 |
|
||
| 移动导航 | 紧凑步骤与单一内容滚动 | 已实现；58px 单行步骤，表单局部滚动 |
|
||
| 视觉系统 | 白、冷灰、克制蓝、细边框 | 已实现；沿用平台与 Semi UI 令牌 |
|
||
| 路由恢复 | 配置入口外的工作位置可分享 | 已实现；筛选和选中规则由 URL 驱动 |
|
||
|
||
实现与概念在主要结构、密度、尺寸、固定边界和视觉层级上忠实一致，没有实质性偏差。
|
||
|
||
## 首屏文案对比
|
||
|
||
- 概念使用“数值或状态 / 车辆静止 / 车辆离线”；实现保留领域内更精确的“数值触发 / 长时间静止 / 长时间离线”。
|
||
- 概念使用“大于”；实现继续显示 API 契约操作符 `>`，避免编辑与事件契约出现两套语义。
|
||
- 概念使用“60 秒”；实现同时显示输入值 `60` 与格式化辅助文本“1 分钟”，便于直接编辑又便于理解。
|
||
|
||
## 有意差异
|
||
|
||
- 实现保留现有平台导航与真实表单控件，不复制概念图中的装饰性触发图标。
|
||
- 移动端不常驻完整实时摘要，因为它会重复当前表单信息并增加约 300px 滚动；紧凑标题与最终测试摘要仍保留。
|
||
- 围栏地图、车辆快捷选择属于真实长内容，允许左侧当前表单独立滚动，不能为追求“零滚动”裁剪功能。
|
||
|
||
## 验证
|
||
|
||
- `AlertsPage.test.tsx`：35 项测试通过，包括创建入口、四步流程、移动 bottom sheet、桌面 review、URL 恢复、幽灵详情修复和未保存草稿保护。
|
||
- 事件中心与历史页定向回归：63 项测试全部通过；全量前端 75 个文件 / 442 项测试通过；生产构建及发布资产校验通过。
|
||
- 桌面 1440 × 900：弹窗 1360 × 876；左侧表单 `scrollHeight = clientHeight = 543`；页面无纵向滚动；切换车辆范围后底部操作与摘要位置不变。
|
||
- 移动 390 × 844：弹层 390 × 810；步骤栏 58px；页面无纵向滚动；第一步当前表单只需 127px 局部滚动。
|
||
- 桌面与移动均实际填写名称并进入“车辆范围”，步骤标题、固定操作区和摘要/导航位置保持稳定。
|
||
- 概念图和两张实现截图均以原始分辨率复核。
|
||
|
||
## Image Gen 说明
|
||
|
||
设计基准使用内置 Image Gen 模式生成，没有使用 CLI 回退。最终项目资产保存在本目录的 `automation-editor-desktop-concept.png`。
|