fix: 优化形态图库移动端筛选布局
移动端将搜索、筛选和图标操作拆分为三行，避免状态筛选与四个操作按钮互相挤压。
This commit is contained in:
GouJ
+29
-29
@@ -1,49 +1,49 @@
|
||||
# Design QA
|
||||
|
||||
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/18a4bcb0-1b3a-43c8-b459-deef213b5c2f.png`
|
||||
- Source pixel dimensions: `235 × 137`.
|
||||
- Intended implementation viewport: responsive dark theme; desktop shows hover explanations and mobile disables them at `760px` and below.
|
||||
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/57970687-58ad-46f8-9977-15ec608a8b12.png`
|
||||
- Source pixel dimensions: `504 × 158`.
|
||||
- Intended implementation viewport: dark-theme mobile workspace, focused content width around `393px` CSS pixels.
|
||||
- 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 shows four adjacent icon buttons with two different spacing values: the grid/masonry pair is tightly grouped while refresh and batch image have visibly larger gaps.
|
||||
The source crop shows the search and type controls on the first row, while the second row combines a wide status select with four icon buttons. The second row is visually crowded and leaves the controls competing for the same horizontal space.
|
||||
|
||||
The implementation now places all four controls in one flex group with a shared `8px` gap. Grid, masonry, refresh, and batch image each use `NPopover`; all four popovers share the same responsive `disabled` state and are disabled at `max-width: 760px`.
|
||||
The mobile implementation now uses three explicit rows at container widths up to `460px`: full-width search, two equal-width selects, then a full-width right-aligned icon action row. The existing `10px` internal rhythm and icon ordering are preserved.
|
||||
|
||||
A local Sites preview started successfully, but the cloud browser rejected `terminal.local` with `net::ERR_BLOCKED_BY_CLIENT` on both attempts. Therefore no browser-rendered implementation screenshot is available.
|
||||
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
|
||||
|
||||
- Control order: grid → masonry → refresh → batch image.
|
||||
- Spacing: all four controls are direct children of the same `gallery-layout-switch` flex group with `gap: 8px`.
|
||||
- Desktop explanations: all four controls use hover-triggered `NPopover` copy.
|
||||
- Mobile behavior: all four popovers bind `:disabled="isMobile"`; the media query follows `(max-width: 760px)`.
|
||||
- Accessibility: every icon-only button retains a stable Chinese `aria-label`; native `title` attributes were removed from the first two buttons.
|
||||
- Row 1: search spans both grid columns.
|
||||
- Row 2: subject type and image status use equal-width `minmax(0, 1fr)` columns.
|
||||
- Row 3: the four icon actions occupy the complete row and align to the right.
|
||||
- Spacing: both column and row gaps are `10px`.
|
||||
- Accessibility and behavior: filter labels, layout switching, refresh, batch action, and mobile-disabled popovers remain unchanged.
|
||||
|
||||
These are code-level checks only and do not replace a rendered focused-region comparison.
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: no visible toolbar type styles changed; popover typography remains Naive UI-managed.
|
||||
- Spacing and layout rhythm: the four-button group now uses one uniform `8px` rhythm.
|
||||
- Colors and visual tokens: selected and unselected button colors are unchanged.
|
||||
- Image quality and asset fidelity: no image behavior changed.
|
||||
- Copy and content: desktop popovers explain `网格布局`, `瀑布流布局`, `刷新图库`, and `批量生图`; mobile keeps accessible names without hover overlays.
|
||||
- Fonts and typography: no typography or truncation rules changed.
|
||||
- Spacing and layout rhythm: mobile controls now follow a stable three-row grid instead of compressing the status select and actions together.
|
||||
- Colors and visual tokens: existing dark-theme surface and control tokens are unchanged.
|
||||
- Image quality and asset fidelity: no image behavior or assets changed.
|
||||
- Copy and content: all search, type, status, and icon action labels are preserved.
|
||||
|
||||
## Findings
|
||||
|
||||
- [P1] Browser-rendered comparison unavailable
|
||||
- Location: 形态图片筛选区的四个图标按钮。
|
||||
- Evidence: the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for the healthy local preview on two attempts.
|
||||
- Impact: exact pixel spacing, popover placement, hover visibility, responsive disabling, and console state cannot be visually certified.
|
||||
- Fix: capture the page in an available browser at desktop and mobile widths and compare the four-button control group.
|
||||
- Location: 形态图片移动端筛选区。
|
||||
- Evidence: the required cloud browser returns `net::ERR_BLOCKED_BY_CLIENT` for the healthy local preview.
|
||||
- Impact: exact responsive wrapping, control heights, touch spacing, and console state cannot be visually certified.
|
||||
- Fix: capture the page in an available browser near `393px` content width and compare the three-row filter layout.
|
||||
|
||||
## Primary interactions tested
|
||||
|
||||
Automated tests verify the exact four-button order, layout switching, refresh behavior, four desktop popover bindings, responsive disabled binding, accessible labels, and uniform generated `8px` CSS gap. All 275 tests pass. Browser hover and touch interaction were unavailable.
|
||||
Automated tests verify the mobile two-column grid, full-width search row, equal select row, full-width right-aligned icon row, filter behavior, icon ordering, layout switching, and refresh workflow. All 275 tests pass.
|
||||
|
||||
## Console errors checked
|
||||
|
||||
@@ -51,15 +51,15 @@ Not checked because the page could not be opened in the cloud browser.
|
||||
|
||||
## Comparison history
|
||||
|
||||
- Iteration 1: the source identified inconsistent spacing and missing explanations on the first two controls.
|
||||
- Iteration 2: consolidated all four controls into one spacing group, added popovers to grid and masonry, disabled all four popovers on mobile, and passed the full test/build suite. Browser capture remained blocked.
|
||||
- Iteration 1: the source identified crowding between the status filter and the four icon actions.
|
||||
- Iteration 2: separated mobile controls into search, equal filters, and action rows; the full test/build suite passed, while browser capture remained blocked.
|
||||
|
||||
## Implementation checklist
|
||||
|
||||
- [x] Give all four icon buttons the same gap.
|
||||
- [x] Add `NPopover` explanations to grid and masonry.
|
||||
- [x] Disable all four `NPopover` components on mobile.
|
||||
- [x] Preserve accessible labels and existing button behavior.
|
||||
- [ ] Capture and compare desktop hover and mobile touch states in the cloud browser.
|
||||
- [x] Give mobile search the full first row.
|
||||
- [x] Give type and status filters equal widths on the second row.
|
||||
- [x] Move four icon actions to a dedicated right-aligned third row.
|
||||
- [x] Preserve existing filter and action behavior.
|
||||
- [ ] Capture and compare the rendered mobile state in the cloud browser.
|
||||
|
||||
final result: blocked
|
||||
|
||||
Reference in New Issue
Block a user