pb-sxp-ui 1.2.10 → 1.3.1

package/dist/pb-ui.js

@@ -232,6 +232,87 @@
         }
         return content;
     };
+    function getBrowserInfo() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        let userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return 'Unknown';
+        if (/edge\/([\d\.]+)/i.exec(userAgent))
+            return `Edge ${(_a = /edge\/([\d\.]+)/i.exec(userAgent)) === null || _a === void 0 ? void 0 : _a[1]}`;
+        if (/edg\/([\d\.]+)/i.exec(userAgent))
+            return `Edge(Chromium) ${(_b = /edge\/([\d\.]+)/i.exec(userAgent)) === null || _b === void 0 ? void 0 : _b[1]}`;
+        if (/msie/i.test(userAgent))
+            return `Internet Explorer ${(_c = /msie ([\d\.]+)/i.exec(userAgent)) === null || _c === void 0 ? void 0 : _c[1]}`;
+        if (/Trident/i.test(userAgent))
+            return `Internet Explorer ${(_d = /rv:([\d\.]+)/i.exec(userAgent)) === null || _d === void 0 ? void 0 : _d[1]}`;
+        if (/chrome/i.test(userAgent))
+            return `Chrome ${(_e = /chrome\/([\d\.]+)/i.exec(userAgent)) === null || _e === void 0 ? void 0 : _e[1]}`;
+        if (/firefox/i.test(userAgent))
+            return `Firefox ${(_f = /firefox\/([\d\.]+)/i.exec(userAgent)) === null || _f === void 0 ? void 0 : _f[1]}`;
+        if (/safari/i.test(userAgent))
+            return `Safari ${(_g = /version\/([\d\.]+)/i.exec(userAgent)) === null || _g === void 0 ? void 0 : _g[1]}`;
+        return 'Unknown';
+    }
+    function getSystem() {
+        var _a, _b, _c;
+        let userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return 'Unknown';
+        if (/iphone/i.test(userAgent))
+            return `IOS ${(_a = userAgent.match(/OS\s(.*?)\slike/)) === null || _a === void 0 ? void 0 : _a[1]}`;
+        if (/android/i.test(userAgent))
+            return `Android ${(_b = userAgent.match(/Android\s(.*?)\;/)) === null || _b === void 0 ? void 0 : _b[1]}`;
+        if (/windows/i.test(userAgent))
+            return `Windows ${(_c = userAgent.match(/Windows\s(.*?)\;/)) === null || _c === void 0 ? void 0 : _c[1]}`;
+        if (/mac/i.test(userAgent))
+            return `Mac OS`;
+        return 'Unknown';
+    }
+    function getDevice$1() {
+        let userAgent = self.navigator.userAgent;
+        if (!userAgent)
+            return 'Unknown';
+        if (/iphone/i.test(userAgent))
+            return `iPhone`;
+        if (/android/i.test(userAgent)) {
+            // var index1 = userAgent.indexOf(';');
+            // var index2 = userAgent.indexOf(';', index1 + 1);
+            // var index3 = userAgent.indexOf(';', index2 + 1);
+            // var index4 = userAgent.indexOf(';', index3 + 1);
+            // if (index2 !== -1 && index3 !== -1) {
+            //   var value1 = userAgent.substring(index3 + 1, index4);
+            //   return `${value1}`;
+            // }
+            var index1 = userAgent.indexOf('(');
+            var index2 = userAgent.indexOf(')');
+            if (index1 !== -1 && index2 !== -1) {
+                var value = userAgent.substring(index1 + 1, index2);
+                return `${value}`;
+            }
+        }
+        if (/windows/i.test(userAgent))
+            return `Windows`;
+        if (/mac/i.test(userAgent))
+            return `Mac`;
+        return 'Unknown';
+    }
+    function getCookie(val) {
+        // const expirationDate = new Date();
+        // expirationDate.setDate(expirationDate.getDate() + 100);
+        // document.cookie = `_fbc=IwAR2F4-dbP0l7Mn1IawQQGCINEz7PYXQvwjNwB_qa2ofrHyiLjcbCRxTDGrc; expires=${expirationDate.toUTCString()}; path=/`;
+        const cookies = document.cookie;
+        // 将cookie字符串拆分成数组
+        const cookieArray = cookies.split(';');
+        let value = null;
+        // 遍历cookie数组，查找名为_fbc的cookie
+        cookieArray.forEach((cookie) => {
+            const [cookieName, cookieValue] = cookie.trim().split('=');
+            if (cookieName === val) {
+                value = cookieValue;
+            }
+        });
+        return value !== null && value !== void 0 ? value : '';
+    }
 
     function unzip(b64Data) {
         const strData = atob(b64Data);
@@ -547,7 +628,7 @@
         DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
     })(DataSourceType || (DataSourceType = {}));
     const DEFAULT_TAG = 'FOR U';
-    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false, utmParameter }) => {
+    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false, utmParameter, channelQueryList }) => {
         var _a, _b, _c;
         const [rtcList, setRtcList] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
@@ -630,16 +711,8 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e, _f, _g, _h;
-            query = {
-                maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
-                defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
-                'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
-                'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
-                hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
-                traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo,
-                themeTag: query === null || query === void 0 ? void 0 : query.themeTag
-            };
+            var _d, _e, _f, _g, _h, _j, _k;
+            query = Object.assign(Object.assign({ maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize, defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag }, ((query === null || query === void 0 ? void 0 : query.contentFilter) && { contentFilter: `[${query === null || query === void 0 ? void 0 : query.contentFilter}]` })), ((query === null || query === void 0 ? void 0 : query.productFilter) && { productFilter: `[${query === null || query === void 0 ? void 0 : query.productFilter}]` }));
             if (utmVal) {
                 const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
                     var _a, _b;
@@ -648,6 +721,32 @@
                 })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
+            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || isEditor) {
+                query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
+                if (!(query === null || query === void 0 ? void 0 : query.channel))
+                    return;
+                let list = [];
+                let result = null;
+                let pageNum = 1;
+                const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
+                    var _l, _m, _o, _p;
+                    query.pageNum = pageNum;
+                    result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
+                    if (!(result === null || result === void 0 ? void 0 : result.success)) {
+                        return undefined;
+                    }
+                    const rec = (_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.recList) === null || _m === void 0 ? void 0 : _m[0];
+                    list = list.concat((_p = (_o = result === null || result === void 0 ? void 0 : result.data) === null || _o === void 0 ? void 0 : _o.recList) !== null && _p !== void 0 ? _p : []);
+                    if ((rec === null || rec === void 0 ? void 0 : rec.product) || (rec === null || rec === void 0 ? void 0 : rec.video)) {
+                        pageNum = pageNum + 1;
+                        yield recurveRecList(query);
+                    }
+                });
+                yield recurveRecList(query);
+                if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
+                    setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
+                return Object.assign(Object.assign({}, result.data), { recList: list });
+            }
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
             if (!(result === null || result === void 0 ? void 0 : result.success)) {
                 return undefined;
@@ -655,23 +754,20 @@
             if (!(query === null || query === void 0 ? void 0 : query.hashTag))
                 setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
             return result === null || result === void 0 ? void 0 : result.data;
-        }), [bffFetch, utmVal, maxSize, defaultSize]);
+        }), [bffFetch, utmVal, maxSize, defaultSize, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, channelQueryList, isEditor]);
         const loadVideos = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _q, _r, _s, _t;
             if (rtcList.length <= 0) {
                 return;
             }
