From 6e1197d3210e30334177d86b68cface39c72b355 Mon Sep 17 00:00:00 2001 From: caoxiaozhu Date: Tue, 14 Jul 2026 16:11:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E4=B8=8E=E6=9D=83=E9=99=90=E8=AE=BE=E8=AE=A1=E8=B5=B0=E6=9F=A5?= =?UTF-8?q?=E8=AE=B0=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 补充本期用户与权限、登录重构、看板优化等改动的视觉与交互走查记录。 --- design-qa.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/design-qa.md b/design-qa.md index ce1b24c..381eee6 100644 --- a/design-qa.md +++ b/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