pb-sxp-ui 1.0.69 → 1.0.71

package/dist/pb-ui.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('@ant-design/pro-components'), require('react-dom')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', '@ant-design/pro-components', 'react-dom'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.proComponents, global.ReactDOM));
-})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, proComponents, ReactDOM) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash'), require('uuid'), require('pako'), require('react'), require('qs'), require('eventemitter3'), require('@emotion/css'), require('react-dom'), require('hls.js')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'lodash', 'uuid', 'pako', 'react', 'qs', 'eventemitter3', '@emotion/css', 'react-dom', 'hls.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.PUI = {}, global.lodash, global.uuid$1, global.pako, global.React, global.qs, global.EventEmitter, global.css, global.ReactDOM, global.Hls));
+})(this, (function (exports, lodash, uuid$1, pako, React, qs, EventEmitter, css, ReactDOM, Hls) { 'use strict';
 
     function _interopNamespaceDefault(e) {
         var n = Object.create(null);
@@ -438,7 +438,7 @@
         DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
     })(DataSourceType || (DataSourceType = {}));
     const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
-    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
+    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
         const [rtcList, setRtcList] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
@@ -571,9 +571,17 @@
             if (!enableReportEvent || !enabledMetaConversionApi) {
                 return;
             }
+            const fakeUserId = storeAndLoadFeUserId();
             return bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/fb/events', {
                 method: 'POST',
-                body: { eventName, actionSource, eventSourceUrl, 'userData.externalId': externalId },
+                body: {
+                    eventName,
+                    actionSource,
+                    eventSourceUrl,
+                    userData: {
+                        externalId: fakeUserId
+                    }
+                },
                 type: 'beacon'
             });
         }, [bffFetch, enableReportEvent, enabledMetaConversionApi]);
@@ -592,7 +600,7 @@
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
             var _h, _j, _k, _l, _m;
-            if (!utmVal || !isShowTag)
+            if (!utmVal)
                 return;
             try {
                 const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -605,7 +613,7 @@
             catch (e) {
                 console.log('e', e);
             }
-        }), [bffFetch, utmVal, isShowTag]);
+        }), [bffFetch, utmVal]);
         const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
             const cta = product === null || product === void 0 ? void 0 : product.bindCta;
@@ -938,23 +946,30 @@
         }
     ];
 
-    const fontOptions = [
-        { label: '应用字体', value: 'appFont' },
-        { label: '黑体', value: '黑体' }
-    ];
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-04-28 14:42:22
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-05-23 17:01:21
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\defaultSetting.ts
+     *
+     */
+    const fontOptions = [{ label: 'defalut', value: 'appFont' }];
+    const sxpFonts = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.localStorage.getItem('sxp_font_links'));
+    const data = sxpFonts && sxpFonts !== '' ? JSON.parse(sxpFonts) : [];
     var defaultSetting = {
-        fontOptions
+        fontOptions: [...fontOptions, ...data]
     };
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2023-12-14 10:51:16
+     * @LastEditTime: 2024-05-17 10:11:41
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
      *
      */
-    var _a$4;
+    var _a$5, _b$5, _c;
     var settingRender$5 = [
         {
             type: 'Text',
@@ -981,7 +996,7 @@
                             type: 'Select',
                             name: ['textStyle', 'fontFamily'],
                             options: fontOptions,
-                            initialValue: (_a$4 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a$4 === void 0 ? void 0 : _a$4.value
+                            initialValue: (_a$5 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a$5 === void 0 ? void 0 : _a$5.value
                         },
                         {
                             type: 'Number',
@@ -1024,6 +1039,37 @@
                     type: 'Text',
                     name: ['props', 'submitText']
                 },
+                {
+                    type: 'Group',
+                    label: '提交按钮字体',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'submitButtonStyle', 'color'],
+                            initialValue: '#fff'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'submitButtonStyle', 'fontFamily'],
+                            options: defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.fontOptions,
+                            initialValue: (_c = (_b$5 = defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.fontOptions) === null || _b$5 === void 0 ? void 0 : _b$5[0]) === null || _c === void 0 ? void 0 : _c.value
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'submitButtonStyle', 'fontSize'],
+                            addonAfter: 'px',
+                            initialValue: 12
+                        }
+                    ]
+                },
+                {
+                    type: 'TextStyle',
+                    name: ['props', 'submitButtonStyle']
+                },
+                {
+                    type: 'TextAlign',
+                    name: ['props', 'submitButtonStyle']
+                },
                 {
                     label: '提交文本颜色',
                     type: 'Color',
@@ -1144,7 +1190,7 @@
     }
 
     const AppointForm$1 = (_a) => {
-        var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose"]);
+        var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType, isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
         const { submitForm, popupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         const formRef = React.useRef();
@@ -1175,7 +1221,7 @@
                 key: '4'
             }
         ], []);
