pb-sxp-ui 1.20.29 → 1.20.30

package/dist/pb-ui.js

@@ -19401,7 +19401,8 @@ Made in Italy` })));
         // Carousel Section
         carouselSection: {
             width: '100%',
-            position: 'relative'
+            position: 'relative',
+            padding: '20px 16px'
         },
         carouselImageContainer: {
             width: '100%',
@@ -19432,7 +19433,7 @@ Made in Italy` })));
         },
         carouselInfoSection: {
             width: '100%',
-            padding: '20px',
+            padding: '10px 20px',
             backgroundColor: '#000',
             color: '#fff',
             textAlign: 'center'
@@ -19628,7 +19629,7 @@ Made in Italy` })));
         }
     };
     const StructurePage = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         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);
@@ -19713,7 +19714,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 +19741,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;
@@ -20020,8 +20029,8 @@ 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: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
-                React.createElement("div", { style: baseStyles.carouselImageContainer },
+            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 })) },
                     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) },
@@ -20033,13 +20042,14 @@ Made in Italy` })));
                     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') },
-                    ((_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)))),
+                    ((_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)))),
             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 })),
                 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 +20099,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 }))))));
     };