pb-sxp-ui 1.20.29 → 1.20.31

package/dist/pb-ui.js

@@ -19401,38 +19401,48 @@ Made in Italy` })));
         // Carousel Section
         carouselSection: {
             width: '100%',
-            position: 'relative'
+            position: 'relative',
+            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%',
-            padding: '20px',
+            padding: '10px 20px',
             backgroundColor: '#000',
             color: '#fff',
             textAlign: 'center'
@@ -19634,6 +19644,8 @@ Made in Italy` })));
         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([]);
         // 视频暂停状态管理
@@ -19713,7 +19725,7 @@ Made in Italy` })));
             const config = multiCTAConfig[configKey];
             // 定义允许的样式属性列表
             const styleKeys = [
-                'fontSize', 'color', 'textAlign', 'fontWeight',
+                'fontSize', 'color', 'textAlign', 'fontWeight', 'fontStyle', 'textDecoration',
                 'backgroundColor', 'padding', 'margin', 'borderRadius',
                 'showBorder', 'borderWidth', 'borderColor',
                 'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
@@ -19740,8 +19752,16 @@ Made in Italy` })));
             if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
                 customStyle.textAlign = styleConfig.textAlign;
             }
-            if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
-                customStyle.fontWeight = styleConfig.fontWeight;
+            if (styleConfig.fontWeight) {
+                customStyle.fontWeight = typeof styleConfig.fontWeight === 'number'
+                    ? styleConfig.fontWeight
+                    : styleConfig.fontWeight;
+            }
+            if (styleConfig.fontStyle && typeof styleConfig.fontStyle === 'string') {
+                customStyle.fontStyle = styleConfig.fontStyle;
+            }
+            if (styleConfig.textDecoration && typeof styleConfig.textDecoration === 'string') {
+                customStyle.textDecoration = styleConfig.textDecoration;
             }
             if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
                 customStyle.backgroundColor = styleConfig.backgroundColor;
@@ -20001,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..."));
         }
@@ -20021,14 +20074,14 @@ Made in Italy` })));
                         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: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-                React.createElement("div", { style: baseStyles.carouselImageContainer },
+                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")),
@@ -20039,7 +20092,8 @@ Made in Italy` })));
                 React.createElement("div", { style: baseStyles.highlightImageContainer },
                     React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
                 React.createElement("div", { style: mergeStyles(baseStyles.highlightInfoSection, 'highlightSection') },
-                    React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.title),
+                    data.highlightRevealSection.text && (React.createElement("div", { style: { marginBottom: '10px' } },
+                        React.createElement("div", { style: mergeStyles(baseStyles.highlightTitle, 'highlightSection') }, data.highlightRevealSection.text))),
                     renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
             data.productGridSection && data.productGridSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
                 // 创建一个6格的网格 (3行 x 2列)，根据position放置产品
@@ -20089,7 +20143,10 @@ Made in Italy` })));
                 });
             })())),
             data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
-                React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') }, renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
+                React.createElement("div", { style: mergeStyles(baseStyles.footerInfoSection, 'footerSection') },
+                    data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
+                        React.createElement("div", { style: mergeStyles(baseStyles.footerText, 'footerSection') }, data.footerSection.text))),
+                    renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
                 React.createElement("div", { style: baseStyles.footerImageContainer },
                     React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
     };