59 lines
3.3 KiB
Markdown
59 lines
3.3 KiB
Markdown
# Design QA
|
||
|
||
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/28e7be72-5b24-4b86-bae5-d0d4eb1015e2.png`
|
||
- Source pixel dimensions: `151 × 381`.
|
||
- Browser-rendered implementation: `/workspace/scratch/6e52996114b8/sidebar-popover-outside-20260909.jpg`
|
||
- Browser-rendered implementation dimensions: `1363 × 936`.
|
||
- Focused side-by-side comparison: `/workspace/scratch/6e52996114b8/sidebar-popover-outside-comparison-20260909.jpg`
|
||
- Implementation CSS viewport: `1363 × 936`, device scale factor `1`.
|
||
- State: PC dark theme, collapsed sidebar, pointer hovering the disabled “视觉风格” icon.
|
||
|
||
## Full-view comparison evidence
|
||
|
||
The browser render keeps the `64px` collapsed navigation rail unchanged. The visible popover is teleported to `body`, rendered above the content layer, and no longer begins inside the sidebar boundary.
|
||
|
||
## Focused region comparison evidence
|
||
|
||
The focused comparison places the supplied crop beside a `320 × 381` crop of the revised browser render. The source's red annotation identifies the content-side area beside the collapsed rail. Browser geometry confirms the sidebar ends at `x = 64px` and the popover body begins at `x = 65px`, leaving the body fully outside the sidebar while its arrow still points back to the icon.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- Typography: existing application and Naive UI popover typography are unchanged.
|
||
- Spacing and layout rhythm: the `64px` sidebar and icon rhythm remain unchanged. The popover's total inline-start margin is `24px`, producing a measured `1px` gap outside the sidebar edge.
|
||
- Colors and visual tokens: dark surfaces, selected green state and popover theme tokens remain unchanged.
|
||
- Image and asset fidelity: no raster or icon assets were added or modified.
|
||
- Copy and content: menu labels and locked-state explanation remain unchanged.
|
||
|
||
## Findings
|
||
|
||
- No actionable P0/P1/P2 visual or responsive issues remain.
|
||
- The disconnected local backend produces the expected in-page `502` response; it does not affect popover positioning.
|
||
|
||
## Primary interactions tested
|
||
|
||
- Collapsed the PC sidebar and hovered the “视觉风格” icon.
|
||
- Confirmed the popover content remained readable and the arrow still targeted the icon.
|
||
- Measured the sidebar and popover body bounds to confirm the popover starts outside the sidebar.
|
||
- Confirmed the popover is explicitly mounted to `body` with a high overlay level.
|
||
- Confirmed component tests continue to cover desktop-only popover rendering.
|
||
|
||
## Console errors checked
|
||
|
||
No application-origin console errors were reported. The cloud browser logged only extension metadata messages outside the application.
|
||
|
||
## Comparison history
|
||
|
||
- Iteration 1: the popover body began at `x = 51px` while the sidebar ended at `x = 64px`, leaving a `13px` overlap (P2).
|
||
- Fix: mounted the popover explicitly to `body`, raised its overlay level, and overrode Naive UI's default inline margin in the component style.
|
||
- Iteration 2: the revised browser render measured the popover body at `x = 65px`, a `1px` gap outside the sidebar edge, with no remaining P0/P1/P2 issue.
|
||
|
||
## Implementation checklist
|
||
|
||
- [x] Place the PC sidebar popover outside the collapsed rail.
|
||
- [x] Keep the arrow aligned with the hovered icon.
|
||
- [x] Prevent business content from covering the popover.
|
||
- [x] Keep existing sidebar spacing, colors, icons and copy.
|
||
- [x] Preserve desktop-only popover behavior.
|
||
|
||
final result: passed
|