-            const data = yield 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,
-                themeTag: themeTag.current
-            });
+            const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
+            const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_q = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _q === void 0 ? void 0 : _q.itemId) && { productFilter: (_r = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _r === void 0 ? void 0 : _r.itemId })), (((_s = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _s === void 0 ? void 0 : _s.itemId) && { contentFilter: (_t = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _t === void 0 ? void 0 : _t.itemId })), { themeTag: themeTag.current }));
             setRtcList(rtcList.concat(getFilterRecList(data)));
             setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
-            if (!enableReportEvent) {
+            if (!enableReportEvent || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
                 return;
             }
             // 用户信息都是公共的
@@ -682,7 +778,7 @@
                 };
             }
             const sessionID = storeAndLoadFeSessionId();
-            const ef = Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo);
+            const ef = Object.assign(Object.assign({ sessionID, rtc: curReqInfo.rtc, requestId: curReqInfo.requestId }, eventInfo), { sxpDevice: getDevice$1(), sxpSystem: getSystem(), sxpBrowser: getBrowserInfo() });
             const realUserInfo = Object.entries(userInfo).map(([k, v]) => ({ name: k, value: v }));
             const realEventInfo = Object.entries(ef)
                 .map(([k, v]) => v && { name: k, value: v })
@@ -696,11 +792,11 @@
                 body: { userInfo: realUserInfo, eventInfo: realEventInfo },
                 type: 'beacon'
             });
