feat: add party-size queueing and call modes

design-qa.md

@@ -48,4 +48,100 @@ The implementation now follows the selected image's major composition: slim bran
 - 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.
 
-final result: blocked
+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