fix: 收紧图库顶部工具栏布局

统一顶部统计与操作按钮的垂直居中高度，并在桌面端取消自动撑开的中间空白，移动端布局保持不变。

design-qa.md

@@ -1,47 +1,48 @@
 # Design QA
 
-- Source visual truth: `/workspace/scratch/6e52996114b8/upload/3a24dd71-f577-4f90-b1ac-08b999acdce4.png`
+- Source visual truth: `/workspace/scratch/6e52996114b8/upload/18c36dd0-af66-494f-9633-c0f6466a7cc9.png`
-- Source pixel dimensions: `426 × 179`.
+- Source pixel dimensions: `2048 × 106`.
-- Intended implementation viewport: mobile dark theme, approximately `393px` CSS width.
+- Intended implementation viewport: PC dark theme, approximately `2048px` 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 screenshot was opened and inspected. It shows the active grid-layout button with a green background while the adjacent inactive masonry-layout button has no separate surface and blends into the filter container.
+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 component now assigns an explicit active-state class to both layout choices and gives only the inactive choice `var(--app-control-hover)`. The active primary button keeps its existing green state, while switching layouts moves the light background to the newly inactive choice.
+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.
 
 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
 
-- Selected layout button: keeps the existing primary green background.
+- Vertical alignment: summary and action groups share a `34px` alignment box with centered items.
-- Unselected layout button: uses the existing shallow control-hover token so it remains distinct from the filter group in dark and light themes.
+- Header density: top and bottom padding are both `5px`.
-- Switching behavior: the active class and shallow inactive background swap together with the selected layout.
+- 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.
 
 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: unchanged.
+- Spacing and layout rhythm: header padding is symmetric and the PC toolbar is grouped continuously.
-- Colors and visual tokens: inactive layout state now uses an existing theme token; browser sampling is blocked.
+- Colors and visual tokens: unchanged.
-- Image quality and asset fidelity: no image or crop behavior changed.
+- Image quality and asset fidelity: no image behavior changed.
 - Copy and content: unchanged.
 
 ## 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 rendered contrast, hover/focus states, interaction behavior, and console state cannot be visually certified.
+    - Impact: exact vertical centering, final toolbar width, responsive transition, and console state cannot be visually certified.
-    - Fix: open this branch in an available browser with project data and capture the filter area at the same mobile width.
+    - Fix: capture the page in an available browser at the same desktop width and compare the toolbar crop.
 
 ## Primary interactions tested
 
-Automated tests verify that the active class starts on the grid button and moves to the masonry button after switching. The style contract verifies the shallow background applies only to the inactive choice. All 275 tests pass. Browser interactions were unavailable.
+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.
 
 ## Console errors checked
 
@@ -49,15 +50,16 @@ Not checked because the page could not be opened in the cloud browser.
 
 ## Comparison history
 
-- Iteration 1: identified that the inactive masonry button blended into the surrounding filter surface.
+- Iteration 1: identified asymmetric perceived vertical spacing and an oversized empty center caused by right-pushing the action group.
-- Iteration 2: added an explicit inactive background using `--app-control-hover`, preserved the selected green state, and passed the full test/build suite. Browser capture remained blocked.
+- 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.
 
 ## Implementation checklist
 
-- [x] Add a shallow background to the inactive layout button.
+- [x] Center summary and actions within the same toolbar height.
-- [x] Preserve the selected green layout button.
+- [x] Use equal top and bottom header padding.
-- [x] Move active/inactive styling with the layout switch.
+- [x] Remove the wide PC-only automatic spacer.
-- [x] Add style and interaction regression assertions.
+- [x] Preserve the existing mobile split layout.
-- [ ] Capture and compare the rendered mobile state in the cloud browser.
+- [x] Add style-contract regression assertions.
+- [ ] Capture and compare the rendered desktop state in the cloud browser.
 
 final result: blocked

src/features/subject-images/SubjectImagesPage.vue

@@ -830,6 +830,20 @@ async function showStaleForms() {
 .gallery-workspace-page .workspace-scroll-content {
     @apply pt-2;
 }
+/* PC 端工具栏保持紧凑并从左向右连续排列；统一最小高度让统计和按钮上下居中。 */
+.gallery-workspace-page .workspace-heading {
+    @apply py-[5px];
+}
+.gallery-workspace-page .workspace-toolbar,
+.gallery-workspace-page .toolbar-summary,
+.gallery-workspace-page .toolbar-actions {
+    @apply min-h-[34px] items-center;
+}
+@media (min-width: 761px) {
+    .gallery-workspace-page .toolbar-actions {
+        @apply ml-0;
+    }
+}
 .gallery-workspace-page .gallery-sticky-controls {
     @apply sticky top-0 z-10 bg-(--app-body) mt-2.5 mb-0;
 }

tests/components/ui/flatTheme.test.ts

@@ -183,6 +183,13 @@ describe('全站平面主题', () => {
     it('图库顶部统一镜头选择和筛选的背景与垂直对齐，窄屏整组换行', () => {
         // DOM 环境不计算几何；保护容器宽度断点和居中契约，真实坐标仍需浏览器验收。
         const css = readAllStyles()
+        expect(css).toMatch(/\.gallery-workspace-page \.workspace-heading\s*\{[^}]*padding-block:\s*5px;/)
+        expect(css).toMatch(
+            /\.gallery-workspace-page \.workspace-toolbar,\s*\.gallery-workspace-page \.toolbar-summary,\s*\.gallery-workspace-page \.toolbar-actions\s*\{(?=[^}]*align-items:\s*center;)(?=[^}]*min-height:\s*34px;)/
+        )
+        expect(css).toMatch(
+            /@media \(min-width: 761px\)\s*\{[^}]*\.gallery-workspace-page \.toolbar-actions\s*\{[^}]*margin-left:\s*0;/
+        )
         expect(css).toMatch(
             /\.form-image-filter-region\s*\{[^}]*padding:\s*12px;[^}]*--app-field:\s*var\(--app-surface\);[^}]*--app-field-hover:\s*var\(--app-surface\);[^}]*background:\s*color-mix\(in srgb, var\(--app-subtle\) 96%, white\);/
         )