-        }, [bffFetch, curReqInfo, enableReportEvent]);
+        }, [bffFetch, curReqInfo, enableReportEvent, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
         const bffFbReport = React.useCallback((_a) => {
-            var _b;
+            var _b, _c;
             var { eventName, actionSource = 'website', eventSourceUrl = (_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href, externalId } = _a;
-            if (!enableReportEvent || !enabledMetaConversionApi) {
+            if (!enableReportEvent || !enabledMetaConversionApi || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview)) {
                 return;
             }
             const fakeUserId = storeAndLoadFeUserId();
@@ -711,12 +807,15 @@
                     actionSource,
                     eventSourceUrl,
                     userData: {
-                        externalId: fakeUserId
+                        externalId: fakeUserId,
+                        fbc: `fb.2.${new Date().getTime()}.${getCookie('_fbc')}`,
+                        fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}`,
+                        client_user_agent: (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent
                     }
                 },
                 type: 'beacon'
             });
-        }, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
+        }, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview]);
         const bffMutateLike = React.useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
             const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/like', { method: 'POST', body }));
             return res === null || res === void 0 ? void 0 : res.success;
@@ -731,24 +830,24 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _j, _k, _l, _m, _o;
+            var _u, _v, _w, _x, _y;
             if (!utmVal || !isShowTag)
                 return;
             try {
-                const val = (_l = (_k = (_j = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _j === void 0 ? void 0 : _j.filter((val) => {
+                const val = (_w = (_v = (_u = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _u === void 0 ? void 0 : _u.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);
-                })) === null || _k === void 0 ? void 0 : _k.join('&')) !== null && _l !== void 0 ? _l : '';
+                })) === null || _v === void 0 ? void 0 : _v.join('&')) !== null && _w !== void 0 ? _w : '';
                 const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-                setTagList((_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.tags) !== null && _o !== void 0 ? _o : []);
+                setTagList((_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.tags) !== null && _y !== void 0 ? _y : []);
             }
             catch (e) {
                 console.log('e', e);
             }
         }), [bffFetch, utmVal, isShowTag]);
         const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
-            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;
+            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, _4, _5, _6, _7, _8, _9, _10, _11;
             const cta = product === null || product === void 0 ? void 0 : product.bindCta;
             const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
             let fromKName = '';
@@ -761,8 +860,9 @@
             else if ((_g = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.imgUrls) === null || _g === void 0 ? void 0 : _g.length) {
                 fromKName = 'imagePage';
             }
+            const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_h = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _h !== void 0 ? _h : '', ctaName: (_j = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _j !== void 0 ? _j : '', contentTags: JSON.stringify(cta === null || cta === void 0 ? void 0 : cta.tags), position: position + '', contentId: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.itemId) !== null && _l !== void 0 ? _l : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_2 = (_z = (_u = (_q = (_m = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _m !== void 0 ? _m : (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_t = (_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProduct) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : (_y = (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.bindProducts) === null || _w === void 0 ? void 0 : _w[0]) === null || _x === void 0 ? void 0 : _x.bindCta) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_1 = (_0 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : '', fromKName, fromKPage: (_3 = location === null || location === void 0 ? void 0 : location.href) !== null && _3 !== void 0 ? _3 : '' })
+                eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_10 = (_7 = (_2 = (_y = (_v = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _v !== void 0 ? _v : (_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindCta) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_1 = (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindProduct) === null || _0 === void 0 ? void 0 : _0.bindCta) === null || _1 === void 0 ? void 0 : _1.traceInfo) !== null && _2 !== void 0 ? _2 : (_6 = (_5 = (_4 = (_3 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _3 === void 0 ? void 0 : _3.bindProducts) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.bindCta) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : '', fromKName, fromKPage: (_11 = location === null || location === void 0 ? void 0 : location.href) !== null && _11 !== void 0 ? _11 : '' })
             });
         }, [bffEventReport, isFromHashtag]);
         const h5EnterLink = React.useCallback(() => {
@@ -817,7 +917,7 @@
             });
         }, [isShowConsent]);
         React.useEffect(() => {
-            if (!isInit.current)
+            if (!isInit.current && !isEditor)
                 return;
             setLoading(true);
             bffGetTagList();
@@ -829,7 +929,7 @@
                 .finally(() => {
                 setLoading(false);
             });
-        }, [getRecommendVideos, bffGetTagList]);
+        }, [bffGetTagList, isEditor, getRecommendVideos]);
         const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
         return (React.createElement(SxpDataSourceContext.Provider, { value: {
                 rtcList,
@@ -1032,6 +1132,7 @@
             });
         typeof window !== 'undefined' &&
             (window.getJointUtmLink = (url) => {
+                setSlideSkipState();
                 if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
                     return url + (utmVal ? '&' + utmVal : '');
                 }
@@ -1114,7 +1215,7 @@
         EditorCore: EditorCore
     });
 
-    var interactionRender$d = [
+    var interactionRender$e = [
         {
             title: '点击事件',
             child: [
@@ -1130,11 +1231,26 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-06 14:13:47
+     * @LastEditTime: 2024-08-06 15:35:25
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
      *
      */
-    var settingRender$9 = [
+    var settingRender$a = [
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
         {
             type: 'Text',
             label: '组件名称',
@@ -1304,14 +1420,14 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-12 10:59:06
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-01 17:36:34
+     * @LastEditTime: 2024-08-14 17:02:53
      * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
      *
      */
     function useEventReport() {
         const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
-        const jumpToWeb = React.useCallback((data, product, cta, position) => {
-            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;
+        const jumpToWeb = React.useCallback((data, product, cta, position, traceInfo) => {
+            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, _4, _5, _6, _7, _8, _9;
             let fromKName = '';
             if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
                 fromKName = 'pdpPage';
@@ -1328,21 +1444,22 @@
             else if (data === null || data === void 0 ? void 0 : data.product) {
                 fromKName = 'productPage';
             }
+            const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = data === null || data === void 0 ? void 0 : data.product) === null || _q === void 0 ? void 0 : _q.tags;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'jumpToWeb',
                     eventDescription: 'User jumped to website',
-                    productId: (_h = product === null || product === void 0 ? void 0 : product.itemId) !== null && _h !== void 0 ? _h : '',
-                    productName: (_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : '',
+                    productId: (_r = product === null || product === void 0 ? void 0 : product.itemId) !== null && _r !== void 0 ? _r : '',
+                    productName: (_s = product === null || product === void 0 ? void 0 : product.title) !== null && _s !== void 0 ? _s : '',
                     price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                    productCollection: (_k = product === null || product === void 0 ? void 0 : product.collection) !== null && _k !== void 0 ? _k : '',
+                    productCollection: (_t = product === null || product === void 0 ? void 0 : product.collection) !== null && _t !== void 0 ? _t : '',
                     fromKName,
                     fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                    contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                    contentTags: contentTags ? JSON.stringify(contentTags) : '',
                     position: position + '',
-                    contentId: (_m = (_l = data === null || data === void 0 ? void 0 : data.video) === null || _l === void 0 ? void 0 : _l.itemId) !== null && _m !== void 0 ? _m : '',
-                    ctatId: (_o = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _o !== void 0 ? _o : '',
-                    traceInfo: (_1 = (_y = (_w = (_s = (_p = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _p !== void 0 ? _p : (_r = (_q = data === null || data === void 0 ? void 0 : data.video) === null || _q === void 0 ? void 0 : _q.bindProduct) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_v = (_u = (_t = data === null || data === void 0 ? void 0 : data.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = data === null || data === void 0 ? void 0 : data.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = data === null || data === void 0 ? void 0 : data.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : ''
+                    contentId: (_v = (_u = data === null || data === void 0 ? void 0 : data.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
+                    ctatId: (_w = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _w !== void 0 ? _w : '',
+                    traceInfo: (_9 = (_6 = (_4 = (_0 = (_x = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _x !== void 0 ? _x : (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProduct) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = data === null || data === void 0 ? void 0 : data.video) === null || _1 === void 0 ? void 0 : _1.bindProducts) === null || _2 === void 0 ? void 0 : _2[0]) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_5 = data === null || data === void 0 ? void 0 : data.product) === null || _5 === void 0 ? void 0 : _5.traceInfo) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = data === null || data === void 0 ? void 0 : data.video) === null || _7 === void 0 ? void 0 : _7.bindCta) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : ''
                 }
             });
         }, [bffEventReport, popupDetailData, isFromHashtag]);
@@ -1512,9 +1629,9 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$9,
+            settingRender: settingRender$a,
             bindableProps: [],
-            interactionRender: interactionRender$d
+            interactionRender: interactionRender$e
         },
         defaulSetting: {
             name: '表单',
@@ -1537,10 +1654,41 @@
         sort: 2
     });
 
-    var settingRender$8 = [
+    var settingRender$9 = [
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
         {
             title: '商品图片',
             child: [
+                {
+                    type: 'Group',
+                    label: '宽高比',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'commodityImgRatio', 'w'],
+                            addonAfter: 'w'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'commodityImgRatio', 'h'],
+                            addonAfter: 'h'
+                        }
+                    ]
+                },
                 {
                     type: 'Radius',
                     label: '轮播指示器',
@@ -1552,6 +1700,10 @@
                         {
                             label: '居中',
                             value: 'center'
+                        },
+                        {
+                            label: '居右',
+                            value: 'right'
                         }
                     ],
                     name: ['props', 'swiper', 'dotsAlign']
@@ -1716,6 +1868,12 @@
                         {
                             label: '间距',
                             type: 'TextSpace'
+                        },
+                        {
+                            label: '价格千分符展示',
+                            type: 'Switch',
+                            name: ['enableFormattedPrice'],
+                            initialValue: true
                         }
                     ]
                 }
@@ -1808,6 +1966,17 @@
                     name: ['props', 'buttonStyle']
                 }
             ]
+        },
+        {
+            title: 'Iframe商品弹窗',
+            child: [
+                {
+                    label: '弹窗按钮',
+                    type: 'Upload',
+                    name: ['props', 'iframeIcon'],
+                    text: '建议尺寸：106 * 41'
+                }
+            ]
         }
     ];
 
@@ -8637,13 +8806,13 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-29 16:20:40
+     * @LastEditTime: 2024-08-16 17:58:56
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
     const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
     const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         const touchRef = React.useRef(null);
         const fTouchRef = React.useRef(null);
         const touchMoveRef = React.useRef(null);
@@ -8670,12 +8839,16 @@
         const isOpen = React.useMemo(() => {
             return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
         }, [visible, popup]);
-        const isScrollFullScreen = React.useMemo(() => {
-            var _a, _b, _c, _d, _e;
+        const getPopupById = React.useMemo(() => {
+            var _a, _b, _c;
             const schemaData = schema !== null && schema !== void 0 ? schema : _schema;
             const value = (_c = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.find((value) => (value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
-            return ((_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.event) === null || _e === void 0 ? void 0 : _e.isScrollFullScreen) || false;
+            return value;
         }, [popup, schema, _schema]);
+        const isScrollFullScreen = React.useMemo(() => {
+            var _a, _b;
+            return ((_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.event) === null || _b === void 0 ? void 0 : _b.isScrollFullScreen) || false;
+        }, [getPopupById]);
         React.useEffect(() => {
             if (isOpen) {
                 setIsShow(true);
@@ -8742,22 +8915,32 @@
             touchMoveRef.current = false;
         };
         return ReactDOM__namespace.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-            React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign({ padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, (isScrollFullScreen && {
-                    transform: `translateY(${modalTrans}px)`
-                })), onClick: (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                } }, (isScrollFullScreen && {
-                onTouchMove: handleTouchMove,
-                onTouchStart: handleTouchStart,
-                onTouchEnd: handleTouchEnd
-            })),
-                React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
-                    React.createElement("img", { src: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _b !== void 0 ? _b : closeIcon$1, alt: 'close', className: 'modal-icon' })),
-                React.createElement("div", { ref: ref, style: {
-                        height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
-                        overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
-                    } }, children))))), modalEleRef.current);
+            React.createElement("div", { style: {
+                    position: 'relative',
+                    left: `${(_d = (_c = (_b = (_a = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.popupBg) === null || _c === void 0 ? void 0 : _c.horizontalMargin) !== null && _d !== void 0 ? _d : 0}px`,
+                    right: `${(_h = (_g = (_f = (_e = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.popupBg) === null || _g === void 0 ? void 0 : _g.horizontalMargin) !== null && _h !== void 0 ? _h : 0}px`,
+                    bottom: `${(_m = (_l = (_k = (_j = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _j === void 0 ? void 0 : _j.props) === null || _k === void 0 ? void 0 : _k.popupBg) === null || _l === void 0 ? void 0 : _l.bottomMargin) !== null && _m !== void 0 ? _m : 0}px`,
+                    overflow: 'hidden',
+                    width: `calc(100% - ${((_r = (_q = (_p = (_o = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _o === void 0 ? void 0 : _o.props) === null || _p === void 0 ? void 0 : _p.popupBg) === null || _q === void 0 ? void 0 : _q.horizontalMargin) !== null && _r !== void 0 ? _r : 0) * 2}px)`,
+                    height: '100%'
+                } },
+                React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign({ padding, animationDuration: ((_s = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _s !== void 0 ? _s : 0) / 1000 + 's' }, (isScrollFullScreen && {
+                        transform: `translateY(${modalTrans}px)`
+                    })), onClick: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    } }, (isScrollFullScreen && {
+                    onTouchMove: handleTouchMove,
+                    onTouchStart: handleTouchStart,
+                    onTouchEnd: handleTouchEnd
+                })),
+                    React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
+                        React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon$1, alt: 'close', className: 'modal-icon' })),
+                    React.createElement("div", { ref: ref, style: {
+                            height: (isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H) -
+                                ((_w = (_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.popupBg) === null || _w === void 0 ? void 0 : _w.bottomMargin),
+                            overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
+                        } }, children)))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -8843,7 +9026,7 @@
         }, [src]);
         React.useEffect(() => {
             const onShow = () => {
-                if (src && !visible) {
+                if (src && !visible && imgRef.current) {
                     imgRef.current.src = '';
                     imgRef.current.src = src;
                 }
@@ -8923,14 +9106,15 @@
     var CommodityGroup$1 = React.memo(CommodityGroup);
 
     const CommodityDetail$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
+        var _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, _4, _5;
+        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
         const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = useSxpDataSource();
         const { jumpToWeb, productView } = useEventReport();
         const curTimeRef = React.useRef(null);
         const [showModal, setShowModal] = React.useState(false);
         const [show3DModal, setShow3DModal] = React.useState(false);
         const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
+        const ref = React.useRef();
         const data = isPost ? rec : popupDetailData;
         let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
         let cta = isPost
@@ -8970,17 +9154,21 @@
             };
         }, []);
         const priceText = React.useMemo(() => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
+            const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
             if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-                return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
+                return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
+                ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
+                    minimumFractionDigits: 0
+                })) !== null && _g !== void 0 ? _g : ''
+                : product === null || product === void 0 ? void 0 : product.price}`;
             }
             else {
                 return '$7,000';
             }
-        }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-        const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
+        }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency, (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice]);
+        const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
+        const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
         const renderContent = ({ isPost }) => {
             var _a, _b, _c, _d;
             return (React.createElement("div", null,
@@ -9020,6 +9208,10 @@
             popupCurTimeRef.current = new Date();
             setCheckCommodityIndex(index);
             checkCommodityIndexRef.current = index;
+            if (ref === null || ref === void 0 ? void 0 : ref.current) {
+                ref.current.swiper.slideTo(0);
+                ref.current.swiper.autoplay.start();
+            }
         }, []);
         const renderCommodityGroup = React.useCallback(() => {
             var _a, _b, _c;
@@ -9027,25 +9219,32 @@
                 return;
             return (React.createElement(CommodityGroup$1, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
         }, [checkCommodityIndex]);
+        const getDotsAlign = React.useMemo(() => {
+            const dotsAlignClass = {
+                left: 'commondityDetail-swiper-clickable-left',
+                center: 'commondityDetail-swiper-clickable-center',
+                right: 'commondityDetail-swiper-clickable-right'
+            };
+            return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
+        }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
+        const iframeUrl = ((_x = (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProduct) === null || _x === void 0 ? void 0 : _x.remark) || ((_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProducts) === null || _z === void 0 ? void 0 : _z[0]) === null || _0 === void 0 ? void 0 : _0.remark) || ((_1 = data === null || data === void 0 ? void 0 : data.product) === null || _1 === void 0 ? void 0 : _1.remark);
         return (React.createElement(React.Fragment, null,
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                React.createElement("div", { style: { position: 'relative' } },
+                    product && ((_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
                             clickable: true,
                             bulletActiveClass: 'swipe-item-active-bullet',
-                            clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
-                                ? 'commondityDetail-swiper-clickable-left'
-                                : 'commondityDetail-swiper-clickable-center'
+                            clickableClass: getDotsAlign
                         }, loop: true, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                        } },
-                        React.createElement(React.Fragment, null, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
+                        }, ref: ref },
+                        React.createElement(React.Fragment, null, (_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.map((src) => {
                             var _a;
                             return (React.createElement(SwiperSlide, { key: src },
                                 React.createElement("div", { style: {
                                         overflow: 'hidden',
                                         width,
-                                        height: width
+                                        height
                                     } },
                                     React.createElement(FormatImage$1, { style: {
                                             height: '100%',
@@ -9054,21 +9253,30 @@
                                             display: 'block',
                                             objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                         }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
-                        }))))),
-                !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (React.createElement("div", { className: css.css({
-                        position: 'relative',
-                        height: 0,
-                        width: '100%',
-                        paddingBottom: '100%',
-                        overflow: 'hidden'
-                    }) },
-                    React.createElement("img", { className: css.css({
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                            objectFit: 'cover',
-                            width: '100%'
-                        }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
+                        })))),
+                    !((_4 = product === null || product === void 0 ? void 0 : product.homePage) === null || _4 === void 0 ? void 0 : _4.length) && (React.createElement("div", { className: css.css({
+                            height,
+                            width
+                        }) },
+                        React.createElement("img", { className: css.css({
+                                objectFit: 'cover',
+                                width: '100%',
+                                height: '100%'
+                            }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
+                    (iframeUrl && iframeIcon) ||
+                        (!product && iframeIcon && (React.createElement("div", { style: {
+                                padding: '5px 10px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                position: 'absolute',
+                                right: '10px',
+                                bottom: '10px',
+                                zIndex: 1,
+                                background: '#fff',
+                                borderRadius: '3px'
+                            }, onClick: () => setShow3DModal(true) },
+                            React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
+                            React.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D"))))),
                 renderCommodityGroup(),
                 React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
             renderBtn(),
@@ -9076,10 +9284,11 @@
                 React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
                 renderBtn()),
             React.createElement(Modal$1, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
-                React.createElement("iframe", { src: 'https://rimowa.threedium.co.uk/product-experience/latest/?sku=92573974&lang=en', style: {
+                React.createElement("iframe", { src: iframeUrl, style: {
                         width: '100%',
-                        height: 'calc(100% - 40px)',
-                        marginTop: '40px'
+                        height: 'calc(100% - 50px)',
+                        marginTop: '40px',
+                        border: 'none'
                     } }))));
     };
     var CommodityDetailComponent = React.memo(CommodityDetail$1);
@@ -9100,7 +9309,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$c = [
+    var interactionRender$d = [
         {
             title: '滑动事件',
             child: [
@@ -9117,7 +9326,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-31 13:58:45
+     * @LastEditTime: 2024-08-08 18:30:20
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetail\material.tsx
      *
      */
@@ -9127,8 +9336,8 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$8,
-            interactionRender: interactionRender$c
+            settingRender: settingRender$9,
+            interactionRender: interactionRender$d
         },
         defaulSetting: {
             props: {
@@ -9170,6 +9379,10 @@
                     fontWeight: 'bold',
                     textAlign: 'center',
                     color: 'rgba(255, 255, 255, 0.9)'
+                },
+                commodityImgRatio: {
+                    w: 1,
+                    h: 1
                 }
             },
             style: {}
@@ -9179,7 +9392,7 @@
         sort: 1
     });
 
-    var interactionRender$b = [
+    var interactionRender$c = [
         {
             title: '点击事件',
             child: [
@@ -9195,13 +9408,28 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-27 14:06:35
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-06 14:23:11
+     * @LastEditTime: 2024-08-20 14:01:21
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
-    var settingRender$7 = [
+    var settingRender$8 = [
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
         {
-            title: '',
+            title: '内容',
             child: [
                 {
                     type: 'Media',
@@ -9379,9 +9607,9 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$7,
+            settingRender: settingRender$8,
             bindableProps: [],
-            interactionRender: interactionRender$b
+            interactionRender: interactionRender$c
         },
         defaulSetting: {
             props: {
@@ -9400,14 +9628,45 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-06 14:06:03
+     * @LastEditTime: 2024-08-20 15:50:06
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$6 = [
+    var settingRender$7 = [
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
         {
             title: '商品图片',
             child: [
+                {
+                    type: 'Group',
+                    label: '宽高比',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'commodityImgRatio', 'w'],
+                            addonAfter: 'w'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'commodityImgRatio', 'h'],
+                            addonAfter: 'h'
+                        }
+                    ]
+                },
                 {
                     type: 'Radius',
                     label: '轮播指示器',
@@ -9419,6 +9678,10 @@
                         {
                             label: '居中',
                             value: 'center'
+                        },
+                        {
+                            label: '居右',
+                            value: 'right'
                         }
                     ],
                     name: ['props', 'swiper', 'dotsAlign']
@@ -9566,6 +9829,12 @@
                         {
                             label: '间距',
                             type: 'TextSpace'
+                        },
+                        {
+                            label: '价格千分符展示',
+                            type: 'Switch',
+                            name: ['enableFormattedPrice'],
+                            initialValue: true
                         }
                     ]
                 }
@@ -9658,12 +9927,23 @@
                     name: ['props', 'buttonStyle']
                 }
             ]
+        },
+        {
+            title: 'Iframe商品弹窗',
+            child: [
+                {
+                    label: '弹窗按钮',
+                    type: 'Upload',
+                    name: ['props', 'iframeIcon'],
+                    text: '建议尺寸：106 * 41'
+                }
+            ]
         }
     ];
 
     const CommodityDetailDiroNew$1 = (_a) => {
-        var _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;
-        var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
+        var _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, _4, _5, _6, _7, _8, _9;
+        var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
         React.useState(true);
         const { sxpParameter, popupCurTimeRef, popupDetailData, isPreview, bffFbReport, checkCommodityIndexRef } = useSxpDataSource();
         const { jumpToWeb, productView } = useEventReport();
@@ -9672,7 +9952,9 @@
         React.useState(true);
         const [showModal, setShowModal] = React.useState(false);
         const curTimeRef = React.useRef(null);
+        const [show3DModal, setShow3DModal] = React.useState(false);
         const [checkCommodityIndex, setCheckCommodityIndex] = React.useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
+        const ref = React.useRef();
         const data = isPost ? rec : popupDetailData;
         let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
         let cta = isPost
@@ -9712,17 +9994,21 @@
             };
         }, []);
         const priceText = React.useMemo(() => {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
+            const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
             if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-                return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
+                return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
+                ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
+                    minimumFractionDigits: 0
+                })) !== null && _g !== void 0 ? _g : ''
+                : product === null || product === void 0 ? void 0 : product.price}`;
             }
             else {
                 return '£102,300.00';
             }
-        }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-        const width = isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth;
+        }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency, (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice]);
+        const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
+        const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
         // useEffect(() => {
         //   console.log(scrollRef?.current?.scrollHeight, window.innerHeight);
         //   if (scrollRef?.current && scrollRef?.current?.scrollHeight > window.innerHeight) {
@@ -9789,6 +10075,10 @@ Made in Italy` })));
             popupCurTimeRef.current = new Date();
             setCheckCommodityIndex(index);
             checkCommodityIndexRef.current = index;
+            if (ref === null || ref === void 0 ? void 0 : ref.current) {
+                ref.current.swiper.slideTo(0);
+                ref.current.swiper.autoplay.start();
+            }
         }, []);
         const renderCommodityGroup = React.useCallback(() => {
             var _a, _b, _c;
@@ -9796,52 +10086,69 @@ Made in Italy` })));
                 return;
             return (React.createElement(CommodityGroup$1, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' }, onCLick: handleClick, popupDetailData: popupDetailData, check: checkCommodityIndex }));
         }, [checkCommodityIndex]);
+        const getDotsAlign = React.useMemo(() => {
+            const dotsAlignClass = {
+                left: 'commondityDetail-swiper-clickable-left',
+                center: 'commondityDetail-swiper-clickable-center',
+                right: 'commondityDetail-swiper-clickable-right'
+            };
+            return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
+        }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
+        const iframeUrl = ((_x = (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProduct) === null || _x === void 0 ? void 0 : _x.remark) || ((_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProducts) === null || _z === void 0 ? void 0 : _z[0]) === null || _0 === void 0 ? void 0 : _0.remark) || ((_1 = data === null || data === void 0 ? void 0 : data.product) === null || _1 === void 0 ? void 0 : _1.remark);
         return (React.createElement("div", { className: 'pb-commondityDiroNew' },
             React.createElement("div", Object.assign({ className: css.css(Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' })) }, props),
-                product && ((_u = product === null || product === void 0 ? void 0 : product.homePage) === null || _u === void 0 ? void 0 : _u.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
-                        clickable: true,
-                        bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
-                        clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
-                            ? 'commondityDiroNew-swiper-clickable-left'
-                            : 'commondityDiroNew-swiper-clickable-center'
-                    }, loop: true, autoplay: {
-                        delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    } }, (_v = product === null || product === void 0 ? void 0 : product.homePage) === null || _v === void 0 ? void 0 : _v.map((src) => {
-                    var _a;
-                    return (React.createElement(SwiperSlide, { key: src },
-                        React.createElement("div", { style: {
-                                overflow: 'hidden',
-                                width,
-                                height: width
-                            } },
-                            React.createElement(FormatImage$1, { style: {
-                                    height: '100%',
-                                    width: '100%',
-                                    objectFit: 'cover',
-                                    display: 'block',
-                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
-                                }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
-                }))),
-                !((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) && (React.createElement("div", { className: css.css({
-                        position: 'relative',
-                        height: 0,
-                        width: '100%',
-                        paddingBottom: '100%',
-                        overflow: 'hidden'
-                    }) },
-                    React.createElement("img", { className: css.css({
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                            objectFit: 'cover',
-                            width: '100%'
-                        }), src: (_x = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _x !== void 0 ? _x : bottom_image, alt: 'pdp image' }))),
+                React.createElement("div", { style: { position: 'relative' } },
+                    product && ((_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
+                            clickable: true,
+                            bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
+                            clickableClass: getDotsAlign
+                        }, loop: true, autoplay: {
+                            delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
+                        }, ref: ref }, (_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.map((src) => {
+                        var _a;
+                        return (React.createElement(SwiperSlide, { key: src },
+                            React.createElement("div", { style: {
+                                    overflow: 'hidden',
+                                    width,
+                                    height
+                                } },
+                                React.createElement(FormatImage$1, { style: {
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: 'cover',
+                                        display: 'block',
+                                        objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                    }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
+                    }))),
+                    !((_4 = product === null || product === void 0 ? void 0 : product.homePage) === null || _4 === void 0 ? void 0 : _4.length) && (React.createElement("div", { className: css.css({
+                            height,
+                            width
+                        }) },
+                        React.createElement("img", { className: css.css({
+                                objectFit: 'cover',
+                                width: '100%',
+                                height: '100%'
+                            }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
+                    (iframeUrl && iframeIcon) ||
+                        (!product && iframeIcon && (React.createElement("div", { style: {
+                                padding: '5px 10px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                position: 'absolute',
+                                right: '10px',
+                                bottom: '10px',
+                                zIndex: 1,
+                                background: '#fff',
+                                borderRadius: '3px'
+                            }, onClick: () => setShow3DModal(true) },
+                            React.createElement("img", { src: iframeIcon, alt: '3d', width: '20px', height: '20px', style: { marginRight: '5px' } }),
+                            React.createElement("span", { style: { fontSize: '12px' } }, "Try in 3D"))))),
                 renderCommodityGroup(),
                 React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left-title', style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title), dangerouslySetInnerHTML: {
-                                    __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                                    __html: setFontForText((_6 = product === null || product === void 0 ? void 0 : product.title) !== null && _6 !== void 0 ? _6 : 'Large Dior Toujours BagLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
                                 } }),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-collection', hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.collection) || (product === null || product === void 0 ? void 0 : product.collection) === ''), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection), dangerouslySetInnerHTML: {
                                     __html: setFontForText((product === null || product === void 0 ? void 0 : product.collection) || 'Black Macrocannage CalfskinLarge', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
@@ -9851,14 +10158,21 @@ Made in Italy` })));
                                     __html: setFontForText(priceText, commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
                                 } }),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo), dangerouslySetInnerHTML: {
-                                    __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _z !== void 0 ? _z : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
+                                    __html: setFontForText((_7 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _7 !== void 0 ? _7 : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                                 } }))),
-                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_0 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _0 !== void 0 ? _0 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
+                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_8 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _8 !== void 0 ? _8 : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle },
                         React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: setFontForText((_1 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _1 !== void 0 ? _1 : 'Shop now', buttonStyle)
+                                __html: setFontForText((_9 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _9 !== void 0 ? _9 : 'Shop now', buttonStyle)
                             } }))),
                     productInfoText({ isPost }))),
-            React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
+            React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
+            React.createElement(Modal$1, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
+                React.createElement("iframe", { src: iframeUrl, style: {
+                        width: '100%',
+                        height: 'calc(100% - 50px)',
+                        marginTop: '40px',
+                        border: 'none'
+                    } }))));
     };
     var CommodityDetailDiroNewComponent = React.memo(CommodityDetailDiroNew$1);
 
