pb-sxp-ui 1.15.13-alpha.1 → 1.15.13-alpha.3

package/dist/pb-ui.js

@@ -779,9 +779,8 @@
             }
             else if (utmVal) {
                 const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
-                    var _a, _b;
                     const key = val.split('=')[0];
-                    return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
+                    return key;
                 })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
                 if (val)
                     query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
@@ -822,7 +821,7 @@
             if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
                 query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
             }
-            const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', { method: 'POST', body: query }));
+            const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
             if (!(result === null || result === void 0 ? void 0 : result.success)) {
                 return undefined;
             }
@@ -1099,6 +1098,7 @@
             if (!isShowConsent)
                 h5EnterLink();
         }, [isShowConsent]);
+        console.log(data, '111');
         React.useEffect(() => {
             if (isShowConsent || isPreview)
                 return;
@@ -10099,7 +10099,15 @@
                     wordBreak: 'break-word'
                 }, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
             React.createElement("div", { ref: multiRowCopy, dangerouslySetInnerHTML: { __html: setFontForText(text === null || text === void 0 ? void 0 : text.replace(/\n/g, '</br>'), style) } }),
-            text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: { textDecoration: 'underline', cursor: 'pointer' }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
+            text && isPost && isShow && (React.createElement("button", { "aria-label": isShowMore ? unfoldText || 'show less' : foldText || 'show more', style: {
+                    textDecoration: 'underline',
+                    cursor: 'pointer',
+                    outline: 'none',
+                    border: 'none',
+                    boxSizing: 'content-box',
+                    padding: 0,
+                    background: 'transparent'
+                }, onClick: onClick !== null && onClick !== void 0 ? onClick : handleClick, dangerouslySetInnerHTML: {
                     __html: setFontForText(isShowMore ? unfoldText || 'show less' : foldText || 'show more', style)
                 } }))));
     };
@@ -12457,7 +12465,7 @@ Made in Italy` })));
         const handleClick = lodash.throttle((e) => {
             var _a, _b, _c, _d, _e, _f;
             e.preventDefault();
-            const item = multItem ? multItem : (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+            const item = multItem || ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video);
             ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
                 eventSubject: 'clickCta',
                 eventDescription: 'User clicked the CTA'
@@ -12484,7 +12492,7 @@ Made in Italy` })));
                 setElement(null);
             }
         }, [element, popup]);
-        return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
+        return (React.createElement("button", { ref: ref, className: className, style: Object.assign({ outline: 'none', border: 'none', boxSizing: 'content-box', padding: 0, background: 'transparent', display: 'flex', alignItems: 'normal' }, style), onClick: handleClick, role: 'button', "aria-label": 'CTA', tabIndex: 0 }, children));
     };
     var EventProvider$1 = React.memo(EventProvider);
 
@@ -13080,6 +13088,7 @@ Made in Italy` })));
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+        console.log(recData, '222');
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -13286,6 +13295,7 @@ Made in Italy` })));
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, translateY = 0, isActive, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "translateY", "isActive", "index"]);
         const { sxpParameter } = useSxpDataSource();
         const [products] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+        console.log(recData, '333');
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, itemIndex) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, { key: itemIndex, className: css.css(Object.assign(Object.assign({}, style), { flexShrink: 0, marginLeft: 0, marginRight: '8px' })), tag: 'li', role: 'listitem' },
@@ -18304,7 +18314,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-10-31 10:30:55
+     * @LastEditTime: 2025-03-26 19:32:00
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
      *
      */
@@ -18314,10 +18324,10 @@ Made in Italy` })));
             return null;
         const renderComp = React.useMemo(() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
-            //如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
+            // 如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
             if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
                 return;
-            //默认不渲染category为cta类型的组件，该类型的组件只用于某一处
+            // 默认不渲染category为cta类型的组件，该类型的组件只用于某一处
             if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
                 return;
             if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
@@ -18334,10 +18344,10 @@ Made in Italy` })));
                 const Component = withBindDataSource(t);
                 const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
                 const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
-                let style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
+                const style = lodash.cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
                 if (style.hasOwnProperty('backdropFilter')) {
-                    let sbf = style['backdropFilter'];
-                    style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
+                    const sbf = style.backdropFilter;
+                    style.backdropFilter = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
                 }
                 return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
             }