-        const columnsData = React.useMemo(() => {
+        React.useMemo(() => {
             if (layoutType === undefined) {
                 const list = lodash.cloneDeep(columns) || defaultColumns;
                 return list === null || list === void 0 ? void 0 : list.map((obj) => (Object.assign(Object.assign({}, obj), { title: undefined, fieldProps: { placeholder: obj === null || obj === void 0 ? void 0 : obj.title } })));
@@ -1218,13 +1264,9 @@
         return (React.createElement("div", { className: 'pb-appoint-form' },
             React.createElement("div", { className: `pb-appoint-form-title ${css.css(Object.assign({}, textStyle))}` }, title),
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                React.createElement("div", { className: 'pb-appoint-form-container' },
-                    React.createElement(proComponents.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
+                React.createElement("div", { className: 'pb-appoint-form-container' })),
             React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-                React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: {
-                        color: submitColor,
-                        background: submitBgColor
-                    } }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
+                React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
     };
     var AppointFormComponent = React.memo(AppointForm$1);
 
@@ -1272,23 +1314,7 @@
         sort: 2
     });
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-04-02 18:01:34
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-12 16:46:04
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetail\settingRender.tsx
-     *
-     */
-    var _a$3, _b$3;
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-03-26 16:50:25
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-28 18:42:26
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
-     *
-     */
+    var _a$4, _b$4;
     var settingRender$4 = [
         {
             title: '商品图片',
@@ -1312,6 +1338,19 @@
                     type: 'Number',
                     name: ['props', 'swiper', 'delay'],
                     addonAfter: 's'
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '居中垂直偏移',
+                            type: 'Number',
+                            name: ['props', 'swiper', 'translateY'],
+                            min: -100,
+                            addonAfter: '%',
+                            initialValue: 0
+                        }
+                    ]
                 }
             ]
         },
@@ -1346,6 +1385,23 @@
                             name: ['props', 'commodityStyles', 'field'],
                             initialValue: 'title'
                         },
+                        {
+                            type: 'Group',
+                            child: [
+                                {
+                                    label: '上边距',
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['marginTop']
+                                },
+                                {
+                                    label: '下边距',
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['marginBottom']
+                                }
+                            ]
+                        },
                         {
                             type: 'Group',
                             label: '标题字体',
@@ -1358,7 +1414,7 @@
                                     type: 'Select',
                                     options: fontOptions,
                                     name: ['fontFamily'],
-                                    initialValue: (_a$3 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a$3 === void 0 ? void 0 : _a$3.value
+                                    initialValue: (_a$4 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _a$4 === void 0 ? void 0 : _a$4.value
                                 },
                                 {
                                     type: 'Number',
@@ -1438,7 +1494,7 @@
                             type: 'Select',
                             name: ['props', 'buttonStyle', 'fontFamily'],
                             options: fontOptions,
-                            initialValue: (_b$3 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _b$3 === void 0 ? void 0 : _b$3.value
+                            initialValue: (_b$4 = fontOptions === null || fontOptions === void 0 ? void 0 : fontOptions[0]) === null || _b$4 === void 0 ? void 0 : _b$4.value
                         },
                         {
                             type: 'Number',
@@ -8383,7 +8439,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-20 15:53:04
+     * @LastEditTime: 2024-04-19 14:12:55
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
      *
      */
@@ -8398,30 +8454,6 @@
         React.useEffect(() => {
             setImgSrc(src);
         }, [src]);
-        React.useRef(null);
-        // useEffect(() => {
-        //   let observer: any = null;
-        //   const { current } = imgRef;
-        //   if (current) {
-        //     observer = new IntersectionObserver(
-        //       (entries) => {
-        //         entries.forEach((entry) => {
-        //           if (entry.isIntersecting) {
-        //             setImgSrc(src);
-        //             observer.unobserve(current);
-        //           }
-        //         });
-        //       },
-        //       { threshold: 0.1 } // 触发阈值，可根据需要调整
-        //     );
-        //     observer.observe(current);
-        //   }
-        //   return () => {
-        //     if (observer && current) {
-        //       observer.unobserve(current);
-        //     }
-        //   };
-        // }, [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` }),
@@ -8518,7 +8550,13 @@
                                 width,
                                 height: width
                             } },
-                            React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
+                            React.createElement(FormatImage$1, { style: {
+                                    height: '100%',
+                                    width: '100%',
+                                    objectFit: 'cover',
+                                    display: 'block',
+                                    transform: `translateY(${swiper === null || swiper === void 0 ? void 0 : swiper.translateY})%`
+                                }, src: src }))));
                 }))),
                 !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
                         position: 'relative',
