# Design QA — 医梦患者智能服务门户 P0

## Comparison target

- Source visual truth:
  - `qa/reference-services-normalized.png`
  - `qa/reference-composer-normalized.png`
- Implementation:
  - `qa/implementation-services.png`
  - `qa/implementation-composer.png`
- Combined comparison evidence:
  - `qa/comparison-services.png`
  - `qa/comparison-composer.png`
- Browser viewport: `1280 × 720`
- Mobile Web content viewport: `428 × 720 CSS px`
- Density: browser screenshot at 1×
- Source pixels:
  - Service reference: `849 × 1888`, normalized to `324 × 702`
  - Composer reference: `1178 × 289`, normalized to `428 × 105`
- Implementation pixels:
  - Service catalog: `428 × 720`
  - Composer region: `428 × 190`
- State:
  - Service catalog: 门诊服务 / 诊前
  - Conversation: 智能分诊挂号 / 医生补槽

The references describe component structure and interaction density rather than the same hospital content. Native status bars and provider logos were therefore excluded from fidelity requirements; the P0 target is explicitly a mobile Web portal.

## Full-view comparison

- The service page keeps the reference hierarchy: search, first-level horizontal directory, second-level stage chips, then vertically stacked agent cards.
- The implementation uses hospital-facing categories from the supplied Excel and preserves the current医梦 color system rather than copying the reference app's branding.
- Enabled and disabled services are visually distinct without changing the page skeleton.
- No device bezel, native status bar, native home indicator, or simulated native keyboard is present in the final mobile Web view.

## Focused-region comparison

- The composer comparison verifies the required three-part control: voice on the left, text in the center, and camera/send on the right.
- A single clickable “推荐回答” row is placed directly above the composer, matching the requested patient guidance pattern.
- The focused comparison was required because the input controls and suggestion affordance are too small to judge reliably in the full service-page view.

## Required fidelity surfaces

- Typography: clear title/body/helper hierarchy; compact Chinese mobile-web sizes remain readable; no problematic wrapping in the compared states.
- Spacing and layout: stable 18 px page margins, pill-shaped search and composer, consistent card rhythm, and persistent bottom controls without overlap.
- Colors and tokens: existing医梦 purple/cyan semantic tokens retained; disabled services use neutral opacity and enabled P0 services use distinct semantic colors.
- Image and icon quality: standard icon-library vectors are used for portal capabilities. External provider logos from the reference were intentionally not copied because the cards represent医梦 platform capabilities, not third-party organizations.
- Copy and content: service names follow the supplied Excel; only the three P0 services are labeled “P0 已开通”; default answers use realistic patient language.

## Comparison history

### Pass 1

- [P2] Native runtime residue remained visible as a home indicator and mobile cursor.
  - Fix: hid runtime-only status, home-indicator, cursor, device frame, device picker, and keyboard elements in the app-owned Web presentation stylesheet.
- [P2] The first conversation composer did not yet mirror the reference's voice/text/photo hierarchy.
  - Fix: rebuilt it as a rounded Web composer and added a separate default-answer row above it.

### Pass 2

- Revised captures show no remaining native chrome.
- Service navigation, disabled state, P0 entry state, and the conversation recommendation control are visually clear.
- No actionable P0, P1, or P2 findings remain.

## Interaction checks

- Opened 服务 and switched 门诊服务 from 诊前 to 诊中.
- Confirmed only 智能分诊挂号、中医舌诊、检验检查报告解读 are enabled.
- Confirmed disabled agents cannot be clicked.
- Used the recommended answer to move registration from initial request to doctor follow-up and Mock slot selection.
- Used the recommended answers to complete report upload/analysis and reach the structured report result.
- Used the recommended answers to complete tongue questions, image upload, MCP processing, and the综合结果.
- Browser console warnings/errors checked: none.
- Runtime integrity, production build, and Sites packaging tests all passed.

## Follow-up polish

- [P3] After real hospital branding is confirmed, replace the generic hospital mark with the hospital-provided logo asset.

final result: passed