lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/design-system.md

事件中心生产设计基线（方案 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，处置按钮粘底。

事件契约

三类协议只影响来源，不改变事件顶层字段：

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/中文文本换行。