@robot-admin/naive-ui-components 0.4.3 → 0.4.5

package/dist/C_WaterFall2.js

@@ -1,365 +1,2 @@
-import { t as export_helper_default } from "./export-helper.js";
-import { NSpin } from "naive-ui";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, watch } from "vue";
-
-//#region src/components/C_WaterFall/constants.ts
-const DEFAULT_GAP = 16;
-const DEFAULT_ANIMATION_DURATION = 300;
-const DEFAULT_SKELETON_COUNT = 8;
-const INFINITE_SCROLL_THRESHOLD = 200;
-const DEFAULT_BREAKPOINTS = [
-	{
-		minWidth: 1600,
-		columns: 6
-	},
-	{
-		minWidth: 1200,
-		columns: 5
-	},
-	{
-		minWidth: 992,
-		columns: 4
-	},
-	{
-		minWidth: 768,
-		columns: 3
-	},
-	{
-		minWidth: 480,
-		columns: 2
-	},
-	{
-		minWidth: 0,
-		columns: 1
-	}
-];
-const SKELETON_HEIGHT_RANGE = [180, 360];
-
-//#endregion
-//#region src/components/C_WaterFall/composables/useResponsiveColumns.ts
-function useResponsiveColumns(containerRef, fixedColumns, breakpoints) {
-	const columns = ref(4);
-	const containerWidth = ref(0);
-	function resolveColumns(width) {
-		if (fixedColumns?.value && fixedColumns.value > 0) return fixedColumns.value;
-		const sorted = [...breakpoints?.value?.length ? breakpoints.value : DEFAULT_BREAKPOINTS].sort((a, b) => b.minWidth - a.minWidth);
-		for (const bp of sorted) if (width >= bp.minWidth) return bp.columns;
-		return 1;
-	}
-	let resizeObserver = null;
-	function startObserving() {
-		const el = containerRef.value;
-		if (!el) return;
-		resizeObserver = new ResizeObserver((entries) => {
-			for (const entry of entries) {
-				const { width } = entry.contentRect;
-				containerWidth.value = width;
-				columns.value = resolveColumns(width);
-			}
-		});
-		resizeObserver.observe(el);
-		const rect = el.getBoundingClientRect();
-		containerWidth.value = rect.width;
-		columns.value = resolveColumns(rect.width);
-	}
-	function stopObserving() {
-		resizeObserver?.disconnect();
-		resizeObserver = null;
-	}
-	onMounted(startObserving);
-	onBeforeUnmount(stopObserving);
-	watch(containerRef, () => {
-		stopObserving();
-		startObserving();
-	});
-	watch([() => fixedColumns?.value, () => breakpoints?.value], () => {
-		if (containerWidth.value > 0) columns.value = resolveColumns(containerWidth.value);
-	});
-	return {
-		columns: readonly(columns),
-		containerWidth: readonly(containerWidth)
-	};
-}
-
-//#endregion
-//#region src/components/C_WaterFall/composables/useWaterFallLayout.ts
-function useWaterFallLayout(items, columns, containerWidth, gap) {
-	const layoutItems = ref([]);
-	const containerHeight = ref(0);
-	const imageHeightCache = /* @__PURE__ */ new Map();
-	function cacheImageHeight(id, realHeight) {
-		imageHeightCache.set(id, realHeight);
-	}
-	function calculate() {
-		const cols = columns.value;
-		const width = containerWidth.value;
-		const g = gap.value ?? DEFAULT_GAP;
-		if (cols <= 0 || width <= 0 || items.value.length === 0) {
-			layoutItems.value = [];
-			containerHeight.value = 0;
-			return;
-		}
-		const colWidth = (width - (cols - 1) * g) / cols;
-		const columnState = Array.from({ length: cols }, (_, i) => ({
-			index: i,
-			height: 0
-		}));
-		const result = [];
-		for (const item of items.value) {
-			const shortest = columnState.reduce((min, col) => col.height < min.height ? col : min);
-			const cached = imageHeightCache.get(item.id);
-			const itemHeight = cached ? cached : item.width > 0 ? item.height / item.width * colWidth : colWidth;
-			const x = shortest.index * (colWidth + g);
-			const y = shortest.height;
-			result.push({
-				item,
-				columnIndex: shortest.index,
-				x,
-				y,
-				width: colWidth,
-				height: itemHeight
-			});
-			shortest.height = y + itemHeight + g;
-		}
-		layoutItems.value = result;
-		containerHeight.value = Math.max(...columnState.map((c) => c.height)) - g;
-	}
-	watch([
-		items,
-		() => items.value.length,
-		columns,
-		containerWidth,
-		gap
-	], calculate, { immediate: true });
-	return {
-		layoutItems: readonly(layoutItems),
-		containerHeight: readonly(containerHeight),
-		cacheImageHeight,
-		relayout: calculate
-	};
-}
-
-//#endregion
-//#region src/components/C_WaterFall/composables/useInfiniteScroll.ts
-function useInfiniteScroll(sentinelRef, enabled, loading, noMore, onLoadMore) {
-	const status = ref("idle");
-	let observer = null;
-	function handleIntersect(entries) {
-		if (!entries[0]?.isIntersecting) return;
-		if (!enabled.value || loading.value || noMore.value) return;
-		status.value = "loading";
-		onLoadMore();
-	}
-	function startObserving() {
-		const el = sentinelRef.value;
-		if (!el || !enabled.value) return;
-		observer = new IntersectionObserver(handleIntersect, { rootMargin: `${INFINITE_SCROLL_THRESHOLD}px 0px` });
-		observer.observe(el);
-	}
-	function stopObserving() {
-		observer?.disconnect();
-		observer = null;
-	}
-	watch([loading, noMore], () => {
-		if (noMore.value) status.value = "no-more";
-		else if (loading.value) status.value = "loading";
-		else status.value = "idle";
-	});
-	onMounted(startObserving);
-	onBeforeUnmount(stopObserving);
-	watch([sentinelRef, enabled], () => {
-		stopObserving();
-		startObserving();
-	});
-	return { status: readonly(status) };
-}
-
-//#endregion
-//#region src/components/C_WaterFall/index.vue?vue&type=script&setup=true&lang.ts
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "waterfall__card" };
-const _hoisted_3 = [
-	"src",
-	"alt",
-	"loading",
-	"onLoad",
-	"onError"
-];
-const _hoisted_4 = {
-	key: 0,
-	class: "waterfall__title"
-};
-const _hoisted_5 = {
-	key: 0,
-	class: "waterfall__footer"
-};
-const _hoisted_6 = {
-	key: 0,
-	class: "waterfall__status"
-};
-const _hoisted_7 = {
-	key: 1,
-	class: "waterfall__status waterfall__status--done"
-};
-var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
-	name: "C_WaterFall",
-	__name: "index",
-	props: {
-		items: {},
-		columns: { default: void 0 },
-		gap: { default: DEFAULT_GAP },
-		lazy: {
-			type: Boolean,
-			default: true
-		},
-		infinite: {
-			type: Boolean,
-			default: false
-		},
-		skeleton: {
-			type: Boolean,
-			default: true
-		},
-		skeletonCount: { default: DEFAULT_SKELETON_COUNT },
-		animationDuration: { default: DEFAULT_ANIMATION_DURATION },
-		breakpoints: { default: void 0 },
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		noMore: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: [
-		"load-more",
-		"item-click",
-		"image-loaded",
-		"image-error"
-	],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const containerRef = ref();
-		const sentinelRef = ref();
-		const { columns, containerWidth } = useResponsiveColumns(containerRef, computed(() => props.columns), computed(() => props.breakpoints));
-		const { layoutItems, containerHeight, cacheImageHeight, relayout } = useWaterFallLayout(computed(() => props.items), columns, containerWidth, computed(() => props.gap));
-		const showSkeleton = computed(() => props.skeleton && props.loading && layoutItems.value.length === 0);
-		const skeletonItems = computed(() => {
-			const cols = columns.value;
-			const width = containerWidth.value;
-			const g = props.gap;
-			if (cols <= 0 || width <= 0) return [];
-			const colWidth = (width - (cols - 1) * g) / cols;
-			const count = props.skeletonCount ?? DEFAULT_SKELETON_COUNT;
-			const colHeights = Array(cols).fill(0);
-			const result = [];
-			for (let i = 0; i < count; i++) {
-				const minIdx = colHeights.indexOf(Math.min(...colHeights));
-				const h = SKELETON_HEIGHT_RANGE[0] + Math.random() * (SKELETON_HEIGHT_RANGE[1] - SKELETON_HEIGHT_RANGE[0]);
-				result.push({
-					x: minIdx * (colWidth + g),
-					y: colHeights[minIdx],
-					width: colWidth,
-					height: h
-				});
-				colHeights[minIdx] += h + g;
-			}
-			return result;
-		});
-		const skeletonHeight = computed(() => {
-			if (skeletonItems.value.length === 0) return 0;
-			return Math.max(...skeletonItems.value.map((s) => s.y + s.height));
-		});
-		const bodyHeight = computed(() => showSkeleton.value ? skeletonHeight.value : containerHeight.value);
-		const { status: scrollStatus } = useInfiniteScroll(sentinelRef, computed(() => props.infinite), computed(() => props.loading), computed(() => props.noMore), () => emit("load-more"));
-		function handleImageLoaded(lay, event) {
-			const img = event.target;
-			if (img.naturalHeight && img.naturalWidth) {
-				const realHeight = img.naturalHeight / img.naturalWidth * lay.width;
-				cacheImageHeight(lay.item.id, realHeight);
-			}
-			emit("image-loaded", lay.item);
-		}
-		function handleImageError(lay) {
-			emit("image-error", lay.item);
-		}
-		function scrollToTop() {
-			containerRef.value?.scrollIntoView({
-				behavior: "smooth",
-				block: "start"
-			});
-		}
-		__expose({
-			relayout,
-			scrollToTop,
-			getColumns: () => columns.value,
-			getContainerHeight: () => containerHeight.value
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				ref_key: "containerRef",
-				ref: containerRef,
-				class: "c-waterfall"
-			}, [createElementVNode("div", {
-				class: "waterfall__body",
-				style: normalizeStyle({
-					height: `${bodyHeight.value}px`,
-					position: "relative"
-				})
-			}, [showSkeleton.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(skeletonItems.value, (sk, idx) => {
-				return openBlock(), createElementBlock("div", {
-					key: `sk-${idx}`,
-					class: "waterfall__skeleton",
-					style: normalizeStyle({
-						position: "absolute",
-						left: `${sk.x}px`,
-						top: `${sk.y}px`,
-						width: `${sk.width}px`,
-						height: `${sk.height}px`,
-						transition: `all ${props.animationDuration ?? unref(DEFAULT_ANIMATION_DURATION)}ms ease`
-					})
-				}, [renderSlot(_ctx.$slots, "skeleton", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", { class: "waterfall__skeleton-inner" }, null, -1))], true)], 4);
-			}), 128)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(layoutItems), (lay, index) => {
-				return openBlock(), createElementBlock("div", {
-					key: lay.item.id,
-					class: "waterfall__item",
-					style: normalizeStyle({
-						position: "absolute",
-						left: `${lay.x}px`,
-						top: `${lay.y}px`,
-						width: `${lay.width}px`,
-						transition: `all ${props.animationDuration ?? unref(DEFAULT_ANIMATION_DURATION)}ms ease`
-					}),
-					onClick: ($event) => emit("item-click", lay.item, index)
-				}, [renderSlot(_ctx.$slots, "item", {
-					item: lay.item,
-					index,
-					width: lay.width,
-					height: lay.height
-				}, () => [createElementVNode("div", _hoisted_2, [createElementVNode("img", {
-					src: lay.item.src,
-					alt: lay.item.title || "",
-					loading: props.lazy ? "lazy" : "eager",
-					class: "waterfall__image",
-					style: normalizeStyle({ height: `${lay.height}px` }),
-					onLoad: ($event) => handleImageLoaded(lay, $event),
-					onError: ($event) => handleImageError(lay)
-				}, null, 44, _hoisted_3), lay.item.title ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(lay.item.title), 1)) : createCommentVNode("v-if", true)])], true)], 12, _hoisted_1);
-			}), 128))], 4), props.infinite ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", {
-				ref_key: "sentinelRef",
-				ref: sentinelRef,
-				class: "waterfall__sentinel"
-			}, null, 512), renderSlot(_ctx.$slots, "footer", { status: unref(scrollStatus) }, () => [props.loading ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(unref(NSpin), { size: "small" }), _cache[1] || (_cache[1] = createElementVNode("span", null, "加载中…", -1))])) : props.noMore ? (openBlock(), createElementBlock("div", _hoisted_7, " 没有更多了 ")) : createCommentVNode("v-if", true)], true)])) : createCommentVNode("v-if", true)], 512);
-		};
-	}
-});
-
-//#endregion
-//#region src/components/C_WaterFall/index.vue
-var C_WaterFall_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-fd4a1e91"]]);
-
-//#endregion
-export { DEFAULT_ANIMATION_DURATION as a, DEFAULT_SKELETON_COUNT as c, useResponsiveColumns as i, INFINITE_SCROLL_THRESHOLD as l, useInfiniteScroll as n, DEFAULT_BREAKPOINTS as o, useWaterFallLayout as r, DEFAULT_GAP as s, C_WaterFall_default as t, SKELETON_HEIGHT_RANGE 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-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};
 //# 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","../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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\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":";;;;;AAEA,MAAa,cAAc;AAC3B,MAAa,6BAA6B;AAC1C,MAAa,yBAAyB;AACtC,MAAa,4BAA4B;AAEzC,MAAa,sBAA6C;CACxD;EAAE,UAAU;EAAM,SAAS;EAAG;CAC9B;EAAE,UAAU;EAAM,SAAS;EAAG;CAC9B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAK,SAAS;EAAG;CAC7B;EAAE,UAAU;EAAG,SAAS;EAAG;CAC5B;AAED,MAAa,wBAA0C,CAAC,KAAK,IAAI;;;;ACXjE,SAAgB,qBACd,cACA,cACA,aACA;CACA,MAAM,UAAU,IAAI,EAAE;CACtB,MAAM,iBAAiB,IAAI,EAAE;CAE7B,SAAS,eAAe,OAAuB;AAC7C,MAAI,cAAc,SAAS,aAAa,QAAQ,EAC9C,QAAO,aAAa;EAItB,MAAM,SAAS,CAAC,GAHJ,aAAa,OAAO,SAC5B,YAAY,QACZ,oBACmB,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS;AAC/D,OAAK,MAAM,MAAM,OACf,KAAI,SAAS,GAAG,SAAU,QAAO,GAAG;AAEtC,SAAO;;CAGT,IAAI,iBAAwC;CAE5C,SAAS,iBAAiB;EACxB,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;AACT,mBAAiB,IAAI,gBAAgB,YAAY;AAC/C,QAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,UAAU,MAAM;AACxB,mBAAe,QAAQ;AACvB,YAAQ,QAAQ,eAAe,MAAM;;IAEvC;AACF,iBAAe,QAAQ,GAAG;EAC1B,MAAM,OAAO,GAAG,uBAAuB;AACvC,iBAAe,QAAQ,KAAK;AAC5B,UAAQ,QAAQ,eAAe,KAAK,MAAM;;CAG5C,SAAS,gBAAgB;AACvB,kBAAgB,YAAY;AAC5B,mBAAiB;;AAGnB,WAAU,eAAe;AACzB,iBAAgB,cAAc;AAE9B,OAAM,oBAAoB;AACxB,iBAAe;AACf,kBAAgB;GAChB;AAEF,OAAM,OAAO,cAAc,aAAa,aAAa,MAAM,QAAQ;AACjE,MAAI,eAAe,QAAQ,EACzB,SAAQ,QAAQ,eAAe,eAAe,MAAM;GAEtD;AAEF,QAAO;EACL,SAAS,SAAS,QAAQ;EAC1B,gBAAgB,SAAS,eAAe;EACzC;;;;;ACzDH,SAAgB,mBACd,OACA,SACA,gBACA,KACA;CACA,MAAM,cAAc,IAA2B,EAAE,CAAC;CAClD,MAAM,kBAAkB,IAAI,EAAE;CAC9B,MAAM,mCAAmB,IAAI,KAA8B;CAE3D,SAAS,iBAAiB,IAAqB,YAAoB;AACjE,mBAAiB,IAAI,IAAI,WAAW;;CAGtC,SAAS,YAAY;EACnB,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,eAAe;EAC7B,MAAM,IAAI,IAAI,SAAS;AAEvB,MAAI,QAAQ,KAAK,SAAS,KAAK,MAAM,MAAM,WAAW,GAAG;AACvD,eAAY,QAAQ,EAAE;AACtB,mBAAgB,QAAQ;AACxB;;EAGF,MAAM,YAAY,SAAS,OAAO,KAAK,KAAK;EAC5C,MAAM,cAAiC,MAAM,KAC3C,EAAE,QAAQ,MAAM,GACf,GAAG,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,EACnC;EAED,MAAM,SAAgC,EAAE;AAExC,OAAK,MAAM,QAAQ,MAAM,OAAO;GAC9B,MAAM,WAAW,YAAY,QAAQ,KAAK,QACxC,IAAI,SAAS,IAAI,SAAS,MAAM,IACjC;GAED,MAAM,SAAS,iBAAiB,IAAI,KAAK,GAAG;GAC5C,MAAM,aAAa,SACf,SACA,KAAK,QAAQ,IACV,KAAK,SAAS,KAAK,QAAS,WAC7B;GAEN,MAAM,IAAI,SAAS,SAAS,WAAW;GACvC,MAAM,IAAI,SAAS;AAEnB,UAAO,KAAK;IACV;IACA,aAAa,SAAS;IACtB;IACA;IACA,OAAO;IACP,QAAQ;IACT,CAAC;AAEF,YAAS,SAAS,IAAI,aAAa;;AAGrC,cAAY,QAAQ;AACpB,kBAAgB,QAAQ,KAAK,IAAI,GAAG,YAAY,KAAK,MAAM,EAAE,OAAO,CAAC,GAAG;;AAG1E,OACE;EAAC;QAAa,MAAM,MAAM;EAAQ;EAAS;EAAgB;EAAI,EAC/D,WACA,EAAE,WAAW,MAAM,CACpB;AAED,QAAO;EACL,aAAa,SAAS,YAAY;EAClC,iBAAiB,SAAS,gBAAgB;EAC1C;EACA,UAAU;EACX;;;;;AC/EH,SAAgB,kBACd,aACA,SACA,SACA,QACA,YACA;CACA,MAAM,SAAS,IAA0B,OAAO;CAChD,IAAI,WAAwC;CAE5C,SAAS,gBAAgB,SAAsC;AAE7D,MAAI,CADU,QAAQ,IACV,eAAgB;AAC5B,MAAI,CAAC,QAAQ,SAAS,QAAQ,SAAS,OAAO,MAAO;AACrD,SAAO,QAAQ;AACf,cAAY;;CAGd,SAAS,iBAAiB;EACxB,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,MAAM,CAAC,QAAQ,MAAO;AAC3B,aAAW,IAAI,qBAAqB,iBAAiB,EACnD,YAAY,GAAG,0BAA0B,SAC1C,CAAC;AACF,WAAS,QAAQ,GAAG;;CAGtB,SAAS,gBAAgB;AACvB,YAAU,YAAY;AACtB,aAAW;;AAGb,OAAM,CAAC,SAAS,OAAO,QAAQ;AAC7B,MAAI,OAAO,MACT,QAAO,QAAQ;WACN,QAAQ,MACjB,QAAO,QAAQ;MAEf,QAAO,QAAQ;GAEjB;AAEF,WAAU,eAAe;AACzB,iBAAgB,cAAc;AAE9B,OAAM,CAAC,aAAa,QAAQ,QAAQ;AAClC,iBAAe;AACf,kBAAgB;GAChB;AAEF,QAAO,EAAE,QAAQ,SAAS,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEyDrC,MAAM,QAAQ;EAad,MAAM,OAAO;EAOb,MAAM,eAAe,KAAkB;EACvC,MAAM,cAAc,KAAkB;EAItC,MAAM,EAAE,SAAS,mBAAmB,qBAClC,cAHmB,eAAe,MAAM,QAAQ,EAC3B,eAAe,MAAM,YAAY,CAKvD;EAID,MAAM,EAAE,aAAa,iBAAiB,kBAAkB,aACtD,mBAHe,eAAe,MAAM,MAAM,EAGb,SAAS,gBAFzB,eAAe,MAAM,IAAI,CAEuB;EAE/D,MAAM,eAAe,eACb,MAAM,YAAY,MAAM,WAAW,YAAY,MAAM,WAAW,EACvE;EAED,MAAM,gBAAgB,eAAe;GACnC,MAAM,OAAO,QAAQ;GACrB,MAAM,QAAQ,eAAe;GAC7B,MAAM,IAAI,MAAM;AAChB,OAAI,QAAQ,KAAK,SAAS,EAAG,QAAO,EAAE;GAEtC,MAAM,YAAY,SAAS,OAAO,KAAK,KAAK;GAC5C,MAAM,QAAQ,MAAM,iBAAiB;GACrC,MAAM,aAAa,MAAM,KAAK,CAAC,KAAK,EAAE;GACtC,MAAM,SAAoE,EAAE;AAE5E,QAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;IAC9B,MAAM,SAAS,WAAW,QAAQ,KAAK,IAAI,GAAG,WAAW,CAAC;IAC1D,MAAM,IACJ,sBAAsB,KACtB,KAAK,QAAQ,IAAI,sBAAsB,KAAK,sBAAsB;AACpE,WAAO,KAAK;KACV,GAAG,UAAU,WAAW;KACxB,GAAG,WAAW;KACd,OAAO;KACP,QAAQ;KACT,CAAC;AACF,eAAW,WAAW,IAAI;;AAE5B,UAAO;IACP;EAEF,MAAM,iBAAiB,eAAe;AACpC,OAAI,cAAc,MAAM,WAAW,EAAG,QAAO;AAC7C,UAAO,KAAK,IAAI,GAAG,cAAc,MAAM,KAAK,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC;IAClE;EAEF,MAAM,aAAa,eACjB,aAAa,QAAQ,eAAe,QAAQ,gBAAgB,MAC7D;EAMD,MAAM,EAAE,QAAQ,iBAAiB,kBAC/B,aALsB,eAAe,MAAM,SAAS,EACnC,eAAe,MAAM,QAAQ,EAC9B,eAAe,MAAM,OAAO,QAOtC,KAAK,YAAY,CACxB;EAED,SAAS,kBAAkB,KAA0B,OAAc;GACjE,MAAM,MAAM,MAAM;AAClB,OAAI,IAAI,iBAAiB,IAAI,cAAc;IACzC,MAAM,aAAc,IAAI,gBAAgB,IAAI,eAAgB,IAAI;AAChE,qBAAiB,IAAI,KAAK,IAAI,WAAW;;AAE3C,QAAK,gBAAgB,IAAI,KAAK;;EAGhC,SAAS,iBAAiB,KAA0B;AAClD,QAAK,eAAe,IAAI,KAAK;;EAG/B,SAAS,cAAc;AACrB,gBAAa,OAAO,eAAe;IAAE,UAAU;IAAU,OAAO;IAAS,CAAC;;AAG5E,WAA8B;GAC5B;GACA;GACA,kBAAkB,QAAQ;GAC1B,0BAA0B,gBAAgB;GAC3C,CAAC;;uBAtNA,mBA8EM,OAAA;aA9EG;IAAJ,KAAI;IAAe,OAAM;OAC5B,mBA4DM,OAAA;IA3DJ,OAAM;IACL,OAAK,eAAA;KAAA,QAAA,GAAe,WAAA,MAAU;KAAA,UAAA;KAAA,CAAA;OAEf,aAAA,0BACd,mBAgBM,UAAA,EAAA,KAAA,GAAA,EAAA,WAfgB,cAAA,QAAZ,IAAI,QAAG;wBADjB,mBAgBM,OAAA;KAdH,KAAG,MAAQ;KACZ,OAAM;KACL,OAAK,eAAA;;eAA6D,GAAG,EAAC;cAA2B,GAAG,EAAC;gBAA6B,GAAG,MAAK;iBAA8B,GAAG,OAAM;yBAAsC,MAAM,qBAAqB,MAAA,2BAA0B,CAAA;;QAS7Q,WAEO,KAAA,QAAA,YAAA,EAAA,QAAA,2BADL,mBAAyC,OAAA,EAApC,OAAM,6BAA2B,EAAA,MAAA,GAAA;mEAK5C,mBAmCM,UAAA,MAAA,WAlCmB,MAAA,YAAW,GAA1B,KAAK,UAAK;wBADpB,mBAmCM,OAAA;KAjCH,KAAK,IAAI,KAAK;KACf,OAAM;KACL,OAAK,eAAA;;eAAyD,IAAI,EAAC;cAAyB,IAAI,EAAC;gBAA2B,IAAI,MAAK;yBAAoC,MAAM,qBAAqB,MAAA,2BAA0B,CAAA;;KAO9N,UAAK,WAAE,KAAI,cAAe,IAAI,MAAM,MAAK;QAE1C,WAqBO,KAAA,QAAA,QAAA;KAnBJ,MAAM,IAAI;KACH;KACP,OAAO,IAAI;KACX,QAAQ,IAAI;aAgBR,CAdL,mBAaM,OAbN,YAaM,CAZJ,mBAQE,OAAA;KAPC,KAAK,IAAI,KAAK;KACd,KAAK,IAAI,KAAK,SAAK;KACnB,SAAS,MAAM,OAAI,SAAA;KACpB,OAAM;KACL,OAAK,eAAA,EAAA,QAAA,GAAe,IAAI,OAAM,KAAA,CAAA;KAC9B,SAAI,WAAE,kBAAkB,KAAK,OAAM;KACnC,UAAK,WAAE,iBAAiB,IAAG;8BAEnB,IAAI,KAAK,sBAApB,mBAEM,OAFN,YAEM,gBADD,IAAI,KAAK,MAAK,EAAA,EAAA;mBAOhB,MAAM,yBAAjB,mBAcM,OAdN,YAcM,CAbJ,mBAAqD,OAAA;aAA5C;IAAJ,KAAI;IAAc,OAAM;kBAC7B,WAWO,KAAA,QAAA,UAAA,EAXc,QAAQ,MAAA,aAAY,EAAA,QAWlC,CAVM,MAAM,wBAAjB,mBAGM,OAHN,YAGM,CAFJ,YAAsB,MAAA,MAAA,EAAA,EAAf,MAAK,SAAO,CAAA,4BACnB,mBAAiB,QAAA,MAAX,QAAI,GAAA,OAGC,MAAM,uBADnB,mBAKM,OALN,YAGC,UAED"}
+{"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","../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","/* unplugin-vue-components disabled */<!--\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","/* unplugin-vue-components disabled */<!--\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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"}