fix: 保持瀑布流空图片为正方形

This commit is contained in:
GouJ
2026-09-22 14:53:08 +08:00
parent f0957c237b
commit e9547b13fa
2 changed files with 9 additions and 4 deletions
@@ -700,6 +700,7 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule('
<AssetImage
:src="coverImage(form)?.imageUrl"
:alt="`${form.subject.name} · ${form.name}`"
:class="{ 'form-image-has-source': Boolean(coverImage(form)?.imageUrl) }"
:object-fit="layout === 'masonry' ? 'contain' : 'cover'"
preview
:empty-text="hasRunningImages(form.images) ? '后台正在生成图片' : '尚未生成图片'"
@@ -844,10 +845,13 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule('
grid-row-end: span var(--form-image-row-span, 1);
}
.form-image-masonry .asset-image {
aspect-ratio: 1 / 1;
}
.form-image-masonry .asset-image.form-image-has-source {
@apply aspect-auto;
}
.form-image-masonry .asset-image .n-image,
.form-image-masonry .asset-image .n-image img {
.form-image-masonry .asset-image.form-image-has-source .n-image,
.form-image-masonry .asset-image.form-image-has-source .n-image img {
@apply h-auto;
}
.gallery-sticky-controls > .form-image-filter-region {
+3 -2
View File
@@ -177,9 +177,10 @@ describe('全站平面主题', () => {
expect(css).toMatch(
/\.form-image-masonry > \.form-image-card\s*\{[^}]*grid-column-start:\s*var\(--form-image-column,\s*auto\);[^}]*grid-row-start:\s*var\(--form-image-row-start,\s*auto\);[^}]*grid-row-end:\s*span var\(--form-image-row-span,\s*1\);/
)
expect(css).toMatch(/\.form-image-masonry \.asset-image\s*\{[^}]*aspect-ratio:\s*auto;/)
expect(css).toMatch(/\.form-image-masonry \.asset-image\s*\{[^}]*aspect-ratio:\s*1 \/ 1;/)
expect(css).toMatch(/\.form-image-masonry \.asset-image\.form-image-has-source\s*\{[^}]*aspect-ratio:\s*auto;/)
expect(css).toMatch(
/\.form-image-masonry \.asset-image \.n-image,\s*\.form-image-masonry \.asset-image \.n-image img\s*\{[^}]*height:\s*auto;/
/\.form-image-masonry \.asset-image\.form-image-has-source \.n-image,\s*\.form-image-masonry \.asset-image\.form-image-has-source \.n-image img\s*\{[^}]*height:\s*auto;/
)
})