pb-sxp-ui 1.1.2 → 1.2.1

package/dist/pb-ui.js

@@ -420,8 +420,9 @@
     };
 
     const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
-    const FAKE_USER_STATE = 'FAKE_USER_STATE';
+    const FAKE_USER_STATE = 'FAKE_USER_STATE'; //新用户仅显示一次滑动提示
     const AGREE_POLICY = 'AGREE_POLICY';
+    const SLIDE_SKIP_STATE = 'SLIDE_SKIP_STATE'; //新用户滑动下一个视频跳转外链状态（触发过一次就不再触发）
     const storeAndLoadFeUserId = () => {
         let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
         if (lodash.isEmpty(fakeUserId)) {
@@ -437,6 +438,13 @@
         }
         return lodash.isEmpty(fakeUserState);
     };
+    const getSlideSkipState = () => {
+        const slideSkipState = window.localStorage.getItem(SLIDE_SKIP_STATE);
+        return lodash.isEmpty(slideSkipState);
+    };
+    const setSlideSkipState = () => {
+        window.localStorage.setItem(SLIDE_SKIP_STATE, 'true');
+    };
 
     /*
      * @Author: binruan@chatlabs.com
@@ -538,7 +546,6 @@
     (function (DataSourceType) {
         DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
     })(DataSourceType || (DataSourceType = {}));
-    const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
     const DEFAULT_TAG = 'FOR U';
     const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
         var _a, _b, _c;
@@ -620,8 +627,9 @@
             };
             if (utmVal) {
                 const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+                    var _a, _b;
                     const key = val.split('=')[0];
-                    return UTM_KEYS.includes(key);
+                    return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
                 })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
@@ -714,8 +722,9 @@
                 return;
             try {
                 const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
+                    var _a, _b;
                     const key = val.split('=')[0];
-                    return UTM_KEYS.includes(key);
+                    return (_b = ((_a = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
                 })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
                 const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
                 setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
@@ -853,7 +862,8 @@
                 themeTag,
                 isShowConsent,
                 selectTag,
-                setSelectTag
+                setSelectTag,
+                globalConfig
             } }, isShowConsent ? (React.createElement(Consent$3, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
             rtcList,
             mutateLike: bffMutateLike,
@@ -1090,7 +1100,7 @@
         EditorCore: EditorCore
     });
 
-    var interactionRender$8 = [
+    var interactionRender$d = [
         {
             title: '点击事件',
             child: [
@@ -1110,7 +1120,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
      *
      */
-    var settingRender$6 = [
+    var settingRender$9 = [
         {
             type: 'Text',
             label: '组件名称',
@@ -1362,14 +1372,14 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-06-27 16:22:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-02 10:34:34
+     * @LastEditTime: 2024-07-05 14:55:25
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\Form.tsx
      *
      */
     const Form = ({ layout, columns, onChange }) => {
         return (React.createElement(React.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (React.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
             layout !== 'inline' && React.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
-            (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", { className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex, onChange: onChange })))))));
+            (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange: onChange })))))))));
     };
     var Form$1 = React.memo(Form);
 
@@ -1476,9 +1486,9 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$6,
+            settingRender: settingRender$9,
             bindableProps: [],
-            interactionRender: interactionRender$8
+            interactionRender: interactionRender$d
         },
         defaulSetting: {
             name: '表单',
@@ -1501,7 +1511,7 @@
         sort: 2
     });
 
-    var settingRender$5 = [
+    var settingRender$8 = [
         {
             title: '商品图片',
             child: [
@@ -1540,6 +1550,47 @@
                 }
             ]
         },
+        {
+            title: '多商品切换器',
+            child: [
+                {
+                    type: 'Switch',
+                    name: ['props', 'commodityGroup', 'open'],
+                    label: '快速切换开关'
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '居中垂直偏移',
+                            type: 'Number',
+                            name: ['props', 'commodityGroup', 'translateY'],
+                            min: -1000,
+                            addonAfter: '%',
+                            initialValue: 0
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '上边距',
+                            name: ['props', 'commodityGroup', 'style', 'marginTop'],
+                            type: 'Number',
+                            addonAfter: 'px',
+                            initialValue: 20
+                        },
+                        {
+                            label: '下边距',
+                            name: ['props', 'commodityGroup', 'style', 'marginBottom'],
+                            type: 'Number',
+                            addonAfter: 'px'
+                        }
+                    ]
+                }
+            ]
+        },
         {
             title: '商品文本',
             child: [
@@ -8547,15 +8598,24 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-12 11:23:00
+     * @LastEditTime: 2024-07-19 18:39:54
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
-    const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
-    const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
-        var _a;
+    const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
+    const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
+        var _a, _b;
+        const touchRef = React.useRef(null);
+        const fTouchRef = React.useRef(null);
+        const touchMoveRef = React.useRef(null);
+        const ref = React.useRef(null);
+        const MODAL_DEF_TRANS = fullHeight * 0.2;
+        const MODAL_DEF_CON_H = isFullScreen ? fullHeight : fullHeight * 0.8;
+        const [modalTrans, setModalTrans] = React.useState(MODAL_DEF_TRANS);
         const [isShow, setIsShow] = React.useState(false);
         const modalEleRef = React.useRef(null);
+        const { globalConfig, popupDetailData } = useSxpDataSource();
+        const { schema: _schema } = useEditor();
         React.useEffect(() => {
             const parentNode = document.getElementById('sxp-render');
             const node = document.getElementById('pb-modal');
@@ -8571,6 +8631,12 @@
         const isOpen = React.useMemo(() => {
             return ((popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') || visible;
         }, [visible, popup]);
+        const isScrollFullScreen = React.useMemo(() => {
+            var _a, _b, _c, _d, _e;
+            const schemaData = schema !== null && schema !== void 0 ? schema : _schema;
+            const value = (_c = (_b = (_a = schemaData === null || schemaData === void 0 ? void 0 : schemaData.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.find((value) => (value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id));
+            return ((_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.event) === null || _e === void 0 ? void 0 : _e.isScrollFullScreen) || false;
+        }, [popup, schema, _schema]);
         React.useEffect(() => {
             if (isOpen) {
                 setIsShow(true);
@@ -8578,6 +8644,7 @@
             else {
                 setTimeout(() => {
                     setIsShow(false);
+                    setModalTrans(MODAL_DEF_TRANS);
                 }, popup === null || popup === void 0 ? void 0 : popup.duration);
             }
         }, [isOpen, popup]);
@@ -8586,14 +8653,61 @@
         const handleClose = lodash.debounce(() => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 300);
+        const handleTouchStart = (event) => {
+            event.stopPropagation();
+            touchRef.current = event.touches[0].clientY;
+            fTouchRef.current = event.touches[0].clientY;
+            touchMoveRef.current = true;
+        };
+        const handleTouchMove = (event) => {
+            event.stopPropagation();
+            requestAnimationFrame(() => {
+                var _a;
+                if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+                    const currentY = event.touches[0].clientY;
+                    const diff = touchRef.current - currentY;
+                    touchRef.current = currentY;
+                    const ts = modalTrans - diff;
+                    if (ts > 0) {
+                        setModalTrans(ts);
+                    }
+                }
+            });
+        };
+        const handleTouchEnd = (event) => {
+            var _a;
+            event.stopPropagation();
+            if (touchMoveRef.current && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.scrollTop) === 0) {
+                const diff = fTouchRef.current - touchRef.current;
+                if (diff > 0) {
+                    setModalTrans(0);
+                }
+                else if (modalTrans < MODAL_DEF_TRANS && diff < 0) {
+                    setModalTrans(MODAL_DEF_TRANS);
+                }
+                else if (modalTrans >= MODAL_DEF_TRANS && diff < 0) {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                }
+            }
+            touchMoveRef.current = false;
+        };
         return ReactDOM__namespace.createPortal(React.createElement(React.Fragment, null, isShow && (React.createElement("div", { className: 'modal-bg', style: Object.assign({ display: 'flex', backgroundColor: isOpen ? 'rgba(0, 0, 0, 0.7)' : 'rgba(0, 0, 0, 0)' }, modalStyle), onClick: handleClose },
-            React.createElement("div", { className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: { padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, onClick: (e) => {
+            React.createElement("div", Object.assign({ className: `modal-container ${isOpen ? 'modal-popIn' : 'modal-popOut'}`, style: Object.assign({ padding, animationDuration: ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0) / 1000 + 's' }, (isScrollFullScreen && {
+                    transform: `translateY(${modalTrans}px)`
+                })), onClick: (e) => {
                     e.stopPropagation();
                     e.preventDefault();
-                } },
+                } }, (isScrollFullScreen && {
+                onTouchMove: handleTouchMove,
+                onTouchStart: handleTouchStart,
+                onTouchEnd: handleTouchEnd
+            })),
                 React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
-                    React.createElement("img", { src: closeIcon, alt: 'close', className: 'modal-icon' })),
-                children)))), modalEleRef.current);
+                    React.createElement("img", { src: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _b !== void 0 ? _b : closeIcon$1, alt: 'close', className: 'modal-icon' })),
+                React.createElement("div", { ref: ref, style: {
+                        height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                        overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
+                    } }, children))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -8717,14 +8831,52 @@
     });
     var FormatImage$1 = React.memo(FormatImage);
 
+    const Scroll = ({ children, isPadding = true, style }) => {
+        const ref = React.useRef();
+        const { popupDetailData } = useSxpDataSource();
+        React.useEffect(() => {
+            var _a;
+            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex);
+        }, [popupDetailData]);
+        return (React.createElement(Swiper, { ref: ref, direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: Object.assign({ padding: isPadding ? '0 12px 0 20px' : 0 }, style) }, children));
+    };
+    var Scroll$1 = React.memo(Scroll);
+
+    const CommodityGroup = ({ products, data, defImg, style }) => {
+        var _a, _b;
+        const { setPopupDetailData, popupDetailData } = useSxpDataSource();
+        const [check, setCheck] = React.useState((_a = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _a !== void 0 ? _a : 0);
+        const handleClick = React.useCallback((index) => {
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData((val) => (Object.assign(Object.assign({}, val), { video: Object.assign(Object.assign({}, val === null || val === void 0 ? void 0 : val.video), { bindProduct: products === null || products === void 0 ? void 0 : products[index] }), multiCheckIndex: index })));
+        }, []);
+        return (React.createElement(React.Fragment, null, (data === null || data === void 0 ? void 0 : data.open) && ((products && (products === null || products === void 0 ? void 0 : products.length) > 0) || !popupDetailData) && (React.createElement(Scroll$1, { isPadding: false, style: Object.assign(Object.assign({}, style), data === null || data === void 0 ? void 0 : data.style) }, (_b = (popupDetailData ? products : [0, 1, 2, 3])) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+            var _a, _b, _c;
+            return (React.createElement(SwiperSlide, { className: css.css({
+                    width: '50px',
+                    height: '50px',
+                    marginRight: '10px'
+                }), onClick: () => handleClick(index), key: index },
+                React.createElement(FormatImage$1, { style: {
+                        height: '100%',
+                        width: '100%',
+                        objectFit: 'cover',
+                        display: 'block',
+                        objectPosition: `50% ${(data === null || data === void 0 ? void 0 : data.translateY) ? -(data === null || data === void 0 ? void 0 : data.translateY) + 50 : 50}%`,
+                        border: check === index ? '1px solid #000' : '1px solid #f2f2f2'
+                    }, src: (_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 : defImg })));
+        })))));
+    };
+    var CommodityGroup$1 = React.memo(CommodityGroup);
+
     const CommodityDetail$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index"]);
+        var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
         const { sxpParameter } = useSxpDataSource();
         const { popupDetailData, bffEventReport, isPreview, bffFbReport } = useSxpDataSource();
         const { jumpToWeb, productView } = useEventReport();
         const curTimeRef = React.useRef(null);
         const [showModal, setShowModal] = React.useState(false);
+        const [show3DModal, setShow3DModal] = React.useState(false);
         const data = isPost ? rec : popupDetailData;
         const product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
         const cta = isPost ? (_c = data === null || data === void 0 ? void 0 : data.product) === null || _c === void 0 ? void 0 : _c.bindCta : (_e = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct) === null || _e === void 0 ? void 0 : _e.bindCta;
@@ -8799,31 +8951,39 @@
             }
             return style;
         }, []);
