prop-ai-hr/design-qa.md

Figma implementation QA — employee Today and Practice

Scope and evidence

• Source visual truth: Figma file 30hFiKtieGYraOZvJPJcPd, frames 23:3 (Today), 53:2 (Practice prep), 54:2 (Practice active).
• Source screenshots: .tmp/audit/2026-07-15-figma-online/figma/01-today.png, 02-practice-prep.png, 03-practice-active.png.
• Deployed implementation: https://peilian.njzhmj.top/h5/.
• Implementation screenshots: .tmp/audit/2026-07-15-figma-online/online/07-today-authenticated-final.png, 08-practice-prep-final.png, 09-practice-active-round2-final.png.
• Combined comparison evidence: .tmp/audit/2026-07-15-figma-online/qa-online-today-final.png, qa-online-practice-prep-final.png, qa-online-practice-active-final.png.
• Viewport: 400 × 900 CSS pixels, device scale factor 1.
• State: authenticated employee test account; Today with real production assignments; Practice prep; Practice active at round 2/3.
• Primary interactions tested: fixed-code login, open Practice, start a session, submit one response, receive customer/coach turns.
• Browser checks: innerWidth=400, document/body scrollWidth=400, no captured runtime or console errors on all three final online captures.

Focused region comparisons were not needed: all typography, controls, icons, copy, and state cards were legible in the 800px-wide combined images.

Comparison history

1. Initial online audit reported horizontal clipping from screenshots made with Chrome --window-size=400. Verification showed headless Chrome had actually laid out at its 500px minimum width and cropped the output. A real CDP mobile emulation pass measured innerWidth=400 and scrollWidth=400; the reported overflow was withdrawn and no global overflow workaround was added.
2. The corrected comparison found P1 drift on Today: oversized mentor hero, blue primary actions, multicolor full-bleed map tiles, and loose vertical rhythm. The hero was reduced to a contained card, the primary system was changed to Silver City red, map tiles became light outlined cards with semantic icon accents, and spacing was tightened.
3. Practice prep used a large white wrapper and did not fit the Figma hierarchy. It was changed to separate red/white lightweight cards with a compact scenario pill and a single-screen CTA.
4. Interaction QA found that starting Practice left the active dialogue below Recent and Daily sections. Prep, active, and result states now render mutually exclusively, and the page heading changes with the state. The final active-state capture shows round 2/3 immediately after the heading.

Required fidelity surfaces

• Fonts and typography: sizes, weights, wrapping, and hierarchy now match the source closely. The app intentionally retains the system Chinese font stack instead of loading LXGW WenKai TC; this avoids a large or network-dependent font payload while preserving readable metrics.
• Spacing and layout rhythm: hero, cards, chips, prep sections, CTA, and fixed tab bar align to the 400px frame without horizontal scroll. Real production Today data contains two tasks, so the map starts lower than the one-task Figma mock.
• Colors and tokens: employee and supervisor shared primary tokens, selected tab color, cards, buttons, progress bars, and coach states use #e60012 with red soft surfaces. Green/orange/gray remain only as semantic accents.
• Image quality and assets: the supplied mentor raster, brand mark, tab icons, and uni-icons assets are used directly; no placeholder or generated replacement was introduced.
• Copy and content: implementation uses real API scenario/task/customer/coach copy. Differences from the mock are data-driven rather than placeholder drift.

Findings

No actionable P0, P1, or P2 findings remain in the implemented employee Today, Practice prep, and Practice active scope.

Accepted differences

• Production Today has two real tasks while the Figma frame contains one; the extra row is preserved instead of hiding business data.
• The active conversation may contain more turns than the fixed mock, so the response composer can move below the first viewport after longer exchanges.
• LXGW WenKai TC is not bundled; system typography is the deliberate production choice.

Outside this pass

• Practice result was not persisted solely for a screenshot, so frame 55:2 remains an authenticated visual follow-up.
• The authorized supervisor test account currently returns the real “无主管权限” state, so the authenticated supervisor dashboard frame 57:2 remains blocked by production organization mapping rather than frontend rendering.

employee/mobile final result: passed

2026-07-22 — 管理端 R1 运营总览信息架构

Scope and evidence

• Source visual truth: user-provided high-fidelity reference /var/folders/05/f0xfl3r11yb9vp23tnf_8pz80000gn/T/codex-clipboard-e50a52e1-6064-47c3-9a29-c7c1f486ffb6.png.
• Implementation scope: frontend/src/views/index.vue, frontend/src/layout/components/Sidebar/index.vue, and the related access/route controls.
• Final desktop capture: /Users/yuanjiantsui/.codex/visualizations/2026/07/22/019f87d2-0cfa-7643-af2a-ecb6eed88c1d/admin-home-ia-audit/operations-overview-1610x977-final-v4.jpg.
• Final mobile capture: /Users/yuanjiantsui/.codex/visualizations/2026/07/22/019f87d2-0cfa-7643-af2a-ecb6eed88c1d/admin-home-ia-audit/operations-overview-320x844-final-v3.jpg.
• Combined comparison inspected: /Users/yuanjiantsui/.codex/visualizations/2026/07/22/019f87d2-0cfa-7643-af2a-ecb6eed88c1d/admin-home-ia-audit/reference-vs-operations-overview-final-v4.jpg.
• Viewports: source and desktop implementation 1610 × 977 CSS pixels; mobile implementation 320 × 844 CSS pixels.
• State: authenticated local operations console on /index; the cards use the current API response. This is local evidence only, not a deployment or production check.

Comparison history and findings

1. The dashboard now uses a clear operating sequence: today's actionable items → trial-loop progress and acceptance state → knowledge, recent training, and platform health. The bottom three panels remain fully inside the desktop viewport (bottom edge measured at 966.2px in a 977px viewport).
2. The left navigation is grouped by current business ownership: training, work results, knowledge, content, co-creation, recruitment/organization, and platform settings. It uses real links, an active state, keyboard focus, collapsible navigation, and a visible 184px expanded width matching the reference's visual weight.
3. The reference's numbers and status colors are a static proposal. The implementation deliberately keeps current API values and their truthful states instead of recreating the reference's mock values. The tenant selector remains; no non-functional project/date filters were added.
4. At 320px, the task cards stack cleanly, the document width stays within the viewport, and the recent-training table has an intentional horizontal scroll region (248px viewport width / 498px content width). The knowledge metric 0 条已完成 now remains on one line on desktop.
5. Interaction checks covered navigation, the /admin/* alias active state, sidebar collapse/expand, refresh feedback through an aria-live message, and access checks for protected console routes. The fixed console is restricted to the same superadmin / hr_operator role matrix used by the related backend APIs.

Runtime note

• The local Vite preview emits existing Vue Router next() deprecation warnings and unavailable local SSE connection messages. Neither blocked the dashboard or the interactions above; no dashboard-specific JavaScript exception was observed during this visual pass.

final result: passed (locally implemented and visually verified; not deployed or production-verified)