diff --git a/src/features/subject-images/SubjectImagesPage.vue b/src/features/subject-images/SubjectImagesPage.vue index 40f7bd2..54d80d5 100644 --- a/src/features/subject-images/SubjectImagesPage.vue +++ b/src/features/subject-images/SubjectImagesPage.vue @@ -701,7 +701,6 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' :src="coverImage(form)?.imageUrl" :alt="`${form.subject.name} · ${form.name}`" :object-fit="layout === 'masonry' ? 'contain' : 'cover'" - :class="{ 'form-image-empty': !coverImage(form) }" preview :empty-text="hasRunningImages(form.images) ? '后台正在生成图片' : '尚未生成图片'" /> @@ -814,6 +813,10 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' .form-image-card { @apply overflow-hidden; } +/* 普通网格的有图与空状态统一使用正方形图片区;瀑布流仍按原图比例展示。 */ +.form-image-grid:not(.form-image-masonry) .asset-image { + aspect-ratio: 1 / 1; +} /* 浅色卡片使用轻灰底,与白色画布区分;网格和瀑布流共用,深色保持原有层次。 */ :root:not([data-theme='dark']) .form-image-card { background: var(--app-subtle); @@ -843,10 +846,6 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' .form-image-masonry .asset-image { @apply aspect-auto; } -/* 无图占位保持正方形,避免瀑布流的自适应比例将占位区域压扁。 */ -.form-image-grid .asset-image.form-image-empty { - @apply aspect-square; -} .form-image-masonry .asset-image .n-image, .form-image-masonry .asset-image .n-image img { @apply h-auto; @@ -893,7 +892,7 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' @apply justify-self-end text-muted text-xs whitespace-nowrap; } .form-image-display-controls { - @apply flex items-center justify-self-end gap-3; + @apply flex items-center justify-self-end gap-4; } .gallery-layout-switch { @apply flex items-center gap-2; diff --git a/tests/components/ui/flatTheme.test.ts b/tests/components/ui/flatTheme.test.ts index 6498b95..32743f7 100644 --- a/tests/components/ui/flatTheme.test.ts +++ b/tests/components/ui/flatTheme.test.ts @@ -168,6 +168,9 @@ describe('全站平面主题', () => { it('瀑布流按行填充自适应列宽,卡片与图片均保留实际高度', () => { const css = readAllStyles() + expect(css).toMatch( + /\.form-image-grid:not\(\.form-image-masonry\) \.asset-image\s*\{[^}]*aspect-ratio:\s*1 \/ 1;/ + ) expect(css).toMatch( /\.gallery-workspace-page \.form-image-masonry\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*repeat\(auto-fill, minmax\(min\(260px, 100%\), 1fr\)\);[^}]*grid-auto-flow:\s*row dense;[^}]*grid-auto-rows:\s*1px;/ ) @@ -298,4 +301,3 @@ describe('全站平面主题', () => { } }) }) -