@@ -9878,7 +10192,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$a = [
+    var interactionRender$b = [
         {
             title: '滑动事件',
             child: [
@@ -9905,8 +10219,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$6,
-            interactionRender: interactionRender$a
+            settingRender: settingRender$7,
+            interactionRender: interactionRender$b
         },
         defaulSetting: {
             props: {
@@ -9949,6 +10263,10 @@ Made in Italy` })));
                     borderRadius: 25,
                     marginTop: 16,
                     marginBottom: 16
+                },
+                commodityImgRatio: {
+                    w: 1,
+                    h: 1
                 }
             },
             style: {}
@@ -9966,7 +10284,22 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityList\settingRender.tsx
      *
      */
-    var settingRender$5 = [
+    var settingRender$6 = [
+        {
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
         {
             title: '商品图片',
             child: [
@@ -10328,7 +10661,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$9 = [
+    var interactionRender$a = [
         {
             title: '点击事件',
             child: [
@@ -10354,8 +10687,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityList',
         related: {
-            settingRender: settingRender$5,
-            interactionRender: interactionRender$9
+            settingRender: settingRender$6,
+            interactionRender: interactionRender$a
         },
         defaulSetting: {
             props: {
@@ -10396,6 +10729,59 @@ Made in Italy` })));
         sort: 1
     });
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-10-27 14:06:35
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-08-08 17:32:11
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Iframe\settingRender.tsx
+     *
+     */
+    var settingRender$5 = [
+        {
+            title: '背景样式',
+            child: [
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['style', 'backgroundColor']
+                }
+            ]
+        }
+    ];
+
+    const Iframe$1 = (_a) => {
+        var _b, _c;
+        var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle"]);
+        const { popupDetailData } = useSxpDataSource();
+        const iframeUrl = (_c = (_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.video) === null || _b === void 0 ? void 0 : _b.bindCta) === null || _c === void 0 ? void 0 : _c.remark;
+        return (React.createElement("div", Object.assign({ className: `${css.css(Object.assign({}, style))}` }, props), iframeUrl && (React.createElement("iframe", { src: iframeUrl, style: {
+                width: '100%',
+                height: 'calc(100% - 50px)',
+                marginTop: '40px',
+                border: 'none'
+            } }))));
+    };
+    var IframeComponent = React.memo(Iframe$1);
+
+    const Iframe = createMaterial(IframeComponent, {
+        displayName: 'Iframe弹窗',
+        icon: '',
+        category: 'popup',
+        type: 'Iframe',
+        related: {
+            settingRender: settingRender$5,
+            bindableProps: []
+        },
+        defaulSetting: {
+            props: {},
+            style: {}
+        },
+        w: 100,
+        h: 40,
+        sort: 3
+    });
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
@@ -10655,7 +11041,7 @@ Made in Italy` })));
         }
     ];
 
-    var interactionRender$8 = [
+    var interactionRender$9 = [
         {
             title: '点击事件',
             child: [
@@ -10668,7 +11054,7 @@ Made in Italy` })));
     ];
 
     const EventProvider = (_a) => {
-        var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+        var { rec, children, className, onClick, style, isExternalLink = false, index, jumpLink } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index", "jumpLink"]);
         const ref = React.useRef(null);
         const { popup } = useEditor();
         const { setPopupDetailData, ctaEvent } = useSxpDataSource();
@@ -10682,11 +11068,11 @@ Made in Italy` })));
             }, rec, item, index);
             setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
             if (isExternalLink) {
-                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
+                if (jumpLink || ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link)) {
                     const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
                     const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
                     jumpToWeb(rec, product, cta, index);
-                    window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
+                    window.location.href = window.getJointUtmLink(jumpLink || ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link) || '');
                 }
             }
             else {
@@ -10738,7 +11124,7 @@ Made in Italy` })));
         category: 'template',
         type: 'Commodity',
         related: {
-            interactionRender: interactionRender$8,
+            interactionRender: interactionRender$9,
             bindableProps: [],
             settingRender: settingRender$4
         },