@@ -19069,7 +19079,7 @@ Made in Italy` })));
             React.createElement(ConsentPopup, { resolver: resolver, globalConfig: globalConfig }),
             openMultiPosts && (React.createElement(MultiPosts$2, Object.assign({}, (_x = (_w = (_v = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _v === void 0 ? void 0 : _v[0]) === null || _w === void 0 ? void 0 : _w.item) === null || _x === void 0 ? void 0 : _x.props, (_0 = (_z = (_y = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.item) === null || _0 === void 0 ? void 0 : _0.event, { style: { position: 'fixed', top: 0, left: 0, right: 0 } })))))));
     };
-    var SxpPageRender$1 = React.memo(SxpPageRender);
+    var index$2 = React.memo(SxpPageRender);
 
     const PictureGroup$2 = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
         return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
@@ -19433,7 +19443,7 @@ Made in Italy` })));
             return renderView(rec, index);
         })));
     };
-    var index$2 = React.memo(DiyPortalPreview);
+    var index$1 = React.memo(DiyPortalPreview);
 
     const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
         const { isActive } = useSwiperSlide();
@@ -19501,6 +19511,7 @@ Made in Italy` })));
         }, [bffEventReport, data, index, isFirstPlay]);
         const handleLoadedMetadata = React.useCallback(() => {
             var _a;
+            videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
             (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
             setIsLoadFinish(true);
         }, []);
@@ -19574,6 +19585,8 @@ Made in Italy` })));
         }, []);
         const handlePause = () => {
             var _a, _b, _c, _d, _e, _f;
+            if (!videoRef.current || !isActive)
+                return;
             if (!loopPlay)
                 return;
             if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
@@ -19585,6 +19598,7 @@ Made in Italy` })));
             }
         };
         // useEffect(() => {
+        //   if (!videoRef.current) return;
         //   if (!isActive) return;
         //   if (!loopPlay) {
         //     videoRef?.current?.pause();
@@ -19604,7 +19618,6 @@ Made in Italy` })));
             if (!videoPlayerWrapperNode)
                 return;
             videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
-            videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
                 return;
             const Hls = window === null || window === void 0 ? void 0 : window.Hls;
