pb-sxp-ui 1.0.69 → 1.0.71

package/dist/index.cjs

@@ -9,8 +9,8 @@ var React = require('react');
 var qs = require('qs');
 var EventEmitter = require('eventemitter3');
 var css = require('@emotion/css');
-var proComponents = require('@ant-design/pro-components');
 var ReactDOM = require('react-dom');
+var Hls = require('hls.js');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -446,7 +446,7 @@ var DataSourceType;
     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);
@@ -579,9 +579,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         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]);
@@ -600,7 +608,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     // 获取 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) => {
@@ -613,7 +621,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         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;
@@ -946,23 +954,30 @@ var interactionRender$8 = [
     }
 ];
 
-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',
@@ -989,7 +1004,7 @@ var settingRender$5 = [
                         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',
@@ -1032,6 +1047,37 @@ var settingRender$5 = [
                 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',
@@ -1152,7 +1198,7 @@ function useEventReport() {
 }
 
 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();
@@ -1183,7 +1229,7 @@ const AppointForm$1 = (_a) => {
             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 } })));
@@ -1226,13 +1272,9 @@ const AppointForm$1 = (_a) => {
     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);
 
@@ -1280,23 +1322,7 @@ const AppointForm = createMaterial(AppointFormComponent, {
     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: '商品图片',
@@ -1320,6 +1346,19 @@ var settingRender$4 = [
                 type: 'Number',
                 name: ['props', 'swiper', 'delay'],
                 addonAfter: 's'
+            },
+            {
+                type: 'Group',
+                child: [
+                    {
+                        label: '居中垂直偏移',
+                        type: 'Number',
+                        name: ['props', 'swiper', 'translateY'],
+                        min: -100,
+                        addonAfter: '%',
+                        initialValue: 0
+                    }
+                ]
             }
         ]
     },
