pb-sxp-ui 1.2.9 → 1.3.0

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([]);
@@ -631,15 +712,7 @@
         // 获取推荐视频数据
         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
-            };
+            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,9 @@
                 })) === 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, pageNum: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.join('&') }));
+            }
             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 +731,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 _j, _k, _l, _m;
             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 }, (((_j = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _j === void 0 ? void 0 : _j.itemId) && { productFilter: (_k = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _k === void 0 ? void 0 : _k.itemId })), (((_l = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _l === void 0 ? void 0 : _l.itemId) && { contentFilter: (_m = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _m === void 0 ? void 0 : _m.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 +755,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 +769,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 +784,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 +807,24 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _j, _k, _l, _m, _o;
+            var _o, _p, _q, _r, _s;
             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 = (_q = (_p = (_o = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _o === void 0 ? void 0 : _o.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 || _p === void 0 ? void 0 : _p.join('&')) !== null && _q !== void 0 ? _q : '';
                 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((_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []);
             }
             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 +837,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(() => {
@@ -1114,7 +1191,7 @@
         EditorCore: EditorCore
     });
 
-    var interactionRender$d = [
+    var interactionRender$e = [
         {
             title: '点击事件',
             child: [
@@ -1130,11 +1207,26 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-02 10:01:21
+     * @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: '组件名称',
@@ -1292,14 +1384,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;
+            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';
@@ -1316,21 +1408,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 = 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]);
@@ -1500,9 +1593,9 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$9,
+            settingRender: settingRender$a,
             bindableProps: [],
-            interactionRender: interactionRender$d
+            interactionRender: interactionRender$e
         },
         defaulSetting: {
             name: '表单',
@@ -1525,10 +1618,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: '轮播指示器',
@@ -1540,6 +1664,10 @@
                         {
                             label: '居中',
                             value: 'center'
+                        },
+                        {
+                            label: '居右',
+                            value: 'right'
                         }
                     ],
                     name: ['props', 'swiper', 'dotsAlign']
@@ -1787,6 +1915,17 @@
                     name: ['props', 'buttonStyle']
                 }
             ]
+        },
+        {
+            title: 'Iframe商品弹窗',
+            child: [
+                {
+                    label: '弹窗按钮',
+                    type: 'Upload',
+                    name: ['props', 'iframeIcon'],
+                    text: '建议尺寸：106 * 41'
+                }
+            ]
         }
     ];
 
@@ -8616,13 +8755,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-06 16:35:43
      * @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;
         const touchRef = React.useRef(null);
         const fTouchRef = React.useRef(null);
         const touchMoveRef = React.useRef(null);
@@ -8649,12 +8788,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);
@@ -8721,22 +8864,31 @@
             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,
+                            overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
+                        } }, children)))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -8809,18 +8961,20 @@
         const { src, onLoad, style, className, loading, alt = 'image' } = props;
         const [imgSrc, setImgSrc] = React.useState();
         const imgRef = React.useRef(null);
+        const [visible, setVisible] = React.useState(false);
         React.useImperativeHandle(ref, () => ({
             setSrc: (v) => {
-                setImgSrc(v);
+                if (v)
+                    setImgSrc(v);
             }
         }));
         React.useEffect(() => {
-            setImgSrc(src);
+            if (src)
+                setImgSrc(src);
         }, [src]);
         React.useEffect(() => {
             const onShow = () => {
-                var _a, _b;
-                if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
+                if (src && !visible && imgRef.current) {
                     imgRef.current.src = '';
                     imgRef.current.src = src;
                 }
@@ -8829,20 +8983,20 @@
             return () => {
                 SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
             };
-        }, [src]);
-        return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
-            React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
-            React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
-            React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
-            React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
-                    if (imgRef.current)
-                        imgRef.current.style.display = 'block';
+        }, [src, visible]);
+        return (React.createElement(React.Fragment, null,
+            !visible && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
+            (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
+                React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
+                React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
+                React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
+                React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
+                        setVisible(true);
+                        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+                    }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
+                    setVisible(true);
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-                }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
-                if (imgRef.current)
-                    imgRef.current.style.display = 'block';
-                onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            }, alt: alt }))));
+                }, alt: alt }))));
     });
     var FormatImage$1 = React.memo(FormatImage);
 
@@ -8900,8 +9054,8 @@
     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;
