pb-sxp-ui 1.20.29 → 1.20.31

package/dist/index.js

@@ -19386,38 +19386,48 @@ const baseStyles = {
     // 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'
@@ -19619,6 +19629,8 @@ const StructurePage = (_a) => {
     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([]);
     // 视频暂停状态管理
@@ -19698,7 +19710,7 @@ const StructurePage = (_a) => {
         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'
@@ -19725,8 +19737,16 @@ const StructurePage = (_a) => {
         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;
@@ -19986,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..."));
     }
@@ -20006,14 +20059,14 @@ const StructurePage = (_a) => {
                     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")),
@@ -20024,7 +20077,8 @@ const StructurePage = (_a) => {
             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放置产品
@@ -20074,7 +20128,10 @@ const StructurePage = (_a) => {
             });
         })())),
         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 }))))));
 };