@@ -1354,6 +1393,23 @@ var settingRender$4 = [
                         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: '标题字体',
@@ -1366,7 +1422,7 @@ var settingRender$4 = [
                                 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',
@@ -1446,7 +1502,7 @@ var settingRender$4 = [
                         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',
@@ -8391,7 +8447,7 @@ var ExpandableText$1 = React.memo(ExpandableText);
  * @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
  *
  */
@@ -8406,30 +8462,6 @@ const FormatImage = React.forwardRef((props, ref) => {
     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` }),
@@ -8526,7 +8558,13 @@ const CommodityDetail$1 = (_a) => {
                             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',
@@ -8575,7 +8613,9 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
             commodityStyles: {
                 price: {
                     color: '#000',
-                    fontSize: 18
+                    fontSize: 18,
+                    marginTop: 24,
+                    marginBottom: 10
                 },
                 title: {
                     color: '#000',
@@ -8583,7 +8623,8 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
                 },
                 collection: {
                     fontSize: 12,
-                    color: '#000'
+                    color: '#000',
+                    marginBottom: 14
                 },
                 info: {
                     color: 'gray',
@@ -8622,26 +8663,68 @@ var interactionRender$7 = [
  * @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']
+            }
+        ]
     }
 ];
 
@@ -8680,7 +8763,7 @@ const getMediaValueByMode = (obj) => {
 };
 
 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);
@@ -8702,7 +8785,7 @@ const Prompt$1 = (_a) => {
         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);
 
@@ -8761,6 +8844,19 @@ var settingRender$2 = [
                 type: 'Number',
                 name: ['props', 'swiper', 'delay'],
                 addonAfter: 's'
+            },
+            {
+                type: 'Group',
+                child: [
+                    {
+                        label: '居中垂直偏移',
+                        type: 'Number',
+                        name: ['props', 'swiper', 'translateY'],
+                        min: -100,
+                        addonAfter: '%',
+                        initialValue: 0
+                    }
+                ]
             }
         ]
     },
@@ -8992,7 +9088,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',
@@ -9093,7 +9195,7 @@ var _a$1, _b$1;
  * @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
  *
  */
@@ -9194,6 +9296,14 @@ var settingRender$1 = [
                 label: '与右侧边距',
                 addonAfter: 'px',
                 name: ['props', 'ctaTempStyles', 'img', 'marginRight']
+            },
+            {
+                label: '居中垂直偏移',
+                type: 'Number',
+                name: ['props', 'translateY'],
+                min: -100,
+                addonAfter: '%',
+                initialValue: 0
             }
         ]
     },
@@ -9398,14 +9508,20 @@ var EventProvider$1 = React.memo(EventProvider);
 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',
@@ -9414,8 +9530,8 @@ const Commodity$1 = (_a) => {
                 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);
 
@@ -9641,14 +9757,20 @@ var interactionRender$4 = [
 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',
@@ -9657,8 +9779,8 @@ const CommodityDiro$1 = (_a) => {
                 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);
 
@@ -9733,14 +9855,20 @@ var interactionRender$3 = [
 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',
@@ -9749,8 +9877,8 @@ const CommodityDiroNew$1 = (_a) => {
                 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);
 
@@ -9832,11 +9960,11 @@ var Scroll$1 = React.memo(Scroll);
  * @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();
@@ -9849,7 +9977,7 @@ const Img = ({ src, rec, item, index }) => {
         }
     }, [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);
 
@@ -9857,7 +9985,7 @@ var styles$2 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
 
 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();
@@ -9879,10 +10007,12 @@ const MultiCommodityDiro$1 = (_a) => {
         }
     }, 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',
@@ -9891,8 +10021,8 @@ const MultiCommodityDiro$1 = (_a) => {
                     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);
@@ -9969,7 +10099,7 @@ var styles$1 = {"two-line-ellipsis":"index-module_two-line-ellipsis__mdzn0"};
 
 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();
@@ -9992,10 +10122,12 @@ const MultiCommodity$1 = (_a) => {
         }
     }, 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',
@@ -10004,8 +10136,8 @@ const MultiCommodity$1 = (_a) => {
                     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);
@@ -10082,7 +10214,7 @@ var styles = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__fselR"};
 
 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();
@@ -10104,10 +10236,12 @@ const MultiCommodityDiroNew$1 = (_a) => {
         }
     }, 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',
@@ -10117,8 +10251,8 @@ const MultiCommodityDiroNew$1 = (_a) => {
                     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);
@@ -10127,7 +10261,7 @@ var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
  * @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
  *
  */
@@ -10185,7 +10319,7 @@ var _a, _b;
  * @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
  *
  */
@@ -10193,11 +10327,11 @@ var settingRender = [
     {
         title: '卡片样式',
         child: [
-            {
-                type: 'Number',
-                label: '文本行数',
-                name: ['props', 'lineClamp']
-            },
+            // {
+            //   type: 'Number',
+            //   label: '文本行数',
+            //   name: ['props', 'lineClamp']
+            // },
             {
                 type: 'Number',
                 label: '上下边距',
@@ -11681,19 +11815,15 @@ const WaterfallFlowItem = (props) => {
     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) || '';
@@ -12337,7 +12467,6 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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');
@@ -12345,6 +12474,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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);
@@ -12484,7 +12614,7 @@ var ToggleButton$1 = React.memo(ToggleButton);
  * @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(() => {
@@ -12496,7 +12626,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
     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 })));
 };
 
@@ -12742,7 +12872,7 @@ var RenderCard$1 = React.memo(RenderCard);
  * @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
  *
  */
@@ -12755,8 +12885,8 @@ const Nudge = ({ nudge }) => {
             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';
@@ -12800,12 +12930,12 @@ var Tagbar$1 = React.memo(Tagbar);
  * @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);
@@ -12860,29 +12990,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     };
     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();
@@ -13071,7 +13195,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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;
@@ -13080,8 +13204,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         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;
@@ -13108,7 +13232,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
     };
     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)
@@ -13141,14 +13265,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         }
         // 商品浏览事件
         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(() => {
@@ -13219,7 +13346,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             } })),
         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(() => {
@@ -13261,13 +13388,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             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',
@@ -13423,8 +13550,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         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);
                 }
@@ -13710,7 +13837,7 @@ const Popup = () => {
  * @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
  *
  */
@@ -13727,14 +13854,14 @@ Object.values(_materials_).forEach((v) => {
     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 })),