@@ -19615,6 +19628,7 @@ Made in Italy` })));
                 hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
                 hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
                     var _a;
+                    videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
                     (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
                 });
             }
@@ -19637,7 +19651,7 @@ Made in Italy` })));
                 (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
                 (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
             };
-        }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive]);
+        }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
         React.useMemo(() => {
             if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
                 return null;
@@ -19670,17 +19684,196 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2025-03-25 13:54:27
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-03-26 15:01:42
+     * @LastEditTime: 2025-03-27 17:20:34
      * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
      *
      */
+    const recData = {
+        position: 0,
+        isCollected: false,
+        product: null,
+        video: {
+            appId: null,
+            itemId: 'VIDEOSsRgI1695278974368',
+            title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
+            enTitle: null,
+            icon: null,
+            cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
+            link: null,
+            linkTitle: null,
+            linkType: null,
+            menuCategoryId: null,
+            remark: null,
+            tags: [
+                'Gift-Giving',
+                'Daily Wear',
+                'Business Formal',
+                'Sports/Casual',
+                'Anniversary Gifts',
+                'Wedding/Engagement',
+                'Formal Dinner/Party'
+            ],
+            traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+            value: 385,
+            weight: null,
+            bindCta: null,
+            bindProduct: null,
+            bindProducts: [
+                {
+                    appId: 'wx448578f8851f3dce',
+                    itemId: 'test02178888',
+                    title: 'christian dior小包包 新CDN',
+                    enTitle: null,
+                    icon: null,
+                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
+                    link: '/pages/details/index?spu_id=1702262707659534338',
+                    linkTitle: '',
+                    linkType: 'MP',
+                    menuCategoryId: null,
+                    remark: null,
+                    tags: [],
+                    traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                    value: null,
+                    weight: null,
+                    bindCta: {
+                        appId: 'wx448578f8851f3dce',
+                        itemId: 'CTA3KofE1716186622249',
+                        title: 'SHOP NOW 立即购买',
+                        enTitle: 'BUY NOW立即购买，选择你所喜爱的；',
+                        icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
+                        cover: null,
+                        link: '/pages/details/index?spu_id=1702262707659534338',
+                        linkTitle: '',
+                        linkType: 'MP',
+                        menuCategoryId: '64b60b202caf0e1c1ce1e17d',
+                        remark: null,
+                        tags: [
+                            "Woman's Perfumes",
+                            'Plates & Bowls',
+                            'Glasses',
+                            'Multicolor',
+                            'Carafes',
+                            'Tea & Coffee',
+                            'Green',
+                            'Grey',
+                            'Cutlery'
+                        ],
+                        traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                        value: null,
+                        weight: null
+                    },
+                    collection: 'Ricco',
+                    currency: 'INR-₹',
+                    homePage: [
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
+                    ],
+                    info: 'test',
+                    price: 53200,
+                    shippingInfo: null,
+                    taxInfo: null
+                },
+                {
+                    appId: null,
+                    itemId: '113J631A0684_C520',
+                    title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
+                    enTitle: null,
+                    icon: null,
+                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
+                    link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
+                    linkTitle: null,
+                    linkType: 'WEB',
+                    menuCategoryId: null,
+                    remark: null,
+                    tags: [],
+                    traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                    value: null,
+                    weight: null,
+                    bindCta: {
+                        appId: null,
+                        itemId: 'CTAAfaKf1730796437032',
+                        title: 'test',
+                        enTitle: 'test',
+                        icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
+                        cover: null,
+                        link: null,
+                        linkTitle: null,
+                        linkType: null,
+                        menuCategoryId: '64b60b202caf0e1c1ce1e17d',
+                        remark: '',
+                        tags: [],
+                        traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                        value: null,
+                        weight: null
+                    },
+                    collection: 'Jacquard de coton éponge bleu',
+                    currency: 'EUR-€',
+                    homePage: [
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
+                    ],
+                    info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
+                    price: 1800,
+                    shippingInfo: null,
+                    taxInfo: null
+                },
+                {
+                    appId: null,
+                    itemId: 'S5573CRIW_M928',
+                    title: 'Mini Dior Book Tote',
+                    enTitle: null,
+                    icon: null,
+                    cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
+                    link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
+                    linkTitle: null,
+                    linkType: 'WEB',
+                    menuCategoryId: null,
+                    remark: null,
+                    tags: ['ダイヤモンド'],
+                    traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
+                    value: null,
+                    weight: null,
+                    bindCta: null,
+                    collection: null,
+                    currency: 'GBP-￡',
+                    homePage: [
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
+                        'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
+                    ],
+                    info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
+                    price: 1950,
+                    shippingInfo: null,
+                    taxInfo: null
+                }
+            ],
+            url: null,
+            blockCta: 1,
+            blockProduct: 1,
+            hashTags: [
+                'Sports/Casual',
+                'Formal Dinner/Party',
+                'Business Formal',
+                'Wedding/Engagement',
+                'Gift-Giving',
+                'Daily Wear',
+                'Anniversary Gifts'
+            ]
+        }
+    };
     const RESOLVER$1 = {};
     Object.values(_materials_).forEach((v) => {
         RESOLVER$1[v.extend.type] = v;
     });
     const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
     const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-    const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false }) => {
+    const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
+        const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
         const swiperRef = React.useRef(null);
         React.useMemo(() => {
             let minusHeight = 0;
@@ -19706,10 +19899,10 @@ Made in Italy` })));
         const renderContent = (rec, index) => {
             const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
             if (isVideo) {
-                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlay }));
+                return (React.createElement(VideoWidget$1, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
             }
             else {
-                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlay }));
+                return (React.createElement(PictureGroup$1, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
             }
         };
         React.useMemo(() => {
@@ -19719,12 +19912,126 @@ Made in Italy` })));
             }
             return null;
         }, [globalConfig]);