-        return (React.createElement("div", { className: 'pb-commondity' },
+        const renderCommodityGroup = React.useCallback(() => {
+            var _a, _b, _c;
+            if (isPost)
+                return;
+            return (React.createElement(CommodityGroup$1, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
+        }, []);
+        return (React.createElement(React.Fragment, null,
             React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
-                product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
-                        clickable: true,
-                        bulletActiveClass: 'swipe-item-active-bullet',
-                        clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
-                            ? 'commondityDetail-swiper-clickable-left'
-                            : 'commondityDetail-swiper-clickable-center'
-                    }, loop: true, autoplay: {
-                        delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    } }, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
-                    return (React.createElement(SwiperSlide, { key: src },
-                        React.createElement("div", { style: {
-                                overflow: 'hidden',
-                                width,
-                                height: width
-                            } },
-                            React.createElement(FormatImage$1, { style: {
-                                    height: '100%',
-                                    width: '100%',
-                                    objectFit: 'cover',
-                                    display: 'block',
-                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
-                                }, src: src }))));
-                }))),
+                product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement("div", { style: { position: 'relative' } },
+                    React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
+                            clickable: true,
+                            bulletActiveClass: 'swipe-item-active-bullet',
+                            clickableClass: (swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign) === 'left'
+                                ? 'commondityDetail-swiper-clickable-left'
+                                : 'commondityDetail-swiper-clickable-center'
+                        }, loop: true, autoplay: {
+                            delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
+                        } },
+                        React.createElement(React.Fragment, null, (_h = product === null || product === void 0 ? void 0 : product.homePage) === null || _h === void 0 ? void 0 : _h.map((src) => {
+                            return (React.createElement(SwiperSlide, { key: src },
+                                React.createElement("div", { style: {
+                                        overflow: 'hidden',
+                                        width,
+                                        height: width
+                                    } },
+                                    React.createElement(FormatImage$1, { style: {
+                                            height: '100%',
+                                            width: '100%',
+                                            objectFit: 'cover',
+                                            display: 'block',
+                                            objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                        }, src: 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',
                         height: 0,
@@ -8838,19 +8998,55 @@
                             objectFit: 'cover',
                             width: '100%'
                         }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
+                renderCommodityGroup(),
                 React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
             renderBtn(),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
                 React.createElement("div", { style: { paddingBottom: '80px' } }, renderContent({ isPost: false })),
-                renderBtn())));
+                renderBtn()),
+            React.createElement(Modal$1, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
+                React.createElement("iframe", { src: 'https://rimowa.threedium.co.uk/product-experience/latest/?sku=92573974&lang=en', style: {
+                        width: '100%',
+                        height: 'calc(100% - 40px)',
+                        marginTop: '40px'
+                    } }))));
     };
     var CommodityDetailComponent = React.memo(CommodityDetail$1);
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-09 14:35:10
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-12 17:53:02
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetail\interactionRender.tsx
+     *
+     */
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-05 14:08:41
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-09 14:34:49
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
+     *
+     */
+    var interactionRender$c = [
+        {
+            title: '滑动事件',
+            child: [
+                {
+                    type: 'Switch',
+                    label: '滑动铺满全屏',
+                    name: ['isScrollFullScreen']
+                }
+            ]
+        }
+    ];
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-02 18:13:10
+     * @LastEditTime: 2024-07-12 17:40:06
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetail\material.tsx
      *
      */
@@ -8860,7 +9056,8 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$5
+            settingRender: settingRender$8,
+            interactionRender: interactionRender$c
         },
         defaulSetting: {
             props: {
@@ -8905,7 +9102,7 @@
         sort: 1
     });
 
-    var interactionRender$7 = [
+    var interactionRender$b = [
         {
             title: '点击事件',
             child: [
@@ -8925,7 +9122,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
-    var settingRender$4 = [
+    var settingRender$7 = [
         {
             title: '',
             child: [
@@ -9095,9 +9292,9 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$4,
+            settingRender: settingRender$7,
             bindableProps: [],
-            interactionRender: interactionRender$7
+            interactionRender: interactionRender$b
         },
         defaulSetting: {
             props: {
@@ -9116,11 +9313,11 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-27 09:54:23
+     * @LastEditTime: 2024-07-12 14:44:50
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$3 = [
+    var settingRender$6 = [
         {
             title: '商品图片',
             child: [
@@ -9159,6 +9356,47 @@
                 }
             ]
         },
+        {
+            title: '多商品切换器',
+            child: [
+                {
+                    type: 'Switch',
+                    name: ['props', 'commodityGroup', 'open'],
+                    label: '快速切换开关'
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '居中垂直偏移',
+                            type: 'Number',
+                            name: ['props', 'commodityGroup', 'translateY'],
+                            min: -1000,
+                            addonAfter: '%',
+                            initialValue: 0
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    child: [
+                        {
+                            label: '上边距',
+                            name: ['props', 'commodityGroup', 'style', 'marginTop'],
+                            type: 'Number',
+                            addonAfter: 'px',
+                            initialValue: 20
+                        },
+                        {
+                            label: '下边距',
+                            name: ['props', 'commodityGroup', 'style', 'marginBottom'],
+                            type: 'Number',
+                            addonAfter: 'px'
+                        }
+                    ]
+                }
+            ]
+        },
         {
             title: '商品文本',
             child: [
@@ -9329,14 +9567,11 @@
 
     const CommodityDetailDiroNew$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
+        var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index, commodityGroup } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup"]);
         React.useState(true);
         const { sxpParameter } = useSxpDataSource();
         const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = useSxpDataSource();
         const { jumpToWeb, productView } = useEventReport();
-        const scrollRef = React.useRef(null);
-        React.useRef(null);
-        React.useRef(null);
         React.useState(false);
         React.useState(false);
         React.useState(true);
@@ -9384,6 +9619,56 @@
             }
         }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
         const width = isPreview ? 375 : (_f = style === null || style === void 0 ? void 0 : style.width) !== null && _f !== void 0 ? _f : window.innerWidth;
+        // useEffect(() => {
+        //   console.log(scrollRef?.current?.scrollHeight, window.innerHeight);
+        //   if (scrollRef?.current && scrollRef?.current?.scrollHeight > window.innerHeight) {
+        //     setStopSlide(true);
+        //   }
+        // }, [scrollRef]);
+        // useEffect(() => {
+        //   const handleScroll = () => {
+        //     if (scrollRef?.current) {
+        //       const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+        //       const isBottom = scrollTop + clientHeight === scrollHeight;
+        //       if (isBottom) {
+        //         setIsBottom(true);
+        //       } else {
+        //         setIsBottom(false);
+        //       }
+        //       if (scrollTop === 0) {
+        //         setIsTop(true);
+        //       } else {
+        //         setIsTop(false);
+        //       }
+        //     }
+        //   };
+        //   if (scrollRef.current) {
+        //     scrollRef.current.addEventListener('scroll', handleScroll);
+        //   }
+        //   return () => {
+        //     if (scrollRef.current) {
+        //       scrollRef.current.removeEventListener('scroll', handleScroll);
+        //     }
+        //   };
+        // }, [scrollRef]);
+        // const handleTouchStart = (event: any) => {
+        //   event.stopPropagation();
+        //   touchRef.current = event.touches[0].clientY;
+        //   touchMoveRef.current = true;
+        // };
+        // const handleTouchMove = (event: any) => {
+        //   event.stopPropagation();
+        //   if (touchMoveRef.current) {
+        //     touchMoveRef.current = false;
+        //     const currentY = event.touches[0].clientY;
+        //     const diff = touchRef.current - currentY;
+        //     if (diff > 0 && (isBottom || !stopSlide)) {
+        //       swiperRef?.current?.swiper?.slideNext();
+        //     } else if (diff < 0 && (isTop || !stopSlide)) {
+        //       swiperRef?.current?.swiper?.slidePrev();
+        //     }
+        //   }
+        // };
         const productInfoText = ({ isPost }) => {
             return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
@@ -9396,8 +9681,14 @@ Made in Italy` })));
             }
             return style;
         }, []);
+        const renderCommodityGroup = React.useCallback(() => {
+            var _a, _b, _c;
+            if (isPost)
+                return;
+            return (React.createElement(CommodityGroup$1, { products: (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts, data: commodityGroup, defImg: (_c = (_b = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _b !== void 0 ? _b : bottom_image) !== null && _c !== void 0 ? _c : '', style: { padding: '0 19px' } }));
+        }, []);
         return (React.createElement("div", { className: 'pb-commondityDiroNew' },
-            React.createElement("div", Object.assign({ ref: scrollRef, className: css.css(Object.assign({}, style)) }, props),
+            React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
                 product && ((_g = product === null || product === void 0 ? void 0 : product.homePage) === null || _g === void 0 ? void 0 : _g.length) > 0 && (React.createElement(Swiper, { height: width, modules: [Pagination, Autoplay], pagination: {
                         clickable: true,
                         bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
@@ -9418,7 +9709,7 @@ Made in Italy` })));
                                     width: '100%',
                                     objectFit: 'cover',
                                     display: 'block',
-                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
+                                    objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                 }, 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({
@@ -9435,6 +9726,7 @@ Made in Italy` })));
                             objectFit: 'cover',
                             width: '100%'
                         }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
+                renderCommodityGroup(),
                 React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
@@ -9460,11 +9752,40 @@ Made in Italy` })));
     };
     var CommodityDetailDiroNewComponent = React.memo(CommodityDetailDiroNew$1);
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-09 14:35:10
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-12 17:53:02
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetail\interactionRender.tsx
+     *
+     */
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-05 14:08:41
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-09 14:34:49
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
+     *
+     */
+    var interactionRender$a = [
+        {
+            title: '滑动事件',
+            child: [
+                {
+                    type: 'Switch',
+                    label: '滑动铺满全屏',
+                    name: ['isScrollFullScreen']
+                }
+            ]
+        }
+    ];
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-09 16:25:44
+     * @LastEditTime: 2024-07-12 18:17:31
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\material.tsx
      *
      */
@@ -9474,7 +9795,8 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$3
+            settingRender: settingRender$6,
+            interactionRender: interactionRender$a
         },
         defaulSetting: {
             props: {
@@ -9530,66 +9852,11 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-04 17:47:52
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
+     * @LastEditTime: 2024-07-09 10:37:45
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityList\settingRender.tsx
      *
      */
-    var settingRender$2 = [
-        {
-            title: '主题样式',
-            child: [
-                {
-                    type: 'Group',
-                    label: '尺寸',
-                    child: [
-                        {
-                            type: 'Number',
-                            name: ['style', 'width'],
-                            addonAfter: 'W'
-                        },
-                        {
-                            type: 'Number',
-                            name: ['style', 'height'],
-                            addonAfter: 'H'
-                        }
-                    ]
-                },
-                {
-                    type: 'Group',
-                    label: '圆角',
-                    child: [
-                        {
-                            type: 'Slider',
-                            name: ['style', 'borderRadius'],
-                            max: 100
-                        },
-                        {
-                            type: 'Number',
-                            name: ['style', 'borderRadius'],
-                            addonAfter: 'px',
-                            max: 100
-                        }
-                    ]
-                },
-                {
-                    type: 'Color',
-                    label: '背景色',
-                    name: ['style', 'backgroundColor']
-                },
-                {
-                    label: '内边距',
-                    type: 'Number',
-                    name: ['style', 'padding'],
-                    addonAfter: 'px'
-                },
-                {
-                    label: '与Post描述边距',
-                    type: 'Number',
-                    name: ['style', 'marginBottom'],
-                    addonAfter: 'px'
-                }
-            ]
-        },
+    var settingRender$5 = [
         {
             title: '商品图片',
             child: [
@@ -9599,12 +9866,12 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'img', 'width'],
+                            name: ['props', 'commodityPicture', 'width'],
                             addonAfter: 'W'
                         },
                         {
                             type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'img', 'height'],
+                            name: ['props', 'commodityPicture', 'height'],
                             addonAfter: 'H'
                         }
                     ]
@@ -9615,12 +9882,12 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Slider',
-                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                            name: ['props', 'commodityPicture', 'borderRadius'],
                             max: 100
                         },
                         {
                             type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                            name: ['props', 'commodityPicture', 'borderRadius'],
                             addonAfter: 'px',
                             max: 100
                         }
@@ -9630,7 +9897,7 @@ Made in Italy` })));
                     type: 'Number',
                     label: '与右侧边距',
                     addonAfter: 'px',
-                    name: ['props', 'ctaTempStyles', 'img', 'marginRight']
+                    name: ['props', 'commodityPicture', 'marginRight']
                 },
                 {
                     label: '居中垂直偏移',
@@ -9643,72 +9910,90 @@ Made in Italy` })));
             ]
         },
         {
-            title: '商品标题文本',
-            type: 'commodityTitle',
+            title: '商品文本',
             child: [
                 {
-                    type: 'Group',
-                    label: '字体',
+                    name: ['props', 'commodityStyles'],
+                    type: 'SelectLinkage',
                     child: [
                         {
+                            label: '字段',
                             type: 'Select',
-                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-cn'],
-                            bottomText: '中文字体'
+                            options: [
+                                {
+                                    label: '商品名称',
+                                    value: 'title'
+                                },
+                                {
+                                    label: '系列名称',
+                                    value: 'collection'
+                                },
+                                {
+                                    label: '价格',
+                                    value: 'price'
+                                }
+                            ],
+                            name: ['props', 'commodityStyles', 'field'],
+                            initialValue: 'title'
                         },
                         {
-                            type: 'Select',
-                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-en'],
-                            bottomText: '英文/其他字体'
-                        }
-                    ]
-                },
-                {
-                    type: 'Group',
-                    label: '',
-                    child: [
+                            type: 'Group',
+                            label: '标题字体',
+                            child: [
+                                {
+                                    type: 'Select',
+                                    name: ['fontFamily-cn'],
+                                    bottomText: '中文字体'
+                                },
+                                {
+                                    type: 'Select',
+                                    name: ['fontFamily-en'],
+                                    bottomText: '英文/其他字体'
+                                }
+                            ]
+                        },
                         {
-                            type: 'Color',
-                            name: ['props', 'ctaTempStyles', 'title', 'color']
+                            type: 'Group',
+                            label: '',
+                            child: [
+                                {
+                                    type: 'Color',
+                                    name: ['color']
+                                },
+                                {
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['fontSize']
+                                }
+                            ]
                         },
                         {
-                            type: 'Number',
-                            addonAfter: 'px',
-                            name: ['props', 'ctaTempStyles', 'title', 'fontSize']
+                            label: '标题样式',
+                            type: 'TextStyle'
+                        },
+                        {
+                            label: '标题对齐',
+                            type: 'TextAlign'
                         }
                     ]
-                },
-                {
-                    label: '样式',
-                    type: 'TextStyle',
-                    name: ['props', 'ctaTempStyles', 'title']
-                },
-                {
-                    label: '对齐',
-                    type: 'TextAlign',
-                    name: ['props', 'ctaTempStyles', 'title']
-                },
-                {
-                    label: '间距',
-                    type: 'TextSpace',
-                    name: ['props', 'ctaTempStyles', 'title']
                 }
             ]
         },
         {
-            title: 'CTA标题',
+            title: '按钮样式',
             child: [
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'buttonStyle', 'backgroundColor']
+                },
                 {
                     type: 'Group',
                     label: '尺寸',
                     child: [
                         {
                             type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'width'],
-                            addonAfter: 'W'
-                        },
-                        {
-                            type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'height'],
+                            name: ['props', 'buttonStyle', 'height'],
                             addonAfter: 'H'
                         }
                     ]
