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

fix: 统一图库卡片间距为12px并修正瀑布流留白

Browse Source
This commit is contained in:
GouJ
2026-09-14 11:21:36 +08:00
parent c1d152dfae
commit a172f9990e
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/subject-images/SubjectImagesPage.vue
+10 -3
View File
@@ -166,6 +166,7 @@ function syncMasonryLayout(container: HTMLElement) {
const styles = getComputedStyle(container) const styles = getComputedStyle(container)
const rowHeight = Number.parseFloat(styles.gridAutoRows) const rowHeight = Number.parseFloat(styles.gridAutoRows)
const rowGap = Number.parseFloat(styles.rowGap) 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 columnCount = Math.max(1, styles.gridTemplateColumns.split(/\s+/).filter(Boolean).length)
const nextRows = Array<number>(columnCount).fill(1) const nextRows = Array<number>(columnCount).fill(1)
const cards = Array.from(container.children).filter( const cards = Array.from(container.children).filter(
@@ -179,7 +180,8 @@ function syncMasonryLayout(container: HTMLElement) {
const rowStart = nextRows[column] ?? 1 const rowStart = nextRows[column] ?? 1
card.style.setProperty('--form-image-row-start', String(rowStart)) card.style.setProperty('--form-image-row-start', String(rowStart))
card.style.setProperty('--form-image-row-span', String(span)) 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 内部结构覆盖。 */ /* 本组件专属布局与 Naive 内部结构覆盖。 */
@reference "../../styles/styles.css"; @reference "../../styles/styles.css";
.form-image-grid { .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 { .form-image-card {
@apply overflow-hidden; @apply overflow-hidden;
@@ -823,7 +827,10 @@ const rules = { concurrency: integerRule('批量并发'), limit: integerRule('
@apply pt-3; @apply pt-3;
} }
.gallery-workspace-page .form-image-masonry { .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-flow: row dense;
grid-auto-rows: 1px; grid-auto-rows: 1px;
} }