short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 合并图库显示与操作入口

Browse Source 
移除顶部主图统计，将刷新图库和批量生图改为带悬浮说明的图标按钮，并移动到布局切换按钮之后。
This commit is contained in:
GouJ
2026-09-08 13:40:10 +08:00
committed by GitHub
parent 7230f2238c
commit e912eada04
5 changed files with 243 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-qa.md
+29 -26
View File
@@ -1,48 +1,51 @@
# Design QA
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/18c36dd0-af66-494f-9633-c0f6466a7cc9.png`
- Source pixel dimensions: `2048 × 106`.
- Intended implementation viewport: PC dark theme, approximately `2048px` CSS width.
- Source visual truth:
- `/workspace/scratch/6e52996114b8/upload/ff48911d-ddad-4f26-8607-08b588b13a47.png`
- `/workspace/scratch/6e52996114b8/upload/bd89ef3b-1804-44e7-b00c-d376e735fd70.png`
- Source pixel dimensions: `378 × 58` and `282 × 124`.
- Intended implementation viewport: responsive dark theme, with the focused mobile filter region at 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: 形态图片页顶部工具栏，主图统计在左、图库操作在右。
- State: 形态图片页默认筛选与网格布局。
## Full-view comparison evidence
The source crop was opened and inspected. The toolbar content sits inside a tall horizontal band, while the summary and actions are separated by nearly the full desktop width. This makes the content appear vertically loose and the center read as a large unused region.
The first source crop shows a separate top row containing the main-image count, refresh action, and batch-image action. The second crop identifies the display-control row after the result count and grid/masonry choices as the requested destination.
The component now uses symmetric `5px` vertical padding and a shared `34px` minimum alignment height for the toolbar, summary, and actions. On PC widths the actions no longer use automatic left margin, so the controls follow the summary as one compact toolbar group. Mobile keeps the existing split alignment.
The separate top row is now removed. The refresh and batch-image actions are icon-only buttons placed immediately after the grid/masonry group. Both keep accessible labels and use `NPopover` for visible hover explanations. The batch configuration drawer remains mounted without rendering its original trigger.
A local Sites preview started successfully, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT`. Therefore no browser-rendered implementation screenshot is available.
## Focused region comparison evidence
- Vertical alignment: summary and action groups share a `34px` alignment box with centered items.
- Header density: top and bottom padding are both `5px`.
- PC horizontal rhythm: automatic spacer is removed only above `760px`, preventing the wide empty center.
- Mobile behavior: the existing `margin-left: auto` remains active at `760px` and below.
- Removed content: the standalone `主图 x / y` summary is no longer rendered.
- Action order: result count → grid → masonry → refresh → batch image.
- Icon controls: refresh and batch image use the shared square `icon-button` sizing.
- Explanations: both new icon controls have hover-triggered `NPopover` copy.
- Drawer behavior: the external batch icon owns `aria-expanded` and opens the existing configuration drawer.
These are code-level checks only and do not replace a rendered focused-region comparison.
## Required fidelity surfaces
- Fonts and typography: unchanged; browser comparison is blocked.
- Spacing and layout rhythm: header padding is symmetric and the PC toolbar is grouped continuously.
- Colors and visual tokens: unchanged.
- Fonts and typography: the removed labels no longer consume toolbar width; popover typography remains Naive UI-managed.
- Spacing and layout rhythm: actions are consolidated into the existing display-control flex row.
- Colors and visual tokens: existing button states and theme tokens are unchanged.
- Image quality and asset fidelity: no image behavior changed.
- Copy and content: unchanged.
- Copy and content: `刷新图库` and `批量生图` move from button text into popover and accessible labels; receipt state remains visible in the batch popover.
## Findings
- [P1] Browser-rendered comparison unavailable
- Location: 形态图片页顶部工具栏。
- Location: 形态图片筛选区的显示与操作按钮。
- Evidence: the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for the healthy local preview.
- Impact: exact vertical centering, final toolbar width, responsive transition, and console state cannot be visually certified.
- Fix: capture the page in an available browser at the same desktop width and compare the toolbar crop.
- Impact: exact wrapping, popover position, hover behavior, drawer transition, and console state cannot be visually certified.
- Fix: capture the page in an available browser at the requested responsive widths and compare the consolidated control row.
## Primary interactions tested
Automated style-contract tests protect the symmetric padding, shared alignment height, and PC-only removal of the automatic spacer. All 275 tests pass. Browser interactions were unavailable.
Automated tests verify the new accessible refresh trigger, removal of the old heading row, batch drawer opening through the relocated trigger, and all existing refresh/batch workflows. All 275 tests pass. Browser hover interaction was unavailable.
## Console errors checked
@@ -50,16 +53,16 @@ Not checked because the page could not be opened in the cloud browser.
## Comparison history
- Iteration 1: identified asymmetric perceived vertical spacing and an oversized empty center caused by right-pushing the action group.
- Iteration 2: normalized the toolbar to a compact `44px` total height and grouped desktop actions beside the summary. Full tests and production build pass; browser capture remains blocked.
- Iteration 1: identified duplicated vertical chrome and text-heavy actions outside the filter controls.
- Iteration 2: removed the standalone summary row, consolidated two icon-only actions after the layout controls, added popover explanations, and passed the full test/build suite. Browser capture remained blocked.
## Implementation checklist
- [x] Center summary and actions within the same toolbar height.
- [x] Use equal top and bottom header padding.
- [x] Remove the wide PC-only automatic spacer.
- [x] Preserve the existing mobile split layout.
- [x] Add style-contract regression assertions.
- [ ] Capture and compare the rendered desktop state in the cloud browser.
- [x] Remove the standalone main-image summary.
- [x] Convert refresh and batch image actions to icon-only buttons.
- [x] Move both actions after the layout switch.
- [x] Add `NPopover` explanations and accessible labels.
- [x] Preserve batch drawer and refresh behavior.
- [ ] Capture and compare the rendered responsive state in the cloud browser.
final result: blocked