54 KiB
54 KiB
事件中心生产重构 Semi UI Design QA
Automation Editor Fidelity Correction — 2026-07-22
- source visual truth:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/automation-editor-desktop.png - implementation evidence:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/automation-editor-modal-final-desktop.png - same-state comparison:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/compare-automation-editor-modal-final.png - viewport/state: desktop
1487 × 1058, existing enabled automation, sample test successful; modal measured1068 × 936with no horizontal overflow. - correction: replaced the desktop right SideSheet with the selected centered modal, preserved the mobile bottom SideSheet, restored the far-right close control and visible active step, and gated publication on a successful sample event test.
- verification: event-center tests
15 / 15; TypeScript, Vite production build and artifact verification passed. - production release: ECS
automation-modal-fidelity-20260722145249; uploaded archive checksum matched, atomic Web smoke passed, and authenticated health returned the exact release while the platform and both alert evaluator services remained active. - pass history: user-reported P1 SideSheet mismatch fixed; comparison follow-up found and fixed P2 header/token fidelity issues; no open P0, P1 or P2 remains in this scoped flow.
final result: passed
- selected direction: A「事件收件箱」
- product contract:
Event → Automation → Execution → Delivery - protocol scope:
GB32960、JT808、YUTONG_MQTT - focused QA ledger:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/design-qa.md - source/implementation comparisons:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/compare-event-inbox.png/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/compare-automation-workspace.png/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/compare-notification-audit.png/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/vehicle-data-platform/docs/design/event-center-production-20260722/qa/compare-automation-editor-modal-final.png
- viewport and state: desktop
1487 × 1058; mobile390 × 844; event stream, event detail, automation workspace/editor and notification delivery detail
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Event-first IA | Default to event triage while keeping automation and delivery adjacent. | Text tabs, table-led inbox and persistent right inspector match selected direction A. | Passed. |
| Canonical contract | Three protocols must produce one stable event model. | Canonical event type/category, protocol, source ID, dual timestamps, automation and execution state are exposed end to end. | Passed. |
| Automation | Model the workflow as event / condition / action with a verifiable execution. | “当 / 如果 / 就” workspace and four-step editor include sample test and publish. | Passed. |
| Delivery audit | Treat notification as the delivery result of an execution. | Channel, recipient, attempts, provider ID, read state and delivery timeline have an independent audit surface. | Passed. |
| Responsive actions | Core triage actions must never fall below the viewport. | Sticky inspector footer verified at desktop 720px height and in the 390 × 844 mobile sheet. |
Passed. |
| Production gates | Core contract, API and production bundle must be releasable. | Event tests 30 / 30, Go go test ./... and production build/byte gate passed. |
Passed. |
Comparison History
Pass 1 — fixed
- The prior alert center mixed event, rule, notification and evidence fields in the same scanning surface.
- Direction A separates the four product entities while preserving a continuous operator workflow.
- Source-left/implementation-right composites were inspected at original detail for structure, typography, palette, spacing, state and responsive behavior.
- The first inspector pass could push actions below a
720pxdesktop viewport because of the transformed containing block; its calculated height and sticky footer were corrected and re-verified. - No open P0, P1 or P2 issue remains on the scoped event-center paths.
Production Release Evidence
- ECS release
event-center-production-20260722120255replacedevent-center-simplified-20260722102200through the atomic installer. - SHA-256 matched before install; all
76current and117compatibility assets passed byte-for-byte smoke checks. - Authenticated health reported the exact release, and platform API plus both alert evaluators remained active.
- Production returned canonical JT808 and YUTONG_MQTT events, nine automations and enriched delivered notification audit metadata.
final result: passed
单车详情移动端 Semi UI Design QA
- source visual truth: 生产版本
f59148e2的/vehicles/LB9A32A26R0LS1489 - source screenshots:
- directory desktop:
/tmp/semi-goal-audit-20260719-next/01-vehicle-directory-desktop.png - detail desktop:
/tmp/semi-goal-audit-20260719-next/02-vehicle-detail-desktop.png - detail mobile:
/tmp/semi-goal-audit-20260719-next/03-vehicle-detail-mobile.png
- directory desktop:
- implementation screenshots:
- detail mobile:
/tmp/semi-goal-audit-20260719-next/04-vehicle-detail-mobile-after.png - detail desktop:
/tmp/semi-goal-audit-20260719-next/05-vehicle-detail-desktop-after.png
- detail mobile:
- comparison evidence:
- mobile before/after:
/tmp/semi-goal-audit-20260719-next/vehicle-detail-mobile-comparison.png
- mobile before/after:
- viewport and state:
- desktop
1440 × 900 - mobile
390 × 844 - 使用管理员生产数据与同一辆车
粤AGP3506
- desktop
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Vehicle identity | 车牌、在线状态、VIN、品牌车型和三类协议来源必须完整。 | 保留原任务栏结构;车型允许两行且提供完整 title,协议标签保持 Semi Tag 色彩语义。 |
Improved. |
| Live evidence | 速度、SOC、总里程和当日里程不能被截断或隐藏。 | 修正移动端带上下文指标轨道的网格优先级;四项指标获得完整宽度,实测全部 clipped=false。 |
Fixed. |
| First viewport | 首屏必须尽快进入地图,不能被重复卡片和过高操作区占满。 | 身份、动作、位置、来源入口和章节导航收敛;地图顶部由 652px 提前至 569px。 |
Improved. |
| Location workflow | 当前坐标、按需地址解析和车辆实时跟随必须保留。 | 坐标与解析按钮合并成一行;未增加自动逆地理编码,地图和实时轮询逻辑未改。 | Preserved. |
| Source evidence | 总里程、当日里程和“查看全部来源”仍需打开同一证据面板。 | 实测总里程按钮打开 Semi Bottom SideSheet,日期和来源证据可见,关闭后恢复页面。 | Passed. |
| Section navigation | 实时位置、最近事件、实时遥测和车辆主档必须可达。 | 四个 Semi Button 保留可访问名称;点击实时位置后目标区域获得焦点。 | Passed. |
| Desktop stability | 移动端收敛不能造成桌面布局回退。 | 1440 × 900 桌面截图保持原信息结构,横向溢出 0px。 |
Preserved. |
| Asset fidelity | 品牌、地图和图标不得由临时资产代替。 | 继续使用生产 Logo、高德地图、Semi Icon、Card、Button、Tag 与 SideSheet。 | Preserved. |
Interaction And Accessibility Checks
- 页面根节点保留“车牌 + 车辆档案”的可访问标签;
- 总里程和当日里程继续以有名称的按钮进入来源证据;
- 来源证据 SideSheet 可打开、读取并通过“关闭来源证据”退出;
- 章节导航点击后执行平滑滚动并将焦点交给目标区域;
390px与1440px视口横向溢出均为0px;- 生产数据下总里程、当日里程、速度和 SOC 均无视觉裁切;
- 控制台未发现本次改动产生的运行时异常。
Comparison History
Pass 1 — fixed
- 原移动端指标轨道仍被通用
has-context网格分成两列,隐藏的来源上下文占用一半宽度,导致总里程显示为80,27…。 - 当前修复将四项实时指标恢复到完整宽度的
2 × 2网格,并压缩重复的纵向间距。 - 同视口并排对比确认地图在首屏获得约
83px的额外可见空间,车型和里程信息完整。 - 未发现 P0、P1 或 P2 视觉与交互问题。
全站移动导航 Semi UI Design QA
- source visual truth: ECS 生产端
/monitor?mode=list - source screenshots:
- shell baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-monitor-mobile.png - more baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-more-sheet.png - help baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-help-sheet.png - statistics filter baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/before-statistics-filter.png
- shell baseline:
- implementation screenshots:
- more launcher:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/after-more-sheet-local.png - active module:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/after-more-active-fixed-local.png
- more launcher:
- comparison evidence:
- before/after:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/compare-more-before-after.png
- before/after:
- viewport and state:
- mobile
390 × 844 - 管理员权限、全局监控列表模式
- mobile
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Permission model | 客户与管理员仍只能看到已授权菜单。 | 继续使用 hasMenu() 过滤主导航和更多功能分组,未新增绕过入口。 |
Preserved. |
| Navigation hierarchy | 高频任务保留底栏,低频任务必须有清晰业务分组。 | 全局监控、车辆查询、轨迹回放、里程查询仍在底栏;历史/告警与平台治理维持两组。 | Passed. |
| Module recognition | 更多功能不能只靠小图标和短标签辨认。 | 每个模块增加真实任务说明、独立 Semi 图标容器和进入指示。 | Improved. |
| Current state | 位于二级模块时,重新打开更多功能必须识别当前位置。 | 当前模块使用蓝色边框、浅蓝底色和图标强调,未叠加重复装饰线。 | Passed. |
| Touch density | 入口需要适合移动端点击,同时单屏展示完整模块集合。 | 模块卡片最小高度 68px,两列布局在 390 × 844 下完整显示五个入口。 |
Passed. |
| Shared shell | 帮助、筛选与更多功能应属于同一 Semi UI 工作台体系。 | 继续复用 WorkspaceSideSheet 的标题、徽标、遮罩、圆角和滚动边界。 |
Preserved. |
| Asset fidelity | 不使用临时图形或自制 SVG。 | 全部使用 @douyinfe/semi-icons 与 Semi UI SideSheet、Tag、Button。 |
Preserved. |
Interaction And Accessibility Checks
- 底栏仍为命名为“主导航”的可访问导航区域;
- 更多按钮继续暴露
aria-expanded和aria-controls; - 两个业务分组均为独立命名导航;
- 五个模块入口保留链接语义与预加载行为;
- 当前模块继续由 React Router 输出
aria-current="page"; - 关闭按钮仍使用“关闭更多功能”的可访问名称;
390 × 844同视口前后对照未出现横向溢出、裁切或不可达入口;- 页面帮助和里程筛选基线检查未发现本次共享样式导致的回退。
Comparison History
Pass 1 — fixed
- 旧版入口卡片依赖小图标和短标签,任务意图不够明确,分组又被大面积边框切割。
- 新版保持原路由与权限边界,用两列 Semi UI 模块卡片展示任务说明,并减弱分组容器噪声。
- 首次视觉复核发现当前模块仍继承底栏的底部装饰线;已在更多功能作用域内移除,保留单一高亮语义。
- 同尺寸并排对比确认五个入口均可见,层级更清晰,未发现 P0、P1 或 P2 视觉与交互问题。
查询工作台 Semi UI Design QA
- source visual truth: ECS 生产端车辆查询、轨迹回放、历史数据
- source screenshots:
- vehicle page:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-vehicles-mobile.png - vehicle filter:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-vehicle-filter-mobile.png - track page:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-tracks-mobile.png - track workbench:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-track-filter-mobile.png - history page:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-history-mobile.png - history filter:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/before-history-filter-mobile.png
- vehicle page:
- implementation screenshots:
- vehicle filter:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-vehicle-filter-mobile-settled.png - history filter:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-filter-mobile.png - history draft state:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-filter-draft-mobile.png - desktop history:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/after-history-desktop.png
- vehicle filter:
- comparison evidence:
- vehicle mobile:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-vehicle-filter-mobile.png - history mobile:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-history-filter-mobile.png - history desktop:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-query-workspaces/compare-history-desktop.png
- vehicle mobile:
- viewport and state:
- mobile
390 × 844 - desktop
1440 × 900 - 管理员权限、未提交查询的初始状态
- mobile
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Shared filter anatomy | 车辆与历史筛选应与轨迹查询使用同一标题、摘要、内容和确认边界。 | MobileFilterSheet 新增共享 summaryItems,继续复用 WorkspaceSideSheet。 |
Improved. |
| Draft visibility | 用户修改条件时必须知道尚未应用的车辆、时间和数据范围。 | 摘要直接读取草稿状态;输入 沪A01559F 后车辆范围立即由“待选择”更新为“1 辆”。 |
Passed. |
| Vehicle discovery | 查车面板必须同时说明账号授权范围、当前关键词和快速结果状态。 | 生产数据下显示 1,024 辆、全部车辆、待输入,输入后同步更新当前条件和匹配状态。 |
Passed. |
| History scope | 历史查询必须同时呈现车辆上限、日期区间、数据类型和协议来源。 | 三段摘要对应车辆范围、时间范围和数据范围,并保留上海时区说明。 | Passed. |
| Track consistency | 轨迹查询现有行程摘要和查询状态不能被新共享组件破坏。 | 轨迹仍使用同一个 WorkspaceSideSheet 摘要模型,页面与查询明细交互未修改。 |
Preserved. |
| Desktop stability | 移动端工作台迁移不得改变桌面查询布局和密度。 | 1440 × 900 同状态前后截图一致,桌面继续使用 WorkspaceFilterPanel。 |
Preserved. |
| Action boundary | 草稿不应在关闭弹层时意外应用。 | 关闭、重置、应用三类动作保持独立,原测试继续覆盖草稿回滚和显式提交。 | Preserved. |
Interaction And Accessibility Checks
- 摘要区域使用命名列表,并继承“车辆搜索摘要”“历史查询范围摘要”等可访问名称;
- 车辆筛选输入后,摘要与候选列表同时更新;
- 历史筛选输入后,车辆数量实时更新,应用按钮恢复可用;
- 筛选弹层关闭、重置与应用按钮保持完整可见;
390 × 844下内容由共享滚动区承载,无横向溢出;1440 × 900桌面历史查询前后布局一致;- 轨迹回放原有摘要、地图、播放轴与查询明细未发生行为回退。
Comparison History
Pass 1 — fixed
- 原车辆和历史筛选只有标题与表单,用户需要进入字段后才能理解当前授权范围和草稿状态;轨迹查询已经具备摘要层,三页层级不统一。
- 当前将摘要能力下沉到
MobileFilterSheet,车辆和历史页通过真实查询状态填充,不复制新的弹层组件。 - 首次截图在 SideSheet 进入动画期间截到不完整底栏;等待动画稳定后复核,重置与应用按钮完整可见。
- 同视口对比确认新增摘要没有压缩关键输入、日期范围和来源选择,未发现 P0、P1 或 P2 问题。
共享数据面板标题 Semi UI Design QA
- source visual truth: ECS 生产端里程查询、告警中心、接入管理与运维质量结果面板
- source screenshots:
- statistics baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/desktop-statistics-after.png - mobile statistics baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/mobile-statistics-after.png
- statistics baseline:
- implementation screenshots:
- statistics desktop:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/desktop-statistics-fixed.png - statistics mobile:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/mobile-statistics-fixed.png - alert center desktop:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/desktop-alerts-fixed.png - access center desktop:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/desktop-access-fixed.png - operations desktop:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-panel-hierarchy-20260720/desktop-operations-fixed.png
- statistics desktop:
- viewport and state:
- mobile
390 × 844 - desktop
1440 × 900 - 管理员权限、生产数据、默认查询状态
- mobile
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Semantic hierarchy | 高频结果区必须先说明数据语境,再给出当前任务标题。 | 共享 WorkspacePanelHeader 新增真实眉题层;里程、告警、接入、历史、对账和运维分别使用“每日统计”“实时队列”“接入差异”等业务语义。 |
Improved. |
| Tone consistency | 不同业务状态需要可辨认,但不能形成高饱和装饰色块。 | 使用共享 primary、warning、health 等低对比度语义变量,只在顶部细线、眉题与轻微渐变中表达状态。 | Passed. |
| Data density | 标题升级不能挤压表格、统计条和分页主体。 | 1440 × 900 下四个生产结果页保留原表格行数、筛选条件、分页和滚动边界。 |
Preserved. |
| Mobile hierarchy | 眉题、结果标题、车辆数量和操作不能在窄屏互相遮挡。 | 里程结果头在 390px 下缩短描述并收敛文本轨道;车辆数量、刷新和导出仍完整可见。 |
Passed. |
| Action continuity | 刷新、导出和结果计数仍需保持原按钮语义与点击范围。 | 共享组件只调整标题结构,原 Semi Button、Tag、事件处理器和可访问名称均未替换。 | Preserved. |
| Shared implementation | 页面不能各自复制标题视觉规则。 | 六个页面复用同一 WorkspacePanelHeader 与统一 tone 类型,样式集中在 workspace.css。 |
Passed. |
| Desktop stability | 共享视觉层不得产生横向溢出、截断或固定列错位。 | 里程、告警、接入和运维生产截图均无标题裁切,列表滚动条、固定列及分页位置正常。 | Passed. |
Interaction And Accessibility Checks
- 结果标题继续输出正确的 Heading 层级,眉题使用 Semi Typography 文本而不是模拟标题;
- 里程查询的“刷新里程数据”和“导出 Excel”保留完整可访问名称;
- 告警、接入和运维结果列表保留原筛选、刷新、分页与纵向滚动交互;
390 × 844下里程矩阵车牌列与区间总里程列继续固定,日期列可横向浏览;1440 × 900下四个重点页面没有出现标题折断、操作区覆盖或列表主体缩水;- 生产发布版本
semi-panel-hierarchy-20260720031800完成资源烟测与登录态复核。
Comparison History
Pass 1 — fixed
- 首轮移动端复核发现新增眉题、结果标题和车辆数量在同一窄轨道内显得拥挤。
- 通过共享标题的移动端两级文本布局和里程结果区专用宽度约束,减少无效描述占位,同时保留结果计数与操作。
- 第二轮同视口截图确认“每日统计—车辆每日里程—20 / 1024 辆”层级可辨,刷新、导出和首屏表格均可达。
- 桌面端里程、告警、接入与运维四个结果面板语义色克制、密度稳定,未发现 P0、P1 或 P2 视觉与交互问题。
共享语义状态 Semi UI Design QA
- source visual truth: ECS 生产端车辆目录空结果与运维、轨迹证据状态
- source screenshots:
- vehicle directory normal baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/03-vehicles-mobile-before.png - vehicle directory empty baseline:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/04-vehicles-empty-before.png
- vehicle directory normal baseline:
- implementation screenshots:
- vehicle directory empty:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/05-vehicles-empty-after.png - operations health overview:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/06-operations-health-after.png - operations compact success:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/08-operations-health-bottom-after.png - track mobile initial state:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/09-track-empty-after.png - track desktop initial and evidence state:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/10-track-desktop-empty-after.png - alert center regression:
/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/11-alerts-empty-after.png
- vehicle directory empty:
- viewport and state:
- mobile
390 × 844 - desktop
1440 × 900 - 管理员权限、生产数据、空查询与健康检查通过状态
- mobile
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Empty result recognition | 无结果不能只剩大块白色画布,用户应立即识别当前状态。 | 共享 PanelEmpty 增加 Semi Icon、标题、说明和轻量语义底色;车辆目录空结果获得明确搜索图标。 |
Improved. |
| Recovery path | 可恢复的空结果必须给出唯一、直接的下一步。 | 车辆目录提供“清除搜索”,实测点击后恢复 1,024 辆授权目录;对账空结果提供“重置筛选”。 | Passed. |
| Semantic tone | 空结果、通过、提醒和失败不能使用同一种视觉语义。 | primary、success、warning、danger 四类状态共享同一结构,仅使用克制的顶部语义线、图标色和浅背景区分。 | Passed. |
| Compact evidence | 侧栏、时间线和小型证据区不能被完整空状态撑高。 | compact 状态在轨迹证据、告警履历、来源证据、遥测和运维容量检查中保持约 104–112px 的稳定高度。 |
Passed. |
| Functional continuity | 状态迁移不能改变查询、刷新、分页和证据读取逻辑。 | 仅替换呈现组件;车辆清除搜索、运维唯一重试路径和原页面查询键保持不变。 | Preserved. |
| Cross-page reuse | 页面不能继续维护互不相同的 Empty 字号、插图和间距。 | 车辆、监控、轨迹、告警、单车、来源、对账和运维共用 PanelEmpty 的 tone、icon、compact 契约。 |
Improved. |
| Dense-page stability | 新状态样式不得挤压正常数据页。 | 告警队列、运维健康卡片、车辆正常目录和轨迹工作台生产截图均保持原行数、滚动区与操作位置。 | Passed. |
Interaction And Accessibility Checks
- 空状态继续使用 Semi Empty,并由外层
role="status"与aria-live="polite"公布; - 失败状态保留
role="alert",运维来源失败只保留一个“重试”按钮,避免重复恢复入口; - 图标来自
@douyinfe/semi-icons,不使用文本符号、临时 SVG 或占位资产; - 车辆目录“清除搜索”按钮在
390 × 844下可见、可点击,点击后空状态消失且授权目录恢复; - 轨迹桌面端左侧紧凑状态与中央引导状态互不重复,查询表单和播放控制仍可达;
- 运维健康页容量检查通过状态没有覆盖运行时表格,主滚动区域继续可上下浏览;
1440 × 900与390 × 844下均未发现横向溢出、文字裁切或不可达操作。- 生产发布版本
semi-semantic-states-20260720033333完成资源烟测与管理员登录态复核。
Comparison History
Pass 1 — fixed
- 原车辆空结果只有两行居中文字,整张结果卡大面积留白,且没有恢复动作。
- 首轮共享状态实现增加图标、语义背景和恢复按钮,同时发现运维来源失败同时出现两个“重试”入口。
- 删除重复的状态内重试,只保留页面级错误恢复;全量 370 项前端测试恢复通过。
- 第二轮生产截图确认车辆空结果、轨迹紧凑证据和运维成功状态遵循同一套 Semi UI 结构,未发现 P0、P1 或 P2 视觉与交互问题。
final result: passed
告警自动化库 Semi UI Design QA
- source visual truth: 用户选定的第 2 套“自动化库 + 场景模板”设计方向
- source image:
/Users/lingniu/.codex/generated_images/019f5c60-560a-7550-ba2d-bbaa1dfd6465/exec-c19e8307-3dd1-4e38-841a-cd8715eb5b26.png - implementation screenshots:
- desktop automation library:
/tmp/alerts-shortcuts-redesign-20260721/06-implementation-desktop.png - mobile automation library:
/tmp/alerts-shortcuts-redesign-20260721/08-implementation-mobile.png - mobile automation editor:
/tmp/alerts-shortcuts-redesign-20260721/09-implementation-mobile-editor.png
- desktop automation library:
- comparison evidence:
/tmp/alerts-shortcuts-redesign-20260721/07-source-vs-implementation.png - viewport and state:
- desktop
1280 × 720 - mobile content viewport
390 × 844(浏览器同源 iframe 响应式验证) - 管理员、真实生产规则与最近告警事件
- desktop
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Information architecture | 告警中心首先区分“待处理”和“自动化”,不让事件、规则、通知三套概念竞争焦点。 | 顶部只保留两个主任务页签;通知履历保留深链兼容但退出主导航。 | Passed. |
| Automation library | 每条自动化应像捷径一样可浏览、选择、启停并查看流程。 | 我的自动化使用单行库、真实启停开关、版本号和选中态;桌面展开“当/如果/就/重复”。 | Passed. |
| Recipe gallery | 用户不应先面对复杂表单,应能从常见车辆场景开始。 | 推荐区提供低 SOC、数据源异常、最高氢浓度三类真实字段模板;不可用指标按字段目录禁用。 | Passed. |
| Builder | 编辑器应以业务语言表达触发、范围和动作,同时保留后端完整能力。 | 右侧/底部 SideSheet 以“当、如果、就”组织指标、协议、车辆范围、恢复与重复提醒;保存继续调用真实版本化 API。 | Passed. |
| Real activity | 页面不展示伪造的成功次数或通知通道。 | 最近运行来自真实告警事件并 30 秒刷新;短信、邮件、企微明确标注未启用。 | Passed. |
| Typography and palette | 延续现有 Semi UI、品牌蓝、语义红/橙/绿,不新增不一致的装饰体系。 | 使用 Semi Card、Button、Switch、Tag、SideSheet 与官方 Icon;密度、圆角和色阶与平台工作台一致。 | Passed. |
| Responsive behavior | 移动端需要单屏看到多条自动化,并以底部编辑器完成配置。 | 390px 首屏显示 4 条规则;长名称省略、开关与进入箭头不重叠;编辑器切换为可滚动 Bottom SideSheet。 |
Passed. |
Interaction And Accessibility Checks
- 自动化搜索按名称、说明、指标和范围实时过滤;清除后恢复完整规则库;
- 创建自动化与移动端规则行暴露
aria-haspopup="dialog"和正确展开状态; - 每个启停开关包含规则名称,避免只有视觉位置可辨认;
- 规则库、推荐自动化和最近运行均有命名区域;
- 桌面点击编辑打开右侧 SideSheet,移动端点击规则打开底部 SideSheet,关闭不保存;
- 推荐模板只在字段目录确认
alertable后可操作; - 全量 Web 回归
384 / 384通过,生产构建与 Web 体积门禁通过; - 本地浏览器未发现本次页面逻辑异常;开发态仅出现 Semi UI 依赖的
findDOMNodeStrictMode 警告。
Comparison History
Pass 1 — fixed
- 旧页面把事件、规则和通知并列,默认展示全部事件,用户进入后不清楚应先处置还是先配置。
- 选定方案将信息架构压缩为“待处理 + 自动化”,并用自动化库、场景模板和最近运行串起发现、配置、验证三步。
- 首轮桌面实测确认真实 9 条规则、版本、开关与运行事件均可读;移动端首屏卡片密度和编辑器输入区无横向溢出。
- 与选定参考图并排复核了文案、布局、字体、色板、图标、间距、响应式和交互;现有产品壳层被保留,核心自动化结构达到选定方向。
- ECS 发布版本
alert-automation-library-20260721145014完成资源烟测、真实 9 条规则读取、编辑器打开/关闭、待处理切换和零浏览器运行时错误复核;生产编辑器截图为/tmp/alerts-shortcuts-redesign-20260721/10-production-editor.png。 - 未发现 P0、P1 或 P2 视觉与交互问题。
final result: passed
共享 Shell 中间断点 Semi UI Design QA
- source visual truth: ECS 生产端客户工作台
- source screenshot:
/tmp/responsive-continuity-20260720/02-monitor-800-baseline.png - implementation screenshots:
- monitor:
/tmp/responsive-continuity-20260720/03-monitor-800-local-after.png - deployed monitor:
/tmp/responsive-continuity-20260720/11-monitor-800-production-after.png - vehicle search:
/tmp/responsive-continuity-20260720/05-vehicles-800-local-after.png - track playback:
/tmp/responsive-continuity-20260720/06-tracks-800-local-after.png - mileage query:
/tmp/responsive-continuity-20260720/07-statistics-800-local-after.png - mobile regression:
/tmp/responsive-continuity-20260720/08-statistics-390-mobile-regression.png
- monitor:
- full-view comparison evidence:
/tmp/responsive-continuity-20260720/09-monitor-800-comparison.png - focused left-edge comparison evidence:
/tmp/responsive-continuity-20260720/10-monitor-left-edge-comparison.png - viewport and state:
- compact desktop / tablet
800 × 600 - breakpoint checks
680,681,800,900,901,1024px - mobile regression
390 × 844 - authenticated customer, 44 authorized vehicles, live production-backed data
- compact desktop / tablet
Findings
- 未发现修复后仍需处理的 P0、P1 或 P2 视觉、交互或响应式问题。
- 对比期间实时车辆状态与今日上报数发生正常轮询变化;布局、账号、筛选和路由状态保持一致,不把动态数值差异视为视觉偏差。
- 本地控制台只出现 Semi UI 依赖内部已有的 StrictMode
findDOMNode弃用提示;部署后的生产控制台没有错误或警告。
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Shell geometry | 681–900px 必须为 72px 图标轨道保留真实布局空间。 |
新增 --v2-sidebar-width-compact,主区固定从 x=72 开始并占据剩余宽度。 |
Passed. |
| Cross-route continuity | 共享 Shell 修复不能只对监控页生效。 | 监控、车辆、轨迹、里程四个客户路由均在 800 × 600 实际切换并截图;页面标题与首个工作区均未被覆盖。 |
Passed. |
| Viewport resilience | 680/681 与 900/901 断点不能产生重叠、横向溢出或空白带。 | 680px 使用 0–680px 移动主区;681–900px 使用 72px 轨道;901px+ 恢复 228px 完整侧栏,文档宽度始终等于视口。 |
Passed. |
| Typography | 页面标题、筛选标签、统计首列和车牌必须保持完整文字层级。 | 修复后“全局监控”“车辆总数”“车辆列表”和完整车牌均可见;原字号、字重与行高未改变。 | Passed. |
| Spacing and layout rhythm | 紧凑桌面不能通过负边距或覆盖换取工作区宽度。 | 主区使用显式宽度计算和左偏移,Header、Content、筛选卡、地图和列表共享同一 72px 起点。 | Passed. |
| Colors and tokens | 修复应复用现有 Semi 视觉体系,不引入页面级特例。 | 只新增共享几何 token 与 Shell 响应式规则;状态色、边框、背景和选中态完全保留。 | Passed. |
| Image quality and assets | Logo、地图与导航图标不能因偏移修复被缩放或替换。 | 继续使用真实品牌 Mark、生产高德地图和 Semi 图标;资产比例、清晰度和裁切保持一致。 | Passed. |
| Copy and content | 页面帮助、筛选提示、工作台标题和业务数据必须保持原内容。 | 四路由真实内容与交互未改,仅恢复被侧栏遮挡的信息。 | Passed. |
| Mobile continuity | ≤680px 必须继续使用底部导航和全宽主区。 |
390 × 844 里程查询主区 x=0 / width=390,底部导航完整,固定车牌和区间总里程列保持可见。 |
Passed. |
Interaction And Accessibility Checks
- 客户账号只显示全局监控、车辆查询、轨迹回放、里程查询四个授权入口;
- 通过真实导航链接依次切换四个路由,URL、页面标题、选中图标与工作区同步更新;
681–900px的折叠导航仍保留可访问链接名称和原生 Semi Tooltip;- 轨迹页在紧凑宽度自动收起查询栏,主任务“选择车辆”保持可见;
- 里程页固定车牌列、区间总里程列、分页和导出入口均可达;
390px移动端没有出现左侧空白、横向文档溢出或底部导航错位;- 共享 Shell 组件测试、响应式源码测试、全量
380 / 380测试和生产构建门禁通过。 - ECS 版本
compact-shell-ux-20260720170314完成 HTTPS、资源哈希和生产800 × 600复核。
Comparison History
Pass 1 — blocked
- 生产
800 × 600下侧栏已折叠为 72px,但主区仍从x=0开始,被固定侧栏覆盖。 - “全局监控”只显示“监控”,搜索占位首字、车辆总数、车辆列表和第一列车牌均被切掉,属于 P1 跨路由核心信息遮挡。
Pass 2 — passed
- 将 72px 折叠宽度提升为共享 token,在
681–900px为.v2-main显式保留相同宽度并计算剩余工作区。 - 完整视图和左边缘聚焦对比确认标题、筛选、统计、车辆列表与地图重新对齐,没有新增右侧裁切或文档溢出。
- 四个客户路由、六个边界宽度和移动端回归均通过,没有遗留 P0、P1 或 P2 问题。
Follow-up Polish
- P3:Semi UI 2.101.0 仍会在开发 StrictMode 下记录
findDOMNode弃用提示,属于既有依赖问题,不阻塞本次 Shell 修复。
final result: passed
公共登录页短横屏 Semi UI Design QA
- source visual truth: ECS 生产端公共登录页
- source screenshot:
/tmp/full-ui-audit-20260720/04-login-short-landscape.png - implementation screenshots:
- short landscape:
/tmp/full-ui-audit-20260720/12-login-short-landscape-final.png - deployed production:
/tmp/full-ui-audit-20260720/15-login-short-landscape-production.png - small landscape:
/tmp/full-ui-audit-20260720/08-login-small-landscape-after.png - wide landscape:
/tmp/full-ui-audit-20260720/09-login-wide-landscape-after.png - desktop:
/tmp/full-ui-audit-20260720/10-login-desktop-after.png - portrait mobile:
/tmp/full-ui-audit-20260720/11-login-mobile-after.png
- short landscape:
- full-view comparison evidence:
/tmp/full-ui-audit-20260720/13-login-landscape-comparison.png - focused form comparison evidence:
/tmp/full-ui-audit-20260720/14-login-form-focus-comparison.png - viewport and state:
- short landscape
667 × 375 - minimum verified landscape
568 × 320 - wide landscape
844 × 390 - desktop
1440 × 900 - portrait mobile
390 × 844 - public password login, empty form, password field focus
- short landscape
Findings
- 未发现仍需修复的 P0、P1 或 P2 视觉、交互或响应式问题。
- 本地控制台仅包含 Vite 开发连接与热更新记录;部署后的生产控制台没有错误或警告。
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Landscape composition | 短横屏必须使用可用的横向空间,不能把竖屏卡片压成中间窄带。 | 身份区与登录区改为完整双栏,品牌背景贯穿卡片全高,主表单保持单一工作流。 | Passed. |
| Typography | 字段标签和主操作不能因高度不足降到不可读字号。 | 字段标签由 9px 提升至 11px,输入文字 14px,主按钮 13px;品牌标题保持 20px。 | Passed. |
| Touch targets | 用户名、密码和主操作必须保持稳定触控高度。 | 568 × 320、667 × 375 与 844 × 390 下输入框和按钮均为 44px。 |
Passed. |
| Layout rhythm | 卡片应垂直居中,身份说明、表单、按钮和信任提示之间应形成连续节奏。 | 667 × 375 下卡片为 647 × 262,左右区域全高对齐,移除原底部大块无效空白。 |
Passed. |
| Colors and tokens | 登录页必须延续现有品牌蓝、浅灰背景、轻边框和 Semi 状态语义。 | 仅复用既有登录页资产、背景、边框、按钮和焦点样式,没有引入新色板或视觉体系。 | Passed. |
| Image quality and assets | Logo 与图标必须使用产品真实资产和 Semi 图标。 | 继续使用生产品牌 Logo、Semi 用户、锁与密码可见性图标,无临时 SVG、CSS 图形或占位资产。 | Passed. |
| Copy and content | 登录方式、身份说明和权限边界文案必须完整保留。 | “账号密码登录”、管理员开通说明及菜单/车辆/本地缓存隔离提示均完整可见。 | Passed. |
| Responsive regression | 横屏规则不得改变桌面和竖屏既有体验。 | 1440 × 900 桌面双区 Hero 与 390 × 844 竖屏单卡布局均保持原结构,无溢出或裁切。 |
Passed. |
Interaction And Accessibility Checks
- 登录表单继续使用
aria-label="账号密码登录"; - 用户名与密码文本框在可访问树中名称唯一,实测均可输入;
- 两个字段填写后“登录工作台”由 disabled 正确切换为可用;
- “显示登录密码”点击后更新为“隐藏登录密码”并返回 pressed 状态;
- 未提交任何测试凭证到生产接口,交互验证结束后清空本地输入;
- 所有五个视口文档宽高均等于视口宽高,没有横向或纵向页面溢出;
- 响应式源码测试、登录组件测试、全量
378 / 378测试和生产构建门禁通过。
Comparison History
Pass 1 — blocked
- 初始横屏改造虽然提高了字号,但左侧品牌背景只覆盖内容中段,卡片上下仍留出断裂白区,属于 P2 布局节奏问题。
Pass 2 — blocked
- 扩展左侧区域全高后,Semi disabled 主按钮使用不同状态类,原选择器未命中,按钮被 CSS Grid 自动放置到字段上方,属于 P1 核心操作顺序问题。
Pass 3 — passed
- 使用稳定的直接子元素选择器覆盖按钮全部状态,并为身份区设置全高网格轨道。
- 最终对比确认登录字段、按钮、信任提示顺序正确;品牌区贯穿卡片,控件尺寸和字号达到横屏基线。
- 额外完成
568 × 320极限横屏、844 × 390宽横屏、桌面和竖屏回归,没有遗留裁切、重叠或不可达操作。
Follow-up Polish
- P3:密码框焦点环继续使用现有浏览器与 Semi UI 组合样式,可在后续全站焦点可视化批次统一微调,不阻塞本次发布。
final result: passed
账号目录与权限配置 Semi UI Design QA
- source visual truth: ECS 生产端
/users - source screenshot:
/tmp/account-management-ux-20260720/01-users-before-desktop.png - implementation screenshots:
- desktop directory:
/tmp/account-management-ux-20260720/16-users-after-desktop-final.png - desktop identity configuration:
/tmp/account-management-ux-20260720/09-users-editor-identity-desktop.png - desktop vehicle configuration:
/tmp/account-management-ux-20260720/11-users-editor-vehicles-desktop-pass2.png - mobile directory:
/tmp/account-management-ux-20260720/13-users-after-mobile-pass3.png - mobile vehicle configuration:
/tmp/account-management-ux-20260720/12-users-editor-vehicles-mobile-pass2.png
- desktop directory:
- full-view comparison evidence:
/tmp/account-management-ux-20260720/17-users-desktop-final-comparison.png - focused configuration comparison evidence:
/tmp/account-management-ux-20260720/15-users-editor-vehicle-pass1-pass2.png - viewport and state:
- desktop
1440 × 900 - mobile
390 × 844 - 管理员权限、6 个真实结构账号、1 个停用账号、2 辆授权车配置状态
- desktop
Findings
- 未发现仍需修复的 P0、P1 或 P2 视觉与交互问题。
- 控制台仅记录 Semi UI 依赖内部的
findDOMNodeStrictMode 弃用提示;未出现本轮业务代码异常、请求失败或布局错误。
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Directory hierarchy | Web 端账号必须是一行一账号,名称、菜单、车辆、登录时间和状态可横向快速扫描。 | 移除菜单与车辆的嵌套卡片,使用 64px 分隔行、稳定列轨道、明确“配置”动作与停用状态。 | Passed. |
| Mobile density | 移动端必须在不牺牲辨认度的前提下提高单屏账号数量。 | 390 × 844 下 6 个账号完整可见;每行约 67px,名称、账号、菜单数、车辆数和状态均未裁切。 |
Passed. |
| Configuration sequence | 登录身份、菜单权限、车辆权限必须形成可理解的配置顺序。 | SideSheet 默认进入登录身份;三个标签增加 1–3 步骤编号,并保留权限数量提示。 | Passed. |
| Vehicle authorization | 车牌优先、VIN 为辅、授权有效期和移除动作必须在同一视线内完整显示。 | 第二轮将授权车辆从两列改为一辆一行,有效期起止完整展示;桌面和移动端均无横向溢出。 | Passed. |
| Responsive controls | 移动端筛选、配置关闭和保存动作必须可触达。 | 筛选 SideSheet 完整打开和关闭;底部保存按钮为 44px 触控高度、13px 字号并保持吸底。 | Passed. |
| Typography | 标题、正文、元信息和状态应有稳定层级,不依赖过小文字承载主任务。 | 账号名称 13–14px、主操作 13px、配置标签 11–13px;次级元信息 10–11px,主任务信息不低于 13px。 | Passed. |
| Colors and tokens | 状态颜色应语义化且克制,目录不能被卡片和高饱和色切碎。 | 继续使用 Semi 状态 Tag、品牌蓝与轻边界;账号列表改为白底分隔行,选中与待完善才使用语义底色。 | Passed. |
| Assets and icons | 品牌、头像与操作图标必须沿用真实产品资产和 Semi 图标。 | 保留生产 Logo、Semi Avatar、Tag、Button、Tabs、SideSheet 和官方图标,无临时 SVG、CSS 图形或占位资产。 | Passed. |
| Copy and content | 页面文本必须说明访问治理目标和权限生效边界。 | “菜单与车辆按最小权限开放,变更最多 30 秒生效”“添加授权车辆”等文案直接说明任务与结果。 | Passed. |
Interaction And Accessibility Checks
- 账号行继续使用 button 语义,并通过完整可访问名称公布客户、账号、车辆数量和访问状态;
- 选中账号后
aria-expanded与aria-pressed正确更新,关闭配置后恢复目录; - 三个配置步骤保留 tab / tabpanel 语义,步骤数字不干扰可访问名称;
- 移动端账号筛选可打开、关闭,关闭不会意外应用草稿;
1440px与390px下文档横向溢出均为0px;- 移动端 6 个账号均位于首屏完整可见区域;
- 账号管理组件测试
10 / 10、全量前端测试377 / 377与生产构建门禁通过。
Comparison History
Pass 1 — blocked
- 桌面授权车辆继承原网格列数,两辆车并排展示,导致第二辆车的有效期信息被截断,属于 P2 信息完整性问题。
- 移动端保存按钮高度仅 40px、字号 9px,触控和可读性不足,属于 P2 可用性问题。
Pass 2 — passed
- 授权车辆列表明确设置为单列,每辆车独占一行,车牌、VIN、调整、移除和有效期全部完整。
- 移动端保存按钮提升为 44px、13px;账号目录保持 6 行首屏密度。
- 全视图与配置局部对比确认没有遗留裁切、重叠、横向溢出或不可达操作。
Follow-up Polish
- P3:Semi UI 仍会输出
findDOMNode弃用提示,可在后续依赖升级批次统一处理,不阻塞本次账号管理发布。
final result: passed
跨工作台异步状态 Semi UI Design QA
- source visual truth: ECS 生产端监控、车辆、告警、运维与质量对账工作台
- implementation screenshots:
- monitor first error pass:
/Users/lingniu/.codex/audits/2026-07-20-semi-mileage-refinement/02-monitor-single-error-after.jpg - monitor single error polished:
/Users/lingniu/.codex/audits/2026-07-20-semi-mileage-refinement/03-monitor-single-error-polished.jpg - monitor recovered list:
/Users/lingniu/.codex/audits/2026-07-20-semi-mileage-refinement/04-monitor-recovered-after.jpg
- monitor first error pass:
- viewport and state:
- desktop
1280 × 720 - 客户权限、列表模式、未授权搜索错误与清筛恢复状态
- desktop
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Loading language | 监控、告警、来源诊断、协议就绪度和差异队列不应继续维护各自的裸 Spin。 | 五个工作流统一迁移到共享 PanelLoading,保留各自任务说明与稳定面板高度。 |
Improved. |
| State priority | 请求失败时不能同时显示错误和空结果,用户只能看到一个恢复方向。 | 生产复现未授权搜索后,错误状态优先;“暂无符合条件的车辆”和表格默认“暂无数据”均不再叠加。 | Passed. |
| Recovery continuity | 清除错误筛选后应恢复原实时列表,不丢失列表模式与授权范围。 | 点击“清空”后恢复 44 辆授权车辆、实时列和分页,错误状态消失。 | Passed. |
| Layout stability | 轮询或详情懒加载不能让列表、详情侧栏和卡片高度跳变。 | 状态表面按宿主面板设置稳定最小高度;监控刷新继续保留当前行,完成后平滑替换。 | Improved. |
| Semantic reuse | 未找到车辆应与其他页面的可恢复空结果使用同一 Semi UI 结构。 | 单车未找到状态改为共享 PanelEmpty,保留搜索图标、原因说明和唯一“重新查询”动作。 |
Passed by component regression coverage. |
| Cross-page cleanup | 已迁移页面不能继续携带未使用的 Empty、Spin 依赖。 | Access、Statistics 清理残留导入;Alerts、Operations、Reconciliation 移除页面级裸 Spin。 | Passed. |
| Production readiness | 迁移必须通过全量回归、构建门禁、原子发布和登录态验收。 | 372 项测试、Web build gate、资源烟测、生产交互与控制台检查完成;版本 semi-state-priority-polish-20260720043854。 |
Passed. |
Interaction And Accessibility Checks
- 所有共享加载状态继续使用
role="status"与aria-live="polite"; - 请求失败继续使用
role="alert",只保留一个“重试”按钮; - 监控搜索错误时不再同时公布空结果状态;
- 清除筛选后实时列表恢复,列表模式、分页和每页数量保持不变;
- 单车未找到状态使用可访问名称“重新查询车辆”;
- 本轮视觉证据覆盖客户可访问的监控主流程;管理员专属告警、运维与对账状态由组件测试、源码门禁和生产构建覆盖,不冒充已完成管理员视觉认证。
Comparison History
Pass 1 — fixed
- 首次生产验收发现未授权车牌搜索同时显示权限错误、空结果和表格默认空占位。
- 第一轮先抑制业务空结果;第二轮继续隐藏错误范围下的 Semi 表格默认“暂无数据”,保留表头帮助理解当前列结构。
- 清除筛选后 44 辆授权车辆恢复,实时指标、协议、坐标和分页均正常。
- 控制台没有新增错误或警告,未发现页面裁切、状态覆盖或不可达恢复动作。
final result: passed
历史证据与账号治理次级状态 Semi UI Design QA
- source visual truth: ECS 生产端历史数据与账号管理工作台
- implementation screenshots:
- users filtered empty state:
/Users/lingniu/.codex/audits/2026-07-20-semi-history-users/04-users-filter-empty-after.jpg - users restored directory:
/Users/lingniu/.codex/audits/2026-07-20-semi-history-users/05-users-cleared-after.jpg - history initial workspace:
/Users/lingniu/.codex/audits/2026-07-20-semi-history-users/06-history-desktop-after.jpg - history export jobs:
/Users/lingniu/.codex/audits/2026-07-20-semi-history-users/07-history-secondary-after.jpg
- users filtered empty state:
- viewport and state:
- desktop
1440 × 900 - 管理员权限、生产数据、空筛选与有效历史查询状态
- desktop
Fidelity Ledger
| Surface | Required fidelity | Implementation evidence | Result |
|---|---|---|---|
| Secondary state consistency | 趋势、导出、证据和账号筛选不能继续使用彼此不同的原始 Empty、Spin。 | 历史与账号页面移除直接 Empty、Spin,统一使用共享 PanelEmpty 与 PanelLoading。 |
Improved. |
| Recovery path | 可恢复错误和无匹配结果必须提供明确且唯一的下一步。 | 趋势与导出失败提供对应重试;账号无匹配提供“清除筛选”;授权车无匹配提供“清除车辆筛选”。 | Passed. |
| Semantic meaning | 加载、引导、提醒与失败状态应在同一结构下保持可辨认。 | 使用 primary、success、warning、danger 语义 tone 和真实 Semi Icon,不增加装饰性插图。 | Passed. |
| History continuity | 状态迁移不能破坏趋势查询、证据读取、异步导出和原查询条件。 | 生产查询返回 6 条历史记录、1 辆车、2 个来源;趋势展开显示桶点,导出侧栏显示 4 个已完成任务。 | Preserved. |
| Account continuity | 清除账号筛选后必须恢复原目录,不改变账号与车辆权限数据。 | 输入不存在账号后显示语义空状态,点击“清除筛选”恢复 5 个客户账号。 | Preserved. |
| Responsive density | 次级状态不能在窄屏撑高列表或遮挡主要操作。 | 共享状态使用 compact 契约,并在 680px 断点收敛趋势、账号与授权车状态高度。 |
Passed by responsive rule and component regression coverage. |
| Production readiness | 源码、构建产物和生产服务需要指向同一个可追溯版本。 | 全量 371 项测试、生产构建和 Web build gate 通过;ECS 当前版本为 semi-history-users-states-20260720041714。 |
Passed. |
Interaction And Accessibility Checks
- 状态外层继续使用
role="status"与aria-live="polite";失败状态沿用共享告警语义; - 趋势重试、导出重试、清除账号筛选和清除车辆筛选均有明确的可访问名称;
- 账号无结果不再形成无操作的大块白色画布,恢复动作位于状态说明之后;
- 历史初始引导、趋势加载、趋势无点、导出任务和证据选择使用同一内容层级;
- 生产端账号清筛、历史趋势展开和导出任务侧栏均完成实际点击验证;
- 本轮未把浏览器视口覆盖能力作为移动端视觉认证依据,窄屏结论来自共享组件回归测试与 CSS 断点审查。
Comparison History
Pass 1 — fixed
- 原历史次级区域混用裸 Semi Empty、Spin,语义、间距与恢复动作不一致;账号筛选无结果没有直接恢复路径。
- 迁移后两页复用已经在车辆、轨迹和运维页面验证过的语义状态组件,只为各自业务补充图标、说明和动作。
- 首轮测试发现趋势与主表同时加载时会正确产生两个独立 live region,测试随后改为针对趋势状态的精确断言。
- 生产复核确认账号清筛和历史导出主流程可用,桌面布局没有新增裁切、覆盖或不可达操作。
final result: passed