@@ -9719,21 +10004,20 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Slider',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            name: ['props', 'buttonStyle', 'borderRadius'],
                             max: 100
                         },
                         {
                             type: 'Number',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            name: ['props', 'buttonStyle', 'borderRadius'],
                             addonAfter: 'px',
                             max: 100
                         }
                     ]
                 },
                 {
-                    type: 'Color',
-                    label: '背景色',
-                    name: ['props', 'ctaTempStyles', 'ctaTitle', 'backgroundColor']
+                    type: 'TextSpace',
+                    name: ['props', 'buttonStyle']
                 },
                 {
                     type: 'Group',
@@ -9741,12 +10025,12 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Select',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                            name: ['props', 'buttonStyle', 'fontFamily-cn'],
                             bottomText: '中文字体'
                         },
                         {
                             type: 'Select',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                            name: ['props', 'buttonStyle', 'fontFamily-en'],
                             bottomText: '英文/其他字体'
                         }
                     ]
@@ -9757,78 +10041,29 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Color',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                            name: ['props', 'buttonStyle', 'color']
                         },
                         {
                             type: 'Number',
                             addonAfter: 'px',
-                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                            name: ['props', 'buttonStyle', 'fontSize']
                         }
                     ]
                 },
                 {
                     label: '样式',
                     type: 'TextStyle',
-                    name: ['props', 'ctaTempStyles', 'ctaTitle']
+                    name: ['props', 'buttonStyle']
                 },
                 {
                     label: '对齐',
                     type: 'TextAlign',
-                    name: ['props', 'ctaTempStyles', 'ctaTitle']
-                },
-                {
-                    label: '间距',
-                    type: 'TextSpace',
-                    name: ['props', 'ctaTempStyles', 'ctaTitle']
-                }
-            ]
-        }
-    ];
-
-    var interactionRender$6 = [
-        {
-            title: '点击事件',
-            child: [
-                {
-                    type: 'link',
-                    name: 'onClick'
+                    name: ['props', 'buttonStyle']
                 }
             ]
         }
     ];
 
-    const EventProvider = (_a) => {
-        var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
-        const ref = React.useRef(null);
-        const { popup } = useEditor();
-        const { setPopupDetailData, ctaEvent } = useSxpDataSource();
-        const { jumpToWeb } = useEventReport();
-        const handleClick = lodash.throttle(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'clickCta',
-                eventDescription: 'User clicked the CTA'
-            }, rec, item, index);
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
-            if (isExternalLink) {
-                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
-                    const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
-                    const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
-                    jumpToWeb(rec, product, cta, index);
-                    window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
-                }
-            }
-            else {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-            }
-        }, popup === null || popup === void 0 ? void 0 : popup.duration);
-        return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
-    };
-    var EventProvider$1 = React.memo(EventProvider);
-
-    var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
-
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-04-12 09:58:58
@@ -9860,7 +10095,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-16 14:50:13
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-04 18:13:23
+     * @LastEditTime: 2024-06-24 18:13:14
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\Img.tsx
      *
      */
@@ -9881,92 +10116,106 @@ Made in Italy` })));
         }, [src]);
         return (React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, imgStyle)) },
             React.createElement("div", { ref: ref, hidden: !src, className: css.css({ width: '100%', height: '100%' }) },
-                React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? translateY + 50 : 50}%` }, style)), src: src }))));
+                React.createElement(FormatImage$1, { className: css.css(Object.assign({ width: '100%', objectFit: 'cover', height: '100%', display: 'block', objectPosition: `50% ${translateY ? -translateY + 50 : 50}%` }, style)), src: src }))));
     };
     var Img$1 = React.memo(Img);
 
-    const Commodity$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    const EventProvider = (_a) => {
+        var { rec, children, className, onClick, style, isExternalLink = false, index } = _a; __rest(_a, ["rec", "children", "className", "onClick", "style", "isExternalLink", "index"]);
+        const ref = React.useRef(null);
+        const { popup } = useEditor();
+        const { setPopupDetailData, ctaEvent } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
+        const handleClick = lodash.throttle(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const item = (_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) !== null && _b !== void 0 ? _b : rec === null || rec === void 0 ? void 0 : rec.video;
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, rec, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, rec), { index }));
+            if (isExternalLink) {
+                if ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.link) {
+                    const cta = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta;
+                    const product = (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                    jumpToWeb(rec, product, cta, index);
+                    window.location.href = window.getJointUtmLink((_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.link);
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        }, popup === null || popup === void 0 ? void 0 : popup.duration);
+        return (React.createElement("div", { ref: ref, className: className, style: style, onClick: handleClick }, children));
+    };
+    var EventProvider$1 = React.memo(EventProvider);
+
+    const CommodityList$1 = (_a) => {
+        var _b, _c;
+        var { style, isDefault, rec, viewTime, isPost, bottom_image, commodityStyles, buttonStyle, index, translateY = 0, commodityPicture, isExternalLink } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "commodityStyles", "buttonStyle", "index", "translateY", "commodityPicture", "isExternalLink"]);
         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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-            React.createElement("div", { className: css.css({
-                    color: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                    } }),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                    } }))));
+        const { popupDetailData, bffEventReport, isPreview, swiperRef, bffFbReport } = useSxpDataSource();
+        const recData = isPost ? rec : popupDetailData;
+        const product = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [null, null, null, null];
+        const priceText = React.useCallback((product) => {
+            var _a, _b, _c, _d, _e;
+            if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+                return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+            }
+            else {
+                return '$7,000';
+            }
+        }, []);
+        return (React.createElement("div", { className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexDirection: 'column', gap: '10px', padding: '0 20px', marginTop: '50px' })) }, product === null || product === void 0 ? void 0 : product.map((item, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (React.createElement(EventProvider$1, Object.assign({ key: index, isExternalLink: isExternalLink, rec: recData, index: index }, props, { className: css.css({
+                    display: 'flex'
+                }) }),
+                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, translateY: translateY, imgStyle: commodityPicture }),
+                React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' } },
+                    React.createElement("div", null,
+                        React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.title), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Pendant in Yellow Gold with Diamonds, Medium', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title)
+                            } }),
+                        React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection, hidden: !!item && (!(item === null || item === void 0 ? void 0 : item.collection) || (item === null || item === void 0 ? void 0 : item.collection) === ''), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_f = item === null || item === void 0 ? void 0 : item.collection) !== null && _f !== void 0 ? _f : 'Tiffany Lock', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.collection)
+                            } })),
+                    React.createElement("div", { className: css.css({
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-between',
+                            width: '100%',
+                            overflow: 'hidden'
+                        }) },
+                        React.createElement("div", { style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!item && !(item === null || item === void 0 ? void 0 : item.price), dangerouslySetInnerHTML: {
+                                __html: setFontForText(priceText(item), commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price)
+                            } }),
+                        React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, buttonStyle), { padding: '0 15px', maxWidth: '100px' }), dangerouslySetInnerHTML: {
+                                __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', buttonStyle)
+                            } })))));
+        })));
     };
-    var CommodityComponent = React.memo(Commodity$1);
+    var CommodityListComponent = React.memo(CommodityList$1);
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2023-07-28 18:29:57
+     * @Date: 2024-07-09 14:35:10
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 16:39:54
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Commodity\material.tsx
+     * @LastEditTime: 2024-07-09 14:35:18
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityList\interactionRender.tsx
      *
      */
-    const Commodity = createMaterial(CommodityComponent, {
-        displayName: '推荐单商品-透明底',
-        icon: '',
-        category: 'template',
-        type: 'Commodity',
-        related: {
-            interactionRender: interactionRender$6,
-            bindableProps: [],
-            settingRender: settingRender$2
-        },
-        defaulSetting: {
-            props: {
-                ctaTempStyles: {
-                    img: {
-                        borderRadius: 3,
-                        width: 60,
-                        height: 60,
-                        marginRight: 8
-                    },
-                    title: {
-                        fontSize: 12,
-                        color: '#fff',
-                        textAlign: 'left'
-                    },
-                    ctaTitle: {
-                        fontSize: 10,
-                        color: '#fff',
-                        textAlign: 'center',
-                        width: 130,
-                        height: 20,
-                        backgroundColor: 'rgba(0,0,0,.5)'
-                    }
-                }
-            },
-            style: {
-                padding: 7,
-                width: 236,
-                height: 74,
-                borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)',
-                marginBottom: 8
-            }
-        },
-        w: 100,
-        h: 40,
-        sort: 1
-    });
-
-    var interactionRender$5 = [
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-05 14:08:41
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-09 14:34:49
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
+     *
+     */
+    var interactionRender$9 = [
         {
             title: '点击事件',
             child: [
@@ -9978,104 +10227,140 @@ Made in Italy` })));
         }
     ];
 
-    const Appoint$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
-        const { sxpParameter } = useSxpDataSource();
-        const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-        const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                    __html: setFontForText((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                } })));
-    };
-    var AppointComponent = React.memo(Appoint$1);
-
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2023-07-28 18:29:57
+     * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-09 21:42:21
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Appoint\material.tsx
+     * @LastEditTime: 2024-07-09 16:04:28
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityList\material.tsx
      *
      */
-    const Appoint = createMaterial(AppointComponent, {
-        displayName: '预约表单',
+    const CommodityList = createMaterial(CommodityListComponent, {
+        displayName: '商品列表',
         icon: '',
-        category: 'template',
-        type: 'Appoint',
+        category: 'popup',
+        type: 'CommodityList',
         related: {
-            interactionRender: interactionRender$5,
-            settingRender: settingRender$2 === null || settingRender$2 === void 0 ? void 0 : settingRender$2.filter((i) => i.type !== 'commodityTitle'),
-            bindableProps: []
+            settingRender: settingRender$5,
+            interactionRender: interactionRender$9
         },
         defaulSetting: {
             props: {
-                ctaTempStyles: {
-                    img: {
-                        borderRadius: 3,
-                        width: 30,
-                        height: 30,
-                        marginRight: 8
+                commodityPicture: {
+                    width: 100,
+                    height: 100,
+                    marginRight: 10
+                },
+                commodityStyles: {
+                    price: {
+                        color: '#000',
+                        fontWeight: 'bold',
+                        fontSize: 14
                     },
-                    ctaTitle: {
-                        fontSize: 12,
-                        color: '#fff',
-                        textAlign: 'left',
-                        width: 130,
-                        height: 20
+                    title: {
+                        color: '#000',
+                        fontSize: 14
+                    },
+                    collection: {
+                        color: '#757575',
+                        fontSize: 12
                     }
+                },
+                buttonStyle: {
+                    backgroundColor: '#000',
+                    fontSize: 12,
+                    height: 30,
+                    textAlign: 'center',
+                    color: '#fff',
+                    lineHeight: 2.5
                 }
             },
-            style: {
-                padding: 7,
-                width: 236,
-                height: 44,
-                borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)',
-                marginBottom: 8
-            }
+            style: {}
         },
         w: 100,
         h: 40,
-        sort: 6
+        sort: 1
     });
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-07-02 14:51:32
+     * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-02 16:44:34
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Link\settingRender.tsx
+     * @LastEditTime: 2024-06-27 09:55:59
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
-    var linkSettingRender = [
+    var settingRender$4 = [
         {
-            title: '自定义标题',
+            title: '主题样式',
             child: [
                 {
-                    type: 'Switch',
-                    label: '自定义标题开关',
-                    name: ['props', 'customTitle', 'display']
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['style', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
                 },
                 {
-                    type: 'Text',
-                    label: '标题文案',
-                    name: ['props', 'customTitle', 'text']
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['style', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['style', 'backgroundColor']
                 },
+                {
+                    label: '内边距',
+                    type: 'Number',
+                    name: ['style', 'padding'],
+                    addonAfter: 'px'
+                },
+                {
+                    label: '与Post描述边距',
+                    type: 'Number',
+                    name: ['style', 'marginBottom'],
+                    addonAfter: 'px'
+                }
+            ]
+        },
+        {
+            title: '商品图片',
+            child: [
                 {
                     type: 'Group',
                     label: '尺寸',
                     child: [
                         {
                             type: 'Number',
-                            name: ['props', 'customTitle', 'style', 'width'],
+                            name: ['props', 'ctaTempStyles', 'img', 'width'],
                             addonAfter: 'W'
                         },
                         {
                             type: 'Number',
-                            name: ['props', 'customTitle', 'style', 'height'],
+                            name: ['props', 'ctaTempStyles', 'img', 'height'],
                             addonAfter: 'H'
                         }
                     ]
@@ -10086,34 +10371,49 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Slider',
-                            name: ['props', 'customTitle', 'style', 'borderRadius'],
+                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
                             max: 100
                         },
                         {
                             type: 'Number',
-                            name: ['props', 'customTitle', 'style', 'borderRadius'],
+                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
                             addonAfter: 'px',
                             max: 100
                         }
                     ]
                 },
                 {
-                    type: 'Color',
-                    label: '背景色',
-                    name: ['props', 'customTitle', 'style', 'backgroundColor']
+                    type: 'Number',
+                    label: '与右侧边距',
+                    addonAfter: 'px',
+                    name: ['props', 'ctaTempStyles', 'img', 'marginRight']
                 },
+                {
+                    label: '居中垂直偏移',
+                    type: 'Number',
+                    name: ['props', 'translateY'],
+                    min: -1000,
+                    addonAfter: '%',
+                    initialValue: 0
+                }
+            ]
+        },
+        {
+            title: '商品标题文本',
+            type: 'commodityTitle',
+            child: [
                 {
                     type: 'Group',
                     label: '字体',
                     child: [
                         {
                             type: 'Select',
-                            name: ['props', 'customTitle', 'style', 'fontFamily-cn'],
+                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-cn'],
                             bottomText: '中文字体'
                         },
                         {
                             type: 'Select',
-                            name: ['props', 'customTitle', 'style', 'fontFamily-en'],
+                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-en'],
                             bottomText: '英文/其他字体'
                         }
                     ]
@@ -10124,124 +10424,119 @@ Made in Italy` })));
                     child: [
                         {
                             type: 'Color',
-                            name: ['props', 'customTitle', 'style', 'color']
+                            name: ['props', 'ctaTempStyles', 'title', 'color']
                         },
                         {
                             type: 'Number',
                             addonAfter: 'px',
-                            name: ['props', 'customTitle', 'style', 'fontSize']
+                            name: ['props', 'ctaTempStyles', 'title', 'fontSize']
                         }
                     ]
                 },
                 {
                     label: '样式',
                     type: 'TextStyle',
-                    name: ['props', 'customTitle', 'style']
+                    name: ['props', 'ctaTempStyles', 'title']
                 },
                 {
                     label: '对齐',
                     type: 'TextAlign',
-                    name: ['props', 'customTitle', 'style']
+                    name: ['props', 'ctaTempStyles', 'title']
                 },
                 {
-                    label: '上边距',
-                    type: 'Number',
-                    name: ['props', 'customTitle', 'style', 'marginTop'],
-                    addonAfter: 'px'
+                    label: '间距',
+                    type: 'TextSpace',
+                    name: ['props', 'ctaTempStyles', 'title']
                 }
             ]
