From a172f9990ed0d54861aa2706f57242cde8f7becd Mon Sep 17 00:00:00 2001 From: GouJ Date: Mon, 14 Sep 2026 11:21:36 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=9F=E4=B8=80=E5=9B=BE=E5=BA=93?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E9=97=B4=E8=B7=9D=E4=B8=BA12px=E5=B9=B6?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E7=80=91=E5=B8=83=E6=B5=81=E7=95=99=E7=99=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/features/subject-images/SubjectImagesPage.vue | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/features/subject-images/SubjectImagesPage.vue b/src/features/subject-images/SubjectImagesPage.vue index 79365b6..529ce35 100644 --- a/src/features/subject-images/SubjectImagesPage.vue +++ b/src/features/subject-images/SubjectImagesPage.vue @@ -166,6 +166,7 @@ function syncMasonryLayout(container: HTMLElement) { const styles = getComputedStyle(container) const rowHeight = Number.parseFloat(styles.gridAutoRows) const rowGap = Number.parseFloat(styles.rowGap) + const cardGap = Number.parseFloat(styles.columnGap) const columnCount = Math.max(1, styles.gridTemplateColumns.split(/\s+/).filter(Boolean).length) const nextRows = Array(columnCount).fill(1) const cards = Array.from(container.children).filter( @@ -179,7 +180,8 @@ function syncMasonryLayout(container: HTMLElement) { const rowStart = nextRows[column] ?? 1 card.style.setProperty('--form-image-row-start', String(rowStart)) card.style.setProperty('--form-image-row-span', String(span)) - nextRows[column] = rowStart + span + // 隐式网格行不加 gap，仅在两张卡片之间预留与横向一致的间距。 + nextRows[column] = rowStart + span + Math.ceil(cardGap / rowHeight) }) } @@ -804,7 +806,9 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' /* 本组件专属布局与 Naive 内部结构覆盖。 */ @reference "../../styles/styles.css"; .form-image-grid { - @apply grid grid-cols-[repeat(auto-fill,_minmax(min(260px,_100%),_1fr))] gap-5; + @apply grid grid-cols-[repeat(auto-fill,_minmax(min(260px,_100%),_1fr))]; + --gallery-gap: 12px; + gap: var(--gallery-gap); } .form-image-card { @apply overflow-hidden; @@ -823,7 +827,10 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule(' @apply pt-3; } .gallery-workspace-page .form-image-masonry { - @apply grid grid-cols-[repeat(auto-fill,_minmax(min(260px,_100%),_1fr))] gap-x-5 items-start; + @apply grid grid-cols-[repeat(auto-fill,_minmax(min(260px,_100%),_1fr))] items-start; + /* 避免每个 1px 网格行都叠加间距，造成卡片下方出现额外空白。 */ + column-gap: var(--gallery-gap); + row-gap: 0; grid-auto-flow: row dense; grid-auto-rows: 1px; }