@@ -8567,7 +8605,9 @@
                 commodityStyles: {
                     price: {
                         color: '#000',
-                        fontSize: 18
+                        fontSize: 18,
+                        marginTop: 24,
+                        marginBottom: 10
                     },
                     title: {
                         color: '#000',
@@ -8575,7 +8615,8 @@
                     },
                     collection: {
                         fontSize: 12,
-                        color: '#000'
+                        color: '#000',
+                        marginBottom: 14
                     },
                     info: {
                         color: 'gray',
@@ -8614,26 +8655,68 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-27 14:06:35
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2023-11-08 09:55:32
+     * @LastEditTime: 2024-05-17 10:29:41
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
+    var _a$3, _b$3;
     var settingRender$3 = [
         {
-            type: 'Media',
-            label: '图标',
-            name: ['props', 'icon'],
-            mediaType: 'Image'
-        },
-        {
-            type: 'TextArea',
-            label: '内容',
-            name: ['props', 'content']
-        },
-        {
-            type: 'Text',
-            label: '按钮文案',
-            name: ['props', 'btnText']
+            title: '',
+            child: [
+                {
+                    type: 'Media',
+                    label: '图标',
+                    name: ['props', 'icon'],
+                    mediaType: 'Image'
+                },
+                {
+                    type: 'TextArea',
+                    label: '内容',
+                    name: ['props', 'content']
+                },
+                {
+                    type: 'Text',
+                    label: '按钮文案',
+                    name: ['props', 'btnText']
+                },
+                {
+                    type: 'Group',
+                    label: '提交按钮字体',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'submitButtonStyle', 'color'],
+                            initialValue: '#fff'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'submitButtonStyle', 'fontFamily'],
+                            options: defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.fontOptions,
+                            initialValue: (_b$3 = (_a$3 = defaultSetting === null || defaultSetting === void 0 ? void 0 : defaultSetting.fontOptions) === null || _a$3 === void 0 ? void 0 : _a$3[0]) === null || _b$3 === void 0 ? void 0 : _b$3.value
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'submitButtonStyle', 'fontSize'],
+                            addonAfter: 'px',
+                            initialValue: 12
+                        }
+                    ]
+                },
+                {
+                    type: 'TextStyle',
+                    name: ['props', 'submitButtonStyle']
+                },
+                {
+                    type: 'TextAlign',
+                    name: ['props', 'submitButtonStyle']
+                },
+                {
+                    label: '提交按钮颜色',
+                    type: 'Color',
+                    name: ['props', 'submitButtonStyle', 'backgroundColor']
+                }
+            ]
         }
     ];
 