@@ -10780,7 +11166,7 @@ Made in Italy` })));
         sort: 1
     });
 
-    var interactionRender$7 = [
+    var interactionRender$8 = [
         {
             title: '点击事件',
             child: [
@@ -10820,7 +11206,7 @@ Made in Italy` })));
         category: 'template',
         type: 'Appoint',
         related: {
-            interactionRender: interactionRender$7,
+            interactionRender: interactionRender$8,
             settingRender: settingRender$4 === null || settingRender$4 === void 0 ? void 0 : settingRender$4.filter((i) => i.type !== 'commodityTitle'),
             bindableProps: []
         },
@@ -10975,21 +11361,15 @@ Made in Italy` })));
     var styles$7 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU","one-line-ellipsis":"index-module_one-line-ellipsis__buFw1"};
 
     const Link$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
         const { sxpParameter, bffEventReport } = useSxpDataSource();
-        const { jumpToWeb } = useEventReport();
+        useEventReport();
         const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-        const product = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
-        const handleTo = () => {
-            if (cta === null || cta === void 0 ? void 0 : cta.link) {
-                jumpToWeb(recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(cta.link);
-            }
-        };
+        (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
         const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+        return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { jumpLink: (_f = cta === null || cta === void 0 ? void 0 : cta.link) !== null && _f !== void 0 ? _f : '' }),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
             React.createElement("div", { className: css.css({
                     display: 'flex',
                     alignItems: 'center',
@@ -10998,14 +11378,34 @@ Made in Italy` })));
                 }) },
                 React.createElement("div", null,
                     React.createElement("div", { className: styles$7['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                            __html: setFontForText((_j = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                         } }),
-                    (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: styles$7['one-line-ellipsis'], dangerouslySetInnerHTML: {
+                    (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_k = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _k === void 0 ? void 0 : _k.height) + 'px' }), className: styles$7['one-line-ellipsis'], dangerouslySetInnerHTML: {
                             __html: setFontForText(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
                         } }))))));
     };
     var LinkComponent = React.memo(Link$1);
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-08-09 16:59:38
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-08-09 16:59:44
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Link\interactionRender.tsx
+     *
+     */
+    var interactionRender$7 = [
+        {
+            title: '点击事件',
+            child: [
+                {
+                    type: 'link',
+                    name: 'onClick'
+                }
+            ]
+        }
+    ];
+
     var _a;
     const Link = createMaterial(LinkComponent, {
         displayName: '跳转指引',
@@ -11014,7 +11414,8 @@ Made in Italy` })));
         type: 'Link',
         related: {
             settingRender: (_a = settingRender$4 === null || settingRender$4 === void 0 ? void 0 : settingRender$4.filter((i) => i.type !== 'commodityTitle')) === null || _a === void 0 ? void 0 : _a.concat(linkSettingRender),
-            bindableProps: []
+            bindableProps: [],
+            interactionRender: interactionRender$7
         },
         defaulSetting: {
             props: {
@@ -13242,7 +13643,8 @@ Made in Italy` })));
     function WaterfallList$1(_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
         var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
-        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
         /** 滚动的父元素 */
         const scrollParent = React.useRef(null);
         /** 向上滚动的距离 */
@@ -13358,16 +13760,10 @@ Made in Italy` })));
         }, [unitWidth, rowsNum, list]); /* 增加getStyleList依赖项会导致在admin预览编辑时无限刷新 */
         /** 初始化请求数据 */
         React.useEffect(() => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             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) => {
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag, defaultSize: hashTagSize, maxSize: hashTagSize }, (((_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.itemId) && { productFilter: (_d = (_c = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.itemId })), ((waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId) && { contentFilter: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId }))).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 : []);
@@ -13376,7 +13772,7 @@ Made in Italy` })));
             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 : []);
