lingniu-vehicle-ingest/vehicle-data-platform/design-qa.md

账号管理 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