58 lines
3.5 KiB
Markdown
58 lines
3.5 KiB
Markdown
# 账号管理 Semi UI Design QA
|
||
|
||
- source visual truth: 当前生产版本 `/users`
|
||
- source screenshots:
|
||
- `/tmp/users-desktop-before.png`
|
||
- `/tmp/users-mobile-before.png`
|
||
- implementation screenshots:
|
||
- `/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`，生产基线截图原始高度为 `810px`，在对比图中补齐到 `900px`
|
||
- mobile `390 × 844`
|
||
- 使用生产管理员真实数据，共 5 个客户账号
|
||
- 验证账号目录、账号选中状态、车辆授权详情和移动端侧滑面板
|
||
|
||
## Comparison Evidence
|
||
|
||
- 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 | Required fidelity | Implementation evidence | Result |
|
||
| --- | --- | --- | --- |
|
||
| 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
|
||
|
||
- 点击账号行可打开详情，关闭后回到原目录状态；
|
||
- 车辆权限页签可点击，授权车辆卡片与状态信息完整；
|
||
- 搜索与状态筛选入口保持原有行为；
|
||
- 移动端侧滑面板没有遮挡页签、内容或底部动作；
|
||
- 控制台无本次改动产生的运行时异常；仅存在 Semi UI 在 React StrictMode 下既有的 `findDOMNode` 弃用警告。
|
||
|
||
## Comparison History
|
||
|
||
### Pass 1 — fixed
|
||
|
||
- 原实现的桌面账号行被拆成多个带间距卡片，视觉体量偏大，证据列扫描节奏不连续。
|
||
- 已收敛为连续目录表，并补充身份来源标签，让账号、授权和状态形成一条稳定阅读路径。
|
||
- 修复后对比图中没有发现 P0、P1 或 P2 视觉与交互问题。
|
||
- 当前唯一低风险残余是生产数据均为本地身份源，外部身份源标签由渲染逻辑覆盖，尚无生产样本可做视觉实证。
|
||
|
||
final result: passed
|