+                setList((_f = (_e = res === null || res === void 0 ? void 0 : res.recList) === null || _e === void 0 ? void 0 : _e.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _f !== void 0 ? _f : []);
                 setIsLoadingData(false);
             }
         }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
@@ -13402,13 +13798,10 @@ Made in Italy` })));
             };
         }, [onResize]);
         React.useCallback(() => {
+            var _a, _b, _c, _d;
             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) => {
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.itemId) && { productFilter: (_d = (_c = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.itemId })), ((waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId) && { contentFilter: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId }))).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);
@@ -13435,10 +13828,12 @@ Made in Italy` })));
             };
         }, [onScroll, scrollParent]);
         const handleClickLink = () => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
                 reportTagsView();
-                window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+                const rec = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec;
+                jumpToWeb(rec, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProduct, (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta, cacheActiveIndex, (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo);
+                window.location.href = window.getJointUtmLink((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link);
             }
         };
         return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -13481,7 +13876,7 @@ Made in Italy` })));
 
     const WaterfallFlowItem = (props) => {
         const { rec, index, list, reportTagsView, textStyles, space } = props;
-        const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+        const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
         const [showVideo, setShowVideo] = React.useState(false);
         const imgDom = React.useRef(null);
         const ref = React.useRef(null);
@@ -13609,38 +14004,30 @@ Made in Italy` })));
     function WaterfallList(_a) {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
-        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
         const [list, setList] = React.useState();
         const [data, setData] = React.useState();
         const [isLoadingData, setIsLoadingData] = React.useState(false);
         const containerRef = React.useRef(null);
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         React.useCallback(() => {
+            var _a, _b, _c, _d;
             if (isLoadMore)
                 return;
             setIsLoadMore(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) => {
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.itemId) && { productFilter: (_d = (_c = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.itemId })), ((waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId) && { contentFilter: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId }))).then((res) => {
                     var _a;
                     setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
                     setIsLoadMore(false);
                 }));
         }, [waterFallData, getRecommendVideos, list, isLoadMore]);
         React.useEffect(() => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f;
             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) => {
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_b = (_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.itemId) && { productFilter: (_d = (_c = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.itemId })), ((waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId) && { contentFilter: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId })), { 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 : []);
@@ -13649,7 +14036,7 @@ Made in Italy` })));
             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 : []);
+                setList((_f = (_e = res === null || res === void 0 ? void 0 : res.recList) === null || _e === void 0 ? void 0 : _e.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _f !== void 0 ? _f : []);
                 setIsLoadingData(false);
             }
         }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
@@ -13670,10 +14057,12 @@ Made in Italy` })));
         //   };
         // }, [isLoadingData, containerRef, loadMoreData]);
         const handleClickLink = () => {
-            var _a, _b;
+            var _a, _b, _c, _d, _e;
             if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
                 reportTagsView();
-                window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+                const rec = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec;
+                jumpToWeb(rec, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProduct, (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta, cacheActiveIndex, (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo);
+                window.location.href = window.getJointUtmLink((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link);
             }
         };
         return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -14740,6 +15129,7 @@ Made in Italy` })));
         CommodityList: CommodityList,
         Consent: Consent,
         HashTag: HashTag,
+        Iframe: Iframe,
         Link: Link,
         MultiCommodity: MultiCommodity,
         MultiCommodityDiro: MultiCommodityDiro,
@@ -15198,14 +15588,6 @@ Made in Italy` })));
     };
     var VideoWidget$3 = React.memo(VideoWidget$2);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-12-27 19:02:59
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-01-24 10:30:13
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ToggleButton\index.tsx
-     *
-     */
     const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
         const [isTrue, setIsTure] = React.useState(defaultValue);
         const handleClick = (e) => {
@@ -15214,6 +15596,9 @@ Made in Italy` })));
             setIsTure(result);
             onChange === null || onChange === void 0 ? void 0 : onChange(result);
         };
+        React.useEffect(() => {
+            setIsTure(defaultValue);
+        }, [defaultValue]);
         return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
             React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
     };
@@ -15592,12 +15977,14 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-02 18:34:27
+     * @LastEditTime: 2024-08-16 11:47:58
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
     const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
+        const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
         const viewImageStartTime = React.useRef(0);
@@ -15608,11 +15995,10 @@ Made in Italy` })));
         const [isReload, setIsReload] = React.useState(new Date().getTime());
         const skipLinkRef = React.useRef(false);
         const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = useSxpDataSource();
