pb-sxp-ui 1.20.30 → 1.20.31

package/dist/pb-ui.js

@@ -19402,34 +19402,43 @@ Made in Italy` })));
         carouselSection: {
             width: '100%',
             position: 'relative',
-            padding: '20px 16px'
+            padding: '20px'
         },
         carouselImageContainer: {
             width: '100%',
-            height: 'auto',
+            maxWidth: '100%',
+            margin: '0 auto',
             position: 'relative',
-            overflow: 'hidden'
+            overflow: 'hidden',
+            aspectRatio: '9 / 16',
+            touchAction: 'pan-y pinch-zoom'
         },
         carouselContainer: {
             display: 'flex',
-            transition: 'transform 0.5s ease-in-out',
-            width: '100%'
+            transition: 'transform 0.3s ease-out',
+            width: '100%',
+            height: '100%'
         },
         carouselSlide: {
             minWidth: '100%',
+            height: '100%',
             position: 'relative'
         },
         carouselImage: {
             width: '100%',
-            height: 'auto',
+            height: '100%',
             display: 'block',
-            objectFit: 'cover'
+            objectFit: 'cover',
+            userSelect: 'none',
+            WebkitUserDrag: 'none'
         },
         carouselVideo: {
             width: '100%',
-            height: 'auto',
+            height: '100%',
             display: 'block',
-            objectFit: 'cover'
+            objectFit: 'cover',
+            userSelect: 'none',
+            WebkitUserDrag: 'none'
         },
         carouselInfoSection: {
             width: '100%',
@@ -19629,12 +19638,14 @@ Made in Italy` })));
         }
     };
     const StructurePage = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var { containerStyle, containerHeight = 664, containerWidth = 375, className = '', apiUrl = 'https://bff-be-dev.chatlabs.net/api/v1/recommend/list', requestBody, editorMode = false, multiCTAConfig: propMultiCTAConfig, videoPlayIcon: propVideoPlayIcon, isCmsMode = false, storyId, customHeaders } = _a, rest = __rest(_a, ["containerStyle", "containerHeight", "containerWidth", "className", "apiUrl", "requestBody", "editorMode", "multiCTAConfig", "videoPlayIcon", "isCmsMode", "storyId", "customHeaders"]);
         const [data, setData] = React.useState(null);
         const [loading, setLoading] = React.useState(true);
         const [error, setError] = React.useState(null);
         const [carouselIndex, setCarouselIndex] = React.useState(0);
+        const [touchStart, setTouchStart] = React.useState(null);
+        const [touchEnd, setTouchEnd] = React.useState(null);
         const heroVideoRef = React.useRef(null);
         const carouselVideoRefs = React.useRef([]);
         // 视频暂停状态管理
@@ -20010,6 +20021,39 @@ Made in Italy` })));
                 setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
             }
         };
+        // 触摸滑动处理
+        const handleTouchStart = (e) => {
+            setTouchEnd(null);
+            setTouchStart(e.targetTouches[0].clientX);
+        };
+        const handleTouchMove = (e) => {
+            if (!touchStart)
+                return;
+            const currentTouch = e.targetTouches[0].clientX;
+            setTouchEnd(currentTouch);
+            // 如果移动距离大于阈值，阻止默认行为（防止拖拽图片）
+            const distance = Math.abs(touchStart - currentTouch);
+            if (distance > 10) {
+                e.preventDefault();
+            }
+        };
+        const handleTouchEnd = () => {
+            if (!touchStart || !touchEnd)
+                return;
+            const distance = touchStart - touchEnd;
+            const minSwipeDistance = 50;
+            if (distance > minSwipeDistance) {
+                // 向左滑动，下一张
+                handleCarouselNext();
+            }
+            else if (distance < -minSwipeDistance) {
+                // 向右滑动，上一张
+                handleCarouselPrev();
+            }
+            // 重置状态
+            setTouchStart(null);
+            setTouchEnd(null);
+        };
         if (loading) {
             return (React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: '16px' }) }, "Loading..."));
         }
@@ -20029,21 +20073,21 @@ Made in Italy` })));
                         React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
                         isHeroVideoPaused && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_e = data.heroSection.imgUrls) === null || _e === void 0 ? void 0 : _e[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null,
                     React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_g = (_f = data.heroSection.bindProducts) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.bindCta, (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0], baseStyles.heroButton))))),
-            data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: Object.assign(Object.assign({}, mergeStyles(baseStyles.carouselSection, 'carouselSection')), (((_j = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _j === void 0 ? void 0 : _j.padding) && { padding: multiCTAConfig.carouselContainerStyle.padding })) },
-                React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselImageContainer), (((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselContainerStyle) === null || _k === void 0 ? void 0 : _k.aspectRatio) && { aspectRatio: multiCTAConfig.carouselContainerStyle.aspectRatio })) },
+            data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
+                React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                     React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
                         var _a;
                         return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
                             React.createElement("video", { ref: (el) => {
                                     carouselVideoRefs.current[index] = el;
-                                }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false }),
-                            carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage })) : null));
+                                }, src: item.url, style: baseStyles.carouselVideo, muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault() }),
+                            carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]) ? (React.createElement("img", { src: item.imgUrls[0], alt: item.text || 'Carousel', style: baseStyles.carouselImage, draggable: false, onDragStart: (e) => e.preventDefault() })) : null));
                     })),
                     React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
                     React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
                 React.createElement("div", { style: mergeStyles(baseStyles.carouselInfoSection, 'carouselSection') },
-                    ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text)),
-                    renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton)))),
+                    ((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (React.createElement("div", { style: mergeStyles(baseStyles.carouselText, 'carouselSection') }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text)),
+                    renderCTA('carouselButton', (_o = (_m = (_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.bindProducts) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.bindCta, (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0], baseStyles.carouselButton)))),
             data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
                 React.createElement("div", { style: baseStyles.highlightImageContainer },
                     React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),