From 63e53b03f44ce2c2b3f16031c6339aab45ea2463 Mon Sep 17 00:00:00 2001 From: GouJ Date: Tue, 8 Sep 2026 14:28:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=BD=A2=E6=80=81?= =?UTF-8?q?=E5=9B=BE=E5=BA=93=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=AD=9B=E9=80=89?= =?UTF-8?q?=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 移动端将搜索、筛选和图标操作拆分为三行，避免状态筛选与四个操作按钮互相挤压。 --- design-qa.md | 58 +++++++++---------- .../subject-images/SubjectImagesPage.vue | 24 +++++++- tests/components/ui/flatTheme.test.ts | 9 ++- 3 files changed, 60 insertions(+), 31 deletions(-) diff --git a/design-qa.md b/design-qa.md index 068ca16..07cc8a3 100644 --- a/design-qa.md +++ b/design-qa.md @@ -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 diff --git a/src/features/subject-images/SubjectImagesPage.vue b/src/features/subject-images/SubjectImagesPage.vue index 498f04e..524fe3c 100644 --- a/src/features/subject-images/SubjectImagesPage.vue +++ b/src/features/subject-images/SubjectImagesPage.vue @@ -553,6 +553,7 @@ async function showStaleForms() {