-        const { backMainFeed } = useEventReport();
-        const { productView } = useEventReport();
+        const { backMainFeed, productView, jumpToWeb } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
-            return data.length > 0 && !loading && getFeUserId();
-        }, [data, loading]);
+            return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
+        }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
         React.useEffect(() => {
             refreshFeSessionId();
         }, []);
@@ -15640,14 +16026,15 @@ Made in Italy` })));
             var _a;
             const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if (ctaType === '多商品CTA') {
+                const ctaType0 = ctaType === null || ctaType === void 0 ? void 0 : ctaType[0];
+                if (ctaType0 === '多商品CTA') {
                     return ((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) && ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c.length) > 0;
                 }
-                else if (ctaType === '商品CTA') {
+                else if (ctaType0 === '商品CTA') {
                     return (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
                 }
                 else {
-                    return ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId) === ctaType && (((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) || ((_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) === null || _j === void 0 ? void 0 : _j.length));
+                    return ((_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId) === ctaType0 && (((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url) || ((_j = (_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.imgUrls) === null || _j === void 0 ? void 0 : _j.length));
                 }
             })) || 0;
             (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
@@ -15751,13 +16138,39 @@ Made in Italy` })));
         const height = React.useMemo(() => {
             return containerHeight - minusHeight - tagHeight;
         }, [globalConfig, containerHeight, tagHeight]);
