pb-sxp-ui 1.1.2 → 1.2.1

package/dist/index.cjs

@@ -427,8 +427,9 @@ const getFeSessionId = () => {
 };
 
 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)) {
@@ -444,6 +445,13 @@ const getFeUserId = () => {
     }
     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
@@ -545,7 +553,6 @@ var DataSourceType;
 (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;
@@ -627,8 +634,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         };
         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) });
         }
@@ -721,8 +729,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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 : []);
@@ -860,7 +869,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             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,
@@ -1097,7 +1107,7 @@ var index$2 = /*#__PURE__*/Object.freeze({
     EditorCore: EditorCore
 });
 
-var interactionRender$8 = [
+var interactionRender$d = [
     {
         title: '点击事件',
         child: [
@@ -1117,7 +1127,7 @@ var interactionRender$8 = [
  * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
  *
  */
-var settingRender$6 = [
+var settingRender$9 = [
     {
         type: 'Text',
         label: '组件名称',
@@ -1369,14 +1379,14 @@ function useEventReport() {
  * @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);
 
@@ -1483,9 +1493,9 @@ const AppointForm = createMaterial(AppointFormComponent, {
     category: 'popup',
     type: 'AppointForm',
     related: {
-        settingRender: settingRender$6,
+        settingRender: settingRender$9,
         bindableProps: [],
-        interactionRender: interactionRender$8
+        interactionRender: interactionRender$d
     },
     defaulSetting: {
         name: '表单',
@@ -1508,7 +1518,7 @@ const AppointForm = createMaterial(AppointFormComponent, {
     sort: 2
 });
 
-var settingRender$5 = [
+var settingRender$8 = [
     {
         title: '商品图片',
         child: [
@@ -1547,6 +1557,47 @@ var settingRender$5 = [
             }
         ]
     },
+    {
+        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: [
@@ -8554,15 +8605,24 @@ SwiperSlide.displayName = 'SwiperSlide';
  * @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');
@@ -8578,6 +8638,12 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     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);
@@ -8585,6 +8651,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
         else {
             setTimeout(() => {
                 setIsShow(false);
+                setModalTrans(MODAL_DEF_TRANS);
             }, popup === null || popup === void 0 ? void 0 : popup.duration);
         }
     }, [isOpen, popup]);
@@ -8593,14 +8660,61 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup }) => {
     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);
 
@@ -8724,14 +8838,52 @@ const FormatImage = React.forwardRef((props, ref) => {
 });
 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;
@@ -8806,31 +8958,39 @@ const CommodityDetail$1 = (_a) => {
         }
         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,
@@ -8845,19 +9005,55 @@ const CommodityDetail$1 = (_a) => {
                         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
  *
  */
@@ -8867,7 +9063,8 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
     category: 'popup',
     type: 'CommodityDetail',
     related: {
-        settingRender: settingRender$5
+        settingRender: settingRender$8,
+        interactionRender: interactionRender$c
     },
     defaulSetting: {
         props: {
@@ -8912,7 +9109,7 @@ const CommodityDetail = createMaterial(CommodityDetailComponent, {
     sort: 1
 });
 
-var interactionRender$7 = [
+var interactionRender$b = [
     {
         title: '点击事件',
         child: [
@@ -8932,7 +9129,7 @@ var interactionRender$7 = [
  * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
  *
  */
-var settingRender$4 = [
+var settingRender$7 = [
     {
         title: '',
         child: [
@@ -9102,9 +9299,9 @@ const Prompt = createMaterial(PromptComponent, {
     category: 'popup',
     type: 'Prompt',
     related: {
-        settingRender: settingRender$4,
+        settingRender: settingRender$7,
         bindableProps: [],
-        interactionRender: interactionRender$7
+        interactionRender: interactionRender$b
     },
     defaulSetting: {
         props: {
@@ -9123,11 +9320,11 @@ const Prompt = createMaterial(PromptComponent, {
  * @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: [
@@ -9166,6 +9363,47 @@ var settingRender$3 = [
             }
         ]
     },
+    {
+        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: [
@@ -9336,14 +9574,11 @@ var settingRender$3 = [
 
 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);
@@ -9391,6 +9626,56 @@ const CommodityDetailDiroNew$1 = (_a) => {
         }
     }, [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) ||
@@ -9403,8 +9688,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',
@@ -9425,7 +9716,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({
@@ -9442,6 +9733,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' },
@@ -9467,11 +9759,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
  *
  */
@@ -9481,7 +9802,8 @@ const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
     category: 'popup',
     type: 'CommodityDetailDiroNew',
     related: {
-        settingRender: settingRender$3
+        settingRender: settingRender$6,
+        interactionRender: interactionRender$a
     },
     defaulSetting: {
         props: {
@@ -9537,66 +9859,11 @@ const CommodityDetailDiroNew = createMaterial(CommodityDetailDiroNewComponent, {
  * @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: [
@@ -9606,12 +9873,12 @@ var settingRender$2 = [
                 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'
                     }
                 ]
@@ -9622,12 +9889,12 @@ var settingRender$2 = [
                 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
                     }
@@ -9637,7 +9904,7 @@ var settingRender$2 = [
                 type: 'Number',
                 label: '与右侧边距',
                 addonAfter: 'px',
-                name: ['props', 'ctaTempStyles', 'img', 'marginRight']
+                name: ['props', 'commodityPicture', 'marginRight']
             },
             {
                 label: '居中垂直偏移',
@@ -9650,72 +9917,90 @@ var settingRender$2 = [
         ]
     },
     {
-        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'
                     }
                 ]
@@ -9726,21 +10011,20 @@ var settingRender$2 = [
                 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',
@@ -9748,12 +10032,12 @@ var settingRender$2 = [
                 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: '英文/其他字体'
                     }
                 ]
@@ -9764,78 +10048,29 @@ var settingRender$2 = [
                 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
@@ -9867,7 +10102,7 @@ function useOnScreen(ref) {
  * @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
  *
  */
@@ -9888,92 +10123,106 @@ const Img = ({ src, rec, item, index, style, translateY, imgStyle }) => {
     }, [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: [
@@ -9985,104 +10234,140 @@ var interactionRender$5 = [
     }
 ];
 
-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'
                     }
                 ]
@@ -10093,34 +10378,49 @@ var linkSettingRender = [
                 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: '英文/其他字体'
                     }
                 ]
@@ -10131,124 +10431,119 @@ var linkSettingRender = [
                 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: [
@@ -10260,9 +10555,9 @@ var interactionRender$4 = [
     }
 ];
 
-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();
@@ -10278,32 +10573,32 @@ const CommodityDiro$1 = (_a) => {
                 width: '100%',
                 overflow: 'hidden'
             }) },
-            React.createElement("div", { className: styles$4['tow-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, 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: {
@@ -10316,16 +10611,16 @@ const CommodityDiro = createMaterial(CommodityDiroComponent, {
                 },
                 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)'
                 }
             }
         },
@@ -10334,16 +10629,16 @@ const CommodityDiro = createMaterial(CommodityDiroComponent, {
             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: [
@@ -10355,171 +10650,224 @@ var interactionRender$3 = [
     }
 ];
 
-var styles$3 = {"tow-line-ellipsis":"index-module_tow-line-ellipsis__I-yCC"};
-
-const CommodityDiroNew$1 = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _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: {
@@ -10530,19 +10878,25 @@ const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
                     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: {
@@ -10550,16 +10904,16 @@ const MultiCommodityDiro = createMaterial(MultiCommodityDiroComponent, {
             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: [
@@ -10571,70 +10925,49 @@ var interactionRender$1 = [
     }
 ];
 
-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: {
@@ -10648,16 +10981,16 @@ const MultiCommodity = createMaterial(MultiCommodityComponent, {
                 },
                 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)'
                 }
             }
         },
@@ -10666,16 +10999,16 @@ const MultiCommodity = createMaterial(MultiCommodityComponent, {
             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: [
@@ -10687,9 +11020,105 @@ var interactionRender = [
     }
 ];
 
-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();
@@ -10712,55 +11141,54 @@ const MultiCommodityDiroNew$1 = (_a) => {
             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,
@@ -10768,22 +11196,21 @@ const MultiCommodityDiroNew = createMaterial(MultiCommodityDiroNewComponent, {
                     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
         }
     },
@@ -10792,42 +11219,276 @@ const MultiCommodityDiroNew = createMaterial(MultiCommodityDiroNewComponent, {
     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: [
@@ -11017,7 +11678,7 @@ var settingRender$1 = [
  * @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
  *
  */
@@ -11026,7 +11687,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
     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)
             } })));
 };
@@ -12621,7 +13282,7 @@ function WaterfallList$1(_a) {
         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' } },
@@ -12856,7 +13517,7 @@ function WaterfallList(_a) {
         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' } },
@@ -13009,7 +13670,7 @@ var HashTagComponent = React.memo(HashTag$1);
  * @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
  *
  */
@@ -13019,7 +13680,7 @@ const HashTag = createMaterial(HashTagComponent, {
     category: 'base',
     type: 'HashTag',
     related: {
-        settingRender: settingRender$1,
+        settingRender: settingRender$3,
         bindableProps: []
     },
     defaulSetting: {
@@ -13029,8 +13690,7 @@ const HashTag = createMaterial(HashTagComponent, {
             textStyles: {
                 hashTagTitle: {
                     fontSize: 16,
-                    color: '#000',
-                    textAlign: 'center'
+                    color: '#000'
                 },
                 hashTagDesc: {
                     fontSize: 12,
@@ -13053,106 +13713,807 @@ const HashTag = createMaterial(HashTagComponent, {
                     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
 });
 
 /*
@@ -13166,6 +14527,8 @@ const Consent = createMaterial(ConsentComponent, {
 
 var _materials_ = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    AniLink: AniLink,
+    AniLinkPopup: AniLinkPopup,
     Appoint: Appoint,
     AppointForm: AppointForm,
     Commodity: Commodity,
@@ -13173,6 +14536,7 @@ var _materials_ = /*#__PURE__*/Object.freeze({
     CommodityDetailDiroNew: CommodityDetailDiroNew,
     CommodityDiro: CommodityDiro,
     CommodityDiroNew: CommodityDiroNew,
+    CommodityList: CommodityList,
     Consent: Consent,
     HashTag: HashTag,
     Link: Link,
@@ -13477,23 +14841,20 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         (_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)
@@ -13639,23 +15000,23 @@ var ToggleButton$1 = React.memo(ToggleButton);
  * @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' })));
 };
 
@@ -13759,12 +15120,11 @@ var PictureGroup$3 = React.memo(PictureGroup$2);
  * @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) => {
@@ -13796,8 +15156,7 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
         }
         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) } })))))));
 };
@@ -13867,14 +15226,14 @@ function withBindDataSource(Component) {
  * @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;
@@ -13888,20 +15247,27 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
             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;
@@ -13994,7 +15360,7 @@ var Tagbar$1 = React.memo(Tagbar);
  * @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
  *
  */
@@ -14007,7 +15373,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     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(() => {
@@ -14055,7 +15421,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     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') {
                 // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
@@ -14094,7 +15460,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         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 : ''
                     }
                 });
             }
@@ -14199,17 +15566,19 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             };
     }, [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;
     }, [
@@ -14262,8 +15631,36 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     };
+    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)
@@ -14275,20 +15672,23 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     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 : ''
                 }
             });
             //  如果上一个商品是图片集，需上报 浏览图片集结结束 事件
@@ -14297,7 +15697,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         // 商品浏览事件
         handleReportProductView(item);
         const curItem = data[swiper.activeIndex];
-        if (!((_j = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _j === void 0 ? void 0 : _j.url) && !((_k = curItem === null || curItem === void 0 ? void 0 : curItem.video) === null || _k === void 0 ? void 0 : _k.imgUrls) && (curItem === null || curItem === void 0 ? void 0 : curItem.product)) {
+        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'
             });
@@ -14382,7 +15782,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         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: () => {
@@ -14407,13 +15807,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 }
             }, 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))));
 };
@@ -14782,7 +16182,7 @@ var index$1 = React.memo(DiyPortalPreview);
  * @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
  *
  */
@@ -14835,7 +16235,7 @@ const Popup = () => {
                 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);