short-drama-agent/short-drama-agent-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/features/subject-images/SubjectImagesPage.vue
+6 -2
View File
@@ -700,6 +700,7 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule('
<AssetImage <AssetImage
:src="coverImage(form)?.imageUrl" :src="coverImage(form)?.imageUrl"
:alt="`${form.subject.name} · ${form.name}`" :alt="`${form.subject.name} · ${form.name}`"
:class="{ 'form-image-has-source': Boolean(coverImage(form)?.imageUrl) }"
:object-fit="layout === 'masonry' ? 'contain' : 'cover'" :object-fit="layout === 'masonry' ? 'contain' : 'cover'"
preview preview
:empty-text="hasRunningImages(form.images) ? '后台正在生成图片' : '尚未生成图片'" :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); grid-row-end: span var(--form-image-row-span, 1);
} }
.form-image-masonry .asset-image { .form-image-masonry .asset-image {
aspect-ratio: 1 / 1;
}
.form-image-masonry .asset-image.form-image-has-source {
@apply aspect-auto; @apply aspect-auto;
} }
.form-image-masonry .asset-image .n-image, .form-image-masonry .asset-image.form-image-has-source .n-image,
.form-image-masonry .asset-image .n-image img { .form-image-masonry .asset-image.form-image-has-source .n-image img {
@apply h-auto; @apply h-auto;
} }
.gallery-sticky-controls > .form-image-filter-region { .gallery-sticky-controls > .form-image-filter-region {
tests/components/ui/flatTheme.test.ts
+3 -2
View File
@@ -177,9 +177,10 @@ describe('全站平面主题', () => {
expect(css).toMatch( 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\);/ /\.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( 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;/
) )
}) })