66 lines
4.5 KiB
Markdown
66 lines
4.5 KiB
Markdown
# Design QA
|
||
|
||
- Source visual truth:
|
||
- `/workspace/scratch/6e52996114b8/upload/75026374-fe20-45b3-9596-b704e404f14e.png`
|
||
- `/workspace/scratch/6e52996114b8/upload/672c002e-13b3-4a89-88ae-657cce7b1554.png`
|
||
- `/workspace/scratch/6e52996114b8/upload/bddc4895-360d-48d0-b248-d384283085bc.png`
|
||
- Source pixel dimensions: `466 × 307`, `486 × 213`, `496 × 358`.
|
||
- Intended implementation viewport: mobile dark theme, approximately `393px` CSS width.
|
||
- Implementation screenshot: unavailable.
|
||
- CSS size and density normalization: unavailable because the implementation could not be opened in the cloud browser.
|
||
- State: 形态图片默认筛选、分镜设计已完成统计、镜头生产首帧工具栏。
|
||
|
||
## Full-view comparison evidence
|
||
|
||
The three source images were opened and inspected. The first source shows two checkbox filters consuming a full mobile row and a redundant result count beside the layout switch. The second and third sources show desktop flex toolbar behavior wrapping on mobile, leaving unused horizontal regions before actions or after metrics.
|
||
|
||
The implementation passed formatting, TypeScript, focused component tests, and the production build. A local Sites preview started successfully at the required port, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation evidence is available.
|
||
|
||
## Focused region comparison evidence
|
||
|
||
- 形态筛选：两个复选框合并为“全部状态 / 缺少主图 / 身份过期”单选下拉；筛选容器使用统一 `12px` 内边距和更浅的混合背景；`460px` 以下隐藏结果数量，并让状态下拉与布局切换并排。
|
||
- 分镜设计：`760px` 以下工具栏改为单列网格，剧集、统计、操作分别占满整行；统计两端分布，操作从左侧开始排列。
|
||
- 镜头生产：`760px` 以下隐藏与镜头目录重复的“本集 N 镜”统计，工具栏操作从左侧连续排列。
|
||
|
||
These are code-level checks only and do not replace a rendered focused-region comparison.
|
||
|
||
## Required fidelity surfaces
|
||
|
||
- Fonts and typography: existing project font stack, sizes, weights, truncation, and copy were preserved; browser comparison is blocked.
|
||
- Spacing and layout rhythm: component-local responsive rules remove the marked mobile gaps and keep the existing compact header density; exact browser measurement is blocked.
|
||
- Colors and visual tokens: the filter background remains based on `--app-subtle` and is lightened with `color-mix`; browser sampling is blocked.
|
||
- Image quality and asset fidelity: no image assets or crop rules changed.
|
||
- Copy and content: existing product copy remains unchanged except the two checkbox labels now appear as equivalent dropdown options; the mobile-only duplicate shot count is visually hidden.
|
||
|
||
## Findings
|
||
|
||
- [P1] Browser-rendered comparison unavailable
|
||
- Location: all three target mobile states.
|
||
- Evidence: the preview process is healthy, but the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for `http://terminal.local:4173/`.
|
||
- Impact: exact responsive spacing, rendered Naive UI select behavior, primary interactions, and console state cannot be visually certified.
|
||
- Fix: open the same branch in an available browser with project data, capture the three target routes at `393px` width, and rerun this comparison.
|
||
|
||
## Primary interactions tested
|
||
|
||
Automated component tests cover search, subject type and image-status dropdown filtering, result count changes, layout switching, affected-shot selection, and reset behavior. Browser interactions were not available.
|
||
|
||
## Console errors checked
|
||
|
||
Not checked because the page could not be opened in the cloud browser.
|
||
|
||
## Comparison history
|
||
|
||
- Iteration 1: replaced the checkbox row, removed the mobile result count, and changed both workflow toolbars to deterministic mobile rows based on the three source annotations.
|
||
- Iteration 2: updated component contracts and interaction tests after the filter changed from checkboxes to a select. All focused tests passed; browser capture remained blocked.
|
||
|
||
## Implementation checklist
|
||
|
||
- [x] Replace the two image-state checkboxes with one dropdown.
|
||
- [x] Hide the mobile result count and keep the layout switch available.
|
||
- [x] Use equal filter-container padding and a lighter token-derived background.
|
||
- [x] Remove marked mobile toolbar gaps in storyboard and production.
|
||
- [x] Hide the duplicate mobile shot count in production.
|
||
- [ ] Capture and compare the three rendered states in the cloud browser.
|
||
|
||
final result: blocked
|