+        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);
@@ -8957,7 +9111,8 @@
                 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;
+        const width = (isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth) - ((_u = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _u !== void 0 ? _u : 0) * 2;
+        const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
         const renderContent = ({ isPost }) => {
             var _a, _b, _c, _d;
             return (React.createElement("div", null,
@@ -9004,25 +9159,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 = ((_w = (_v = data === null || data === void 0 ? void 0 : data.video) === null || _v === void 0 ? void 0 : _v.bindProduct) === null || _w === void 0 ? void 0 : _w.remark) || ((_z = (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProducts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.remark) || ((_0 = data === null || data === void 0 ? void 0 : data.product) === null || _0 === void 0 ? void 0 : _0.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 && ((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.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) => {
+                        React.createElement(React.Fragment, null, (_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.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%',
@@ -9031,21 +9193,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' }))),
+                        })))),
+                    !((_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.length) && (React.createElement("div", { className: css.css({
+                            height,
+                            width
+                        }) },
+                        React.createElement("img", { className: css.css({
+                                objectFit: 'cover',
+                                width: '100%',
+                                height: '100%'
+                            }), src: (_4 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _4 !== void 0 ? _4 : 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(),
@@ -9053,10 +9224,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);
@@ -9077,7 +9249,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$c = [
+    var interactionRender$d = [
         {
             title: '滑动事件',
             child: [
@@ -9094,7 +9266,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
      *
      */
@@ -9104,8 +9276,8 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$8,
-            interactionRender: interactionRender$c
+            settingRender: settingRender$9,
+            interactionRender: interactionRender$d
         },
         defaulSetting: {
             props: {
@@ -9147,6 +9319,10 @@
                     fontWeight: 'bold',
                     textAlign: 'center',
                     color: 'rgba(255, 255, 255, 0.9)'
+                },
+                commodityImgRatio: {
+                    w: 1,
+                    h: 1
                 }
             },
             style: {}
@@ -9156,7 +9332,7 @@
         sort: 1
     });
 
-    var interactionRender$b = [
+    var interactionRender$c = [
         {
             title: '点击事件',
             child: [
@@ -9172,13 +9348,28 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-27 14:06:35
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-02 09:58:06
+     * @LastEditTime: 2024-08-06 16:15:08
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
-    var settingRender$7 = [
+    var settingRender$8 = [
         {
-            title: '',
+            title: '弹窗背景',
+            child: [
+                {
+                    type: 'Number',
+                    label: '左右边距',
+                    name: ['props', 'popupBg', 'horizontalMargin']
+                },
+                {
+                    type: 'Number',
+                    label: '下边距',
+                    name: ['props', 'popupBg', 'bottomMargin']
+                }
+            ]
+        },
+        {
+            title: '内容',
             child: [
                 {
                     type: 'Media',
@@ -9346,9 +9537,9 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$7,
+            settingRender: settingRender$8,
             bindableProps: [],
-            interactionRender: interactionRender$b
+            interactionRender: interactionRender$c
         },
         defaulSetting: {
             props: {
@@ -9367,14 +9558,45 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-12 14:44:50
+     * @LastEditTime: 2024-08-08 18:34: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: '轮播指示器',
@@ -9386,6 +9608,10 @@
                         {
                             label: '居中',
                             value: 'center'
+                        },
+                        {
+                            label: '居右',
+                            value: 'right'
                         }
                     ],
                     name: ['props', 'swiper', 'dotsAlign']
@@ -9616,12 +9842,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;
+        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();
@@ -9630,6 +9867,7 @@
         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 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];
@@ -9680,7 +9918,8 @@
                 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;
+        const width = (isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth) - ((_u = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _u !== void 0 ? _u : 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) {
@@ -9754,52 +9993,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 = ((_w = (_v = data === null || data === void 0 ? void 0 : data.video) === null || _v === void 0 ? void 0 : _v.bindProduct) === null || _w === void 0 ? void 0 : _w.remark) || ((_z = (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProducts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.remark) || ((_0 = data === null || data === void 0 ? void 0 : data.product) === null || _0 === void 0 ? void 0 : _0.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 && ((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.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
+                        } }, (_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.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 }))));
+                    }))),
+                    !((_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.length) && (React.createElement("div", { className: css.css({
+                            height,
+                            width
+                        }) },
+                        React.createElement("img", { className: css.css({
+                                objectFit: 'cover',
+                                width: '100%',
+                                height: '100%'
+                            }), src: (_4 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _4 !== void 0 ? _4 : 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((_5 = product === null || product === void 0 ? void 0 : product.title) !== null && _5 !== void 0 ? _5 : '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)
@@ -9809,14 +10065,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((_6 = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _6 !== void 0 ? _6 : '税费', 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": (_7 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _7 !== void 0 ? _7 : '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((_8 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _8 !== void 0 ? _8 : '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);
 
@@ -9836,7 +10099,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$a = [
+    var interactionRender$b = [
         {
             title: '滑动事件',
             child: [
@@ -9863,8 +10126,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$6,
-            interactionRender: interactionRender$a
+            settingRender: settingRender$7,
+            interactionRender: interactionRender$b
         },
         defaulSetting: {
             props: {
@@ -9907,6 +10170,10 @@ Made in Italy` })));
                     borderRadius: 25,
                     marginTop: 16,
                     marginBottom: 16
+                },
+                commodityImgRatio: {
+                    w: 1,
+                    h: 1
                 }
             },
             style: {}
@@ -9924,7 +10191,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: [
@@ -10282,7 +10564,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
      *
      */
-    var interactionRender$9 = [
+    var interactionRender$a = [
         {
             title: '点击事件',
             child: [
@@ -10308,8 +10590,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityList',
         related: {
-            settingRender: settingRender$5,
-            interactionRender: interactionRender$9
+            settingRender: settingRender$6,
+            interactionRender: interactionRender$a
         },
         defaulSetting: {
             props: {
@@ -10350,6 +10632,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
@@ -10609,7 +10944,7 @@ Made in Italy` })));
         }
     ];
 
-    var interactionRender$8 = [
+    var interactionRender$9 = [
         {
             title: '点击事件',
             child: [
@@ -10622,7 +10957,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();
@@ -10636,11 +10971,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 {
@@ -10692,7 +11027,7 @@ Made in Italy` })));
         category: 'template',
         type: 'Commodity',
         related: {
-            interactionRender: interactionRender$8,
+            interactionRender: interactionRender$9,
             bindableProps: [],
             settingRender: settingRender$4
         },
@@ -10734,7 +11069,7 @@ Made in Italy` })));
         sort: 1
     });
 
-    var interactionRender$7 = [
+    var interactionRender$8 = [
         {
             title: '点击事件',
             child: [
@@ -10774,7 +11109,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: []
         },
@@ -10924,21 +11259,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',
@@ -10947,14 +11276,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: '跳转指引',
@@ -10963,7 +11312,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: {
@@ -13298,16 +13648,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 : []);
@@ -13316,7 +13660,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]);
@@ -13342,13 +13686,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);
@@ -13556,31 +13897,22 @@ Made in Italy` })));
         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 : []);
@@ -13589,7 +13921,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]);
@@ -14676,6 +15008,7 @@ Made in Italy` })));
         CommodityList: CommodityList,
         Consent: Consent,
         HashTag: HashTag,
+        Iframe: Iframe,
         Link: Link,
         MultiCommodity: MultiCommodity,
         MultiCommodityDiro: MultiCommodityDiro,
@@ -15134,14 +15467,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) => {
@@ -15150,6 +15475,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 })));
     };
@@ -15528,12 +15856,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-14 19:09:32
      * @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);
@@ -15547,8 +15877,8 @@ Made in Italy` })));
         const { backMainFeed } = useEventReport();
         const { productView } = 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();
         }, []);
@@ -15576,14 +15906,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);
@@ -15688,8 +16019,10 @@ Made in Italy` })));
             return containerHeight - minusHeight - tagHeight;
         }, [globalConfig, containerHeight, tagHeight]);
         const renderLogo = React.useMemo(() => {
+            var _a, _b;
             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;
+                return (React.createElement("div", Object.assign({ className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } }, (link && { onClick: () => new Function(link)() })),
                     React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
             }
             return null;
@@ -15769,9 +16102,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) {
@@ -15779,6 +16112,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 }));
@@ -15929,6 +16263,18 @@ Made in Italy` })));
                 });
             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' } },
@@ -15945,20 +16291,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: () => {
@@ -15983,15 +16339,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 }) => {
@@ -16358,7 +16709,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
      *
      */
@@ -16417,14 +16768,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);