feat: expand vehicle data platform capabilities
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.0 MiB |
@@ -0,0 +1,106 @@
|
||||
# 事件中心生产重构 Design QA
|
||||
|
||||
## Automation Editor Fidelity Correction — 2026-07-22
|
||||
|
||||
- reported issue: the production implementation opened desktop automation creation/editing in a full-height right SideSheet, while the selected source uses a centered modal.
|
||||
- source: `automation-editor-desktop.png` (`1487 × 1058`, edit/review state after a successful sample test).
|
||||
- implementation: `qa/automation-editor-modal-final-desktop.png` (`1487 × 1058`, the same edit/review/test-success state).
|
||||
- combined comparison: `qa/compare-automation-editor-modal-final.png`, source left and implementation right, inspected at original detail.
|
||||
- focused geometry: centered `1068 × 936` modal at the source viewport; at `1280 × 720` it remains centered and contracts to `1068 × 672` without document overflow.
|
||||
- interaction: existing desktop automations open directly in review/test mode; create/template flows enter editable configuration first; publishing is disabled until the sample event test succeeds; mobile retains the bottom SideSheet.
|
||||
- accessibility: the dialog, configuration summary, sample event test, execution trace, close control, edit controls and publishing controls all have stable accessible names.
|
||||
- verification: `AlertsPage.test.tsx` passed `15 / 15`; TypeScript, Vite production build and artifact gate passed.
|
||||
- production release: `automation-modal-fidelity-20260722145249`; ECS Web archive SHA-256 matched locally/remotely, the atomic Web installer passed its asset smoke, authenticated health reported this exact release, and the platform plus both alert evaluators remained active.
|
||||
- intentional deviation: the footer uses `返回编辑` instead of the source's `保存草稿`, because the current API has no draft lifecycle and the UI does not pretend to persist one.
|
||||
- pass history: P1 right-SideSheet mismatch fixed; P2 close-button alignment and unresolved modal color-token issue found during comparison, fixed and rechecked.
|
||||
|
||||
final result: passed
|
||||
|
||||
- selected direction: A「事件收件箱」
|
||||
- product model: `Event → Automation → Execution → Delivery`
|
||||
- protocol scope: `GB32960`、`JT808`、`YUTONG_MQTT`
|
||||
- local prototype: `http://127.0.0.1:20301/alerts`
|
||||
- browser method: Codex in-app Browser / IAB
|
||||
- desktop viewport: `1487 × 1058`
|
||||
- mobile viewport: `390 × 844`
|
||||
|
||||
## Visual Evidence
|
||||
|
||||
| Surface | Source | Implementation | Combined comparison |
|
||||
| --- | --- | --- | --- |
|
||||
| Event inbox | `event-inbox-desktop.png` | `qa/event-inbox-desktop.png` | `qa/compare-event-inbox.png` |
|
||||
| Automation workspace | `automation-workspace-desktop.png` | `qa/automation-workspace-desktop.png` | `qa/compare-automation-workspace.png` |
|
||||
| Delivery audit | `notification-audit-desktop.png` | `qa/notification-audit-desktop.png` | `qa/compare-notification-audit.png` |
|
||||
| Automation editor | `automation-editor-desktop.png` | `qa/automation-editor-modal-final-desktop.png` | `qa/compare-automation-editor-modal-final.png` |
|
||||
| Mobile event list | `event-inbox-mobile.png` | `qa/event-inbox-mobile.png` | same-viewport visual review |
|
||||
| Mobile event detail | `event-inbox-mobile.png` | `qa/event-detail-mobile.png` | same-viewport visual review |
|
||||
|
||||
All paths are relative to this directory. Every combined comparison was inspected at original detail with the source on the left and implementation on the right.
|
||||
|
||||
## Fidelity Ledger
|
||||
|
||||
| Surface | Required fidelity | Implementation evidence | Result |
|
||||
| --- | --- | --- | --- |
|
||||
| Information architecture | The default task is to triage events, with automations and notification records as adjacent workspaces. | Text tabs preserve one clear primary task; the event stream is the default view. | Passed |
|
||||
| Event contract | Alerts must be abstracted into canonical events independent of protocol. | Event rows and detail expose canonical event type, category, source protocol, source identifier, occurred/received timestamps, automation and execution state. | Passed |
|
||||
| Event inbox | Operators need scan-first density and a stable inspector. | Compact table, semantic status tabs, selected-row state and a fixed `400px` inspector match the chosen direction. | Passed |
|
||||
| Triage actions | Acknowledgement, completion and ignore must stay reachable. | Sticky footer actions remain visible at desktop `720px` height and in the mobile full-height sheet. | Passed |
|
||||
| Automation model | Configuration should read as “when / if / then”. | Split workspace and four-step editor cover event trigger, conditions, actions, sample test and publish. | Passed |
|
||||
| Execution evidence | Every event needs automation and execution traceability. | Inspector presents event facts, original event fields and execution timeline without mixing them into the list. | Passed |
|
||||
| Delivery audit | Notification is a delivery result, not the event itself. | Independent delivery table and inspector expose channel, recipient, attempts, provider message ID, read state and delivery timeline. | Passed |
|
||||
| Responsive continuity | Mobile must retain the same task model and actions. | `390 × 844` list and detail states use a full-height sheet, no horizontal overflow and visible actions. | Passed |
|
||||
| Visual system | Reuse the existing product shell and Semi UI semantics. | Existing logo, navigation, typography, blue selection, neutral surfaces and red/orange/green status colors are preserved. | Passed |
|
||||
|
||||
## Interaction And Accessibility Checks
|
||||
|
||||
- Search, protocol filters, advanced filters, status tabs, reset and refresh are functional and keyboard-reachable.
|
||||
- Event rows expose an accessible detail action; inspector and editor provide named close controls.
|
||||
- Automation selection, edit, enable state and publish flow are connected to the existing API contract.
|
||||
- Notification records support filter, mark-all-read and per-delivery inspection.
|
||||
- Mobile list and detail have zero horizontal overflow at `390 × 844`.
|
||||
- Canonical event tests, page interaction tests and production-entry tests passed `30 / 30`.
|
||||
- Go API tests passed with `go test ./...`.
|
||||
- Production build and route byte gate passed; vehicle route is `29,999` bytes against the `30,000` byte limit.
|
||||
|
||||
## Source-to-Implementation Comparison
|
||||
|
||||
1. Both use the same shell, cool-gray canvas, white work surfaces and brand-blue selection.
|
||||
2. Both keep text tabs above a table-led event inbox, rather than competing dashboard cards.
|
||||
3. Both use a narrow right inspector and preserve context while moving between events.
|
||||
4. Both use semantic status color only for state and urgency, not decoration.
|
||||
5. Both keep the event action bar anchored at the bottom of the inspector.
|
||||
6. The implementation intentionally moves time range and scope into advanced filters to reduce the first-row query burden.
|
||||
7. The implementation adds an explicit “全部事件” status tab and names the source column “协议”, improving discoverability for the three-protocol product.
|
||||
8. The implementation turns the editor from a visual summary into a complete, editable four-step production form while preserving the selected visual hierarchy.
|
||||
|
||||
## Copy Differences
|
||||
|
||||
- “告警中心” becomes “事件中心” across the product surface.
|
||||
- “告警列表” becomes “事件流”; “告警规则” becomes “自动化”.
|
||||
- “通知” is consistently described as “通知记录 / 送达”, separating delivery from the event itself.
|
||||
- Technical labels use stable contract terms such as “事件类型”, “执行状态”, “来源协议” and “服务商消息 ID”.
|
||||
|
||||
## Intentional Deviations And Follow-up
|
||||
|
||||
- The current local mock backend predates the new API binary, so a local sample can still display `vehicle.geofence.changed`; the new API normalizes this to `vehicle.geofence.exited` after release.
|
||||
- The UI and contract support multiple delivery channels, while the current environment only has in-app delivery configured. Email, SMS or enterprise IM require provider credentials and are not simulated.
|
||||
- The remaining full-Web-suite failures are fourteen stale mileage-page copy assertions in unrelated worktree changes. The event-center test surface, Go suite and production build are green.
|
||||
|
||||
## Result
|
||||
|
||||
No open P0, P1 or P2 issue was found in the event-center desktop, mobile, automation-editor or delivery-audit flows.
|
||||
|
||||
## Production Release Evidence
|
||||
|
||||
- release: `event-center-production-20260722120255`
|
||||
- previous release: `event-center-simplified-20260722102200`
|
||||
- artifact verification: local and ECS SHA-256 matched for the Web archive and Linux API binary
|
||||
- release switch: immutable release directory plus atomic symlink switch; automatic rollback remained armed until all gates passed
|
||||
- Web smoke: `76` current assets and `117` compatibility assets verified byte-for-byte
|
||||
- authenticated health: `/api/ops/health` reported the exact new release
|
||||
- runtime: platform API, alert evaluator and alert stream evaluator all remained `active`
|
||||
- real event evidence: canonical events included `vehicle.connectivity.offline / connectivity / JT808 / pending` and the same event type from `YUTONG_MQTT`
|
||||
- real automation evidence: `9` automations loaded, `2` enabled
|
||||
- real delivery evidence: `in_app / delivered / JT808`, with vehicle VIN/plate, provider message ID and attempt count populated
|
||||
|
||||
final result: passed
|
||||
@@ -0,0 +1,105 @@
|
||||
# 事件中心生产设计基线(方案 A:事件收件箱)
|
||||
|
||||
## 产品模型
|
||||
|
||||
事件中心不是“告警列表”。它由四个可追溯对象组成:
|
||||
|
||||
1. `Event`:三类协议统一抽象出的不可变事实。
|
||||
2. `Automation`:按“当—如果—就”匹配事件并产生动作。
|
||||
3. `Execution`:事件从接收、命中、通知到人工处置的执行轨迹。
|
||||
4. `Delivery`:通知动作的排队、发送、送达、已读或失败审计。
|
||||
|
||||
事件页负责处理事件,自动化页负责定义规则,通知记录页只负责审计送达;三者不再混用状态。
|
||||
|
||||
## 视觉源
|
||||
|
||||
- `event-inbox-desktop.png`:桌面事件收件箱与常驻详情面板,主视觉基线。
|
||||
- `automation-workspace-desktop.png`:自动化清单、逻辑画布、运行记录和契约面板。
|
||||
- `automation-editor-desktop.png`:四步编辑器与样例事件测试。
|
||||
- `notification-audit-desktop.png`:通知送达表与送达详情。
|
||||
- `event-inbox-mobile.png`:移动端边到边事件列表与全高详情。
|
||||
|
||||
## 设计令牌
|
||||
|
||||
| 角色 | 值 | 用法 |
|
||||
| --- | --- | --- |
|
||||
| 页面背景 | `#F6F8FB` | 工作区底色 |
|
||||
| 表面 | `#FFFFFF` | 表格、面板、抽屉 |
|
||||
| 主文字 | `#17243D` | 标题、关键数据 |
|
||||
| 次文字 | `#65748A` | 标签、元数据 |
|
||||
| 边框 | `#E2E8F0` | 表格分隔、控件轮廓 |
|
||||
| 主色 | `#1267E8` | 选中、焦点、主操作 |
|
||||
| 危险 | `#D43C3C` | 待处理、失败 |
|
||||
| 警示 | `#C66A16` | 地理围栏、重要提示 |
|
||||
| 成功 | `#278254` | 恢复、完成、送达 |
|
||||
| 中性 | `#78869A` | 忽略、禁用 |
|
||||
|
||||
- 仅使用真实白色表面,不使用奶油色、渐变或装饰性光晕。
|
||||
- 圆角:控件 `6px`,面板 `8px`;不使用大圆角卡片容器。
|
||||
- 阴影:默认无阴影,仅详情面板/模态焦点允许 `0 8px 28px rgba(23,36,61,.12)`。
|
||||
- 间距:`4 / 8 / 12 / 16 / 24 / 32px`;桌面主 gutter `16px`。
|
||||
|
||||
## 字体与密度
|
||||
|
||||
- 字体沿用系统中文无衬线栈;正文与控件均显式定义。
|
||||
- 页面标题 `20px/28px 700`;面板标题 `16px/24px 650`;正文/控件 `14px/20px 500`;元数据 `12px/18px 400`。
|
||||
- 表头 `12px/18px 600`;事件行最小高度 `72px`;移动事件行最小高度 `108px`。
|
||||
- 桌面控件高度 `40px`,移动触控目标不小于 `44px`。
|
||||
|
||||
## 容器模型
|
||||
|
||||
- 顶部只保留文本标签页与单行查询工具栏。
|
||||
- 事件流:主表格 + 选中时 400px 常驻详情;不再显示 KPI 条和协议来源条。
|
||||
- 自动化:340px 列表 rail + 逻辑画布 + 最近运行表;事件契约作为窄 inspector。
|
||||
- 通知记录:单一审计表 + 400px 送达详情;禁止碎片化三列。
|
||||
- 移动端:边到边列表;详情为全高 sheet,处置按钮粘底。
|
||||
|
||||
## 事件契约
|
||||
|
||||
三类协议只影响来源,不改变事件顶层字段:
|
||||
|
||||
```text
|
||||
event.id
|
||||
event.type
|
||||
event.category
|
||||
event.title
|
||||
subject.type = vehicle
|
||||
subject.vin
|
||||
subject.plate
|
||||
source.protocol = GB32960 | JT808 | YUTONG_MQTT
|
||||
source.event_id
|
||||
occurred_at
|
||||
received_at
|
||||
automation.id
|
||||
automation.version
|
||||
execution.state = pending | processing | recovered | completed | ignored
|
||||
payload.*
|
||||
```
|
||||
|
||||
事件类型必须由触发语义生成,例如:
|
||||
|
||||
- `vehicle.geofence.exited`
|
||||
- `vehicle.telemetry.soc_low`
|
||||
- `vehicle.motion.acceleration_high`
|
||||
- `vehicle.connectivity.offline`
|
||||
- `vehicle.mileage.daily_completed`
|
||||
|
||||
禁止把分类和指标简单拼接成重复或实现细节型名称。
|
||||
|
||||
## 状态与交互
|
||||
|
||||
- 事件状态:`待处理 / 处理中 / 已恢复 / 已完成 / 已忽略`。
|
||||
- 点击事件行选中并打开详情;键盘 Enter/Space 等价。
|
||||
- 过滤条件写入 URL;切换标签页保留未提交草稿。
|
||||
- 人工处置采用版本号并发控制,成功后同步刷新列表、汇总、详情和通知。
|
||||
- 自动化编辑器:`事件 → 条件 → 动作 → 测试并发布`;发布前可运行样例事件测试。
|
||||
- 通知送达与已读是独立维度;失败记录必须可见失败原因与重试入口。
|
||||
- 所有异步区域覆盖加载、空、错误、重试与陈旧数据保留状态。
|
||||
|
||||
## 响应式与无障碍
|
||||
|
||||
- `>= 1180px`:表格 + 常驻 inspector。
|
||||
- `768–1179px`:表格全宽,详情用覆盖式 side sheet。
|
||||
- `< 768px`:事件行列表 + 全高 detail sheet;过滤器为 bottom sheet。
|
||||
- 焦点环使用 2px 主色外框;状态不只依赖颜色;图标按钮有可读标签。
|
||||
- 支持键盘、200% 文本缩放、`prefers-reduced-motion`、安全区和长 VIN/中文文本换行。
|
||||
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 108 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 114 KiB |