-        useIconLink(defaultLikeIconPath, appDomain);
-        useIconLink(defaultUnLikeIconPath, appDomain);
-        useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
-        useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
-        const renderView = (rec, index) => {
-            return (React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } }, renderContent(rec, index)));
+        const renderBottom = (rec, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (rec === null || rec === void 0 ? void 0 : rec.video) {
+                let cta = null;
+                if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
+                    cta = '多商品CTA';
+                }
+                else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
+                    cta = '商品CTA';
+                }
+                else {
+                    cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
+                }
+                const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
+                return (React.createElement(React.Fragment, null,
+                    ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (React.createElement("div", { style: {
+                            background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
+                            height: '130px',
+                            position: 'absolute',
+                            bottom: 0,
+                            width: '100%',
+                            willChange: 'transform',
+                            zIndex: 2,
+                            pointerEvents
+                        } })),
+                    React.createElement("div", { style: {
+                            marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
+                            zIndex: 999,
+                            position: 'absolute',
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                            paddingTop: '20px'
+                        } },
+                        (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { style: {} },
+                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, isActive: index === activeIndex, value: value }))) : null,
+                        React.createElement("div", null,
+                            React.createElement(ExpandableText$1
+                            // className='clc-sxp-bottom-text'
+                            , { 
+                                // className='clc-sxp-bottom-text'
+                                isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
+                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
+                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER$1, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
+            }
+            return null;
+        };
+        const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
+        const renderLikeButton = (rec, index) => {
+            var _a, _b, _c, _d;
+            if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+                return;
+            let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
+            if (top < 40) {
+                top += 40;
+            }
+            if (rec === null || rec === void 0 ? void 0 : rec.video) {
+                return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, 
+                    // className={style['clc-sxp-like-button']}
+                    style: {
+                        top,
+                        right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
+                        position: 'absolute',
+                        zIndex: 999,
+                        backgroundColor: 'transparent',
+                        width: '50px',
+                        height: '50px',
+                        outline: 'none',
+                        border: 'none',
+                        boxSizing: 'content-box',
+                        padding: 0,
+                        transform: 'translate3d(0px, 0px, 0px)'
+                    } }));
+            }
+            return null;
+        };
+        const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
+        const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
+        const renderToggleButton = (visible) => {
+            var _a, _b, _c, _d;
+            if (!visible)
+                return;
+            let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
+            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
+                top += 45;
+            }
+            return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
+                    position: 'absolute',
+                    visibility: 'visible',
+                    zIndex: 999,
+                    transform: 'translate3d(0px,0px,0px)',
+                    [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
+                    [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
+                    backgroundColor: 'transparent',
+                    width: '50px',
+                    height: '50px',
+                    outline: 'none',
+                    border: 'none',
+                    boxSizing: 'content-box',
+                    padding: 0
+                }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })));
+        };
+        const renderView = (item, index) => {
+            var _a, _b, _c, _d;
+            const rec = lodash.cloneDeep(recData);
+            rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
+            return (React.createElement("div", { style: { position: 'relative' } },
+                React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
+                    renderBottom(rec, index),
+                    renderLikeButton(rec, index),
+                    renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
+                    React.createElement(ToggleButton$1, { style: {
+                            position: 'absolute',
+                            right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
+                            visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
+                            bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
+                            zIndex: 999
+                        }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
+                    renderContent(item, index))));
         };
         React.useEffect(() => {
             var _a, _b;
@@ -19738,14 +20045,23 @@ Made in Italy` })));
                 return;
             (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
         }, [loopPlay]);
-        return (React.createElement(Swiper, { ref: swiperRef, allowTouchMove: false, onActiveIndexChange: (swiper) => {
-                // setActiveIndex(swiper.activeIndex);
-                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
-            }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight } }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
-            return renderView(rec, index);
-        })));
+        return (React.createElement("div", { id: 'sxp-render', 
+            // className={style['clc-sxp-container']}
+            style: { height: containerHeight, position: 'relative', pointerEvents } },
+            React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
+                    setLooPlaySwiper(false);
+                    swiperRef.current.swiper.allowTouchMove = false;
+                    setTimeout(() => {
+                        swiperRef.current.swiper.allowTouchMove = true;
+                    }, 500);
+                }, onActiveIndexChange: (swiper) => {
+                    // setActiveIndex(swiper.activeIndex);
+                    onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
+                }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
+                return renderView(rec, index);
+            }))));
     };
-    var index$1 = React.memo(DiyStoryPreview);
+    var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -19843,17 +20159,9 @@ Made in Italy` })));
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-01-15 19:03:09
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2025-02-24 15:47:44
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
-     *
-     */
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-11-24 15:58:00
+     * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2023-12-26 10:24:42
+     * @LastEditTime: 2025-03-27 17:17:56
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -19861,7 +20169,7 @@ Made in Italy` })));
     Object.values(_materials_).forEach((v) => {
         RESOLVER[v.extend.type] = v;
     });
-    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
+    const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
         var _a, _b, _c, _d, _e, _f;
         const utmVal = React.useMemo(() => {
             var _a;
@@ -19874,7 +20182,7 @@ Made in Italy` })));
             React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
                     var _a;
                     return (React.createElement(React.Fragment, null,
-                        React.createElement(SxpPageRender$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
+                        React.createElement(DiyStoryPreview$1, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents })),
                         React.createElement(Popup, null)));
                 } })));
     };
@@ -19888,13 +20196,13 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\index.ts
      */
 
-    exports.DiyPortalPreview = index$2;
-    exports.DiyStoryPreview = index$1;
+    exports.DiyPortalPreview = index$1;
+    exports.DiyStoryPreview = DiyStoryPreview$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
-    exports.SxpPageRender = SxpPageRender$1;
+    exports.SxpPageRender = index$2;
     exports.core = index$3;
     exports.default = Pagebuilder;
     exports.materials = _materials_;