docs: 更新视觉与权限设计走查记录
补充本期用户与权限、登录重构、看板优化等改动的视觉与交互走查记录。
This commit is contained in:
50
design-qa.md
50
design-qa.md
@@ -377,3 +377,53 @@ Fixes:
|
||||
No actionable P0/P1/P2 differences remain. The desktop capture API does not retain the transient popup layer in screenshots, so the open-menu labels were additionally verified through the accessibility tree; exact popup shadow rendering remains a non-blocking P3 capture gap.
|
||||
|
||||
final result: passed
|
||||
|
||||
---
|
||||
|
||||
# Login Page Responsive Design QA
|
||||
|
||||
## Evidence
|
||||
|
||||
- Source visual truth: `/Users/caoxiaozhu/.codex/generated_images/019f5f3f-f7e1-7e41-9605-ea307d9f09e6/exec-d376c603-0c47-45ad-86fd-3e99c1a95ec7.png`
|
||||
- Implementation route: `http://localhost:6801/login`
|
||||
- Implementation screenshot: unavailable because the in-app browser runtime could not initialize in this session.
|
||||
- Intended desktop viewport: 1536 × 1024.
|
||||
- Intended laptop viewports: 1366 × 768 and 1280 × 720.
|
||||
- State: unauthenticated login page, default username and password populated.
|
||||
|
||||
## Static and automated evidence
|
||||
|
||||
- Added a 1440px width breakpoint that shifts the split from 58/42 to 55/45 and caps the form at 440px.
|
||||
- Added a short-screen breakpoint for heights up to 820px that reduces title, form, input, footer, and panel spacing without hiding the left visual.
|
||||
- Kept the single-column fallback at 900px and below.
|
||||
- `regression-login-layout.mjs`: passed.
|
||||
- `regression-default-dashboard.mjs`: passed.
|
||||
- `vue-tsc -b --noEmit`: passed.
|
||||
- Vite dev transform for `LoginView.vue`: HTTP 200.
|
||||
- Production build: blocked by the pre-existing missing route component `UserPermissionView.vue`, outside the login-page change.
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: code uses the existing product font stack with laptop-specific display-size reductions; visual comparison remains unavailable.
|
||||
- Spacing and layout rhythm: dedicated width and height media queries are present; rendered measurements remain unavailable.
|
||||
- Colors and visual tokens: existing indigo tokens and the selected dark-purple visual asset are preserved.
|
||||
- Image quality and asset fidelity: the generated `login-hero-flow.png` is used directly; the official `logo.png` is reused for the brand lockup.
|
||||
- Copy and content: platform title, supporting copy, form labels, actions, and footer match the selected design.
|
||||
|
||||
## Findings
|
||||
|
||||
- [P2] Browser-rendered laptop comparison unavailable
|
||||
Location: login page at 1366 × 768 and 1280 × 720.
|
||||
Evidence: the in-app browser runtime failed during initialization, so no implementation screenshot or side-by-side comparison could be captured.
|
||||
Impact: static checks cannot prove that all visible spacing and crop details match the selected design at laptop sizes.
|
||||
Fix: capture both laptop viewports in a working in-app browser session, compare them with the source, and resolve any remaining P0/P1/P2 differences.
|
||||
|
||||
## Comparison history
|
||||
|
||||
### Iteration 1 — blocked
|
||||
|
||||
- User reported that the initial implementation was optimized for large displays and did not compose well on laptop screens.
|
||||
- Added explicit laptop-width and short-screen layout rules and passed targeted regression/type checks.
|
||||
- Post-fix visual evidence remains unavailable because browser capture is blocked.
|
||||
|
||||
final result: blocked
|
||||
|
||||
Reference in New Issue
Block a user