pb-sxp-ui 1.20.29 → 1.20.30

package/dist/index.js

@@ -19386,7 +19386,8 @@ const baseStyles = {
     // Carousel Section
     carouselSection: {
         width: '100%',
-        position: 'relative'
+        position: 'relative',
+        padding: '20px 16px'
     },
     carouselImageContainer: {
         width: '100%',
@@ -19417,7 +19418,7 @@ const baseStyles = {
     },
     carouselInfoSection: {
         width: '100%',
-        padding: '20px',
+        padding: '10px 20px',
         backgroundColor: '#000',
         color: '#fff',
         textAlign: 'center'
@@ -19613,7 +19614,7 @@ const baseStyles = {
     }
 };
 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] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -19698,7 +19699,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 +19726,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;
@@ -20005,8 +20014,8 @@ 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: 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) },
@@ -20018,13 +20027,14 @@ const StructurePage = (_a) => {
                 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放置产品
@@ -20074,7 +20084,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 }))))));
 };