148 lines
11 KiB
Markdown
148 lines
11 KiB
Markdown
# Design QA
|
||
|
||
- Source visual truth: `.prototype-run/xiaoqikong-fidelity-rebuild-20260711/prototypes/selected-karst-breath.png`
|
||
- Implementation screenshot: `.prototype-run/xiaoqikong-fidelity-rebuild-20260711/qa/screenshots/admin-dense-final.browser.jpg`
|
||
- Comparison surface: `.prototype-run/xiaoqikong-fidelity-rebuild-20260711/qa/comparison-final-v3.jpg`
|
||
- Viewport/state: desktop admin operations overview, authenticated, light theme, real local seed data
|
||
|
||
## Full-view comparison
|
||
|
||
The implementation now follows the selected image's major composition: slim brand header, compact route navigation, four-item operational metric band, a dominant left queue workspace, and a narrower right rail containing latest-call status, exceptions, and recent activity. The main/right proportions, pale mineral canvas, evergreen accents, contour motif, compact borders, selected-row treatment, and tabular numeric hierarchy are visibly aligned.
|
||
|
||
## Focused-region comparison
|
||
|
||
- Header and metrics: brand lockup, whitespace, vertical separators, numeric emphasis, and restrained green hierarchy match the source language.
|
||
- Queue workspace: filters, aligned column header, selected row outline, project/batch/status/time relationships, and pagination footer are present and functional.
|
||
- Context rail: latest call, progress, waiting estimate, exception state, and recent activity are stacked in the same priority order as the source.
|
||
- Typography: system Chinese sans, tabular numerals, strong dark-green headings, compact secondary copy, and restrained weights are consistent with the reference.
|
||
- Asset fidelity: the supplied official logo is used directly; no generated or code-drawn replacement is used.
|
||
|
||
## Comparison history
|
||
|
||
1. Earlier implementation failed with a P1 layout mismatch: it retained a generic sidebar dashboard and omitted the source image's main-table/right-rail composition.
|
||
2. The operations overview was rebuilt into the selected image's metric band, queue table, and contextual rail. Functional project filters, search, row selection, refresh, status states, private contact projection, and pagination were retained.
|
||
3. A second comparison found the vertical sidebar still consumed the source's primary workspace. Navigation was moved to a compact horizontal route strip and the work area was expanded to the source proportions.
|
||
4. A final density pass added an explicitly labeled demonstration view with ten non-persistent projects, full right-rail content, and pagination. A visible toggle restores live API data, and no demonstration record is written to the database.
|
||
|
||
## Findings
|
||
|
||
- P0: none.
|
||
- P1: none.
|
||
- P2: none.
|
||
- P3: none.
|
||
|
||
## Primary interactions tested
|
||
|
||
- Route navigation remains available.
|
||
- Queue status filter and project search update the visible project list.
|
||
- Selecting a project updates the latest-call context rail.
|
||
- Refresh retains existing asynchronous behavior.
|
||
- Existing admin phone/privacy projection remains covered by tests.
|
||
- Browser console: zero errors and zero warnings.
|
||
|
||
## Multisurface reconstruction status
|
||
|
||
- Sources: `staff-mobile.png`, `visitor-mobile.png`, and `public-display.png` in `.prototype-run/xiaoqikong-multisurface-20260711/prototypes/`.
|
||
- Implementation: staff, visitor, and public-display DOM structures were rebuilt against those exact sources.
|
||
- Automated verification: 24/24 tests passed; TypeScript and production build passed.
|
||
- Visual comparison blocker: the in-app browser rejected the local preview URL under its URL security policy, so matching-viewport implementation screenshots could not be captured after the rebuild.
|
||
- The earlier admin comparison above remains passed; the new three-surface comparison must not inherit that result.
|
||
|
||
historical result: blocked
|
||
|
||
---
|
||
|
||
## Phase 32 员工端叫号指标与队列展示
|
||
|
||
- Source visual truth: `/var/folders/pq/fhy1w3z94077dxsjlb5d7p5m0000gn/T/codex-clipboard-4597599f-64bb-464e-be56-f742b8f32e94.png`
|
||
- Implementation full screenshot: `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase32-mobile-full.png`
|
||
- Implementation focused screenshot: `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase32-call-focused.jpg`
|
||
- Viewport/state: 390×844 authenticated employee call page, real local queue data, default collapsed queue; additional checks at 720px and 1280px widths
|
||
|
||
### Full-view comparison
|
||
|
||
The implementation preserves the reference's white employee header, official logo, evergreen palette, single rounded call card, strong title, full-width quick-call action, and paired quantity/action rows. The latest written brief intentionally supersedes two details visible in the supplied source: the internal horizontal rules are removed, and the number/people call buttons now use the same green primary treatment.
|
||
|
||
The lower call workspace now presents six balanced indicators in the requested order, followed by a naturally flowing queue. The first ten entries fit the page hierarchy without an internal scrollbar, and the fixed employee navigation remains clear of the content.
|
||
|
||
### Focused-region comparison
|
||
|
||
- Call module: title, quick action, two quantity inputs, and two call modes remain in the same order as the source; computed title and mobile mode horizontal borders are both 0px.
|
||
- Color: the number-call and people-call buttons both compute to `rgb(11, 107, 58)` with white text.
|
||
- Metrics: the visible labels are exactly 最新叫到、本次叫号人数、下一个号、下个号人数、剩余未叫号、剩余未叫人数; the two superseded labels are absent.
|
||
- Queue layout: the three mobile tracks are 98.664px each, with content centers at approximately 66px, 195px, and 323px, producing a symmetric left/center/right scan line.
|
||
- Natural expansion: the list computes to `max-height:none` and `overflow-y:visible`; client height equals scroll height in both collapsed and expanded states.
|
||
- Responsive behavior: 390px, 720px, and 1280px views have no horizontal overflow. The desktop-only vertical mode separator remains; no horizontal mode separator appears at mobile or tablet widths.
|
||
- Accessibility: the expansion control exposes `aria-controls` and toggles `aria-expanded`; all call inputs and buttons retain their accessible names and keyboard focus treatment.
|
||
|
||
### Comparison history
|
||
|
||
1. Captured and opened the supplied reference before implementation.
|
||
2. Implemented the written deltas on the existing design system without replacing brand assets or changing call APIs.
|
||
3. Compared the reference, focused call-module crop, and full 390px implementation in the same review input. No P1/P2 mismatch remained; visible differences in dividers and button color are the requested changes.
|
||
4. Verified the default 10-item state, expanded 200-item real queue state, collapsed state, sticky scroll state, tablet breakpoint, desktop breakpoint, and console output.
|
||
|
||
### Findings
|
||
|
||
- P0: none.
|
||
- P1: none.
|
||
- P2: none.
|
||
- P3: none.
|
||
|
||
### Primary interactions tested
|
||
|
||
- “查看更多” changes the queue from 10 to 200 rendered items and grows the page from 1684px to 15104px without creating an internal scroll area.
|
||
- “收起” restores 10 rendered items and the original page height.
|
||
- At mobile scroll position 840.5px, the sticky call module starts exactly below the 83px header with zero overlap.
|
||
- Automated verification: 14 test files, 52 tests passed; TypeScript and production build passed.
|
||
- Browser console: zero errors and zero warnings.
|
||
|
||
historical result: passed
|
||
|
||
---
|
||
|
||
## Phase 34 员工端批量按钮与指标分隔
|
||
|
||
- Source visual truth: `/var/folders/pq/fhy1w3z94077dxsjlb5d7p5m0000gn/T/codex-clipboard-4597599f-64bb-464e-be56-f742b8f32e94.png` plus the latest written deltas for two light batch buttons and a restored metric divider
|
||
- Implementation viewport screenshot: `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase34-mobile-viewport.png`
|
||
- Implementation call-module crop: `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase34-call-focused.jpg`
|
||
- Before/after metric crops: `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase32-metrics-focused.jpg` and `/Users/inmanw/.codex/visualizations/2026/07/15/019f65e4-386f-7d50-b2e1-40a0b166571d/staff-phase34-metrics-focused.jpg`
|
||
- Viewport/state: 390×844 authenticated employee call page with real local queue data; breakpoint checks at 720px and 721px
|
||
|
||
### Full-view comparison
|
||
|
||
The employee page keeps the reference's official logo, white header, evergreen hierarchy, rounded call card, full-width primary quick-call action, and paired quantity/action rows. The two batch actions now use the requested light treatment, so the dark green remains reserved for “快速叫下一个号.” The lower metric grid retains its compact two-column rhythm and now shows an uninterrupted center divider on every row.
|
||
|
||
### Focused-region comparison
|
||
|
||
- Fonts/typography: existing Chinese sans-serif family, weights, line heights, and centered button labels remain unchanged; the two new labels fit without wrapping at 390px.
|
||
- Spacing/layout: the call card remains 366px wide inside the 390px shell. Input/action pairs keep equal row heights and gaps. The “下一个号 / 下个号人数” cards meet at the same x-coordinate with zero gap.
|
||
- Colors/tokens: “批量叫号” and “批量叫人” both compute to white background, `rgb(11, 107, 58)` border, and matching green text by reusing `button--secondary`.
|
||
- Divider: the fourth metric has a 1px left border in `rgb(213, 222, 216)` at 390px and 720px. At 721px the grid returns to three columns and the fourth item correctly starts a new row without a left border.
|
||
- Image quality/assets: the supplied official logo and existing raster treatment are untouched; no generated, placeholder, SVG, or CSS-drawn asset was introduced.
|
||
- Copy/content: the visible batch actions are exactly “批量叫号” and “批量叫人”; the previous button names are absent. Precise mode/input accessible labels remain available.
|
||
- Accessibility/behavior: both batch buttons remain enabled in the running state, retain visible focus treatment, and call the same ticket/people modes and counts as before.
|
||
|
||
### Comparison history
|
||
|
||
1. The Phase 32 implementation used dark green for both batch buttons, and the mobile fourth metric inherited the desktop `nth-child(3n+1)` border reset, leaving the middle-row divider missing.
|
||
2. Both batch buttons were switched to the shared light secondary style and renamed. The mobile rule now explicitly restores left borders on even metric items.
|
||
3. The original reference, current call-module crop, and before/after metric crops were reviewed in the same comparison input. The post-fix capture shows both requested corrections with no P0/P1/P2 mismatch.
|
||
|
||
### Findings
|
||
|
||
- P0: none.
|
||
- P1: none.
|
||
- P2: none.
|
||
- P3: none.
|
||
|
||
### Primary interactions tested
|
||
|
||
- Both renamed batch buttons are present, enabled, and mapped to the unchanged call handlers.
|
||
- The people-count over-limit validation still blocks submission and reports the existing error.
|
||
- 390px and 720px show the restored divider; 721px preserves the intended desktop three-column border logic.
|
||
- Automated verification: 14 test files, 52 tests passed; TypeScript and production build passed.
|
||
- Browser console: zero errors and zero warnings.
|
||
|
||
final result: passed
|