@@ -8672,7 +8755,7 @@
     };
 
     const Prompt$1 = (_a) => {
-        var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick"]);
+        var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle"]);
         const { popupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         const iconSrc = typeof icon === 'string' ? icon : getMediaValueByMode(icon);
@@ -8694,7 +8777,7 @@
             React.createElement("div", { className: 'pb-prompt-icon' },
                 React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2 })),
             React.createElement("div", { className: 'pb-prompt-content' }, content),
-            React.createElement("button", { className: 'pb-prompt-btn', onClick: handleOk }, btnText)));
+            React.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
     };
     var PromptComponent = React.memo(Prompt$1);
 
@@ -8753,6 +8836,19 @@
                     type: 'Number',
                     name: ['props', 'swiper', 'delay'],
                     addonAfter: 's'
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '居中垂直偏移',
+                            type: 'Number',
+                            name: ['props', 'swiper', 'translateY'],
+                            min: -100,
+                            addonAfter: '%',
+                            initialValue: 0
+                        }
+                    ]
                 }
             ]
         },
@@ -8984,7 +9080,13 @@ Made in Italy` })));
                                 width,
                                 height: width
                             } },
-                            React.createElement(FormatImage$1, { style: { height: '100%', width: '100%', objectFit: 'cover', display: 'block' }, src: src }))));
+                            React.createElement(FormatImage$1, { style: {
+                                    height: '100%',
+                                    width: '100%',
+                                    objectFit: 'cover',
+                                    display: 'block',
+                                    transform: `translateY(${swiper === null || swiper === void 0 ? void 0 : swiper.translateY})%`
+                                }, src: src }))));
                 }))),
                 !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (React.createElement("div", { className: css.css({
                         position: 'relative',
@@ -9085,7 +9187,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-12 17:38:12
+     * @LastEditTime: 2024-05-21 16:39:34
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
@@ -9186,6 +9288,14 @@ Made in Italy` })));
                     label: '与右侧边距',
                     addonAfter: 'px',
                     name: ['props', 'ctaTempStyles', 'img', 'marginRight']
+                },
+                {
+                    label: '居中垂直偏移',
+                    type: 'Number',
+                    name: ['props', 'translateY'],
+                    min: -100,
+                    addonAfter: '%',
+                    initialValue: 0
                 }
             ]
         },
@@ -9390,14 +9500,20 @@ Made in Italy` })));
     var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
 
     const Commodity$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
-        const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+        const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
         return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
+                React.createElement(FormatImage$1, { className: css.css({
+                        width: '100%',
+                        objectFit: 'cover',
+                        height: '100%',
+                        display: 'block',
+                        transform: `translateY(${translateY}%)`
+                    }), src: src })),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9406,8 +9522,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
+                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
     };
     var CommodityComponent = React.memo(Commodity$1);
 
@@ -9633,14 +9749,20 @@ Made in Italy` })));
     var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
     const CommodityDiro$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
-        const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+        const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
         return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
+                React.createElement(FormatImage$1, { className: css.css({
+                        width: '100%',
+                        objectFit: 'cover',
+                        height: '100%',
+                        display: 'block',
+                        transform: `translateY(${translateY}%)`
+                    }), src: src })),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9649,8 +9771,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now'))));
+                React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop Now'))));
     };
     var CommodityDiroComponent = React.memo(CommodityDiro$1);
 
@@ -9725,14 +9847,20 @@ Made in Italy` })));
     var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
     const CommodityDiroNew$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink"]);
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY"]);
         const { sxpParameter } = useSxpDataSource();
         const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
-        const src = (_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.homePage) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+        const src = (_g = (_f = (_d = (_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.cover) !== null && _d !== void 0 ? _d : (_e = product === null || product === void 0 ? void 0 : product.homePage) === null || _e === void 0 ? void 0 : _e[0]) !== null && _f !== void 0 ? _f : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _g !== void 0 ? _g : bottom_image;
         return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })),
+                React.createElement(FormatImage$1, { className: css.css({
+                        width: '100%',
+                        objectFit: 'cover',
+                        height: '100%',
+                        display: 'block',
+                        transform: `translateY(${translateY}%)`
+                    }), src: src })),
             React.createElement("div", { className: css.css({
                     color: '#fff',
                     display: 'flex',
@@ -9741,8 +9869,8 @@ Made in Italy` })));
                     width: '100%',
                     overflow: 'hidden'
                 }) },
