feat: 补齐前端主流程并收紧工作台布局
统一工作台紧凑头部与形态图库间距,修复主体身份布局,并接入正式严格视频质量流水线。
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
# Design QA
|
||||
|
||||
- Source visual truth:
|
||||
- `/workspace/scratch/6e52996114b8/upload/83e0987d-5b6e-46b1-b39b-0674bf374f43.png`
|
||||
- `/workspace/scratch/6e52996114b8/upload/60e23391-685b-4538-95a2-46f6334f5f6d.png`
|
||||
- `/workspace/scratch/6e52996114b8/upload/430bec04-93fd-429f-a820-1edefdafc792.png`
|
||||
- Source pixel dimensions: `2048 × 819`, `447 × 203`, `238 × 198`.
|
||||
- Intended implementation viewport: desktop dark theme; the primary reference is `2048 × 819`.
|
||||
- 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 source images were opened and inspected. The first source shows the generic `.asset-image` width expanding the identity-anchor summary image across the detail panel and squeezing its explanatory copy into a narrow column on the far right. The second source shows the gallery summary/actions and filter panel consuming too much vertical space. The third source establishes the compact dark workspace density used by the surrounding pages.
|
||||
|
||||
The implementation passed lint, formatting, TypeScript, component/unit 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` on both the existing tab and one fresh tab. Therefore no browser-rendered implementation evidence is available.
|
||||
|
||||
## Focused region comparison evidence
|
||||
|
||||
- Identity anchor: `.identity-anchor > .asset-image` now has a component-local `80 × 80` square constraint with higher selector specificity than the generic AssetImage width rule. The adjacent copy has `min-width: 0`.
|
||||
- Identity detail container: the detail scrollbar, its container/content, and the panel now explicitly use `width: 100%`, `min-width: 0`, and `max-width: 100%` to contain long content.
|
||||
- Gallery density: the summary/actions moved into the `WorkspacePage` header and the filter region's vertical padding changed from `14px` to `5px`.
|
||||
- Page headers: every `WorkspacePage` caller now uses compact mode.
|
||||
|
||||
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, and wrapping were preserved; browser comparison is blocked.
|
||||
- Spacing and layout rhythm: the requested header compaction and `5px` gallery filter padding are implemented; browser measurement is blocked.
|
||||
- Colors and visual tokens: existing dark/light CSS variables were preserved; browser comparison is blocked.
|
||||
- Image quality and asset fidelity: no source assets were replaced or generated; existing backend images remain in use. Browser crop verification is blocked.
|
||||
- Copy and content: existing product copy is retained except where video generation now describes the formal strict-quality workflow.
|
||||
|
||||
## Findings
|
||||
|
||||
- [P1] Browser-rendered comparison unavailable
|
||||
- Location: all three target 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 visual fidelity, responsive behavior, interactions, and console state cannot be certified from the browser.
|
||||
- Fix: open the same preview in an available Work Mode cloud browser, reproduce the target data/theme, capture the three states, and rerun this QA.
|
||||
|
||||
## Primary interactions tested
|
||||
|
||||
Automated component tests cover filters, layout switching, workspace drawers, project-level formal storyboard actions, video quality API parameters, disabled states, receipts, and navigation. 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: identified the P1 implementation-capture blocker after the local preview started. No visual iteration could be completed.
|
||||
|
||||
## Implementation checklist
|
||||
|
||||
- [x] Constrain the identity anchor thumbnail and detail width.
|
||||
- [x] Move gallery summary/actions into the compact header.
|
||||
- [x] Change gallery filter vertical padding from 14px to 5px.
|
||||
- [x] Apply compact mode to all workspace pages.
|
||||
- [ ] Capture and compare the rendered identity and gallery states in the cloud browser.
|
||||
|
||||
final result: blocked
|
||||
Reference in New Issue
Block a user