5.0 KiB
5.0 KiB
自动化配置工作区重构
目标
把原本偏小、依赖整窗滚动的自动化弹窗改成可连续完成“事件与条件 → 车辆范围 → 执行动作 → 测试并发布”的近全屏工作区。桌面端让步骤、当前表单、实时摘要和主操作同屏；移动端固定步骤与操作区，只滚动当前表单。
设计与实现证据
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。