-                React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_f = product === null || product === void 0 ? void 0 : product.title) !== null && _f !== void 0 ? _f : 'Product Name'),
-                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_h = (_g = product === null || product === void 0 ? void 0 : product.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop now'))));
+                React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_h = product === null || product === void 0 ? void 0 : product.title) !== null && _h !== void 0 ? _h : 'Product Name'),
+                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_k = (_j = product === null || product === void 0 ? void 0 : product.bindCta) === null || _j === void 0 ? void 0 : _j.enTitle) !== null && _k !== void 0 ? _k : 'Shop now'))));
     };
     var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
 
@@ -9824,11 +9952,11 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-16 14:50:13
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-18 12:32:49
+     * @LastEditTime: 2024-05-21 16:34:13
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
      *
      */
-    const Img = ({ src, rec, item, index }) => {
+    const Img = ({ src, rec, item, index, style }) => {
         const ref = React.useRef(null);
         const isOnScreen = useOnScreen(ref);
         const { ctaEvent } = useSxpDataSource();
@@ -9841,7 +9969,7 @@ Made in Italy` })));
             }
         }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
         return (React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
-            React.createElement(FormatImage$1, { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
+            React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }, style)), src: src })));
     };
     var Img$1 = React.memo(Img);
 
@@ -9849,7 +9977,7 @@ Made in Italy` })));
 
     const MultiCommodityDiro$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
         const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
         const { popup } = useEditor();
         const { jumpToWeb } = useEventReport();
@@ -9871,10 +9999,12 @@ Made in Italy` })));
             }
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
+                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
+                            transform: `translateY(${translateY}%)`
+                        } })),
                 React.createElement("div", { className: css.css({
                         color: '#000',
                         display: 'flex',
@@ -9883,8 +10013,8 @@ Made in Italy` })));
                         width: '100%',
                         overflow: 'hidden'
                     }) },
-                    React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop Now'))));
+                    React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
         })));
     };
     var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
@@ -9961,7 +10091,7 @@ Made in Italy` })));
 
     const MultiCommodity$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
         const { sxpParameter } = useSxpDataSource();
         const { ctaEvent, setPopupDetailData } = useSxpDataSource();
         const { popup } = useEditor();
@@ -9984,10 +10114,12 @@ Made in Italy` })));
             }
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
+                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
+                            transform: `translateY(${translateY}%)`
+                        } })),
                 React.createElement("div", { className: css.css({
                         color: '#fff',
                         display: 'flex',
@@ -9996,8 +10128,8 @@ Made in Italy` })));
                         width: '100%',
                         overflow: 'hidden'
                     }) },
-                    React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop Now'))));
+                    React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '2px 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop Now'))));
         })));
     };
     var MultiCommodityComponent = React.memo(MultiCommodity$1);
@@ -10074,7 +10206,7 @@ Made in Italy` })));
 
     const MultiCommodityDiroNew$1 = (_a) => {
         var _b, _c;
-        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
+        var { content, style, bgImg, recData, onClick, bottom_image, ctaTempStyles, isExternalLink, index, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
         const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
         const { popup } = useEditor();
         const { jumpToWeb } = useEventReport();
@@ -10096,10 +10228,12 @@ Made in Italy` })));
             }
         }, popup === null || popup === void 0 ? void 0 : popup.duration);
         return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item) => {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d, _e, _f, _g;
             return (React.createElement(SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
                 React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                    React.createElement(Img$1, { src: (_c = (_b = (_a = item === null || item === void 0 ? void 0 : item.homePage) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _c !== void 0 ? _c : bottom_image, rec: recData, item: item, index: index })),
+                    React.createElement(Img$1, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
+                            transform: `translateY(${translateY}%)`
+                        } })),
                 React.createElement("div", { className: css.css({
                         color: '#fff',
                         display: 'flex',
@@ -10109,8 +10243,8 @@ Made in Italy` })));
                         overflow: 'hidden',
                         lineHeight: '20px'
                     }) },
