# Design QA — 医梦患者智能服务门户正式前端

## Comparison target

- Source visual truth:
  - `prototype/adjutant-mobile/qa/implementation-services.png`
  - `prototype/adjutant-mobile/qa/implementation-composer.png`
- Formal Vue implementation:
  - `artifacts/frontend-qa/formal-services-v2.png`
  - `artifacts/frontend-qa/formal-composer-v2.png`
- Combined evidence:
  - `artifacts/frontend-qa/comparison-services-v2.png`
  - `artifacts/frontend-qa/comparison-composer-v2.png`
- Browser viewport: `1280 × 720`
- Source and implementation mobile content viewport: normalized to `430 × 720` at 1× density
- Compared states:
  - 服务目录：门诊服务 / 诊前
  - 挂号会话：医生补槽后的默认回答与输入区

## Full-view comparison

- Formal Vue service catalog preserves the prototype hierarchy: title, search, first-level service cluster, second-level stage, agent list, disabled state, and bottom navigation.
- The three P0 agents retain their original semantic colors and enabled labels.
- Disabled agents remain visible but cannot be invoked.
- Desktop preview only adds a neutral outside canvas; the product itself remains a `430px` maximum-width mobile Web viewport.

## Focused-region comparison

- The formal conversation composer reproduces the prototype's single recommended-answer row.
- Voice, text, and camera/send controls retain the same order, radius, spacing, helper text, and interaction semantics.
- Focused comparison was required because these controls are too small for reliable judgment in the full-page view.

## Required fidelity surfaces

- Typography: hierarchy, Chinese font fallbacks, weights, line heights, truncation, and small helper copy match the prototype.
- Spacing and layout: final top spacing, horizontal tabs, card rhythm, bottom navigation, and composer dimensions match after normalization.
- Colors and tokens:医梦 purple, cyan, neutral disabled state, success, and risk colors map directly to the prototype tokens.
- Image and icon quality: the formal app uses the bundled Radix icon collection through Iconify; no placeholder glyphs or handcrafted SVG assets were introduced.
- Copy and content: hospital name, P0 labels, patient status, agent names, Mock notices, recommended answers, and structured medical result copy match the approved prototype.

## Comparison history

### Pass 1

- [P2] Formal page content started about 50 px higher than the approved prototype.
  - Fix: aligned root-page top padding to the source viewport.
- [P2] Automated pointer interaction left an overly strong focus ring on the persistent bottom navigation and recommended-answer control.
  - Fix: removed the mismatched focus outline from those two pointer-oriented controls while preserving input focus styling.

### Pass 2

- Revised side-by-side captures show matching hierarchy, density, spacing, colors, and component proportions.
- No actionable P0, P1, or P2 visual differences remain.

## Interaction and engineering checks

- Home, service catalog, health records, and profile navigation work.
- Service cluster and stage switching work.
- Search filters the current agent list.
- Only the three P0 agents are enabled.
- Registration completes voice-style slot filling, Mock doctor selection, Mock slot selection, confirmation, success, and emergency diversion.
- Report interpretation completes upload, processing, structured result, risk reminder, and follow-up.
- Tongue assessment completes constitution questions, image selection, MCP-style processing, structured result, and follow-up.
- Voice shortcut, text submission, camera/file selection, and recommended answers are interactive.
- Browser console warnings/errors checked: none.
- Unit tests: `27 passed`.
- End-to-end tests: `6 passed` across `390 × 844` mobile Web and `1280 × 720` desktop preview.
- Type check and production build passed.

## Follow-up polish

- [P3] Replace the generic hospital mark with the target hospital's official logo when the deployment hospital is confirmed.

final result: passed