-        }
-    ];
-
-    var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU","one-line-ellipsis":"index-module_one-line-ellipsis__buFw1"};
-
-    const Link$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
-        const { sxpParameter, bffEventReport } = useSxpDataSource();
-        const { jumpToWeb } = useEventReport();
-        const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
-        const product = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
-        const handleTo = () => {
-            if (cta === null || cta === void 0 ? void 0 : cta.link) {
-                jumpToWeb(recData, product, cta, index);
-                window.location.href = window.getJointUtmLink(cta.link);
-            }
-        };
-        const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-            React.createElement("div", { className: css.css({
-                    display: 'flex',
-                    alignItems: 'center',
-                    width: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("div", null,
-                    React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                        } }),
-                    (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: styles$5['one-line-ellipsis'], dangerouslySetInnerHTML: {
-                            __html: setFontForText(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
-                        } }))))));
-    };
-    var LinkComponent = React.memo(Link$1);
-
-    var _a;
-    const Link = createMaterial(LinkComponent, {
-        displayName: '跳转指引',
-        icon: '',
-        category: 'template',
-        type: 'Link',
-        related: {
-            settingRender: (_a = settingRender$2 === null || settingRender$2 === void 0 ? void 0 : settingRender$2.filter((i) => i.type !== 'commodityTitle')) === null || _a === void 0 ? void 0 : _a.concat(linkSettingRender),
-            bindableProps: []
         },
-        defaulSetting: {
-            props: {
-                ctaTempStyles: {
-                    img: {
-                        borderRadius: 3,
-                        width: 60,
-                        height: 60,
-                        marginRight: 8
-                    },
-                    ctaTitle: {
-                        fontSize: 12,
-                        color: '#fff',
-                        textAlign: 'left',
-                        width: 130,
-                        height: 20
-                    }
+        {
+            title: 'CTA标题',
+            child: [
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
                 },
-                customTitle: {
-                    style: {
-                        textAlign: 'left',
-                        textDecoration: 'underline',
-                        fontWeight: 'bold',
-                        width: 130,
-                        height: 20,
-                        fontSize: 12,
-                        color: '#000'
-                    },
-                    text: '探索更多'
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle', 'backgroundColor']
+                },
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                            bottomText: '中文字体'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                        },
+                        {
+                            type: 'Number',
+                            addonAfter: 'px',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                        }
+                    ]
+                },
+                {
+                    label: '样式',
+                    type: 'TextStyle',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
+                },
+                {
+                    label: '对齐',
+                    type: 'TextAlign',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
                 }
-            },
-            style: {
-                padding: 7,
-                width: 236,
-                height: 74,
-                borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)',
-                marginBottom: 8
-            }
-        },
-        w: 100,
-        h: 40,
-        sort: 5
-    });
+            ]
+        }
+    ];
 
-    var interactionRender$4 = [
+    var interactionRender$8 = [
         {
             title: '点击事件',
             child: [
@@ -10253,9 +10548,9 @@ Made in Italy` })));
         }
     ];
 
-    var styles$4 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
+    var styles$8 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__3bKKx"};
 
-    const CommodityDiro$1 = (_a) => {
+    const Commodity$1 = (_a) => {
         var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
         const { sxpParameter } = useSxpDataSource();
@@ -10271,32 +10566,32 @@ 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, dangerouslySetInnerHTML: {
+                React.createElement("div", { className: styles$8['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                         __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                     } }),
-                React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
                         __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                     } }))));
     };
-    var CommodityDiroComponent = React.memo(CommodityDiro$1);
+    var CommodityComponent = React.memo(Commodity$1);
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 16:07:28
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\CommodityDiro\material.tsx
+     * @LastEditTime: 2024-03-29 16:39:54
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Commodity\material.tsx
      *
      */
-    const CommodityDiro = createMaterial(CommodityDiroComponent, {
-        displayName: '推荐单商品-白底圆角按钮',
+    const Commodity = createMaterial(CommodityComponent, {
+        displayName: '推荐单商品-透明底',
         icon: '',
         category: 'template',
-        type: 'CommodityDiro',
+        type: 'Commodity',
         related: {
-            interactionRender: interactionRender$4,
-            settingRender: settingRender$2,
-            bindableProps: []
+            interactionRender: interactionRender$8,
+            bindableProps: [],
+            settingRender: settingRender$4
         },
         defaulSetting: {
             props: {
@@ -10309,16 +10604,16 @@ Made in Italy` })));
                     },
                     title: {
                         fontSize: 12,
-                        color: '#000',
+                        color: '#fff',
                         textAlign: 'left'
                     },
                     ctaTitle: {
                         fontSize: 10,
                         color: '#fff',
                         textAlign: 'center',
-                        width: 80,
+                        width: 130,
                         height: 20,
-                        backgroundColor: 'rgba(0,0,0,1)'
+                        backgroundColor: 'rgba(0,0,0,.5)'
                     }
                 }
             },
@@ -10327,16 +10622,16 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: '#fff',
+                backgroundColor: 'rgba(0,0,0,.3)',
                 marginBottom: 8
             }
         },
         w: 100,
         h: 40,
-        sort: 2
+        sort: 1
     });
 
-    var interactionRender$3 = [
+    var interactionRender$7 = [
         {
             title: '点击事件',
             child: [
@@ -10348,171 +10643,224 @@ 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, _j, _k, _l;
-        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+    const Appoint$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "index"]);
         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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
-        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
-            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-            React.createElement("div", { className: css.css({
-                    color: '#fff',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'center',
-                    width: '100%',
-                    overflow: 'hidden'
-                }) },
-                React.createElement("div", { className: styles$3['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                        __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                    } }),
-                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                        __html: setFontForText((_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                    } }))));
+        const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
+        const src = (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image;
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) !== null && _f !== void 0 ? _f : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                    __html: setFontForText((_g = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _g !== void 0 ? _g : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } })));
     };
-    var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
+    var AppointComponent = React.memo(Appoint$1);
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-09 11:54:27
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\CommodityDiroNew\material.tsx
+     * @LastEditTime: 2024-04-09 21:42:21
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Appoint\material.tsx
      *
      */
-    const CommodityDiroNew = createMaterial(CommodityDiroNewComponent, {
-        displayName: '推荐单商品-白底下划线按钮',
+    const Appoint = createMaterial(AppointComponent, {
+        displayName: '预约表单',
         icon: '',
         category: 'template',
-        type: 'CommodityDiroNew',
+        type: 'Appoint',
         related: {
-            interactionRender: interactionRender$3,
-            bindableProps: [],
-            settingRender: settingRender$2
+            interactionRender: interactionRender$7,
+            settingRender: settingRender$4 === null || settingRender$4 === void 0 ? void 0 : settingRender$4.filter((i) => i.type !== 'commodityTitle'),
+            bindableProps: []
         },
         defaulSetting: {
             props: {
                 ctaTempStyles: {
                     img: {
-                        borderRadius: 8,
-                        width: 78,
-                        height: 78,
-                        marginRight: 16
-                    },
-                    title: {
-                        fontSize: 13,
-                        color: '#000',
-                        textAlign: 'left'
+                        borderRadius: 3,
+                        width: 30,
+                        height: 30,
+                        marginRight: 8
                     },
                     ctaTitle: {
-                        textDecoration: 'underline',
-                        fontSize: 14,
-                        fontWeight: 'bold',
-                        color: '#000',
+                        fontSize: 12,
+                        color: '#fff',
                         textAlign: 'left',
-                        width: 150,
+                        width: 130,
                         height: 20
                     }
                 }
             },
             style: {
-                borderRadius: 4,
-                width: 260,
-                height: 86,
-                padding: 4,
-                backgroundColor: 'rgba(255,255,255,0.75)',
+                padding: 7,
+                width: 236,
+                height: 44,
+                borderRadius: 3,
+                backgroundColor: 'rgba(0,0,0,.3)',
                 marginBottom: 8
             }
         },
         w: 100,
         h: 40,
-        sort: 2
+        sort: 6
     });
 
-    var interactionRender$2 = [
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-02 14:51:32
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-02 16:44:34
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\Link\settingRender.tsx
+     *
+     */
+    var linkSettingRender = [
         {
-            title: '点击事件',
+            title: '自定义标题',
             child: [
                 {
-                    type: 'link',
-                    name: 'onClick'
-                }
-            ]
+                    type: 'Switch',
+                    label: '自定义标题开关',
+                    name: ['props', 'customTitle', 'display']
+                },
+                {
+                    type: 'Text',
+                    label: '标题文案',
+                    name: ['props', 'customTitle', 'text']
+                },
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'customTitle', 'style', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'customTitle', 'style', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'customTitle', 'style', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'customTitle', 'style', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'customTitle', 'style', 'backgroundColor']
+                },
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Select',
+                            name: ['props', 'customTitle', 'style', 'fontFamily-cn'],
+                            bottomText: '中文字体'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'customTitle', 'style', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'customTitle', 'style', 'color']
+                        },
+                        {
+                            type: 'Number',
+                            addonAfter: 'px',
+                            name: ['props', 'customTitle', 'style', 'fontSize']
+                        }
+                    ]
+                },
+                {
+                    label: '样式',
+                    type: 'TextStyle',
+                    name: ['props', 'customTitle', 'style']
+                },
+                {
+                    label: '对齐',
+                    type: 'TextAlign',
+                    name: ['props', 'customTitle', 'style']
+                },
+                {
+                    label: '上边距',
+                    type: 'Number',
+                    name: ['props', 'customTitle', 'style', 'marginTop'],
+                    addonAfter: 'px'
+                }
+            ]
         }
     ];
 
-    const Scroll = ({ children, isPadding = true }) => {
-        return (React.createElement(Swiper, { direction: 'horizontal', slidesPerView: 'auto', freeMode: true, mousewheel: true, modules: [freeMode, Scrollbar, Mousewheel], style: { padding: isPadding ? '0 12px 0 20px' : 0 } }, children));
-    };
-    var Scroll$1 = React.memo(Scroll);
-
-    var styles$2 = {"two-line-ellipsis":"index-module_two-line-ellipsis__SFQwJ"};
+    var styles$7 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__nkBlU","one-line-ellipsis":"index-module_one-line-ellipsis__buFw1"};
 
