|
| 1 | +import { onScopeDispose, watch, type Ref } from 'vue' |
| 2 | + |
| 3 | +interface RoomGridCapacityOptions { |
| 4 | + viewport: Ref<HTMLElement | null> |
| 5 | + grid: Ref<HTMLElement | null> |
| 6 | + enabled: Readonly<Ref<boolean>> |
| 7 | + onCapacityChange: (size: number) => void |
| 8 | +} |
| 9 | + |
| 10 | +const MEASUREMENT_DELAY_MS = 120 |
| 11 | +const MAX_PAGE_SIZE = 1000 |
| 12 | + |
| 13 | +export function useRoomGridCapacity({ viewport, grid, enabled, onCapacityChange }: RoomGridCapacityOptions): void { |
| 14 | + if (typeof window === 'undefined' || typeof ResizeObserver === 'undefined') return |
| 15 | + |
| 16 | + let timer: number | null = null |
| 17 | + let disposed = false |
| 18 | + let heightBaseline = '' |
| 19 | + let maximumCardHeight = 0 |
| 20 | + let lastMeasurement = '' |
| 21 | + let lastCapacity = 0 |
| 22 | + |
| 23 | + function cancelMeasurement(): void { |
| 24 | + if (timer !== null) window.clearTimeout(timer) |
| 25 | + timer = null |
| 26 | + } |
| 27 | + |
| 28 | + function measure(): void { |
| 29 | + timer = null |
| 30 | + const viewportElement = viewport.value |
| 31 | + const gridElement = grid.value |
| 32 | + if (disposed || !enabled.value || !viewportElement || !gridElement) return |
| 33 | + |
| 34 | + const width = viewportElement.clientWidth |
| 35 | + const height = viewportElement.clientHeight |
| 36 | + const gridWidth = gridElement.clientWidth |
| 37 | + if (width <= 0 || height <= 0 || gridWidth <= 0 || gridElement.clientHeight <= 0) return |
| 38 | + |
| 39 | + const style = window.getComputedStyle(gridElement) |
| 40 | + if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse') return |
| 41 | + // 浏览器将 repeat()/minmax() 展开为像素轨道；不推测尚未完成布局的 CSS 表达式。 |
| 42 | + const tracks = style.gridTemplateColumns.replace(/\[[^\]]*\]/g, '').trim().split(/\s+/) |
| 43 | + if (tracks.length === 0 || tracks.some(track => !/^\d+(?:\.\d+)?px$/.test(track))) return |
| 44 | + const columns = tracks.filter(track => Number.parseFloat(track) > 0).length |
| 45 | + if (columns === 0) return |
| 46 | + |
| 47 | + let measuredCardHeight = 0 |
| 48 | + for (const card of gridElement.querySelectorAll<HTMLElement>('.room-preview-card')) { |
| 49 | + measuredCardHeight = Math.max(measuredCardHeight, Math.ceil(card.getBoundingClientRect().height)) |
| 50 | + } |
| 51 | + if (measuredCardHeight <= 0) return |
| 52 | + |
| 53 | + const fontSize = Number.parseFloat(style.fontSize) |
| 54 | + const rootFontSize = Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize) |
| 55 | + if (!Number.isFinite(fontSize) || fontSize <= 0 || !Number.isFinite(rootFontSize) || rootFontSize <= 0) return |
| 56 | + const nextBaseline = `${width}:${gridWidth}:${fontSize}:${rootFontSize}` |
| 57 | + if (nextBaseline !== heightBaseline) { |
| 58 | + heightBaseline = nextBaseline |
| 59 | + maximumCardHeight = measuredCardHeight |
| 60 | + } else { |
| 61 | + // 同一宽度与字体尺度保留已见最高卡片，避免短页导致容量来回跳变。 |
| 62 | + maximumCardHeight = Math.max(maximumCardHeight, measuredCardHeight) |
| 63 | + } |
| 64 | + |
| 65 | + const rowGap = Math.max(0, Number.parseFloat(style.rowGap) || 0) |
| 66 | + const measurement = `${nextBaseline}:${height}:${columns}:${rowGap}:${maximumCardHeight}` |
| 67 | + if (measurement === lastMeasurement) return |
| 68 | + lastMeasurement = measurement |
| 69 | + |
| 70 | + const rows = Math.max(1, Math.floor((height + rowGap) / (maximumCardHeight + rowGap))) |
| 71 | + const capacity = Math.min(MAX_PAGE_SIZE, Math.max(1, columns * rows)) |
| 72 | + if (capacity === lastCapacity) return |
| 73 | + lastCapacity = capacity |
| 74 | + onCapacityChange(capacity) |
| 75 | + } |
| 76 | + |
| 77 | + function scheduleMeasurement(): void { |
| 78 | + cancelMeasurement() |
| 79 | + if (disposed || !enabled.value) return |
| 80 | + timer = window.setTimeout(measure, MEASUREMENT_DELAY_MS) |
| 81 | + } |
| 82 | + |
| 83 | + const observer = new ResizeObserver(scheduleMeasurement) |
| 84 | + watch([viewport, grid, enabled], ([viewportElement, gridElement, isEnabled]) => { |
| 85 | + observer.disconnect() |
| 86 | + cancelMeasurement() |
| 87 | + if (!isEnabled) return |
| 88 | + if (viewportElement) observer.observe(viewportElement) |
| 89 | + if (gridElement) observer.observe(gridElement) |
| 90 | + scheduleMeasurement() |
| 91 | + }, { immediate: true, flush: 'post' }) |
| 92 | + |
| 93 | + window.addEventListener('resize', scheduleMeasurement) |
| 94 | + onScopeDispose(() => { |
| 95 | + disposed = true |
| 96 | + observer.disconnect() |
| 97 | + cancelMeasurement() |
| 98 | + window.removeEventListener('resize', scheduleMeasurement) |
| 99 | + }) |
| 100 | +} |
0 commit comments