refactor(ui): refine semi account governance
This commit is contained in:
lingniu
@@ -1,61 +1,57 @@
|
||||
# 接入管理 Semi UI Design QA
|
||||
# 账号管理 Semi UI Design QA
|
||||
|
||||
- source visual truth: Git `2c9399941` 的 `/access` 页面
|
||||
- source visual truth: 当前生产版本 `/users`
|
||||
- source screenshots:
|
||||
- `/tmp/access-desktop-baseline.png`
|
||||
- `/tmp/access-detail-baseline.png`
|
||||
- `/tmp/access-mobile-baseline-full.jpg`
|
||||
- `/tmp/users-desktop-before.png`
|
||||
- `/tmp/users-mobile-before.png`
|
||||
- implementation screenshots:
|
||||
- `/tmp/access-desktop-updated.jpg`
|
||||
- `/tmp/access-detail-updated.jpg`
|
||||
- `/tmp/access-mobile-updated.jpg`
|
||||
- `/tmp/users-desktop-after.png`
|
||||
- `/tmp/users-mobile-after.png`
|
||||
- `/tmp/users-mobile-detail-after.png`
|
||||
- implementation paths:
|
||||
- `apps/web/src/v2/pages/UsersPage.tsx`
|
||||
- `apps/web/src/v2/pages/UsersPage.test.tsx`
|
||||
- `apps/web/src/v2/styles/workspace.css`
|
||||
- viewport and state:
|
||||
- desktop `1440 × 900`，全部主车辆，未选中车辆
|
||||
- desktop detail `1440 × 900`，选中 `粤AG18312`
|
||||
- mobile `390 × 844`，全部主车辆，列表首屏
|
||||
- data source: local Vite UI plus the same `20302` mock API for both source and implementation
|
||||
- desktop `1440 × 900`，生产基线截图原始高度为 `810px`，在对比图中补齐到 `900px`
|
||||
- mobile `390 × 844`
|
||||
- 使用生产管理员真实数据，共 5 个客户账号
|
||||
- 验证账号目录、账号选中状态、车辆授权详情和移动端侧滑面板
|
||||
|
||||
## Comparison Evidence
|
||||
|
||||
- desktop before/after: `/tmp/access-desktop-comparison.jpg`
|
||||
- detail before/after: `/tmp/access-detail-comparison.jpg`
|
||||
- mobile before/after: `/tmp/access-mobile-comparison.jpg`
|
||||
- every comparison uses the same viewport, API data and interaction state; all three combined images were inspected with `view_image`.
|
||||
- desktop before/after: `/tmp/users-desktop-comparison.png`
|
||||
- mobile before/after: `/tmp/users-mobile-comparison.png`
|
||||
- directory focus before/after: `/tmp/users-directory-focus-comparison.png`
|
||||
- 三组对比图均已通过 `view_image` 并排检查。
|
||||
|
||||
## Fidelity Ledger
|
||||
|
||||
| Surface | Source evidence | Implementation evidence | Result |
|
||||
| Surface | Required fidelity | Implementation evidence | Result |
|
||||
| --- | --- | --- | --- |
|
||||
| Information hierarchy | The vehicle list already owns the viewport and the two top metrics stay restrained. | The list-first structure, metric count, filters, pagination and governance entry remain unchanged. | Preserved. |
|
||||
| Protocol identity | Desktop headers and protocol detail cards exposed internal names such as `GB32960`, `JT808` and `YUTONG_MQTT`. | Both surfaces now use the shared Semi protocol identity: `GB/T 32960`, `JT/T 808`, `宇通 MQTT`, with one consistent color grammar and human-readable descriptions. | Improved. |
|
||||
| Status scanability | Protocol state, time and provider were presented as loose text in wide table cells. | Each status is contained in a subtle semantic surface; online, offline and missing states remain distinguishable without increasing row height. | Improved. |
|
||||
| Selection feedback | Selection relied mainly on a light row fill. | The selected row keeps the light fill and adds a restrained blue leading accent; keyboard focus remains independently visible. | Improved. |
|
||||
| Detail evidence | Detail cards had raw protocol headings while their state tag used Semi UI. | Protocol identity and state are now both Semi UI primitives, with the protocol description directly beneath the tag. | Improved. |
|
||||
| Mobile density | Four vehicles were visible in the `390 × 844` viewport. | The same four-vehicle density, fixed pagination, touch targets and vertical-only scrolling are preserved. | Preserved. |
|
||||
| Responsive behavior | No horizontal overflow at desktop or mobile. | Browser verification reports no document-level horizontal overflow at `390 × 844`; desktop fixed columns and protocol scrolling remain functional. | Passed. |
|
||||
| Directory hierarchy | 账号列表必须占据主工作区，不能由相互割裂的大卡片主导。 | 桌面端改为连续的证据表，行间使用轻分隔线、克制悬浮反馈与选中左侧强调线。 | Improved. |
|
||||
| Account identity | 客户名称、登录账号和身份来源需形成稳定扫描顺序。 | 名称与账号仍居首，并新增 Semi `Tag` 标注“本地”或外部身份源。 | Improved. |
|
||||
| Permission evidence | 菜单数、车辆数、状态和最近登录需保持对齐。 | 权限数字采用紧凑的浅色单元格表面；状态和时间列仍在原有网格位置。 | Preserved. |
|
||||
| Selected state | 当前编辑账号必须可快速定位。 | 选中行同时保留背景色和蓝色前导强调，详情侧滑面板与选中行一致。 | Improved. |
|
||||
| Mobile density | 移动端不能为了桌面连续表牺牲触控与信息密度。 | `390 × 844` 下保留独立卡片间距、紧凑身份标签和可点击整行。 | Preserved. |
|
||||
| Detail workflow | 打开账号、切换车辆权限、关闭面板必须完整可用。 | 桌面与移动端均验证侧滑面板；移动端车辆授权列表、状态、页签和底部动作无重叠。 | Passed. |
|
||||
| Asset fidelity | 品牌 Logo 与图标体系不得被临时图形替换。 | 保留现有官方 Logo、Semi 图标及组件；没有新增手绘 SVG、CSS 图标或装饰性位图。 | Preserved. |
|
||||
|
||||
## Interaction And Accessibility Checks
|
||||
|
||||
- desktop protocol headers expose complete accessible names including protocol and Chinese description;
|
||||
- table row opens the vehicle detail sheet by pointer or keyboard;
|
||||
- selected row exposes `aria-expanded=true`;
|
||||
- protocol evidence expands and collapses without an API refetch;
|
||||
- mobile list remains vertically scrollable and has no document-level horizontal overflow;
|
||||
- existing filter, export, pagination and governance contracts remain covered by `AccessPage.test.tsx`.
|
||||
- 点击账号行可打开详情，关闭后回到原目录状态；
|
||||
- 车辆权限页签可点击，授权车辆卡片与状态信息完整；
|
||||
- 搜索与状态筛选入口保持原有行为；
|
||||
- 移动端侧滑面板没有遮挡页签、内容或底部动作；
|
||||
- 控制台无本次改动产生的运行时异常；仅存在 Semi UI 在 React StrictMode 下既有的 `findDOMNode` 弃用警告。
|
||||
|
||||
## Comparison History
|
||||
|
||||
### Pass 1 — passed
|
||||
### Pass 1 — fixed
|
||||
|
||||
- No P0/P1/P2 visual or interaction issue was found.
|
||||
- The desktop protocol columns are materially easier to scan while retaining the existing six-row viewport.
|
||||
- The detail sheet now matches the shared protocol language used by alert and history evidence surfaces.
|
||||
- Mobile structure is intentionally unchanged because the existing density and task priority already meet the product requirement.
|
||||
|
||||
## Intentional Constraints
|
||||
|
||||
- The compact coverage strip retains `32960 / 808 / 宇通` abbreviations because full tags would crowd the 292px context rail.
|
||||
- Semantic state surfaces use low-contrast borders and tints; they do not become large cards or compete with the vehicle and discrepancy columns.
|
||||
- No additional runtime query, animation or component state was introduced.
|
||||
- 原实现的桌面账号行被拆成多个带间距卡片，视觉体量偏大，证据列扫描节奏不连续。
|
||||
- 已收敛为连续目录表，并补充身份来源标签，让账号、授权和状态形成一条稳定阅读路径。
|
||||
- 修复后对比图中没有发现 P0、P1 或 P2 视觉与交互问题。
|
||||
- 当前唯一低风险残余是生产数据均为本地身份源，外部身份源标签由渲染逻辑覆盖，尚无生产样本可做视觉实证。
|
||||
|
||||
final result: passed
|
||||
|
||||
Reference in New Issue
Block a user