pb-sxp-ui 1.0.78 → 1.0.79

package/dist/index.cjs

@@ -650,6 +650,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             setCacheRtcList((_b = data === null || data === void 0 ? void 0 : data.recList) !== null && _b !== void 0 ? _b : []);
         })
             .finally(() => {
+            bffEventReport({
+                eventInfo: {
+                    eventSubject: 'apiRequest',
+                    eventDescription: 'api request succeed'
+                }
+            });
             setLoading(false);
             isInit.current = true;
         });
@@ -10361,19 +10367,29 @@ var _a, _b;
  *
  */
 var settingRender = [
+    {
+        title: 'Banner',
+        child: [
+            {
+                type: 'Switch',
+                label: 'Banner图开关',
+                name: ['props', 'showBanner']
+            }
+        ]
+    },
     {
         title: '卡片样式',
         child: [
-            // {
-            //   type: 'Number',
-            //   label: '文本行数',
-            //   name: ['props', 'lineClamp']
-            // },
             {
                 type: 'Number',
                 label: '上下边距',
                 name: ['props', 'space'],
                 addonAfter: 'px'
+            },
+            {
+                type: 'Switch',
+                label: '固定宽高',
+                name: ['props', 'isWaterfallFlow']
             }
         ]
     },
@@ -11842,6 +11858,374 @@ var previewData = {
 	hashTag: hashTag
 };
 
+const WaterfallFlowItem$1 = (props) => {
+    const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
+    const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
+    const [showVideo, setShowVideo] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [imgInfo, setImgInfo] = React.useState({
+        height: 1,
+        width: 1
+    });
+    const imgDom = React.useRef(null);
+    const ref = React.useRef(null);
+    const videoDom = React.useRef(null);
+    const canvasRef = React.useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+    const src = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
+            return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
+        }
+        else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
+            return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
+        }
+        else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
+            return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
+        }
+        else {
+            return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
+        }
+    }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
+    const title = React.useMemo(() => {
+        var _a, _b;
+        return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
+    }, [rec]);
+    /** 离父亲上边框的距离 */
+    const top = React.useMemo(() => {
+        var _a;
+        const y = style.transform
+            ? Number((_a = style.transform) === null || _a === void 0 ? void 0 : _a.substring(style.transform.indexOf(',', 0) + 1, style.transform.length - 3))
+            : undefined;
+        return y;
+    }, [style]);
+    /** 是否加载图片 */
+    const isImgShow = React.useMemo(() => {
+        if (top === undefined) {
+            return false;
+        }
+        if (top <= showBorder) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }, [top, showBorder]);
+    const priceText = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
+            return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _j !== void 0 ? _j : ''}`;
+        }
+        else {
+            return null;
+        }
+    }, [rec]);
+    React.useEffect(() => {
+        if (imgDom.current === null || src === '') {
+            return;
+        }
+        const img = new Image();
+        if (showVideo && firstFrameSrc) {
+            img.src = firstFrameSrc;
+        }
+        else {
+            img.src = src;
+        }
+        img.onload = () => {
+            setImgInfo({
+                height: img.height,
+                width: img.width
+            });
+            setIsLoading(true);
+        };
+        imgDom.current.setSrc(img.src);
+    }, [src, showVideo, firstFrameSrc, isImgShow]);
+    React.useEffect(() => {
+        // 通过宽度比例获取图片高度
+        const height = imgInfo.height * (unitWidth / imgInfo.width);
+        if (isLoading) {
+            // 加40是因为下方文字部分高度为40，可以自己设置
+            sizeChange(height + 76 + space, index);
+        }
+    }, [imgInfo, index, unitWidth, isLoading, space]); /* 增加sizeChange依赖项会导致在admin预览编辑时无限刷新 */
+    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
+        const aspectRatio = videoWidth / videoHeight;
+        const targetHeight = targetWidth / aspectRatio;
+        return targetHeight;
+    };
+    React.useEffect(() => {
+        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
+        if (video === null || src === '' || !showVideo) {
+            return;
+        }
+        video.src = src;
+        video.currentTime = 1;
+        video.crossOrigin = 'anonymous';
+        video.onloadeddata = () => {
+            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
+            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
+            canvas.height = targetHeight;
+            canvas.width = targetWidth;
+            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            setFirstFrameSrc(canvas.toDataURL());
+            video.remove();
+            canvas.remove();
+        };
+    }, [src, showVideo]);
+    const handleClickToDetail = () => {
+        reportTagsView();
+        setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
+        setTimeout(() => {
+            var _a;
+            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
+            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+        }, 0);
+    };
+    return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
+        React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
+            showVideo && (React.createElement("div", { style: { display: 'none' } },
+                React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
+                React.createElement("canvas", { ref: canvasRef }))),
+            React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+        React.createElement("div", { className: 'waterFallList-content-listItem-info' },
+            React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
+            React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
+};
+function WaterfallList$1(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+    /** 滚动的父元素 */
+    const scrollParent = React.useRef(null);
+    /** 向上滚动的距离 */
+    const [scrollTop, setScrollTop] = React.useState(0);
+    /** 数据列表 */
+    const [data, setData] = React.useState();
+    const waterfallFlowDom = React.useRef(null);
+    /** 样式列表 */
+    const [styleList, setStyleList] = React.useState([]);
+    const styleListRef = React.useRef();
+    /** 自定义骨架屏高度 */
+    const heightList = [170, 230, 300];
+    /** 到达底部 */
+    const [isLoadingData, setIsLoadingData] = React.useState(false);
+    const [list, setList] = React.useState([]);
+    const buttonRef = React.useRef();
+    /** 生成随机数 */
+    const createRandomNum = React.useCallback((min, max) => {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }, []);
+    const waterfallFlowListInfo = React.useRef([]);
+    /** 当前容器信息 */
+    const [frameInfo, setFrameInfoInfo] = React.useState({ width: 0 });
+    /** 每行个数 */
+    const rowsNum = React.useMemo(() => {
+        const width = frameInfo.width || 0;
+        if (width >= 1200) {
+            return 6;
+        }
+        else if (width >= 768 && width <= 1199) {
+            return 4;
+        }
+        else {
+            return 2;
+        }
+    }, [frameInfo]);
+    /** 每一个的宽度 */
+    const unitWidth = React.useMemo(() => {
+        return frameInfo.width / rowsNum - 2;
+    }, [rowsNum, frameInfo]);
+    /** 获取位置 */
+    const getStyleList = React.useCallback(() => {
+        var _a;
+        const temporaryStyleList = (_a = styleListRef.current) !== null && _a !== void 0 ? _a : [];
+        /** 目前最下一行的index */
+        const bottomItemIndex = [];
+        for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
+            // 原本应对应的行数
+            const currentRow = Math.floor(i / rowsNum);
+            //
+            const remainder = (i % rowsNum) + 1;
+            // 最低item下标
+            let minHeightInd = 0;
+            // 最低高度
+            let minHeight = 9999999999;
+            // 寻找最低高度的下标
+            if (currentRow === 0) {
+                bottomItemIndex[i] = i;
+            }
+            else {
+                for (let j = 0; j < bottomItemIndex.length; j++) {
+                    if (waterfallFlowListInfo.current[bottomItemIndex[j]].top +
+                        waterfallFlowListInfo.current[bottomItemIndex[j]].height <
+                        minHeight) {
+                        minHeightInd = j;
+                        minHeight =
+                            waterfallFlowListInfo.current[bottomItemIndex[j]].top +
+                                waterfallFlowListInfo.current[bottomItemIndex[j]].height;
+                    }
+                }
+                bottomItemIndex[minHeightInd] = i;
+            }
+            if (waterfallFlowListInfo.current[i] === undefined) {
+                waterfallFlowListInfo.current[i] = {};
+            }
+            // 第一行特殊处理，一定是从左到右铺的
+            if (currentRow === 0) {
+                if (remainder === 1) {
+                    waterfallFlowListInfo.current[i].left = 0;
+                }
+                else {
+                    waterfallFlowListInfo.current[i].left = waterfallFlowListInfo.current[i - 1].left + unitWidth + 4;
+                }
+                waterfallFlowListInfo.current[i].top = 0;
+            }
+            // 剩下的行数，铺在当前最低高度下面
+            else {
+                waterfallFlowListInfo.current[i].left = waterfallFlowListInfo.current[minHeightInd].left;
+                waterfallFlowListInfo.current[i].top = minHeight;
+            }
+            // 是否已经有高度，有高度使用已有高度，否则随机生成
+            waterfallFlowListInfo.current[i].height =
+                waterfallFlowListInfo.current[i].height || heightList[createRandomNum(0, 2)];
+            temporaryStyleList[i] = {
+                transform: `translate(${waterfallFlowListInfo.current[i].left}px,${waterfallFlowListInfo.current[i].top}px)`,
+                width: `${unitWidth}px`,
+                height: waterfallFlowListInfo.current[i].height
+            };
+        }
+        setStyleList([...temporaryStyleList]);
+        return [...temporaryStyleList];
+    }, [unitWidth, rowsNum, heightList, createRandomNum, list]);
+    /** 图片加载完更新高度 */
+    const onSizeChange = React.useCallback((height, index) => {
+        if (waterfallFlowListInfo.current[index] === undefined) {
+            waterfallFlowListInfo.current[index] = {};
+        }
+        waterfallFlowListInfo.current[index].height = height;
+        styleListRef.current = getStyleList();
+    }, [getStyleList]);
+    /** 大小、数量发生变化时触发 */
+    React.useEffect(() => {
+        styleListRef.current = getStyleList();
+    }, [unitWidth, rowsNum, list]); /* 增加getStyleList依赖项会导致在admin预览编辑时无限刷新 */
+    /** 初始化请求数据 */
+    React.useEffect(() => {
+        var _a, _b;
+        setIsLoadingData(true);
+        waterFallData &&
+            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
+                defaultSize: hashTagSize,
+                maxSize: hashTagSize
+            }).then((res) => {
+                var _a, _b;
+                setData(res);
+                setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                setIsLoadingData(false);
+            }));
+        if (isOpenHashTag) {
+            const res = previewData;
+            setData(res);
+            setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+            setIsLoadingData(false);
+        }
+    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
+    const onResize = React.useCallback(() => {
+        if (waterfallFlowDom.current === null) {
+            return;
+        }
+        setFrameInfoInfo({
+            width: waterfallFlowDom.current.getBoundingClientRect().width
+        });
+    }, []);
+    /** 监听列表容器大小变化 */
+    React.useEffect(() => {
+        if (waterfallFlowDom.current === null) {
+            return;
+        }
+        const resizeObserver = new ResizeObserver((entries) => {
+            onResize();
+        });
+        resizeObserver.observe(waterfallFlowDom.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [onResize]);
+    React.useCallback(() => {
+        setIsLoadingData(true);
+        waterFallData &&
+            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
+            }).then((res) => {
+                var _a, _b;
+                setList(list === null || list === void 0 ? void 0 : list.concat((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => !(item === null || item === void 0 ? void 0 : item.video))) !== null && _b !== void 0 ? _b : []));
+                setIsLoadingData(false);
+            }));
+    }, [waterFallData, getRecommendVideos, list]);
+    const onScroll = React.useCallback(() => {
+        // 记录滚动值
+        setScrollTop(scrollParent.current.scrollTop);
+        // const top = (scrollParent.current as any).scrollTop;
+        // const clientHeight = (scrollParent.current as any).clientHeight;
+        // const scrollHeight = (scrollParent.current as any).scrollHeight;
+        // // 做底部加载
+        // if (scrollHeight <= top + clientHeight && !isLoadingData) {
+        //   loadMoreData();
+        // }
+    }, []);
+    /** 监听滚动 */
+    React.useEffect(() => {
+        var _a;
+        (_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', onScroll);
+        return () => {
+            var _a;
+            (_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', onScroll);
+        };
+    }, [onScroll, scrollParent]);
+    const handleClickLink = () => {
+        var _a, _b;
+        if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
+            reportTagsView();
+            window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
+        }
+    };
+    return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+        React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'waterFallList', ref: waterfallFlowDom },
+        React.createElement("div", { className: 'waterFallList-scroll', ref: scrollParent },
+            React.createElement("div", { className: 'waterFallList-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
+            React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'waterFallList-collection', style: Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'waterFallList-content' }, list === null || list === void 0 ? void 0 :
+                list.map((item, ind) => {
+                    var _a;
+                    return (React.createElement(WaterfallFlowItem$1, Object.assign({ key: ind, index: ind, rec: item, list: list, showBorder: scrollTop + ((_a = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.current) === null || _a === void 0 ? void 0 : _a.clientHeight), style: styleList[ind], sizeChange: onSizeChange, unitWidth: unitWidth, reportTagsView: reportTagsView }, props)));
+                }),
+                React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
+                        position: 'absolute',
+                        width: '100%',
+                        transform: `translate(0px,${(_m = ((_j = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_h = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _h === void 0 ? void 0 : _h.length) - 1]) === null || _j === void 0 ? void 0 : _j.top) +
+                            ((_l = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current[((_k = waterfallFlowListInfo === null || waterfallFlowListInfo === void 0 ? void 0 : waterfallFlowListInfo.current) === null || _k === void 0 ? void 0 : _k.length) - 1]) === null || _l === void 0 ? void 0 : _l.height)) !== null && _m !== void 0 ? _m : 0}px)`,
+                        height: ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link)
+                            ? ((_p = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) === null || _p === void 0 ? void 0 : _p.offsetHeight) || ((_q = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _q === void 0 ? void 0 : _q.height) || '100px'
+                            : 0
+                    } }))),
+        React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { ref: buttonRef, hidden: !((_s = data === null || data === void 0 ? void 0 : data.tag) === null || _s === void 0 ? void 0 : _s.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.linkTitle) || 'Shop the collection'))))));
+}
+
+var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
+
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
@@ -12052,13 +12436,11 @@ function WaterfallList(_a) {
             React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
 }
 
-var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
-
 /*
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-10 10:58:24
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-15 17:57:59
+ * @LastEditTime: 2024-06-07 10:35:35
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
  *
  */
@@ -12152,7 +12534,7 @@ const WaterFall = (props) => {
             display: openHashtag ? 'block' : 'none'
         } },
         React.createElement(Navbar$1, { icon: img$1, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
-        React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
+        (props === null || props === void 0 ? void 0 : props.isWaterfallFlow) ? (React.createElement(WaterfallList$1, Object.assign({ reportTagsView: reportTagsView }, props))) : (React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props)))), modalEleRef.current);
 };
 var WaterFall$1 = React.memo(WaterFall);
 
@@ -12676,7 +13058,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
  *
  */
 const Picture = (props) => {
-    const { src, height, imgUrlsPostConfig } = props;
+    const { src, height, imgUrlsPostConfig, onShowFirstImage } = props;
     const blur = React.useMemo(() => {
         return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.mode) === '2';
     }, [imgUrlsPostConfig]);
@@ -12701,7 +13083,7 @@ const Picture = (props) => {
         return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
     }, [imgUrlsPostConfig, isBgColor]);
     return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
-        (!blur || !isBgColor) && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+        (!blur || !isBgColor) && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle), onLoad: onShowFirstImage })),
         blur && (React.createElement(FormatImage$1, { src: src, style: {
                 width: '100%',
                 height: '100%',
@@ -12718,7 +13100,7 @@ const Picture = (props) => {
  * @Author: lewinlu@chatlabs.com
  * @Date: 2024-01-03 14:39:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-18 19:56:22
+ * @LastEditTime: 2024-06-07 14:05:08
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
  */
 const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
@@ -12738,16 +13120,20 @@ const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageE
             }
         }
         else {
-            setIsLoad(true);
             (ref === null || ref === void 0 ? void 0 : ref.current) && ref.current.swiper.autoplay.stop();
         }
     }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
+    const showFirstImageFn = React.useCallback(() => {
+        if (!isLoad) {
+            setIsLoad(true);
+        }
+    }, [isLoad]);
     // if (!isActive) {
     //   return <img src={sxpParameter?.placeholder_image} style={{ width, height, objectFit: 'cover' }} />;
     // }
-    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (React.createElement(SwiperSlide, { key: url },
-            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
+    return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+        return (React.createElement(SwiperSlide, { key: index },
+            React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
     })));
 };
 var PictureGroup$3 = React.memo(PictureGroup$2);
@@ -12967,7 +13353,7 @@ var Tagbar$1 = React.memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-06-06 18:42:24
+ * @LastEditTime: 2024-06-07 11:10:42
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */
@@ -12990,6 +13376,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
     const handleH5EnterLink = React.useCallback(() => {
+        var _a, _b;
         if (data.length <= 0) {
             return;
         }
@@ -13012,7 +13399,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 utmId: getVal('utm_id'),
                 utmContent: getVal('utm_content'),
                 enterTime: `${Date.now()}`,
-                requestId: null
+                requestId: null,
+                enterUrl: (_b = (_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.href) !== null && _b !== void 0 ? _b : '',
+                clSource: getVal('cl_sourc')
             }
         });
         bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
@@ -13072,26 +13461,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         })) || 0;
         (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
     }, [ctaType, swiperRef]);
-    // useEffect(() => {
-    //   const handleBeforeUnload = (event: any) => {
-    //     event.preventDefault();
-    //     const item = data?.[activeIndex];
-    //     bffEventReport?.({
-    //       eventInfo: {
-    //         sessionDuration: Math.floor(((new Date() as any) - curTime) / 1000) + '',
-    //         eventSubject: 'sessionCompleted',
-    //         eventDescription: 'Session completed',
-    //         contentId: item?.video?.itemId,
-    //         productId: item?.product?.itemId,
-    //         position: item?.position
-    //       }
-    //     });
-    //   };
-    //   window.addEventListener('beforeunload', handleBeforeUnload);
-    //   return () => {
-    //     window.removeEventListener('beforeunload', handleBeforeUnload);
-    //   };
-    // }, [activeIndex, data, bffEventReport, curTime]);
     React.useEffect(() => {
         const item = data === null || data === void 0 ? void 0 : data[activeIndex];
         const visibleChange = () => {