71 lines
12 KiB
Markdown
71 lines
12 KiB
Markdown
# 车辆数据中台 Apple Design UI/UX 审查
|
|
|
|
日期：2026-09-17。范围：现有 9 个业务入口、共享导航、详情/查询抽屉及手机布局。
|
|
|
|
## 审查方法与证据边界
|
|
|
|
本轮从线上 before 截图和当前代码确认问题，再在本地改造后使用 UI mock 场景检查渲染及交互。方向是系统字体、清晰文字层级、中性连续内容表面、少量蓝色主操作、轻分隔、足够触控面积；不是给所有区域添加玻璃效果。
|
|
|
|
下表引用的 before/after 截图均已由本报告作者实际打开检查。其他截图由主代理进行操作及视觉检查，另列为补充证据，不将仅存在的文件视为本报告作者已验证。截图是拍摄时刻的中间状态，不能自动证明之后的修复正确。
|
|
|
|
本地 mock 仅验证 UI 渲染和操作路径，不能证明生产车辆数量、在线状态、原生告警等级/故障码、统计结果或服务健康准确。生产数据语义与业务接口应保留；此次设计调整不重新定义“离线”“无来源”“无数据”和数值 0，不删查询/导出、权限、事件证据与数据源策略功能。原生 GB/T 32960 告警应继续显示具体名称，并保留来源与原始字段详情。
|
|
|
|
## 九页审查矩阵
|
|
|
|
证据链接相对于仓库根目录中的 `outputs/apple-design-20260917/`。
|
|
|
|
| 页面 | 实际观察到的问题 | 本轮改变 | 已检查证据与限制 |
|
|
|---|---|---|---|
|
|
| 全局监控 `/monitor` | 桌面指标区、列表、地图叠加多种蓝底及细小文字；地图覆盖率和真实位置状态需要保持可辨认。 | 系统感地图工作区与中性控件；保留地图/列表切换、筛选、跟随、聚合标记和覆盖说明。 | [before](../../../../outputs/apple-design-20260917/before/08-monitor.png)、[手机 after](../../../../outputs/apple-design-20260917/after/22-monitor-390.png)。手机地图已可见；底部图例紧邻固定导航，仍需最终安全区复核。 |
|
|
| 车辆查询 `/vehicles` | 搜索卡及列表指标存在重复装饰；旧表格文字偏小。首轮 after 中“查看档案”断行、在线行绿条、搜索卡底角仍方；手机“修改”与批量同步相撞。 | 14px 车辆行、12px VIN；搜索与目录中性分组；目录标题置左、指标置右；单行查看操作；去行侧色条；范围独占手机一行、批量同步单独下一行且至少 44px 高。单车页减少首栏高度，导航改纯工具栏，操作 13px、辅助至少 12px、事件标题 14px。 | [before](../../../../outputs/apple-design-20260917/before/02-vehicles.png)、[目录 after](../../../../outputs/apple-design-20260917/after/01-vehicles-1440.png)、[单车 after](../../../../outputs/apple-design-20260917/after/02-vehicle-detail-1440.png)、[手机 after](../../../../outputs/apple-design-20260917/after/10-vehicles-390.png)。上述 after 揭示的问题已修代码，需最新重截图确认。 |
|
|
| 轨迹回放 `/tracks` | 未查询时左右各一套空状态，并提前显示无数据指标/标签；地图中央步骤卡重复说明查询表单。 | 单一主要空状态与查询按钮；查询后才展开结果指标；浅中性地图画布与明确播放操作，保留时间、来源及回放。 | [before](../../../../outputs/apple-design-20260917/before/09-tracks.png)、[桌面 after](../../../../outputs/apple-design-20260917/after/06-tracks-1440.png)。首轮 after 日期输入和描述有截断，需检查后续修复及播放结果。 |
|
|
| 历史数据 `/history` | “历史证据/遥测证据检索/证据结果/历史明细”层级冗余，空状态又放三步卡；表格和工具文字密集。 | 收敛为查询条件→历史明细；空状态保留描述与 CTA，去重复步骤；13px 表格和更清晰表头，保留多车、协议、原始报文、字段设置、趋势、导出任务。 | [before](../../../../outputs/apple-design-20260917/before/04-history.png)、[有结果 after](../../../../outputs/apple-design-20260917/after/23-history-result-1440.png)。结果表 VIN、时间、协议和数值可读；查询回执与工具辅助文字仍需最终密度复核。 |
|
|
| 里程查询 `/statistics` | 重复“每日里程”眉题；表格小字且核心数据与辅助说明层级弱；底部暴露缓存实现文案。 | 保留动态日期列/热度与区间合计；13px 数值、tabular-nums、清晰主标题；底部改为上海时区统计说明；不改变缺失与 0 的差别、来源优先级和导出。 | [before](../../../../outputs/apple-design-20260917/before/03-statistics.png)、[桌面 after](../../../../outputs/apple-design-20260917/after/24-statistics-1440.png)。当前 3 日矩阵清晰；长日期及氢耗证据要继续核验。 |
|
|
| 事件中心 `/alerts` | 表格图标底色与侧条重复强调；多标签和筛选并列占据注意力。 | 中性列表与克制状态色；保留事件流/自动化/通知导航、具体事件标题和处理状态。 | [before](../../../../outputs/apple-design-20260917/before/01-events.png)、[1024 after](../../../../outputs/apple-design-20260917/after/27-alerts-1024.png)。右侧执行状态超出当前截图宽度，需验证可横向访问且不丢列。mock 事件名称不构成原生告警线上验证。 |
|
|
| 接入管理 `/access` | “来源治理/接入健康工作台/接入差异”重复眉题；每个协议状态单独卡片造成边框密集。 | 精简眉题和协议容器装饰，保留在线/离线/无来源文字；适配窄桌面筛选换行及抽屉。 | [before](../../../../outputs/apple-design-20260917/before/05-access.png)、[1024 after](../../../../outputs/apple-design-20260917/after/25-access-1024.png)。协议状态可区分；需复核更多车辆、治理与认领操作。 |
|
|
| 账号管理 `/users` | 旧桌面列表同时并排两账号，顶部列名与两组值难对应；授权信息阅读路径不连续。 | 桌面统一一行一账号，账户/菜单/车辆/最近登录/状态对齐；中性头像，创建账号作为主操作；保留配置和权限确认。 | [before](../../../../outputs/apple-design-20260917/before/06-users.png)、[桌面 after](../../../../outputs/apple-design-20260917/after/04-users-1440.png)。可辨认正常、未关联、停用三类；数据为 mock，不能据此验证真实授权。 |
|
|
| 运维质量 `/operations` | 眉题、彩色头栏、对账标签重复；队列操作多，窄桌面容易挤压说明和表格。 | 精简运行快照/自动对账眉题；中性分组，保留差异处置/单车诊断/全局健康；批量、导出、趋势及筛选继续可用。 | [before](../../../../outputs/apple-design-20260917/before/07-operations.png)、[1024 after](../../../../outputs/apple-design-20260917/after/26-operations-1024.png)。截图中队列说明与按钮仍拥挤、右列需要横向查看，后续修改需重验。 |
|
|
|
|
## 共享实现与复杂层叠
|
|
|
|
- `foundation.css` 收敛颜色、系统字体和基础几何 token；共享顶栏、导航、输入和按钮由 `apple-workspace.css` 管理。
|
|
- 页面细节分别置于 `apple-data-pages.css`、`apple-governance.css`、`apple-map-pages.css`。数据页规则有局部作用域，不覆盖共享 topbar token。
|
|
- 帮助抽屉移除“页面目标/建议步骤/Esc”装饰指标，保留当前模块说明和操作建议。
|
|
- 既有 CSS 约 55,150 行，混有高 specificity、inline Card padding、媒体查询和懒加载用户样式；仅调整 token 不能证明视觉生效。首轮截图中的车辆左色条就是高 specificity 旧规则覆盖的实例，已用局部精确选择器处理。
|
|
- 搜索卡圆角通过内部透明背景处理，避免用 overflow:hidden 裁掉候选搜索浮层。
|
|
|
|
主代理补充检查证据：帮助 `after/03-help-1440.png`、账号详情 `05-user-detail-1440.png`、轨迹结果 `07-track-result-1440.png`、手机查询/地图 `08-tracks-390.png` 与 `09-track-map-390.png`、车辆搜索抽屉 `11-vehicle-search-390.png`、更多导航 `13-more-390.png`、事件/自动化手机 `15-alerts-390.png` 与 `16-automation-390.png`、接入详情 `18-access-detail-390.png`、健康页 `21-health-390.png`。本报告作者未独立逐一打开这些补充图，不将其归为个人完成验证。
|
|
|
|
## 已完成验证
|
|
|
|
- 数据页业务测试：VehiclePage 15、HistoryPage 52、StatisticsPage 29，共 96 项通过；单车导航改变后 VehiclePage 15 项重跑通过。
|
|
- `productionEntry.test.ts` 10 项独立通过。仅将删除的眉题/装饰色/重复空状态断言改为共享组件、主标题及统一空态标题，保留启动、构建、ARIA、路由与业务契约断言。
|
|
- TypeScript 编译检查在本报告提交前重新执行并通过；`git diff --check` 通过。当前 tsconfig 未启用 `noUnusedLocals`，因此编译通过不等于所有历史未使用 import 已清理；本次未擅自修改其他代理文件。
|
|
- 当前 Node 测试环境使用 `NODE_OPTIONS=--no-experimental-webstorage`，避免运行时 experimental Web Storage 覆盖 jsdom 存储实现；业务存储逻辑未因此更改。
|
|
- 上述局部测试结果不是最终全套测试或生产验收的替代。
|
|
|
|
## 首轮审查提出的验证清单（结果见下）
|
|
|
|
1. 最新 CSS/JSX 改动后重拍车辆目录、单车首屏、390px 范围栏；核对 nowrap、圆角、100px 首栏及44px手机动作实际生效。
|
|
2. 重验轨迹日期完整显示、1024px 运维头部和右侧表列、手机地图图例安全区；长文本和权限不同的账户需检查。
|
|
3. 九页最终桌面/手机冒烟：键盘焦点、返回上下文、分页、筛选提交/重置、抽屉开关、导出任务入口、地图播放与跟随。不能仅凭静态图宣称交互通过。
|
|
4. 最终完整测试、TypeScript、生产 build 与产物检查；只以实际完成日志作为最终证据。
|
|
5. 生产更新后验证资源加载和九页关键路径，并抽查真实原生 32960 告警名称/详情及既有数据来源语义。发布前后数值不得拿 mock 样例比对。
|
|
6. 备份、提交、push、回退 Tag 和部署版本由主代理维护；本报告未独立检查远端备份、Git remote 或部署状态，不将其列为已完成证据。
|
|
|
|
|
|
## 主代理最终本地验收（18:48）
|
|
|
|
本节由主代理按实际浏览器结果补充，取代首轮中间截图的待修状态：
|
|
|
|
- 车辆目录与单车详情：`after/34-vehicles-final-1440.png`、`35-vehicle-detail-final-1440.png`、`41-vehicles-final-390.png` 已检查；单行操作、圆角、手机范围与批量同步不重叠。
|
|
- 轨迹：`40-tracks-final-1024.png` 查询标题、开始/结束日期完整；`31-track-final-390.png` 里程值完整；查询和键盘逐帧播放已实测。
|
|
- 全局监控：`32-monitor-final-390.png` 内容高度716px，底部图例不被导航遮挡；`33-monitor-1440.png` 桌面地图与列表可用。
|
|
- 接入：`38-access-fixed-1024.png` 指标恢复正常两行显示，修复旧网格轨道导致的裁切；手机协议保留在线/离线/无来源文案。
|
|
- 事件：`43-alerts-fixed-1024.png` 执行状态完整显示。修复外层970px最小宽度造成的滚动容器错位，由Semi表格承载横向滚动。
|
|
- 运维：`39-operations-final-1024.png` 头部说明和操作分行；`42-operations-menu-390.png` 手机更多操作包括批量处置、归档、导出、趋势、刷新，点击趋势成功打开详情。
|
|
- 历史查询、里程日期范围查询、车辆档案返回、帮助关闭、账号权限标签、事件/自动化切换均已实测。没有执行生产权限修改或发送通知。
|
|
- 完整Web测试79文件542项通过；后续修改针对AppShell/Alerts/Track/Operations重跑88项通过，最终表格修复后Alerts49项通过。最终 `npm run build`（包含TypeScript、Vite与产物门禁）通过，84个资源检查通过；`git diff --check`通过。
|
|
- 开发控制台存在Semi组件findDOMNode弃用告警，以及高德UI脚本初始化提示；地图实际可见。未将其报告为无错误控制台；生产构建继续单独检查。
|
|
- 本地截图用于UI验收；实际生产版本、原生告警与发布结果记录在 `release-verification.md`。
|