-                    React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_d = item === null || item === void 0 ? void 0 : item.title) !== null && _d !== void 0 ? _d : 'Product Name'),
-                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_f = (_e = item === null || item === void 0 ? void 0 : item.bindCta) === null || _e === void 0 ? void 0 : _e.enTitle) !== null && _f !== void 0 ? _f : 'Shop now'))));
+                    React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title }, (_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name'),
+                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_g = (_f = item === null || item === void 0 ? void 0 : item.bindCta) === null || _f === void 0 ? void 0 : _f.enTitle) !== null && _g !== void 0 ? _g : 'Shop now'))));
         })));
     };
     var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
@@ -10119,7 +10253,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-09 21:40:37
+     * @LastEditTime: 2024-05-21 16:44:00
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiroNew\material.tsx
      *
      */
@@ -10177,7 +10311,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-04-07 14:07:12
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-29 19:55:53
+     * @LastEditTime: 2024-05-23 11:03:15
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
      *
      */
@@ -10185,11 +10319,11 @@ Made in Italy` })));
         {
             title: '卡片样式',
             child: [
-                {
-                    type: 'Number',
-                    label: '文本行数',
-                    name: ['props', 'lineClamp']
-                },
+                // {
+                //   type: 'Number',
+                //   label: '文本行数',
+                //   name: ['props', 'lineClamp']
+                // },
                 {
                     type: 'Number',
                     label: '上下边距',
@@ -11673,19 +11807,15 @@ Made in Italy` })));
         const canvasRef = React.useRef(null);
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
         const src = React.useMemo(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
                 return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
             }
-            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
-                setShowVideo(true);
-                return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
-            }
-            else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
-                return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
+            else if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.imgUrls) === null || _d === void 0 ? void 0 : _d.length) {
+                return (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f[0];
             }
-            else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
-                return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
+            else if ((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.homePage) === null || _h === void 0 ? void 0 : _h.length) {
+                return (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k[0];
             }
             else {
                 return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
@@ -12329,7 +12459,6 @@ Made in Italy` })));
             const videoSrc = rec.video.url;
             if (!videoSrc)
                 return;
-            videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
             setIsPauseVideo(false);
             const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
             const dom = document.querySelector('#player-container-id');
@@ -12337,6 +12466,7 @@ Made in Italy` })));
             if (!dom && !dom2)
                 return;
             videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
             // videoRef?.on('canplay', handleCanplay);
@@ -12476,7 +12606,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
      *
      */
-    const FingerSwipeTip = ({ imageUrl }) => {
+    const FingerSwipeTip = ({ imageUrl, style }) => {
         const [show, setShow] = React.useState(true);
         useEditor();
         React.useEffect(() => {
@@ -12488,7 +12618,7 @@ Made in Italy` })));
         const animationCls = React.useMemo(() => {
             return show ? 'pb-fadeIn' : 'pb-fadeOut';
         }, [show]);
-        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
+        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
             React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
     };
 
@@ -12734,7 +12864,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 10:07:41
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-15 14:27:18
+     * @LastEditTime: 2024-05-23 14:31:12
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Nudge\index.tsx
      *
      */
@@ -12747,8 +12877,8 @@ Made in Italy` })));
                 backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
                 borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
             } },