-    const MultiCommodityDiro$1 = (_a) => {
-        var _b, _c;
-        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 Link$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, index, customTitle } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "index", "customTitle"]);
+        const { sxpParameter, bffEventReport } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
-        const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-        const handleClick = lodash.throttle((item) => {
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'clickCta',
-                eventDescription: 'User clicked the CTA'
-            }, recData, item, index);
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
-            if (isExternalLink) {
-                if (item === null || item === void 0 ? void 0 : item.link) {
-                    jumpToWeb(recData, item, item.bindCta, index);
-                    window.location.href = window.getJointUtmLink(item.link);
-                }
-            }
-            else {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
+        const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
+        const product = (_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct;
+        const handleTo = () => {
+            if (cta === null || cta === void 0 ? void 0 : cta.link) {
+                jumpToWeb(recData, product, cta, index);
+                window.location.href = window.getJointUtmLink(cta.link);
             }
-        }, 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, _g, _h;
-            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ 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(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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-                React.createElement("div", { className: css.css({
-                        color: '#000',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        overflow: 'hidden'
-                    }) },
-                    React.createElement("div", { className: styles$2['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+        };
+        const src = (_e = (_d = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _d !== void 0 ? _d : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _e !== void 0 ? _e : bottom_image;
+        return (React.createElement(EventProvider$1, Object.assign({ index: index, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props, { onClick: handleTo }),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.bindProduct) !== null && _g !== void 0 ? _g : recData === null || recData === void 0 ? void 0 : recData.video, index: index, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { className: css.css({
+                    display: 'flex',
+                    alignItems: 'center',
+                    width: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("div", null,
+                    React.createElement("div", { className: (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) ? styles$7['one-line-ellipsis'] : styles$7['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_h = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _h !== void 0 ? _h : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                         } }),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    (customTitle === null || customTitle === void 0 ? void 0 : customTitle.display) && (React.createElement("div", { style: Object.assign(Object.assign({}, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style), { lineHeight: ((_j = customTitle === null || customTitle === void 0 ? void 0 : customTitle.style) === null || _j === void 0 ? void 0 : _j.height) + 'px' }), className: styles$7['one-line-ellipsis'], dangerouslySetInnerHTML: {
+                            __html: setFontForText(customTitle === null || customTitle === void 0 ? void 0 : customTitle.text, customTitle === null || customTitle === void 0 ? void 0 : customTitle.style)
                         } }))))));
-        })));
     };
-    var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
+    var LinkComponent = React.memo(Link$1);
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-07-28 18:29:57
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 16:27:22
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiro\material.tsx
-     *
-     */
-    const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
-        displayName: '推荐多商品-白底圆角按钮',
+    var _a;
+    const Link = createMaterial(LinkComponent, {
+        displayName: '跳转指引',
         icon: '',
         category: 'template',
-        type: 'MultiCommodityDiro',
+        type: 'Link',
         related: {
-            interactionRender: interactionRender$2,
-            bindableProps: [],
-            settingRender: settingRender$2
+            settingRender: (_a = settingRender$4 === null || settingRender$4 === void 0 ? void 0 : settingRender$4.filter((i) => i.type !== 'commodityTitle')) === null || _a === void 0 ? void 0 : _a.concat(linkSettingRender),
+            bindableProps: []
         },
         defaulSetting: {
             props: {
@@ -10523,19 +10871,25 @@ Made in Italy` })));
                         height: 60,
                         marginRight: 8
                     },
-                    title: {
-                        fontSize: 12,
-                        color: '#000',
-                        textAlign: 'left'
-                    },
                     ctaTitle: {
-                        fontSize: 10,
+                        fontSize: 12,
                         color: '#fff',
-                        textAlign: 'center',
-                        width: 80,
-                        height: 20,
-                        backgroundColor: 'rgba(0,0,0,1)'
+                        textAlign: 'left',
+                        width: 130,
+                        height: 20
                     }
+                },
+                customTitle: {
+                    style: {
+                        textAlign: 'left',
+                        textDecoration: 'underline',
+                        fontWeight: 'bold',
+                        width: 130,
+                        height: 20,
+                        fontSize: 12,
+                        color: '#000'
+                    },
+                    text: '探索更多'
                 }
             },
             style: {
@@ -10543,16 +10897,16 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: '#fff',
+                backgroundColor: 'rgba(0,0,0,.3)',
                 marginBottom: 8
             }
         },
         w: 100,
         h: 40,
-        sort: 4
+        sort: 5
     });
 
-    var interactionRender$1 = [
+    var interactionRender$6 = [
         {
             title: '点击事件',
             child: [
@@ -10564,70 +10918,49 @@ Made in Italy` })));
         }
     ];
 
-    var styles$1 = {"two-line-ellipsis":"index-module_two-line-ellipsis__mdzn0"};
+    var styles$6 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__yyHVb"};
 
-    const MultiCommodity$1 = (_a) => {
-        var _b, _c;
-        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 CommodityDiro$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
         const { sxpParameter } = useSxpDataSource();
-        const { ctaEvent, setPopupDetailData } = useSxpDataSource();
-        const { popup } = useEditor();
-        const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
-        const { jumpToWeb } = useEventReport();
-        const handleClick = lodash.throttle((item) => {
-            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
-                eventSubject: 'clickCta',
-                eventDescription: 'User clicked the CTA'
-            }, recData, item, index);
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
-            if (isExternalLink) {
-                if (item === null || item === void 0 ? void 0 : item.link) {
-                    jumpToWeb(recData, item, item.bindCta, index);
-                    window.location.href = window.getJointUtmLink(item.link);
-                }
-            }
-            else {
-                onClick === null || onClick === void 0 ? void 0 : onClick();
-            }
-        }, 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, _g, _h;
-            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ 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(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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-                React.createElement("div", { className: css.css({
-                        color: '#fff',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        overflow: 'hidden'
-                    }) },
-                    React.createElement("div", { className: styles$1['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
-                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
-                        } }),
-                    React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
-                        } }))))));
-        })));
-    };
-    var MultiCommodityComponent = React.memo(MultiCommodity$1);
-
-    /*
-     * @Author: binruan@chatlabs.com
+        const product = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
+        const src = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { className: css.css({
+                    color: '#fff',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("div", { className: styles$6['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                        __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    } }),
+                React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_k = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _k === void 0 ? void 0 : _k.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                        __html: setFontForText((_m = (_l = product === null || product === void 0 ? void 0 : product.bindCta) === null || _l === void 0 ? void 0 : _l.enTitle) !== null && _m !== void 0 ? _m : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    } }))));
+    };
+    var CommodityDiroComponent = React.memo(CommodityDiro$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 16:43:35
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodity\material.tsx
+     * @LastEditTime: 2024-03-29 16:07:28
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\CommodityDiro\material.tsx
      *
      */
-    const MultiCommodity = createMaterial(MultiCommodityComponent, {
-        displayName: '推荐多商品-透明底',
+    const CommodityDiro = createMaterial(CommodityDiroComponent, {
+        displayName: '推荐单商品-白底圆角按钮',
         icon: '',
         category: 'template',
-        type: 'MultiCommodity',
+        type: 'CommodityDiro',
         related: {
-            interactionRender: interactionRender$1,
-            settingRender: settingRender$2,
+            interactionRender: interactionRender$6,
+            settingRender: settingRender$4,
             bindableProps: []
         },
         defaulSetting: {
@@ -10641,16 +10974,16 @@ Made in Italy` })));
                     },
                     title: {
                         fontSize: 12,
-                        color: '#fff',
+                        color: '#000',
                         textAlign: 'left'
                     },
                     ctaTitle: {
                         fontSize: 10,
                         color: '#fff',
                         textAlign: 'center',
-                        width: 130,
+                        width: 80,
                         height: 20,
-                        backgroundColor: 'rgba(0,0,0,.5)'
+                        backgroundColor: 'rgba(0,0,0,1)'
                     }
                 }
             },
@@ -10659,16 +10992,16 @@ Made in Italy` })));
                 width: 236,
                 height: 74,
                 borderRadius: 3,
-                backgroundColor: 'rgba(0,0,0,.3)',
+                backgroundColor: '#fff',
                 marginBottom: 8
             }
         },
         w: 100,
         h: 40,
-        sort: 3
+        sort: 2
     });
 
-    var interactionRender = [
+    var interactionRender$5 = [
         {
             title: '点击事件',
             child: [
@@ -10680,9 +11013,105 @@ Made in Italy` })));
         }
     ];
 
-    var styles = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__fselR"};
+    var styles$5 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
 
-    const MultiCommodityDiroNew$1 = (_a) => {
+    const CommodityDiroNew$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var { content, style, bgImg, recData, bottom_image, ctaTempStyles, isExternalLink, translateY = 0, index } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "bottom_image", "ctaTempStyles", "isExternalLink", "translateY", "index"]);
+        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 = (_f = (_e = (_c = product === null || product === void 0 ? void 0 : product.cover) !== null && _c !== void 0 ? _c : (_d = product === null || product === void 0 ? void 0 : product.homePage) === null || _d === void 0 ? void 0 : _d[0]) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _f !== void 0 ? _f : bottom_image;
+        return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({}, style)), style: { display: 'flex' }, index: index }, props),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_h = (_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindProduct) !== null && _h !== void 0 ? _h : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { className: css.css({
+                    color: '#fff',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    width: '100%',
+                    overflow: 'hidden'
+                }) },
+                React.createElement("div", { className: styles$5['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                        __html: setFontForText((_j = product === null || product === void 0 ? void 0 : product.title) !== null && _j !== void 0 ? _j : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                    } }),
+                React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                        __html: setFontForText((_l = (_k = product === null || product === void 0 ? void 0 : product.bindCta) === null || _k === void 0 ? void 0 : _k.enTitle) !== null && _l !== void 0 ? _l : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    } }))));
+    };
+    var CommodityDiroNewComponent = React.memo(CommodityDiroNew$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-04-09 11:54:27
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\CommodityDiroNew\material.tsx
+     *
+     */
+    const CommodityDiroNew = createMaterial(CommodityDiroNewComponent, {
+        displayName: '推荐单商品-白底下划线按钮',
+        icon: '',
+        category: 'template',
+        type: 'CommodityDiroNew',
+        related: {
+            interactionRender: interactionRender$5,
+            bindableProps: [],
+            settingRender: settingRender$4
+        },
+        defaulSetting: {
+            props: {
+                ctaTempStyles: {
+                    img: {
+                        borderRadius: 8,
+                        width: 78,
+                        height: 78,
+                        marginRight: 16
+                    },
+                    title: {
+                        fontSize: 13,
+                        color: '#000',
+                        textAlign: 'left'
+                    },
+                    ctaTitle: {
+                        textDecoration: 'underline',
+                        fontSize: 14,
+                        fontWeight: 'bold',
+                        color: '#000',
+                        textAlign: 'left',
+                        width: 150,
+                        height: 20
+                    }
+                }
+            },
+            style: {
+                borderRadius: 4,
+                width: 260,
+                height: 86,
+                padding: 4,
+                backgroundColor: 'rgba(255,255,255,0.75)',
+                marginBottom: 8
+            }
+        },
+        w: 100,
+        h: 40,
+        sort: 2
+    });
+
+    var interactionRender$4 = [
+        {
+            title: '点击事件',
+            child: [
+                {
+                    type: 'link',
+                    name: 'onClick'
+                }
+            ]
+        }
+    ];
+
+    var styles$4 = {"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, translateY = 0 } = _a, props = __rest(_a, ["content", "style", "bgImg", "recData", "onClick", "bottom_image", "ctaTempStyles", "isExternalLink", "index", "translateY"]);
         const { ctaEvent, setPopupDetailData, sxpParameter } = useSxpDataSource();
@@ -10705,55 +11134,54 @@ Made in Italy` })));
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
         }, 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, _g;
-            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ 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) }),
+        return (React.createElement(Scroll$1, { isPadding: !!recData }, products === null || products === void 0 ? void 0 : products.map((item, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
                 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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
                 React.createElement("div", { className: css.css({
-                        color: '#fff',
+                        color: '#000',
                         display: 'flex',
                         flexDirection: 'column',
-                        justifyContent: 'center',
+                        justifyContent: 'space-between',
                         width: '100%',
-                        overflow: 'hidden',
-                        lineHeight: '20px'
+                        overflow: 'hidden'
                     }) },
-                    React.createElement("div", { className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                    React.createElement("div", { className: styles$4['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                             __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
                         } }),
-                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
-                            __html: setFontForText((_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', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', borderRadius: '25px', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
                         } }))))));
         })));
     };
-    var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
+    var MultiCommodityDiroComponent = React.memo(MultiCommodityDiro$1);
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-21 16:44:00
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiroNew\material.tsx
+     * @LastEditTime: 2024-03-29 16:27:22
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiro\material.tsx
      *
      */
