refactor(ui): refine semi mobile workspace launcher
This commit is contained in:
@@ -47,4 +47,53 @@
|
||||
- 同视口并排对比确认地图在首屏获得约 `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`
|
||||
- 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`
|
||||
- comparison evidence:
|
||||
- before/after: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-ui-shell/compare-more-before-after.png`
|
||||
- viewport and state:
|
||||
- mobile `390 × 844`
|
||||
- 管理员权限、全局监控列表模式
|
||||
|
||||
### 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 视觉与交互问题。
|
||||
|
||||
final result: passed
|
||||
|
||||
Reference in New Issue
Block a user