+        const visList = React.useMemo(() => {
+            var _a;
+            const list = activeIndex === 0 && !waterFallData
+                ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
+                : data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                    if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                        return item;
+                    }
+                    else {
+                        return null;
+                    }
+                });
+            return !waterFallData ? list.concat([{ loading: true }]) : list;
+        }, [data, activeIndex, waterFallData]);
         const renderLogo = React.useMemo(() => {
+            var _a, _b, _c, _d;
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
-                return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
+                const link = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoBar) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.value;
+                const isExternalLink = ((_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoBar) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
+                const rec = visList[activeIndex];
+                return (React.createElement("div", Object.assign({ className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } }, (link && {
+                    onClick: () => {
+                        var _a, _b, _c, _d;
+                        if (isExternalLink) {
+                            jumpToWeb(rec, (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindCta, activeIndex, ((_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.traceInfo) || ((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo));
+                        }
+                        new Function(link)();
+                    }
+                })),
                     React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
             }
             return null;
-        }, [globalConfig]);
+        }, [globalConfig, activeIndex, visList]);
         const renderContent = React.useCallback((rec, index) => {
             var _a, _b, _c, _d;
             if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
@@ -15833,9 +16246,9 @@ Made in Italy` })));
             isShowMore,
             lineGradStyle
         ]);
-        const renderLikeButton = React.useCallback((rec, index) => {
+        const renderLikeButton = React.useCallback((rec, index, visible) => {
             var _a, _b, _c, _d;
-            if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+            if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike) || !visible)
                 return;
             let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
             if (waterFallData && top < 40) {
@@ -15843,6 +16256,7 @@ Made in Italy` })));
             }
             if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(LikeButton$1, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
+                        position: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed) ? 'fixed' : 'absolute',
                         [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
                         [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
                     }, position: index }));
@@ -15893,7 +16307,6 @@ Made in Italy` })));
                             traceInfo: (_u = (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_t = item === null || item === void 0 ? void 0 : item.product) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : ''
                         }
                     });
-                    setSlideSkipState();
                     skipLinkRef.current = true;
                     window.location.href = window.getJointUtmLink(link);
                 }
@@ -15979,20 +16392,18 @@ Made in Italy` })));
                 });
             }
         };
-        const visList = React.useMemo(() => {
-            var _a;
-            const list = activeIndex === 0 && !waterFallData
-                ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
-                : data === null || data === void 0 ? void 0 : data.map((item, index) => {
-                    if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
-                        return item;
-                    }
-                    else {
-                        return null;
-                    }
-                });
-            return !waterFallData ? list.concat([{ loading: true }]) : list;
-        }, [data, activeIndex, waterFallData]);
+        const renderToggleButton = React.useCallback((visible) => {
+            var _a, _b, _c, _d, _e, _f;
+            if (!visible)
+                return;
+            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: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed) ? 'fixed' : 'absolute',
+                    visibility: ((_b = (_a = visList === null || visList === void 0 ? void 0 : visList[activeIndex]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) ? 'visible' : 'hidden',
+                    zIndex: 999,
+                    [(_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _c !== void 0 ? _c : 'right']: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _d !== void 0 ? _d : 0,
+                    [(_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _e !== void 0 ? _e : 'bottom']: (_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _f !== void 0 ? _f : 23
+                }, defaultValue: isMuted, 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, onChange: setIsMuted })));
+        }, [globalConfig, visList, activeIndex, isMuted]);
         const renderView = React.useMemo(() => {
             if (loading) {
                 return (React.createElement("div", { style: { height, width: containerWidth, display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -16009,20 +16420,30 @@ Made in Italy` })));
                     React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement(React.Fragment, null,
                     renderContent(rec, index),
                     renderBottom(rec, index),
-                    renderLikeButton(rec, index)))))));
+                    renderLikeButton(rec, index, !(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
+                    renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed))))))));
             });
-        }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
-        const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
-        const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
+        }, [
+            containerWidth,
+            data,
+            height,
+            loading,
+            renderBottom,
+            renderContent,
+            visList,
+            loadingImage,
+            isReload,
+            renderToggleButton
+        ]);
         return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
                     setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
                 } })),
             renderLogo,
             React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                     top: minusHeight
                 } }),
-            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
+            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _f !== void 0 ? _f : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
             React.createElement(Swiper, { style: {
                     marginTop: tagHeight
                 }, ref: swiperRef, onSlideChange: () => {
@@ -16047,15 +16468,10 @@ Made in Italy` })));
                         }
                     }
                 }, direction: 'vertical', height: height },
-                ((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: 'fixed',
-                        visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                        zIndex: 999,
-                        [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
-                        [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                    }, defaultValue: isMuted, 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, onChange: setIsMuted })),
+                renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
+                renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
                 renderView),
-            React.createElement(WaterFall$1, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
+            React.createElement(WaterFall$1, Object.assign({}, (_j = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props))));
     };
 
     const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
@@ -16422,7 +16838,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-31 10:56:01
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-01 15:23:51
+     * @LastEditTime: 2024-08-06 17:15:56
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
      *
      */
@@ -16481,14 +16897,14 @@ Made in Italy` })));
         const renderPopupDetail = React.useMemo(() => {
             var _a, _b, _c;
             return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                 if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
                     const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
                     const Component = withBindDataSource(t);
                     const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
                     const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
                     const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
-                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '100%' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
+                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { height: '100%' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.textStyle), bindDatas: (_m = (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.bindDatas) !== null && _m !== void 0 ? _m : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_o = value === null || value === void 0 ? void 0 : value.item) === null || _o === void 0 ? void 0 : _o.props, { event: ((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
                 }
                 else {
                     return React.createElement(React.Fragment, null);