-    const MultiCommodityDiroNew = createMaterial(MultiCommodityDiroNewComponent, {
-        displayName: '推荐多商品-白底下划线按钮',
+    const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
+        displayName: '推荐多商品-白底圆角按钮',
         icon: '',
         category: 'template',
-        type: 'MultiCommodityDiroNew',
+        type: 'MultiCommodityDiro',
         related: {
-            interactionRender,
+            interactionRender: interactionRender$4,
             bindableProps: [],
-            settingRender: settingRender$2
+            settingRender: settingRender$4
         },
         defaulSetting: {
             props: {
                 ctaTempStyles: {
                     img: {
-                        borderRadius: 8,
-                        width: 78,
-                        height: 78,
-                        marginRight: 16
+                        borderRadius: 3,
+                        width: 60,
+                        height: 60,
+                        marginRight: 8
                     },
                     title: {
                         fontSize: 12,
@@ -10761,22 +11189,21 @@ Made in Italy` })));
                         textAlign: 'left'
                     },
                     ctaTitle: {
-                        textDecoration: 'underline',
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        color: '#000',
-                        textAlign: 'left',
-                        width: 150,
-                        height: 20
+                        fontSize: 10,
+                        color: '#fff',
+                        textAlign: 'center',
+                        width: 80,
+                        height: 20,
+                        backgroundColor: 'rgba(0,0,0,1)'
                     }
                 }
             },
             style: {
-                borderRadius: 4,
-                width: 260,
-                height: 86,
-                padding: 4,
-                backgroundColor: 'rgba(255,255,255,0.75)',
+                padding: 7,
+                width: 236,
+                height: 74,
+                borderRadius: 3,
+                backgroundColor: '#fff',
                 marginBottom: 8
             }
         },
@@ -10785,42 +11212,276 @@ Made in Italy` })));
         sort: 4
     });
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-04-07 14:07:12
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-27 09:49:19
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
-     *
-     */
-    var settingRender$1 = [
+    var interactionRender$3 = [
         {
-            title: 'Banner',
+            title: '点击事件',
             child: [
                 {
-                    type: 'Switch',
-                    label: 'Banner图开关',
-                    name: ['props', 'showBanner']
+                    type: 'link',
+                    name: 'onClick'
                 }
             ]
-        },
-        {
-            title: '卡片样式',
-            child: [
-                {
-                    type: 'Number',
-                    label: '上下边距',
-                    name: ['props', 'space'],
-                    addonAfter: 'px'
-                },
-                {
-                    type: 'Switch',
-                    label: '固定宽高',
-                    name: ['props', 'openFixedSize'],
-                    initialValue: true
+        }
+    ];
+
+    var styles$3 = {"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, 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();
+        const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+        const { jumpToWeb } = useEventReport();
+        const handleClick = lodash.throttle((item) => {
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, recData, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index }));
+            if (isExternalLink) {
+                if (item === null || item === void 0 ? void 0 : item.link) {
+                    jumpToWeb(recData, item, item.bindCta, index);
+                    window.location.href = window.getJointUtmLink(item.link);
                 }
-            ]
-        },
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        }, 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, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
+                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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+                React.createElement("div", { className: css.css({
+                        color: '#fff',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        overflow: 'hidden'
+                    }) },
+                    React.createElement("div", { className: styles$3['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                        } }),
+                    React.createElement("div", { className: css.css(Object.assign({ padding: '0 7px', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', lineHeight: ((_f = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _f === void 0 ? void 0 : _f.height) + 'px' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_h = (_g = item === null || item === void 0 ? void 0 : item.bindCta) === null || _g === void 0 ? void 0 : _g.enTitle) !== null && _h !== void 0 ? _h : 'Shop Now', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                        } }))))));
+        })));
+    };
+    var MultiCommodityComponent = React.memo(MultiCommodity$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-03-29 16:43:35
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodity\material.tsx
+     *
+     */
+    const MultiCommodity = createMaterial(MultiCommodityComponent, {
+        displayName: '推荐多商品-透明底',
+        icon: '',
+        category: 'template',
+        type: 'MultiCommodity',
+        related: {
+            interactionRender: interactionRender$3,
+            settingRender: settingRender$4,
+            bindableProps: []
+        },
+        defaulSetting: {
+            props: {
+                ctaTempStyles: {
+                    img: {
+                        borderRadius: 3,
+                        width: 60,
+                        height: 60,
+                        marginRight: 8
+                    },
+                    title: {
+                        fontSize: 12,
+                        color: '#fff',
+                        textAlign: 'left'
+                    },
+                    ctaTitle: {
+                        fontSize: 10,
+                        color: '#fff',
+                        textAlign: 'center',
+                        width: 130,
+                        height: 20,
+                        backgroundColor: 'rgba(0,0,0,.5)'
+                    }
+                }
+            },
+            style: {
+                padding: 7,
+                width: 236,
+                height: 74,
+                borderRadius: 3,
+                backgroundColor: 'rgba(0,0,0,.3)',
+                marginBottom: 8
+            }
+        },
+        w: 100,
+        h: 40,
+        sort: 3
+    });
+
+    var interactionRender$2 = [
+        {
+            title: '点击事件',
+            child: [
+                {
+                    type: 'link',
+                    name: 'onClick'
+                }
+            ]
+        }
+    ];
+
+    var styles$2 = {"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, 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();
+        const [products, setProducts] = React.useState((_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) !== null && _c !== void 0 ? _c : [1, 2]);
+        const handleClick = lodash.throttle((item, multiCheckIndex) => {
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, recData, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { video: Object.assign(Object.assign({}, recData === null || recData === void 0 ? void 0 : recData.video), { bindProduct: item }), index,
+                multiCheckIndex }));
+            if (isExternalLink) {
+                if (item === null || item === void 0 ? void 0 : item.link) {
+                    jumpToWeb(recData, item, item.bindCta, index);
+                    window.location.href = window.getJointUtmLink(item.link);
+                }
+            }
+            else {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        }, 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, index) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return (React.createElement(React.Fragment, null, recData && !(item === null || item === void 0 ? void 0 : item.bindCta) ? null : (React.createElement(SwiperSlide, Object.assign({ key: index, className: css.css(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item, 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, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+                React.createElement("div", { className: css.css({
+                        color: '#fff',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        width: '100%',
+                        overflow: 'hidden',
+                        lineHeight: '20px'
+                    }) },
+                    React.createElement("div", { className: styles$2['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                            __html: setFontForText((_e = item === null || item === void 0 ? void 0 : item.title) !== null && _e !== void 0 ? _e : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                        } }),
+                    React.createElement("div", { className: css.css(Object.assign({ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)), dangerouslySetInnerHTML: {
+                            __html: setFontForText((_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', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                        } }))))));
+        })));
+    };
+    var MultiCommodityDiroNewComponent = React.memo(MultiCommodityDiroNew$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-05-21 16:44:00
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\template\MultiCommodityDiroNew\material.tsx
+     *
+     */
+    const MultiCommodityDiroNew = createMaterial(MultiCommodityDiroNewComponent, {
+        displayName: '推荐多商品-白底下划线按钮',
+        icon: '',
+        category: 'template',
+        type: 'MultiCommodityDiroNew',
+        related: {
+            interactionRender: interactionRender$2,
+            bindableProps: [],
+            settingRender: settingRender$4
+        },
+        defaulSetting: {
+            props: {
+                ctaTempStyles: {
+                    img: {
+                        borderRadius: 8,
+                        width: 78,
+                        height: 78,
+                        marginRight: 16
+                    },
+                    title: {
+                        fontSize: 12,
+                        color: '#000',
+                        textAlign: 'left'
+                    },
+                    ctaTitle: {
+                        textDecoration: 'underline',
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                        color: '#000',
+                        textAlign: 'left',
+                        width: 150,
+                        height: 20
+                    }
+                }
+            },
+            style: {
+                borderRadius: 4,
+                width: 260,
+                height: 86,
+                padding: 4,
+                backgroundColor: 'rgba(255,255,255,0.75)',
+                marginBottom: 8
+            }
+        },
+        w: 100,
+        h: 40,
+        sort: 4
+    });
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-04-07 14:07:12
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-27 09:49:19
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
+     *
+     */
+    var settingRender$3 = [
+        {
+            title: 'Banner',
+            child: [
+                {
+                    type: 'Switch',
+                    label: 'Banner图开关',
+                    name: ['props', 'showBanner']
+                }
+            ]
+        },
+        {
+            title: '卡片样式',
+            child: [
+                {
+                    type: 'Number',
+                    label: '上下边距',
+                    name: ['props', 'space'],
+                    addonAfter: 'px'
+                },
+                {
+                    type: 'Switch',
+                    label: '固定宽高',
+                    name: ['props', 'openFixedSize'],
+                    initialValue: true
+                }
+            ]
+        },
         {
             title: '文本设置',
             child: [
@@ -11010,7 +11671,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-04 18:34:18
+     * @LastEditTime: 2024-06-27 10:19:28
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Navbar.tsx
      *
      */
@@ -11019,7 +11680,7 @@ Made in Italy` })));
         const { waterFallData, setOpenHashtag } = useSxpDataSource();
         return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
             React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
-            React.createElement("div", { className: 'clc-sxp-nav-title', style: Object.assign(Object.assign({}, textStyle), { paddingLeft: (textStyle === null || textStyle === void 0 ? void 0 : textStyle.textAlign) === 'left' ? '35px' : 0 }), dangerouslySetInnerHTML: {
+            React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle, dangerouslySetInnerHTML: {
                     __html: setFontForText(`#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`, textStyle)
                 } })));
     };
@@ -12614,7 +13275,7 @@ Made in Italy` })));
             var _a, _b;
             if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
                 reportTagsView();
-                window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+                window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
             }
         };
         return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -12849,7 +13510,7 @@ Made in Italy` })));
             var _a, _b;
             if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
                 reportTagsView();
-                window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+                window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
             }
         };
         return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
@@ -13002,7 +13663,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-04 18:38:10
+     * @LastEditTime: 2024-04-30 10:13:13
      * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
      *
      */
@@ -13012,7 +13673,7 @@ Made in Italy` })));
         category: 'base',
         type: 'HashTag',
         related: {
-            settingRender: settingRender$1,
+            settingRender: settingRender$3,
             bindableProps: []
         },
         defaulSetting: {
@@ -13022,8 +13683,7 @@ Made in Italy` })));
                 textStyles: {
                     hashTagTitle: {
                         fontSize: 16,
-                        color: '#000',
-                        textAlign: 'center'
+                        color: '#000'
                     },
                     hashTagDesc: {
                         fontSize: 12,
@@ -13046,106 +13706,807 @@ Made in Italy` })));
                         color: '#000'
                     }
                 },
-                buttonStyle: {
-                    backgroundColor: '#000',
-                    fontSize: 12,
-                    height: 52,
-                    fontWeight: 'bold',
-                    textAlign: 'center',
-                    color: '#fff',
-                    borderRadius: 25
+                buttonStyle: {
+                    backgroundColor: '#000',
+                    fontSize: 12,
+                    height: 52,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    color: '#fff',
+                    borderRadius: 25
+                },
+                buttonBgStyle: {
+                    backgroundColor: '#fff',
+                    height: 52,
+                    paddingTop: 20,
+                    paddingLeft: 20,
+                    paddingRight: 20,
+                    paddingBottom: 20
+                }
+            }
+        },
+        w: 100,
+        h: 40,
+        sort: 2
+    });
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-06-13 10:08:32
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-13 17:42:50
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\settingRender.tsx
+     *
+     */
+    var settingRender$2 = [
+        {
+            title: '协议详情',
+            child: [
+                {
+                    type: 'Switch',
+                    label: '必须同意用户协议',
+                    name: ['props', 'privacy_necessity'],
+                    extra: '当新用户进入页面时，会出现用户协议弹窗，用户需要先同意协议后才能访问内容。'
+                },
+                {
+                    type: 'Text',
+                    label: '弹窗标题',
+                    name: ['props', 'privacy_title']
+                },
+                {
+                    type: 'TextArea',
+                    label: '用户协议弹窗内容',
+                    name: ['props', 'privacy_context']
+                },
+                {
+                    type: 'Group',
+                    label: '隐私政策',
+                    child: [
+                        {
+                            type: 'Text',
+                            name: ['props', 'privacy_policy_title']
+                        },
+                        {
+                            type: 'Text',
+                            name: ['props', 'privacy_policy_url'],
+                            addonBefore: 'https://'
+                        }
+                    ],
+                    extra: '当用户点击更多信息按钮时，将会跳转至设置的链接查看政策内容'
+                }
+            ]
+        }
+    ];
+
+    const Consent$1 = (props) => {
+        return React.createElement(Consent$1, Object.assign({}, props));
+    };
+    var ConsentComponent = React.memo(Consent$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-03 15:43:24
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
+     *
+     */
+    const Consent = createMaterial(ConsentComponent, {
+        displayName: 'Consent',
+        icon: '',
+        category: 'base',
+        type: 'Consent',
+        related: {
+            settingRender: settingRender$2
+        },
+        defaulSetting: {
+            props: {},
+            style: {}
+        },
+        w: 100,
+        h: 40,
+        sort: 1
+    });
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-02 14:51:32
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-05 19:09:41
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\settingRender.tsx
+     *
+     */
+    var settingRender$1 = [
+        {
+            title: '主题样式',
+            child: [
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['style', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['style', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['style', 'backgroundColor']
+                },
+                {
+                    type: 'TextMargin',
+                    name: ['style'],
+                    label: '上下边距',
+                    direction: 'vertical'
+                },
+                {
+                    type: 'TextPadding',
+                    name: ['style'],
+                    label: '内边距',
+                    direction: 'horizontal'
+                }
+            ]
+        },
+        {
+            title: 'CTA标题',
+            child: [
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                            bottomText: '中文字体'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                        },
+                        {
+                            type: 'Number',
+                            addonAfter: 'px',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                        }
+                    ]
+                },
+                {
+                    label: '样式',
+                    type: 'TextStyle',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
+                },
+                {
+                    label: '对齐',
+                    type: 'TextAlign',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
+                }
+            ]
+        }
+    ];
+
+    var styles$1 = {"animated-button":"index-module_animated-button__lqTbg","gradientCover":"index-module_gradientCover__5iUag"};
+
+    const AniLink$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var { style, recData, ctaTempStyles, index, event, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "onClick", "isExternalLink"]);
+        const { ctaEvent, setPopupDetailData } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
+        const ref = React.useRef(null);
+        const isOnScreen = useOnScreen(ref);
+        const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
+        const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
+        const handleTo = () => {
+            var _a, _b, _c;
+            const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, recData, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
+            if (isExternalLink) {
+                jumpToWeb(recData, product, cta, index);
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        };
+        const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
+        const aniStyle = React.useMemo(() => {
+            var _a, _b;
+            const ani = event === null || event === void 0 ? void 0 : event.animation;
+            if (ani) {
+                const { delay, duration, backgroundColor } = ani;
+                return {
+                    ':after': {
+                        animationDelay: `${(_a = delay / 1000) !== null && _a !== void 0 ? _a : 0}s`,
+                        animationDuration: `${(_b = duration / 1000) !== null && _b !== void 0 ? _b : 0}s`,
+                        backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent'}`
+                    }
+                };
+            }
+        }, [event === null || event === void 0 ? void 0 : event.animation]);
+        React.useEffect(() => {
+            if (isOnScreen && (ref === null || ref === void 0 ? void 0 : ref.current)) {
+                ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                    eventSubject: 'ctaExposure',
+                    eventDescription: 'The cta was shown to the user'
+                }, recData, product, index);
+            }
+        }, [isOnScreen]);
+        return (React.createElement("div", Object.assign({ ref: ref, style: Object.assign(Object.assign({}, style), { display: 'flex', alignItems: 'center' }) }, props, { className: `${styles$1['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
+            React.createElement("div", { className: 'one-line-ellipsis', style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle, dangerouslySetInnerHTML: {
+                    __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } })));
+    };
+    var AniLinkComponent = React.memo(AniLink$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-05 14:08:41
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-09 14:34:49
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\interactionRender.tsx
+     *
+     */
+    var interactionRender$1 = [
+        {
+            title: '点击事件',
+            child: [
+                {
+                    type: 'link',
+                    name: 'onClick'
+                }
+            ]
+        },
+        {
+            title: '动画效果',
+            child: [
+                {
+                    type: 'Color',
+                    name: ['animation', 'backgroundColor'],
+                    label: '动画颜色'
+                },
+                {
+                    type: 'Select',
+                    name: ['animation', 'name'],
+                    label: '动画',
+                    options: [
+                        {
+                            label: '由左向右/中间扩散',
+                            value: 1
+                        }
+                    ],
+                    initialValue: 1,
+                    fieldProps: {
+                        style: {
+                            width: '100%'
+                        }
+                    }
+                },
+                {
+                    type: 'Number',
+                    label: '动画启动时间',
+                    name: ['animation', 'delay'],
+                    addonAfter: 'ms'
+                },
+                {
+                    type: 'Number',
+                    label: '动画持续时间',
+                    name: ['animation', 'duration'],
+                    addonAfter: 'ms'
+                }
+            ]
+        }
+    ];
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-07-28 18:29:57
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-05 19:27:54
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLink\material.tsx
+     *
+     */
+    const AniLink = createMaterial(AniLinkComponent, {
+        displayName: '纯色动效CTA',
+        icon: '',
+        category: 'cta',
+        type: 'AniLink',
+        related: {
+            settingRender: settingRender$1,
+            bindableProps: [],
+            interactionRender: interactionRender$1
+        },
+        defaulSetting: {
+            props: {
+                ctaTempStyles: {
+                    ctaTitle: {
+                        fontSize: 15,
+                        color: '#fff',
+                        textAlign: 'left'
+                    }
+                }
+            },
+            style: {
+                width: 236,
+                height: 44,
+                borderRadius: 3,
+                backgroundColor: 'rgba(0,0,0,.3)',
+                paddingLeft: 7,
+                paddingRight: 7
+            }
+        },
+        w: 100,
+        h: 40,
+        sort: 1
+    });
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-03-26 16:50:25
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-08 11:01:24
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\settingRender.tsx
+     *
+     */
+    var settingRender = [
+        {
+            title: '主题样式',
+            child: [
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['style', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['style', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['style', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['style', 'backgroundColor']
+                },
+                {
+                    label: '外边距',
+                    type: 'Number',
+                    name: ['style', 'margin'],
+                    addonAfter: 'px'
+                },
+                {
+                    label: '内边距',
+                    type: 'Number',
+                    name: ['style', 'padding'],
+                    addonAfter: 'px'
+                }
+            ]
+        },
+        {
+            title: '商品图片',
+            child: [
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'img', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'img', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'img', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'Number',
+                    label: '与下边边距',
+                    addonAfter: 'px',
+                    name: ['props', 'ctaTempStyles', 'img', 'marginBottom']
+                },
+                {
+                    label: '居中垂直偏移',
+                    type: 'Number',
+                    name: ['props', 'translateY'],
+                    min: -1000,
+                    addonAfter: '%',
+                    initialValue: 0
+                }
+            ]
+        },
+        {
+            title: '商品标题文本',
+            type: 'commodityTitle',
+            child: [
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-cn'],
+                            bottomText: '中文字体'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'title', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'ctaTempStyles', 'title', 'color']
+                        },
+                        {
+                            type: 'Number',
+                            addonAfter: 'px',
+                            name: ['props', 'ctaTempStyles', 'title', 'fontSize']
+                        }
+                    ]
+                },
+                {
+                    label: '样式',
+                    type: 'TextStyle',
+                    name: ['props', 'ctaTempStyles', 'title']
                 },
-                buttonBgStyle: {
-                    backgroundColor: '#fff',
-                    height: 52,
-                    paddingTop: 20,
-                    paddingLeft: 20,
-                    paddingRight: 20,
-                    paddingBottom: 20
+                {
+                    label: '对齐',
+                    type: 'TextAlign',
+                    name: ['props', 'ctaTempStyles', 'title']
+                },
+                {
+                    label: '间距',
+                    type: 'TextSpace',
+                    name: ['props', 'ctaTempStyles', 'title']
                 }
-            }
+            ]
         },
-        w: 100,
-        h: 40,
-        sort: 2
-    });
-
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-06-13 10:08:32
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-13 17:42:50
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\settingRender.tsx
-     *
-     */
-    var settingRender = [
         {
-            title: '协议详情',
+            title: 'CTA标题',
             child: [
                 {
-                    type: 'Switch',
-                    label: '必须同意用户协议',
-                    name: ['props', 'privacy_necessity'],
-                    extra: '当新用户进入页面时，会出现用户协议弹窗，用户需要先同意协议后才能访问内容。'
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'width'],
+                            addonAfter: 'W'
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
                 },
                 {
-                    type: 'Text',
-                    label: '弹窗标题',
-                    name: ['props', 'privacy_title']
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
                 },
                 {
-                    type: 'TextArea',
-                    label: '用户协议弹窗内容',
-                    name: ['props', 'privacy_context']
+                    type: 'TextSpace',
+                    name: ['props', 'ctaTempStyles', 'title']
+                },
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle', 'backgroundColor']
                 },
                 {
                     type: 'Group',
-                    label: '隐私政策',
+                    label: '字体',
                     child: [
                         {
-                            type: 'Text',
-                            name: ['props', 'privacy_policy_title']
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-cn'],
+                            bottomText: '中文字体'
                         },
                         {
-                            type: 'Text',
-                            name: ['props', 'privacy_policy_url'],
-                            addonBefore: 'https://'
+                            type: 'Select',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontFamily-en'],
+                            bottomText: '英文/其他字体'
                         }
-                    ],
-                    extra: '当用户点击更多信息按钮时，将会跳转至设置的链接查看政策内容'
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'color']
+                        },
+                        {
+                            type: 'Number',
+                            addonAfter: 'px',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'fontSize']
+                        }
+                    ]
+                },
+                {
+                    label: '样式',
+                    type: 'TextStyle',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
+                },
+                {
+                    label: '对齐',
+                    type: 'TextAlign',
+                    name: ['props', 'ctaTempStyles', 'ctaTitle']
                 }
             ]
         }
     ];
 
-    const Consent$1 = (props) => {
-        return React.createElement(Consent$1, Object.assign({}, props));
+    var styles = {"animated-button":"index-module_animated-button__qI1lz","gradientCover":"index-module_gradientCover__nD6d9","tow-line-ellipsis":"index-module_tow-line-ellipsis__GKFXr","modal-icon-wrapper":"index-module_modal-icon-wrapper__tu3BY","modal-icon-wrapper-img":"index-module_modal-icon-wrapper-img__4b7qZ"};
+
+    const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
+    const AniLinkPopup$1 = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+        var { style, recData, ctaTempStyles, index, event, bottom_image, translateY, isTel, onClick, isExternalLink = false } = _a, props = __rest(_a, ["style", "recData", "ctaTempStyles", "index", "event", "bottom_image", "translateY", "isTel", "onClick", "isExternalLink"]);
+        const { sxpParameter, globalConfig, ctaEvent, setPopupDetailData } = useSxpDataSource();
+        const { jumpToWeb } = useEventReport();
+        const [visible, setVisible] = React.useState(true);
+        const cta = ((_d = (_c = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindProducts) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.bindCta) || ((_f = (_e = recData === null || recData === void 0 ? void 0 : recData.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta) || ((_g = recData === null || recData === void 0 ? void 0 : recData.video) === null || _g === void 0 ? void 0 : _g.bindCta);
+        const product = ((_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.bindProducts) === null || _j === void 0 ? void 0 : _j[0]) || ((_k = recData === null || recData === void 0 ? void 0 : recData.video) === null || _k === void 0 ? void 0 : _k.bindProduct);
+        const handleTo = () => {
+            var _a, _b, _c;
+            const item = ((_b = (_a = recData === null || recData === void 0 ? void 0 : recData.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b[0]) || ((_c = recData === null || recData === void 0 ? void 0 : recData.video) === null || _c === void 0 ? void 0 : _c.bindProduct) || (recData === null || recData === void 0 ? void 0 : recData.video);
+            ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent({
+                eventSubject: 'clickCta',
+                eventDescription: 'User clicked the CTA'
+            }, recData, item, index);
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(Object.assign(Object.assign({}, recData), { index }));
+            if (isExternalLink) {
+                jumpToWeb(recData, product, cta, index);
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        };
+        const title = (cta === null || cta === void 0 ? void 0 : cta.title) || '查看详情 >';
+        const aniStyle = React.useMemo(() => {
+            var _a, _b;
+            const ani = event === null || event === void 0 ? void 0 : event.animation;
+            if (ani) {
+                const { delay, duration, backgroundColor } = ani;
+                return {
+                    ':after': {
+                        animationDelay: `${(_a = delay / 1000) !== null && _a !== void 0 ? _a : 0}s`,
+                        animationDuration: `${(_b = duration / 1000) !== null && _b !== void 0 ? _b : 0}s`,
+                        backgroundColor: `${backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : 'transparent'}`
+                    }
+                };
+            }
+        }, [event === null || event === void 0 ? void 0 : event.animation]);
+        const src = (_q = (_p = (_o = (_l = product === null || product === void 0 ? void 0 : product.cover) !== null && _l !== void 0 ? _l : (_m = product === null || product === void 0 ? void 0 : product.homePage) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _p !== void 0 ? _p : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _q !== void 0 ? _q : bottom_image;
+        const onClose = (event) => {
+            event.stopPropagation();
+            setVisible(false);
+        };
+        return (React.createElement(React.Fragment, null, isTel ? (React.createElement("div", { style: {
+                height: '40px',
+                lineHeight: '40px',
+                paddingLeft: '6px'
+            } }, "Cta Title")) : (React.createElement("div", Object.assign({ style: Object.assign(Object.assign({}, style), { position: 'absolute', right: 0, bottom: 0, zIndex: 1000, display: visible ? 'block' : 'none' }) }, props, { className: `${styles['animated-button']} ${css.css(aniStyle)}`, onClick: handleTo }),
+            React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_r = style === null || style === void 0 ? void 0 : style['padding']) !== null && _r !== void 0 ? _r : 0 } },
+                React.createElement("img", { src: (_s = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _s !== void 0 ? _s : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
+            React.createElement(Img$1, { src: src, rec: recData, item: (_x = (_v = (_u = (_t = recData === null || recData === void 0 ? void 0 : recData.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u[0]) !== null && _v !== void 0 ? _v : (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.bindProduct) !== null && _x !== void 0 ? _x : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
+            React.createElement("div", { hidden: !!recData && !(product === null || product === void 0 ? void 0 : product.title), className: styles['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+                    __html: setFontForText((_y = product === null || product === void 0 ? void 0 : product.title) !== null && _y !== void 0 ? _y : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
+                } }),
+            React.createElement("div", { className: 'one-line-ellipsis', style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_z = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _z === void 0 ? void 0 : _z.height) + 'px' }), dangerouslySetInnerHTML: {
+                    __html: setFontForText(title, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)
+                } })))));
     };
-    var ConsentComponent = React.memo(Consent$1);
+    var AniLinkPopupComponent = React.memo(AniLinkPopup$1);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-07-04 15:28:39
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-07-05 17:46:42
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\interactionRender.tsx
+     *
+     */
+    var interactionRender = [
+        {
+            title: '点击事件',
+            child: [
+                {
+                    type: 'link',
+                    name: 'onClick'
+                }
+            ]
+        },
+        {
+            title: '动画效果',
+            child: [
+                {
+                    type: 'Color',
+                    name: ['animation', 'backgroundColor'],
+                    label: '动画颜色'
+                },
+                {
+                    type: 'Select',
+                    name: ['animation', 'name'],
+                    label: '动画',
+                    options: [
+                        {
+                            label: '由左向右/中间扩散',
+                            value: 1
+                        }
+                    ],
+                    initialValue: 1,
+                    fieldProps: {
+                        style: {
+                            width: '100%'
+                        }
+                    }
+                },
+                {
+                    type: 'Number',
+                    label: '动画启动时间',
+                    name: ['animation', 'delay'],
+                    addonAfter: 'ms'
+                },
+                {
+                    type: 'Number',
+                    label: '动画持续时间',
+                    name: ['animation', 'duration'],
+                    addonAfter: 'ms'
+                }
+            ]
+        }
+    ];
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-13 17:32:17
-     * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
+     * @LastEditTime: 2024-07-08 14:36:05
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\cta\AniLinkPopup\material.tsx
      *
      */
-    const Consent = createMaterial(ConsentComponent, {
-        displayName: 'Consent',
+    const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
+        displayName: '竖版弹窗CTA',
         icon: '',
-        category: 'base',
-        type: 'Consent',
+        category: 'cta',
+        type: 'AniLinkPopup',
         related: {
-            settingRender
+            settingRender: settingRender,
+            bindableProps: [],
+            interactionRender
         },
         defaulSetting: {
-            props: {},
-            style: {}
+            props: {
+                ctaTempStyles: {
+                    img: {
+                        borderRadius: 3,
+                        width: 76,
+                        height: 76,
+                        marginBottom: 10
+                    },
+                    title: {
+                        fontSize: 12,
+                        color: '#000',
+                        textAlign: 'left'
+                    },
+                    ctaTitle: {
+                        fontSize: 10,
+                        color: '#fff',
+                        textAlign: 'center',
+                        width: 76,
+                        height: 20,
+                        backgroundColor: 'rgba(0,0,0,1)'
+                    }
+                }
+            },
+            style: {
+                width: 90,
+                height: 160,
+                borderRadius: 3,
+                backgroundColor: 'rgba(255,255,255,1)',
+                padding: 7,
+                margin: 10
+            }
         },
         w: 100,
         h: 40,
-        sort: 1
+        sort: 2
     });
 
     /*
@@ -13159,6 +14520,8 @@ Made in Italy` })));
 
     var _materials_ = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        AniLink: AniLink,
+        AniLinkPopup: AniLinkPopup,
         Appoint: Appoint,
         AppointForm: AppointForm,
         Commodity: Commodity,
@@ -13166,6 +14529,7 @@ Made in Italy` })));
         CommodityDetailDiroNew: CommodityDetailDiroNew,
         CommodityDiro: CommodityDiro,
         CommodityDiroNew: CommodityDiroNew,
+        CommodityList: CommodityList,
         Consent: Consent,
         HashTag: HashTag,
         Link: Link,
@@ -13470,23 +14834,20 @@ Made in Italy` })));
             (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
             (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
             return () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-                if (!isPause)
-                    handlePause();
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 if (hls)
                     hls === null || hls === void 0 ? void 0 : hls.destroy();
                 setIsLoadFinish(false);
-                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
-                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
-                (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
-                (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
-                (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
-                (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
-                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
-                (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedmetadata);
+                (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadeddata', handLoadeddata);
+                (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('play', handleStartPlay);
+                (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('playing', handlePlaying);
+                (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('pause', handlePause);
+                (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('ended', handlePlay);
+                (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('canplay', handlePlay);
+                (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('waiting', handleWaiting);
             };
-        }, [isActive, videoId, rec, handlePause]);
+        }, [isActive, videoId, rec]);
         React.useEffect(() => {
             var _a, _b;
             if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -13632,23 +14993,23 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-11 18:19:29
+     * @LastEditTime: 2024-03-13 10:53:56
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
      *
      */
-    const FingerSwipeTip = ({ imageUrl, style, duration = 2000 }) => {
+    const FingerSwipeTip = ({ imageUrl, style }) => {
         const [show, setShow] = React.useState(true);
         useEditor();
         React.useEffect(() => {
             setTimeout(() => {
                 setShow(false);
-            }, duration);
+            }, 2000);
         }, []);
         const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
         const animationCls = React.useMemo(() => {
             return show ? 'pb-fadeIn' : 'pb-fadeOut';
         }, [show]);
-        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: Object.assign(Object.assign({}, style), { animationDuration: `${duration / 1000}s` }) },
+        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
             React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
     };
 
@@ -13752,12 +15113,11 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-09 18:47:05
+     * @LastEditTime: 2024-06-26 18:52:46
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
      *
      */
     const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
-        var _a;
         const [isShowMore, setIsShowMore] = React.useState(false);
         const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
         const handleClickTag = (data) => {
@@ -13789,8 +15149,7 @@ Made in Italy` })));
             }
             return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
         }, [isShowMore, tags]);
-        console.log(hashTagStyle, '111');
-        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
+        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
             React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
                 React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
     };
@@ -13860,14 +15219,14 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 16:11:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-18 14:36:53
+     * @LastEditTime: 2024-07-17 18:54:33
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
      *
      */
-    const RenderCard = ({ rec, index, tempMap, resolver }) => {
+    const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType }) => {
         const { schema } = useEditor();
         const renderComp = React.useMemo(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
             if (!(rec === null || rec === void 0 ? void 0 : rec.video))
                 return null;
             let cta = null;
@@ -13881,20 +15240,27 @@ Made in Italy` })));
                 cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
             }
             const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-            if ((((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDiro' && !((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct)) ||
-                (((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'Commodity' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
-                (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'CommodityDiroNew' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
-                (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodity' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
-                (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiro' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length)) ||
-                (((_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type) === 'MultiCommodityDiroNew' && !((_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v.length))) {
+            //如果includesCtaType有值，则只渲染includesCtaType包含的cta类型组件，用于在页面某处只显示某一组件
+            if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
+                return;
+            //默认不渲染category为cta类型的组件，该类型的组件只用于某一处
+            if (!includesCtaType && ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.category) === 'cta')
+                return;
+            if ((((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'CommodityDiro' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
+                (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'Commodity' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
+                (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'CommodityDiroNew' && !((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProduct)) ||
+                (((_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.type) === 'MultiCommodity' && !((_r = (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.bindProducts) === null || _r === void 0 ? void 0 : _r.length)) ||
+                (((_s = value === null || value === void 0 ? void 0 : value.item) === null || _s === void 0 ? void 0 : _s.type) === 'MultiCommodityDiro' && !((_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.bindProducts) === null || _u === void 0 ? void 0 : _u.length)) ||
+                (((_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.type) === 'MultiCommodityDiroNew' && !((_x = (_w = rec === null || rec === void 0 ? void 0 : rec.video) === null || _w === void 0 ? void 0 : _w.bindProducts) === null || _x === void 0 ? void 0 : _x.length))) {
+                //
                 return null;
             }
             if (value && resolver) {
-                const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
+                const t = resolver[(_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.type];
                 const Component = withBindDataSource(t);
-                const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
-                const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
-                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
+                const defaulSetting = (_z = t === null || t === void 0 ? void 0 : t.extend) === null || _z === void 0 ? void 0 : _z.defaulSetting;
+                const isExternalLink = ((_2 = (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.event) === null || _1 === void 0 ? void 0 : _1.onClick) === null || _2 === void 0 ? void 0 : _2.linkType) === 'externalLink';
+                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_4 = value === null || value === void 0 ? void 0 : value.item) === null || _4 === void 0 ? void 0 : _4.textStyle), bindDatas: (_6 = (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.bindDatas) !== null && _6 !== void 0 ? _6 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_7 = value === null || value === void 0 ? void 0 : value.item) === null || _7 === void 0 ? void 0 : _7.props, { event: ((_8 = value === null || value === void 0 ? void 0 : value.item) === null || _8 === void 0 ? void 0 : _8.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
             }
             else {
                 return null;
@@ -13987,7 +15353,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-09 18:11:21
+     * @LastEditTime: 2024-07-22 15:57:31
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
@@ -14000,7 +15366,7 @@ Made in Italy` })));
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.useState(false);
-        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
+        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
         const { productView } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
@@ -14048,7 +15414,7 @@ Made in Italy` })));
         React.useEffect(() => {
             const item = data === null || data === void 0 ? void 0 : data[activeIndex];
             const visibleChange = () => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                 const repCond = !openHashtag && !isShowConsent;
                 if (document.visibilityState === 'hidden') {
                     // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
@@ -14087,7 +15453,8 @@ Made in Italy` })));
                             position: activeIndex + '',
                             fromKName,
                             fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                            ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : ''
+                            ctatId: (_r = (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.bindCta) === null || _q === void 0 ? void 0 : _q.itemId) !== null && _r !== void 0 ? _r : '',
+                            traceInfo: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.traceInfo) !== null && _t !== void 0 ? _t : ''
                         }
                     });
                 }
@@ -14192,17 +15559,19 @@ Made in Italy` })));
                 };
         }, [isShowMore]);
         const renderBottom = React.useCallback((rec, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (rec === null || rec === void 0 ? void 0 : rec.video) {
                 return (React.createElement(React.Fragment, null,
                     ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
-                    React.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
+                    React.createElement("div", { className: 'clc-sxp-bottom' },
                         React.createElement(Nudge, { nudge: nudge }),
                         (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                         React.createElement("div", null,
-                            React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
-                            React.createElement(Hashtag$1, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
+                            React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
+                            React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'] }),
+                            React.createElement(Hashtag$1, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))),
+                    React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'] })));
             }
             return null;
         }, [
@@ -14255,8 +15624,36 @@ Made in Italy` })));
                 });
             }
         };
+        const handleSlideSkip = (item, position) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+            if (isPreview)
+                return;
+            const t = new Date() - curTime.current;
+            if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.openSlideSkip) && t >= ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.slideSkipStartTime) !== null && _a !== void 0 ? _a : 0) && getSlideSkipState() && item) {
+                const link = ((_c = (_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.link) || ((_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindProducts) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.link) || ((_g = item === null || item === void 0 ? void 0 : item.product) === null || _g === void 0 ? void 0 : _g.link);
+                const product = (item === null || item === void 0 ? void 0 : item.product) || ((_h = item === null || item === void 0 ? void 0 : item.video) === null || _h === void 0 ? void 0 : _h.bindProduct) || ((_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]);
+                if (link) {
+                    bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                        eventInfo: {
+                            eventSubject: 'swipeToWeb',
+                            eventDescription: 'User swiped to web',
+                            productId: (_l = product === null || product === void 0 ? void 0 : product.itemId) !== null && _l !== void 0 ? _l : '',
+                            productName: (_m = product === null || product === void 0 ? void 0 : product.title) !== null && _m !== void 0 ? _m : '',
+                            price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
+                            productCollection: (_o = product === null || product === void 0 ? void 0 : product.collection) !== null && _o !== void 0 ? _o : '',
+                            contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
+                            position: position + '',
+                            contentId: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
+                            traceInfo: (_r = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _r !== void 0 ? _r : ''
+                        }
+                    });
+                    setSlideSkipState();
+                    window.location.href = window.getJointUtmLink(link);
+                }
+            }
+        };
         const handleScrollEvent = (swiper) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             viewTime.current = new Date();
             const item = data[swiper.previousIndex];
             if (!item)
@@ -14268,20 +15665,23 @@ Made in Italy` })));
                         eventDescription: 'User scroll down',
                         contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
                         productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                        requestId: null
+                        requestId: null,
+                        traceInfo: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.traceInfo) !== null && _f !== void 0 ? _f : ''
                     }
                 });
                 //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
                 handleReportViewImageEnd(item);
+                handleSlideSkip(item, swiper.previousIndex);
             }
             else {
                 bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                     eventInfo: {
                         eventSubject: 'scrollUp',
                         eventDescription: 'User scroll up',
-                        contentId: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                        productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        requestId: null
+                        contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        productId: (_k = (_j = item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
+                        requestId: null,
+                        traceInfo: (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : ''
                     }
                 });
                 //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -14290,7 +15690,7 @@ 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)) {
+            if (!((_o = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _o === void 0 ? void 0 : _o.url) && !((_p = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _p === void 0 ? void 0 : _p.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
                 bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
                     eventName: 'ProductView'
                 });
@@ -14375,7 +15775,7 @@ Made in Italy` })));
             React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                     top: minusHeight
                 } }),
-            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
+            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
             React.createElement(Swiper, { style: {
                     marginTop: tagHeight
                 }, ref: swiperRef, onSlideChange: () => {
@@ -14400,13 +15800,13 @@ Made in Italy` })));
                         }
                     }
                 }, direction: 'vertical', height: height },
-                ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton$1, { style: {
+                React.createElement(ToggleButton$1, { style: {
                         position: 'fixed',
                         visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
                         zIndex: 999,
                         [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
                         [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted })),
+                    }, 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({}, (_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))));
     };
@@ -14775,7 +16175,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-10-31 10:56:01
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-27 18:19:31
+     * @LastEditTime: 2024-07-19 18:06:14
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
      *
      */
@@ -14828,7 +16228,7 @@ Made in Italy` })));
                     const isExternalLink = ((_d = (_c = (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.event) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
                     const isPopup = ((_g = (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.event) === null || _f === void 0 ? void 0 : _f.onClick) === null || _g === void 0 ? void 0 : _g.linkType) === 'popup';
                     const defaulSetting = (_h = t === null || t === void 0 ? void 0 : t.extend) === null || _h === void 0 ? void 0 : _h.defaulSetting;
-                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
+                    return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.style), { width: (_k = window.innerWidth) !== null && _k !== void 0 ? _k : '100vw' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_l = value === null || value === void 0 ? void 0 : value.item) === null || _l === void 0 ? void 0 : _l.textStyle), bindDatas: (_o = (_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.bindDatas) !== null && _o !== void 0 ? _o : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_p = value === null || value === void 0 ? void 0 : value.item) === null || _p === void 0 ? void 0 : _p.props, { event: ((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, isExternalLink: isExternalLink, isPopup: isPopup, onClose: handleClose })));
                 }
                 else {
                     return React.createElement(React.Fragment, null);