@robot-admin/naive-ui-components 0.9.1 → 0.9.3

package/dist/{C_WaterFall-C4HDqf-a.css.map → C_WaterFall-BJ_39ext.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_WaterFall-C4HDqf-a.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=fd4a1e91&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-fd4a1e91] {\n  width: 100%;\n}\n.waterfall__body[data-v-fd4a1e91] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-fd4a1e91] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-fd4a1e91] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-fd4a1e91]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-fd4a1e91] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-fd4a1e91] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-fd4a1e91] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-fd4a1e91] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-fd4a1e91 1.4s ease infinite;\n}\n@keyframes shimmer-fd4a1e91 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-fd4a1e91] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-fd4a1e91] {\n  height: 1px;\n}\n.waterfall__status[data-v-fd4a1e91] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-fd4a1e91] {\n  color: var(--text-color-4);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_WaterFall-BJ_39ext.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=d436c326&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-d436c326] {\n  width: 100%;\n}\n.waterfall__body[data-v-d436c326] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-d436c326] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-d436c326]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-d436c326] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-d436c326] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-d436c326] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-d436c326 1.4s ease infinite;\n}\n@keyframes shimmer-d436c326 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-d436c326] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-d436c326] {\n  height: 1px;\n}\n.waterfall__status[data-v-d436c326] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-d436c326] {\n  color: var(--text-color-4);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/{C_WaterFall-HWB-gPON.css.map → C_WaterFall-cYc1vntE.css.map}

@@ -1 +1 @@
-{"version":3,"file":"C_WaterFall-HWB-gPON.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=fd4a1e91&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-fd4a1e91] {\n  width: 100%;\n}\n.waterfall__body[data-v-fd4a1e91] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-fd4a1e91] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-fd4a1e91] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-fd4a1e91]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-fd4a1e91] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-fd4a1e91] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-fd4a1e91] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-fd4a1e91] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-fd4a1e91 1.4s ease infinite;\n}\n@keyframes shimmer-fd4a1e91 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-fd4a1e91] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-fd4a1e91] {\n  height: 1px;\n}\n.waterfall__status[data-v-fd4a1e91] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-fd4a1e91] {\n  color: var(--text-color-4);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"C_WaterFall-cYc1vntE.css","names":[],"sources":["../src/components/C_WaterFall/index.vue?vue&type=style&index=0&scoped=d436c326&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-waterfall[data-v-d436c326] {\n  width: 100%;\n}\n.waterfall__body[data-v-d436c326] {\n  overflow: hidden;\n}\n.waterfall__item[data-v-d436c326] {\n  cursor: pointer;\n}\n.waterfall__card[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n  border: 1px solid var(--border-color);\n  background: var(--card-color);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n  transition: box-shadow 0.2s ease, transform 0.2s ease;\n}\n.waterfall__card[data-v-d436c326]:hover {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n  transform: translateY(-2px);\n}\n.waterfall__image[data-v-d436c326] {\n  display: block;\n  width: 100%;\n  object-fit: cover;\n  background: var(--body-color);\n}\n.waterfall__title[data-v-d436c326] {\n  padding: 10px 12px;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--text-color-1);\n  word-break: break-all;\n}\n.waterfall__skeleton[data-v-d436c326] {\n  overflow: hidden;\n  border-radius: 8px;\n}\n.waterfall__skeleton-inner[data-v-d436c326] {\n  width: 100%;\n  height: 100%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);\n  background-size: 400% 100%;\n  animation: shimmer-d436c326 1.4s ease infinite;\n}\n@keyframes shimmer-d436c326 {\n0% {\n    background-position: 100% 50%;\n}\n100% {\n    background-position: 0 50%;\n}\n}\n.waterfall__footer[data-v-d436c326] {\n  padding: 24px 0;\n  text-align: center;\n}\n.waterfall__sentinel[data-v-d436c326] {\n  height: 1px;\n}\n.waterfall__status[data-v-d436c326] {\n  display: inline-flex;\n  gap: 8px;\n  align-items: center;\n  font-size: 13px;\n  color: var(--text-color-3);\n}\n.waterfall__status--done[data-v-d436c326] {\n  color: var(--text-color-4);\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_WaterFall.css

@@ -1,13 +1,13 @@
-/* unplugin-vue-components disabled */.c-waterfall[data-v-fd4a1e91] {
+/* unplugin-vue-components disabled */.c-waterfall[data-v-d436c326] {
   width: 100%;
 }
-.waterfall__body[data-v-fd4a1e91] {
+.waterfall__body[data-v-d436c326] {
   overflow: hidden;
 }
-.waterfall__item[data-v-fd4a1e91] {
+.waterfall__item[data-v-d436c326] {
   cursor: pointer;
 }
-.waterfall__card[data-v-fd4a1e91] {
+.waterfall__card[data-v-d436c326] {
   overflow: hidden;
   border-radius: 8px;
   border: 1px solid var(--border-color);
@@ -15,36 +15,36 @@
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
-.waterfall__card[data-v-fd4a1e91]:hover {
+.waterfall__card[data-v-d436c326]:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   transform: translateY(-2px);
 }
-.waterfall__image[data-v-fd4a1e91] {
+.waterfall__image[data-v-d436c326] {
   display: block;
   width: 100%;
   object-fit: cover;
   background: var(--body-color);
 }
-.waterfall__title[data-v-fd4a1e91] {
+.waterfall__title[data-v-d436c326] {
   padding: 10px 12px;
   font-size: 13px;
   line-height: 1.5;
   color: var(--text-color-1);
   word-break: break-all;
 }
-.waterfall__skeleton[data-v-fd4a1e91] {
+.waterfall__skeleton[data-v-d436c326] {
   overflow: hidden;
   border-radius: 8px;
 }
-.waterfall__skeleton-inner[data-v-fd4a1e91] {
+.waterfall__skeleton-inner[data-v-d436c326] {
   width: 100%;
   height: 100%;
   border-radius: 8px;
   background: linear-gradient(90deg, var(--body-color) 25%, color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%, var(--body-color) 63%);
   background-size: 400% 100%;
-  animation: shimmer-fd4a1e91 1.4s ease infinite;
+  animation: shimmer-d436c326 1.4s ease infinite;
 }
-@keyframes shimmer-fd4a1e91 {
+@keyframes shimmer-d436c326 {
 0% {
     background-position: 100% 50%;
 }
@@ -52,22 +52,22 @@
     background-position: 0 50%;
 }
 }
-.waterfall__footer[data-v-fd4a1e91] {
+.waterfall__footer[data-v-d436c326] {
   padding: 24px 0;
   text-align: center;
 }
-.waterfall__sentinel[data-v-fd4a1e91] {
+.waterfall__sentinel[data-v-d436c326] {
   height: 1px;
 }
-.waterfall__status[data-v-fd4a1e91] {
+.waterfall__status[data-v-d436c326] {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   font-size: 13px;
   color: var(--text-color-3);
 }
-.waterfall__status--done[data-v-fd4a1e91] {
+.waterfall__status--done[data-v-d436c326] {
   color: var(--text-color-4);
 }
 
-/*# sourceMappingURL=C_WaterFall-C4HDqf-a.css.map*/
+/*# sourceMappingURL=C_WaterFall-BJ_39ext.css.map*/

package/dist/C_WaterFall.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_WaterFall.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_WaterFall.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_WaterFall2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,normalizeStyle as c,onBeforeUnmount as l,onMounted as u,openBlock as d,readonly as f,ref as p,renderList as m,renderSlot as h,toDisplayString as g,unref as _,watch as v}from"vue";import{NSpin as y}from"naive-ui";const b=16,x=300,S=8,C=200,w=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],T=[180,360];function E(e,t,n){let r=p(4),i=p(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:w].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return u(s),l(c),v(e,()=>{c(),s()}),v([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:f(r),containerWidth:f(i)}}function D(e,t,n,r){let i=p([]),a=p(0),o=new Map;function s(e,t){o.set(e,t)}function c(){let s=t.value,c=n.value,l=r.value??16;if(s<=0||c<=0||e.value.length===0){i.value=[],a.value=0;return}let u=(c-(s-1)*l)/s,d=Array.from({length:s},(e,t)=>({index:t,height:0})),f=[];for(let t of e.value){let e=d.reduce((e,t)=>t.height<e.height?t:e),n=o.get(t.id)||(t.width>0?t.height/t.width*u:u),r=e.index*(u+l),i=e.height;f.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+l}i.value=f,a.value=Math.max(...d.map(e=>e.height))-l}return v([e,()=>e.value.length,t,n,r],c,{immediate:!0}),{layoutItems:f(i),containerHeight:f(a),cacheImageHeight:s,relayout:c}}function O(e,t,n,r,i){let a=p(`idle`),o=null;function s(e){e[0]?.isIntersecting&&(!t.value||n.value||r.value||(a.value=`loading`,i()))}function c(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(s,{rootMargin:`200px 0px`}),o.observe(n))}function d(){o?.disconnect(),o=null}return v([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:a.value=`idle`}),u(c),l(d),v([e,t],()=>{d(),c()}),{status:f(a)}}const k=[`onClick`],A={class:`waterfall__card`},j=[`src`,`alt`,`loading`,`onLoad`,`onError`],M={key:0,class:`waterfall__title`},N={key:0,class:`waterfall__footer`},P={key:0,class:`waterfall__status`},F={key:1,class:`waterfall__status waterfall__status--done`};var I=e(s({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:s,emit:l}){let u=e,f=l,v=p(),b=p(),{columns:x,containerWidth:S}=E(v,n(()=>u.columns),n(()=>u.breakpoints)),{layoutItems:C,containerHeight:w,cacheImageHeight:I,relayout:L}=D(n(()=>u.items),x,S,n(()=>u.gap)),R=n(()=>u.skeleton&&u.loading&&C.value.length===0),z=n(()=>{let e=x.value,t=S.value,n=u.gap;if(e<=0||t<=0)return[];let r=(t-(e-1)*n)/e,i=u.skeletonCount??8,a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let e=a.indexOf(Math.min(...a)),t=T[0]+Math.random()*(T[1]-T[0]);o.push({x:e*(r+n),y:a[e],width:r,height:t}),a[e]+=t+n}return o}),B=n(()=>z.value.length===0?0:Math.max(...z.value.map(e=>e.y+e.height))),V=n(()=>R.value?B.value:w.value),{status:H}=O(b,n(()=>u.infinite),n(()=>u.loading),n(()=>u.noMore),()=>f(`load-more`));function U(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;I(e.item.id,t)}f(`image-loaded`,e.item)}function W(e){f(`image-error`,e.item)}function G(){v.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return s({relayout:L,scrollToTop:G,getColumns:()=>x.value,getContainerHeight:()=>w.value}),(e,n)=>(d(),i(`div`,{ref_key:`containerRef`,ref:v,class:`c-waterfall`},[a(`div`,{class:`waterfall__body`,style:c({height:`${V.value}px`,position:`relative`})},[R.value?(d(!0),i(t,{key:0},m(z.value,(t,r)=>(d(),i(`div`,{key:`sk-${r}`,class:`waterfall__skeleton`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${u.animationDuration??_(300)}ms ease`})},[h(e.$slots,`skeleton`,{},()=>[n[0]||=a(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):r(`v-if`,!0),(d(!0),i(t,null,m(_(C),(t,n)=>(d(),i(`div`,{key:t.item.id,class:`waterfall__item`,style:c({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${u.animationDuration??_(300)}ms ease`}),onClick:e=>f(`item-click`,t.item,n)},[h(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[a(`div`,A,[a(`img`,{src:t.item.src,alt:t.item.title||``,loading:u.lazy?`lazy`:`eager`,class:`waterfall__image`,style:c({height:`${t.height}px`}),onLoad:e=>U(t,e),onError:e=>W(t)},null,44,j),t.item.title?(d(),i(`div`,M,g(t.item.title),1)):r(`v-if`,!0)])],!0)],12,k))),128))],4),u.infinite?(d(),i(`div`,N,[a(`div`,{ref_key:`sentinelRef`,ref:b,class:`waterfall__sentinel`},null,512),h(e.$slots,`footer`,{status:_(H)},()=>[u.loading?(d(),i(`div`,P,[o(_(y),{size:`small`}),n[1]||=a(`span`,null,`加载中…`,-1)])):u.noMore?(d(),i(`div`,F,` 没有更多了 `)):r(`v-if`,!0)],!0)])):r(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-fd4a1e91`]]);export{x as a,S as c,E as i,C as l,O as n,w as o,D as r,b as s,I as t,T as u};
+import{t as e}from"./export-helper.js";import{NSpin as t}from"naive-ui";import{Fragment as n,computed as r,createCommentVNode as i,createElementBlock as a,createElementVNode as o,createVNode as s,defineComponent as c,normalizeStyle as l,onBeforeUnmount as u,onMounted as d,openBlock as f,readonly as p,ref as m,renderList as h,renderSlot as g,toDisplayString as _,unref as v,watch as y}from"vue";const b=16,x=300,S=8,C=200,w=[{minWidth:1600,columns:6},{minWidth:1200,columns:5},{minWidth:992,columns:4},{minWidth:768,columns:3},{minWidth:480,columns:2},{minWidth:0,columns:1}],T=[180,360];function E(e,t,n){let r=m(4),i=m(0);function a(e){if(t?.value&&t.value>0)return t.value;let r=[...n?.value?.length?n.value:w].sort((e,t)=>t.minWidth-e.minWidth);for(let t of r)if(e>=t.minWidth)return t.columns;return 1}let o=null;function s(){let t=e.value;if(!t)return;o=new ResizeObserver(e=>{for(let t of e){let{width:e}=t.contentRect;i.value=e,r.value=a(e)}}),o.observe(t);let n=t.getBoundingClientRect();i.value=n.width,r.value=a(n.width)}function c(){o?.disconnect(),o=null}return d(s),u(c),y(e,()=>{c(),s()}),y([()=>t?.value,()=>n?.value],()=>{i.value>0&&(r.value=a(i.value))}),{columns:p(r),containerWidth:p(i)}}function D(e,t,n,r){let i=m([]),a=m(0),o=new Map;function s(e,t){o.set(e,t)}function c(){let s=t.value,c=n.value,l=r.value??16;if(s<=0||c<=0||e.value.length===0){i.value=[],a.value=0;return}let u=(c-(s-1)*l)/s,d=Array.from({length:s},(e,t)=>({index:t,height:0})),f=[];for(let t of e.value){let e=d.reduce((e,t)=>t.height<e.height?t:e),n=o.get(t.id)||(t.width>0?t.height/t.width*u:u),r=e.index*(u+l),i=e.height;f.push({item:t,columnIndex:e.index,x:r,y:i,width:u,height:n}),e.height=i+n+l}i.value=f,a.value=Math.max(...d.map(e=>e.height))-l}return y([e,()=>e.value.length,t,n,r],c,{immediate:!0}),{layoutItems:p(i),containerHeight:p(a),cacheImageHeight:s,relayout:c}}function O(e,t,n,r,i){let a=m(`idle`),o=null;function s(e){e[0]?.isIntersecting&&(!t.value||n.value||r.value||(a.value=`loading`,i()))}function c(){let n=e.value;!n||!t.value||(o=new IntersectionObserver(s,{rootMargin:`200px 0px`}),o.observe(n))}function l(){o?.disconnect(),o=null}return y([n,r],()=>{r.value?a.value=`no-more`:n.value?a.value=`loading`:a.value=`idle`}),d(c),u(l),y([e,t],()=>{l(),c()}),{status:p(a)}}const k=[`onClick`],A={class:`waterfall__card`},j=[`src`,`alt`,`loading`,`onLoad`,`onError`],M={key:0,class:`waterfall__title`},N={key:0,class:`waterfall__footer`},P={key:0,class:`waterfall__status`},F={key:1,class:`waterfall__status waterfall__status--done`};var I=e(c({name:`C_WaterFall`,__name:`index`,props:{items:{},columns:{default:void 0},gap:{default:16},lazy:{type:Boolean,default:!0},infinite:{type:Boolean,default:!1},skeleton:{type:Boolean,default:!0},skeletonCount:{default:8},animationDuration:{default:300},breakpoints:{default:void 0},loading:{type:Boolean,default:!1},noMore:{type:Boolean,default:!1}},emits:[`load-more`,`item-click`,`image-loaded`,`image-error`],setup(e,{expose:c,emit:u}){let d=e,p=u,y=m(),b=m(),{columns:x,containerWidth:S}=E(y,r(()=>d.columns),r(()=>d.breakpoints)),{layoutItems:C,containerHeight:w,cacheImageHeight:I,relayout:L}=D(r(()=>d.items),x,S,r(()=>d.gap)),R=r(()=>d.skeleton&&d.loading&&C.value.length===0),z=r(()=>{let e=x.value,t=S.value,n=d.gap;if(e<=0||t<=0)return[];let r=(t-(e-1)*n)/e,i=d.skeletonCount??8,a=Array(e).fill(0),o=[];for(let e=0;e<i;e++){let e=a.indexOf(Math.min(...a)),t=T[0]+Math.random()*(T[1]-T[0]);o.push({x:e*(r+n),y:a[e],width:r,height:t}),a[e]+=t+n}return o}),B=r(()=>z.value.length===0?0:Math.max(...z.value.map(e=>e.y+e.height))),V=r(()=>R.value?B.value:w.value),{status:H}=O(b,r(()=>d.infinite),r(()=>d.loading),r(()=>d.noMore),()=>p(`load-more`));function U(e,t){let n=t.target;if(n.naturalHeight&&n.naturalWidth){let t=n.naturalHeight/n.naturalWidth*e.width;I(e.item.id,t)}p(`image-loaded`,e.item)}function W(e){p(`image-error`,e.item)}function G(){y.value?.scrollIntoView({behavior:`smooth`,block:`start`})}return c({relayout:L,scrollToTop:G,getColumns:()=>x.value,getContainerHeight:()=>w.value}),(e,r)=>(f(),a(`div`,{ref_key:`containerRef`,ref:y,class:`c-waterfall`},[o(`div`,{class:`waterfall__body`,style:l({height:`${V.value}px`,position:`relative`})},[R.value?(f(!0),a(n,{key:0},h(z.value,(t,n)=>(f(),a(`div`,{key:`sk-${n}`,class:`waterfall__skeleton`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,height:`${t.height}px`,transition:`all ${d.animationDuration??v(300)}ms ease`})},[g(e.$slots,`skeleton`,{},()=>[r[0]||=o(`div`,{class:`waterfall__skeleton-inner`},null,-1)],!0)],4))),128)):i(`v-if`,!0),(f(!0),a(n,null,h(v(C),(t,n)=>(f(),a(`div`,{key:t.item.id,class:`waterfall__item`,style:l({position:`absolute`,left:`${t.x}px`,top:`${t.y}px`,width:`${t.width}px`,transition:`all ${d.animationDuration??v(300)}ms ease`}),onClick:e=>p(`item-click`,t.item,n)},[g(e.$slots,`item`,{item:t.item,index:n,width:t.width,height:t.height},()=>[o(`div`,A,[o(`img`,{src:t.item.src,alt:t.item.title||``,loading:d.lazy?`lazy`:`eager`,class:`waterfall__image`,style:l({height:`${t.height}px`}),onLoad:e=>U(t,e),onError:e=>W(t)},null,44,j),t.item.title?(f(),a(`div`,M,_(t.item.title),1)):i(`v-if`,!0)])],!0)],12,k))),128))],4),d.infinite?(f(),a(`div`,N,[o(`div`,{ref_key:`sentinelRef`,ref:b,class:`waterfall__sentinel`},null,512),g(e.$slots,`footer`,{status:v(H)},()=>[d.loading?(f(),a(`div`,P,[s(v(t),{size:`small`}),r[1]||=o(`span`,null,`加载中…`,-1)])):d.noMore?(f(),a(`div`,F,` 没有更多了 `)):i(`v-if`,!0)],!0)])):i(`v-if`,!0)],512))}}),[[`__scopeId`,`data-v-d436c326`]]);export{x as a,S as c,E as i,C as l,O as n,w as o,D as r,b as s,I as t,T as u};
 //# sourceMappingURL=C_WaterFall2.js.map

package/dist/C_WaterFall2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_WaterFall2.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}
+{"version":3,"file":"C_WaterFall2.js","names":[],"sources":["../src/components/C_WaterFall/constants.ts","../src/components/C_WaterFall/composables/useResponsiveColumns.ts","../src/components/C_WaterFall/composables/useWaterFallLayout.ts","../src/components/C_WaterFall/composables/useInfiniteScroll.ts","../src/components/C_WaterFall/index.vue","../src/components/C_WaterFall/index.vue"],"sourcesContent":["import type { WaterFallBreakpoint } from \"./types\";\r\n\r\nexport const DEFAULT_GAP = 16;\r\nexport const DEFAULT_ANIMATION_DURATION = 300;\r\nexport const DEFAULT_SKELETON_COUNT = 8;\r\nexport const INFINITE_SCROLL_THRESHOLD = 200;\r\n\r\nexport const DEFAULT_BREAKPOINTS: WaterFallBreakpoint[] = [\r\n  { minWidth: 1600, columns: 6 },\r\n  { minWidth: 1200, columns: 5 },\r\n  { minWidth: 992, columns: 4 },\r\n  { minWidth: 768, columns: 3 },\r\n  { minWidth: 480, columns: 2 },\r\n  { minWidth: 0, columns: 1 },\r\n];\r\n\r\nexport const SKELETON_HEIGHT_RANGE: [number, number] = [180, 360];\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { WaterFallBreakpoint } from \"../types\";\r\nimport { DEFAULT_BREAKPOINTS } from \"../constants\";\r\n\r\nexport function useResponsiveColumns(\r\n  containerRef: Ref<HTMLElement | undefined>,\r\n  fixedColumns?: Ref<number | undefined>,\r\n  breakpoints?: Ref<WaterFallBreakpoint[] | undefined>,\r\n) {\r\n  const columns = ref(4);\r\n  const containerWidth = ref(0);\r\n\r\n  function resolveColumns(width: number): number {\r\n    if (fixedColumns?.value && fixedColumns.value > 0)\r\n      return fixedColumns.value;\r\n    const bps = breakpoints?.value?.length\r\n      ? breakpoints.value\r\n      : DEFAULT_BREAKPOINTS;\r\n    const sorted = [...bps].sort((a, b) => b.minWidth - a.minWidth);\r\n    for (const bp of sorted) {\r\n      if (width >= bp.minWidth) return bp.columns;\r\n    }\r\n    return 1;\r\n  }\r\n\r\n  let resizeObserver: ResizeObserver | null = null;\r\n\r\n  function startObserving() {\r\n    const el = containerRef.value;\r\n    if (!el) return;\r\n    resizeObserver = new ResizeObserver((entries) => {\r\n      for (const entry of entries) {\r\n        const { width } = entry.contentRect;\r\n        containerWidth.value = width;\r\n        columns.value = resolveColumns(width);\r\n      }\r\n    });\r\n    resizeObserver.observe(el);\r\n    const rect = el.getBoundingClientRect();\r\n    containerWidth.value = rect.width;\r\n    columns.value = resolveColumns(rect.width);\r\n  }\r\n\r\n  function stopObserving() {\r\n    resizeObserver?.disconnect();\r\n    resizeObserver = null;\r\n  }\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch(containerRef, () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  watch([() => fixedColumns?.value, () => breakpoints?.value], () => {\r\n    if (containerWidth.value > 0) {\r\n      columns.value = resolveColumns(containerWidth.value);\r\n    }\r\n  });\r\n\r\n  return {\r\n    columns: readonly(columns),\r\n    containerWidth: readonly(containerWidth),\r\n  };\r\n}\r\n","import { ref, readonly, watch } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallColumn,\r\n} from \"../types\";\r\nimport { DEFAULT_GAP } from \"../constants\";\r\n\r\nexport function useWaterFallLayout(\r\n  items: Ref<WaterFallItem[]>,\r\n  columns: Readonly<Ref<number>>,\r\n  containerWidth: Readonly<Ref<number>>,\r\n  gap: Ref<number>,\r\n) {\r\n  const layoutItems = ref<WaterFallLayoutItem[]>([]);\r\n  const containerHeight = ref(0);\r\n  const imageHeightCache = new Map<string | number, number>();\r\n\r\n  function cacheImageHeight(id: string | number, realHeight: number) {\r\n    imageHeightCache.set(id, realHeight);\r\n  }\r\n\r\n  function calculate() {\r\n    const cols = columns.value;\r\n    const width = containerWidth.value;\r\n    const g = gap.value ?? DEFAULT_GAP;\r\n\r\n    if (cols <= 0 || width <= 0 || items.value.length === 0) {\r\n      layoutItems.value = [];\r\n      containerHeight.value = 0;\r\n      return;\r\n    }\r\n\r\n    const colWidth = (width - (cols - 1) * g) / cols;\r\n    const columnState: WaterFallColumn[] = Array.from(\r\n      { length: cols },\r\n      (_, i) => ({ index: i, height: 0 }),\r\n    );\r\n\r\n    const result: WaterFallLayoutItem[] = [];\r\n\r\n    for (const item of items.value) {\r\n      const shortest = columnState.reduce((min, col) =>\r\n        col.height < min.height ? col : min,\r\n      );\r\n\r\n      const cached = imageHeightCache.get(item.id);\r\n      const itemHeight = cached\r\n        ? cached\r\n        : item.width > 0\r\n          ? (item.height / item.width) * colWidth\r\n          : colWidth;\r\n\r\n      const x = shortest.index * (colWidth + g);\r\n      const y = shortest.height;\r\n\r\n      result.push({\r\n        item,\r\n        columnIndex: shortest.index,\r\n        x,\r\n        y,\r\n        width: colWidth,\r\n        height: itemHeight,\r\n      });\r\n\r\n      shortest.height = y + itemHeight + g;\r\n    }\r\n\r\n    layoutItems.value = result;\r\n    containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;\r\n  }\r\n\r\n  watch(\r\n    [items, () => items.value.length, columns, containerWidth, gap],\r\n    calculate,\r\n    { immediate: true },\r\n  );\r\n\r\n  return {\r\n    layoutItems: readonly(layoutItems),\r\n    containerHeight: readonly(containerHeight),\r\n    cacheImageHeight,\r\n    relayout: calculate,\r\n  };\r\n}\r\n","import { ref, readonly, watch, onMounted, onBeforeUnmount } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { InfiniteScrollStatus } from \"../types\";\r\nimport { INFINITE_SCROLL_THRESHOLD } from \"../constants\";\r\n\r\nexport function useInfiniteScroll(\r\n  sentinelRef: Ref<HTMLElement | undefined>,\r\n  enabled: Ref<boolean>,\r\n  loading: Ref<boolean>,\r\n  noMore: Ref<boolean>,\r\n  onLoadMore: () => void,\r\n) {\r\n  const status = ref<InfiniteScrollStatus>(\"idle\");\r\n  let observer: IntersectionObserver | null = null;\r\n\r\n  function handleIntersect(entries: IntersectionObserverEntry[]) {\r\n    const entry = entries[0];\r\n    if (!entry?.isIntersecting) return;\r\n    if (!enabled.value || loading.value || noMore.value) return;\r\n    status.value = \"loading\";\r\n    onLoadMore();\r\n  }\r\n\r\n  function startObserving() {\r\n    const el = sentinelRef.value;\r\n    if (!el || !enabled.value) return;\r\n    observer = new IntersectionObserver(handleIntersect, {\r\n      rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px`,\r\n    });\r\n    observer.observe(el);\r\n  }\r\n\r\n  function stopObserving() {\r\n    observer?.disconnect();\r\n    observer = null;\r\n  }\r\n\r\n  watch([loading, noMore], () => {\r\n    if (noMore.value) {\r\n      status.value = \"no-more\";\r\n    } else if (loading.value) {\r\n      status.value = \"loading\";\r\n    } else {\r\n      status.value = \"idle\";\r\n    }\r\n  });\r\n\r\n  onMounted(startObserving);\r\n  onBeforeUnmount(stopObserving);\r\n\r\n  watch([sentinelRef, enabled], () => {\r\n    stopObserving();\r\n    startObserving();\r\n  });\r\n\r\n  return { status: readonly(status) };\r\n}\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-26\r\n * @Description: 瀑布流布局组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div ref=\"containerRef\" class=\"c-waterfall\">\r\n    <div\r\n      class=\"waterfall__body\"\r\n      :style=\"{ height: `${bodyHeight}px`, position: 'relative' }\"\r\n    >\r\n      <template v-if=\"showSkeleton\">\r\n        <div\r\n          v-for=\"(sk, idx) in skeletonItems\"\r\n          :key=\"`sk-${idx}`\"\r\n          class=\"waterfall__skeleton\"\r\n          :style=\"{\r\n            position: 'absolute',\r\n            left: `${sk.x}px`,\r\n            top: `${sk.y}px`,\r\n            width: `${sk.width}px`,\r\n            height: `${sk.height}px`,\r\n            transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n          }\"\r\n        >\r\n          <slot name=\"skeleton\">\r\n            <div class=\"waterfall__skeleton-inner\" />\r\n          </slot>\r\n        </div>\r\n      </template>\r\n\r\n      <div\r\n        v-for=\"(lay, index) in layoutItems\"\r\n        :key=\"lay.item.id\"\r\n        class=\"waterfall__item\"\r\n        :style=\"{\r\n          position: 'absolute',\r\n          left: `${lay.x}px`,\r\n          top: `${lay.y}px`,\r\n          width: `${lay.width}px`,\r\n          transition: `all ${props.animationDuration ?? DEFAULT_ANIMATION_DURATION}ms ease`,\r\n        }\"\r\n        @click=\"emit('item-click', lay.item, index)\"\r\n      >\r\n        <slot\r\n          name=\"item\"\r\n          :item=\"lay.item\"\r\n          :index=\"index\"\r\n          :width=\"lay.width\"\r\n          :height=\"lay.height\"\r\n        >\r\n          <div class=\"waterfall__card\">\r\n            <img\r\n              :src=\"lay.item.src\"\r\n              :alt=\"lay.item.title || ''\"\r\n              :loading=\"props.lazy ? 'lazy' : 'eager'\"\r\n              class=\"waterfall__image\"\r\n              :style=\"{ height: `${lay.height}px` }\"\r\n              @load=\"handleImageLoaded(lay, $event)\"\r\n              @error=\"handleImageError(lay)\"\r\n            />\r\n            <div v-if=\"lay.item.title\" class=\"waterfall__title\">\r\n              {{ lay.item.title }}\r\n            </div>\r\n          </div>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n\r\n    <div v-if=\"props.infinite\" class=\"waterfall__footer\">\r\n      <div ref=\"sentinelRef\" class=\"waterfall__sentinel\" />\r\n      <slot name=\"footer\" :status=\"scrollStatus\">\r\n        <div v-if=\"props.loading\" class=\"waterfall__status\">\r\n          <NSpin size=\"small\" />\r\n          <span>加载中…</span>\r\n        </div>\r\n        <div\r\n          v-else-if=\"props.noMore\"\r\n          class=\"waterfall__status waterfall__status--done\"\r\n        >\r\n          没有更多了\r\n        </div>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed } from \"vue\";\r\nimport { NSpin } from \"naive-ui\";\r\nimport type {\r\n  WaterFallItem,\r\n  WaterFallLayoutItem,\r\n  WaterFallProps,\r\n  WaterFallExpose,\r\n  WaterFallBreakpoint,\r\n} from \"./types\";\r\nimport type { Ref } from \"vue\";\r\nimport {\r\n  DEFAULT_GAP,\r\n  DEFAULT_ANIMATION_DURATION,\r\n  DEFAULT_SKELETON_COUNT,\r\n  SKELETON_HEIGHT_RANGE,\r\n} from \"./constants\";\r\nimport { useResponsiveColumns } from \"./composables/useResponsiveColumns\";\r\nimport { useWaterFallLayout } from \"./composables/useWaterFallLayout\";\r\nimport { useInfiniteScroll } from \"./composables/useInfiniteScroll\";\r\n\r\ndefineOptions({ name: \"C_WaterFall\" });\r\n\r\nconst props = withDefaults(defineProps<WaterFallProps>(), {\r\n  columns: undefined,\r\n  gap: DEFAULT_GAP,\r\n  lazy: true,\r\n  infinite: false,\r\n  skeleton: true,\r\n  skeletonCount: DEFAULT_SKELETON_COUNT,\r\n  animationDuration: DEFAULT_ANIMATION_DURATION,\r\n  breakpoints: undefined,\r\n  loading: false,\r\n  noMore: false,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  \"load-more\": [];\r\n  \"item-click\": [item: WaterFallItem, index: number];\r\n  \"image-loaded\": [item: WaterFallItem];\r\n  \"image-error\": [item: WaterFallItem];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement>();\r\nconst sentinelRef = ref<HTMLElement>();\r\n\r\nconst fixedColumns = computed(() => props.columns);\r\nconst breakpointsRef = computed(() => props.breakpoints);\r\nconst { columns, containerWidth } = useResponsiveColumns(\r\n  containerRef,\r\n  fixedColumns as Ref<number | undefined>,\r\n  breakpointsRef as Ref<WaterFallBreakpoint[] | undefined>,\r\n);\r\n\r\nconst itemsRef = computed(() => props.items);\r\nconst gapRef = computed(() => props.gap);\r\nconst { layoutItems, containerHeight, cacheImageHeight, relayout } =\r\n  useWaterFallLayout(itemsRef, columns, containerWidth, gapRef);\r\n\r\nconst showSkeleton = computed(\r\n  () => props.skeleton && props.loading && layoutItems.value.length === 0,\r\n);\r\n\r\nconst skeletonItems = computed(() => {\r\n  const cols = columns.value;\r\n  const width = containerWidth.value;\r\n  const g = props.gap;\r\n  if (cols <= 0 || width <= 0) return [];\r\n\r\n  const colWidth = (width - (cols - 1) * g) / cols;\r\n  const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;\r\n  const colHeights = Array(cols).fill(0);\r\n  const result: { x: number; y: number; width: number; height: number }[] = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const minIdx = colHeights.indexOf(Math.min(...colHeights));\r\n    const h =\r\n      SKELETON_HEIGHT_RANGE[0] +\r\n      Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);\r\n    result.push({\r\n      x: minIdx * (colWidth + g),\r\n      y: colHeights[minIdx],\r\n      width: colWidth,\r\n      height: h,\r\n    });\r\n    colHeights[minIdx] += h + g;\r\n  }\r\n  return result;\r\n});\r\n\r\nconst skeletonHeight = computed(() => {\r\n  if (skeletonItems.value.length === 0) return 0;\r\n  return Math.max(...skeletonItems.value.map((s) => s.y + s.height));\r\n});\r\n\r\nconst bodyHeight = computed(() =>\r\n  showSkeleton.value ? skeletonHeight.value : containerHeight.value,\r\n);\r\n\r\nconst infiniteEnabled = computed(() => props.infinite);\r\nconst loadingRef = computed(() => props.loading);\r\nconst noMoreRef = computed(() => props.noMore);\r\n\r\nconst { status: scrollStatus } = useInfiniteScroll(\r\n  sentinelRef,\r\n  infiniteEnabled,\r\n  loadingRef,\r\n  noMoreRef,\r\n  () => emit(\"load-more\"),\r\n);\r\n\r\nfunction handleImageLoaded(lay: WaterFallLayoutItem, event: Event) {\r\n  const img = event.target as HTMLImageElement;\r\n  if (img.naturalHeight && img.naturalWidth) {\r\n    const realHeight = (img.naturalHeight / img.naturalWidth) * lay.width;\r\n    cacheImageHeight(lay.item.id, realHeight);\r\n  }\r\n  emit(\"image-loaded\", lay.item);\r\n}\r\n\r\nfunction handleImageError(lay: WaterFallLayoutItem) {\r\n  emit(\"image-error\", lay.item);\r\n}\r\n\r\nfunction scrollToTop() {\r\n  containerRef.value?.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n}\r\n\r\ndefineExpose<WaterFallExpose>({\r\n  relayout,\r\n  scrollToTop,\r\n  getColumns: () => columns.value,\r\n  getContainerHeight: () => containerHeight.value,\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.c-waterfall {\r\n  width: 100%;\r\n}\r\n\r\n.waterfall__body {\r\n  overflow: hidden;\r\n}\r\n\r\n.waterfall__item {\r\n  cursor: pointer;\r\n}\r\n\r\n.waterfall__card {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-color);\r\n  background: var(--card-color);\r\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    transform 0.2s ease;\r\n\r\n  &:hover {\r\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\r\n    transform: translateY(-2px);\r\n  }\r\n}\r\n\r\n.waterfall__image {\r\n  display: block;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  background: var(--body-color);\r\n}\r\n\r\n.waterfall__title {\r\n  padding: 10px 12px;\r\n  font-size: 13px;\r\n  line-height: 1.5;\r\n  color: var(--text-color-1);\r\n  word-break: break-all;\r\n}\r\n\r\n.waterfall__skeleton {\r\n  overflow: hidden;\r\n  border-radius: 8px;\r\n}\r\n\r\n.waterfall__skeleton-inner {\r\n  width: 100%;\r\n  height: 100%;\r\n  border-radius: 8px;\r\n  background: linear-gradient(\r\n    90deg,\r\n    var(--body-color) 25%,\r\n    color-mix(in srgb, var(--body-color) 80%, var(--border-color)) 37%,\r\n    var(--body-color) 63%\r\n  );\r\n  background-size: 400% 100%;\r\n  animation: shimmer 1.4s ease infinite;\r\n}\r\n\r\n@keyframes shimmer {\r\n  0% {\r\n    background-position: 100% 50%;\r\n  }\r\n  100% {\r\n    background-position: 0 50%;\r\n  }\r\n}\r\n\r\n.waterfall__footer {\r\n  padding: 24px 0;\r\n  text-align: center;\r\n}\r\n\r\n.waterfall__sentinel {\r\n  height: 1px;\r\n}\r\n\r\n.waterfall__status {\r\n  display: inline-flex;\r\n  gap: 8px;\r\n  align-items: center;\r\n  font-size: 13px;\r\n  color: var(--text-color-3);\r\n\r\n  &--done {\r\n    color: var(--text-color-4);\r\n  }\r\n}\r\n</style>\r\n"],"mappings":"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"}