pb-sxp-ui 1.20.30 → 1.20.31

package/dist/index.js

@@ -19387,34 +19387,43 @@ const baseStyles = {
     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%',
@@ -19614,12 +19623,14 @@ const baseStyles = {
     }
 };
 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] = useState(null);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [carouselIndex, setCarouselIndex] = useState(0);
+    const [touchStart, setTouchStart] = useState(null);
+    const [touchEnd, setTouchEnd] = useState(null);
     const heroVideoRef = useRef(null);
     const carouselVideoRefs = useRef([]);
     // 视频暂停状态管理
@@ -19995,6 +20006,39 @@ const StructurePage = (_a) => {
             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..."));
     }
@@ -20014,21 +20058,21 @@ const StructurePage = (_a) => {
                     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 })),