-            (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover' } }) : null,
-            React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
+            (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
+            React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
     };
 
     const DEFAULT_TAG = 'FOR U';
@@ -12792,12 +12922,12 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-20 19:26:50
+     * @LastEditTime: 2024-05-23 10:41:27
      * @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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
         const viewImageStartTime = React.useRef(0);
@@ -12852,29 +12982,23 @@ Made in Italy` })));
         };
         const firstRef = React.useRef();
         React.useEffect(() => {
-            var _a, _b, _c;
-            if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
+            if (!firstRef.current && !videoRef) {
                 firstRef.current = true;
                 const player = TCPlayer('player-container-id', {
                     licenseUrl, // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
                     controls: false,
+                    autoplay: false,
                     loop: false,
-                    autoplay: true,
                     muted: true,
                     preload: 'auto',
                     posterImage: false,
-                    bigPlayButton: true,
-                    sources: [
-                        {
-                            src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
-                        }
-                    ]
+                    bigPlayButton: true
                 });
                 player === null || player === void 0 ? void 0 : player.ready(() => {
                     setVideoRef(player);
                 });
             }
-        }, [videoRef, licenseUrl, data]);
+        }, [videoRef, licenseUrl]);
         React.useEffect(() => {
             if (!isInit)
                 handleH5EnterLink();
@@ -13063,7 +13187,7 @@ Made in Italy` })));
             lineGradStyle
         ]);
         const renderLikeButton = React.useCallback((rec, index) => {
-            var _a, _b;
+            var _a, _b, _c, _d;
             if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
                 return;
             let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
@@ -13072,8 +13196,8 @@ Made in Italy` })));
             }
             if (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: {
-                        top,
-                        right: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _b !== void 0 ? _b : 0
+                        [(_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 }));
             }
             return null;
@@ -13100,7 +13224,7 @@ Made in Italy` })));
             }
         };
         const handleScrollEvent = (swiper) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             viewTime.current = new Date();
             const item = data[swiper.previousIndex];
             if (!item)
@@ -13133,14 +13257,17 @@ Made in Italy` })));
             }
             // 商品浏览事件
             handleReportProductView(item);
+            const curItem = data[swiper.activeIndex];
+            if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ProductView'
+                });
+            }
         };
         const handleReportProductView = (item) => {
             var _a, _b, _c;
             if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && !((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls) && (item === null || item === void 0 ? void 0 : item.product)) {
                 productView(item, item.product, (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.bindCta, viewTime.current, activeIndex);
-                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
-                    eventName: 'ProductView'
-                });
             }
         };
         React.useEffect(() => {
@@ -13211,7 +13338,7 @@ Made in Italy` })));
                 } })),
             renderLogo,
             React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
-            isShowFingerTip ? React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon }) : null,
+            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)}%` } })) : null,
             React.createElement(Swiper, { ref: swiperRef, onSlideChange: () => {
                     swiperRef.current.swiper.allowTouchMove = false;
                     setTimeout(() => {
@@ -13253,13 +13380,13 @@ Made in Italy` })));
                 direction: 'vertical', height: height },
                 React.createElement(ToggleButton$1, { style: {
                         position: 'fixed',
-                        right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
                         visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                        bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
-                        zIndex: 999
+                        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 }),
                 renderView),
-            React.createElement(WaterFall$1, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props)),
+            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("div", { style: { position: 'absolute', zIndex: -100 } },
                 React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
                         backgroundColor: 'transparent',
@@ -13415,8 +13542,8 @@ Made in Italy` })));
             if (!videoRef.current.src) {
                 const videoSrc = rec.video.url;
                 if (videoSrc.includes('.m3u8')) {
-                    if (typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.Hls.isSupported())) {
-                        const hls = new window.Hls();
+                    if (Hls.isSupported()) {
+                        const hls = new Hls();
                         hls.loadSource(videoSrc);
                         hls.attachMedia(videoRef.current);
                     }
@@ -13702,7 +13829,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-17 18:41:05
+     * @LastEditTime: 2024-05-06 17:26:37
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
      *
      */
@@ -13719,14 +13846,14 @@ Made in Italy` })));
         RESOLVER[v.extend.type] = v;
     });
     const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl, enabledMetaConversionApi }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f;
         const utmVal = React.useMemo(() => {
             var _a;
             const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
             return searchParams;
         }, []);
         return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: data === null || data === void 0 ? void 0 : data.data, utmVal: utmVal },
-            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, isShowTag: (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.data) === null || _g === void 0 ? void 0 : _g.sxpPageConf) === null || _h === void 0 ? void 0 : _h.globalConfig) === null || _j === void 0 ? void 0 : _j.isShowTag, render: ({ rtcList, tagList }) => {
+            React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, render: ({ rtcList, tagList }) => {
                     var _a;
                     return (React.createElement(React.Fragment, null,
                         React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),