pb-sxp-ui 1.20.34 → 1.20.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +206 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +206 -12
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +7 -7
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +206 -12
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/StructurePage/index.js +198 -12
- package/lib/core/components/StructurePage/index.js +198 -12
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -19743,7 +19743,7 @@ const StructurePage = (_a) => {
|
|
|
19743
19743
|
}
|
|
19744
19744
|
}, []);
|
|
19745
19745
|
// 合并基础样式和编辑器配置的样式
|
|
19746
|
-
const mergeStyles = React.useCallback((baseStyle, configKey) => {
|
|
19746
|
+
const mergeStyles = React.useCallback((baseStyle, configKey, options) => {
|
|
19747
19747
|
// 修改：只要有 multiCTAConfig 就应用样式，不再限制必须 editorMode=true
|
|
19748
19748
|
if (!multiCTAConfig || !multiCTAConfig[configKey]) {
|
|
19749
19749
|
return baseStyle;
|
|
@@ -19801,7 +19801,8 @@ const StructurePage = (_a) => {
|
|
|
19801
19801
|
if (styleConfig.borderRadius && typeof styleConfig.borderRadius === 'number') {
|
|
19802
19802
|
customStyle.borderRadius = `${styleConfig.borderRadius}px`;
|
|
19803
19803
|
}
|
|
19804
|
-
|
|
19804
|
+
// 只有在不排除边框时才应用边框样式
|
|
19805
|
+
if (!(options === null || options === void 0 ? void 0 : options.excludeBorder) && styleConfig.showBorder && styleConfig.borderWidth && typeof styleConfig.borderWidth === 'number') {
|
|
19805
19806
|
customStyle.border = `${styleConfig.borderWidth}px solid ${styleConfig.borderColor || '#d9d9d9'}`;
|
|
19806
19807
|
}
|
|
19807
19808
|
// 按钮特殊样式
|
|
@@ -19820,6 +19821,26 @@ const StructurePage = (_a) => {
|
|
|
19820
19821
|
const finalStyle = Object.assign(Object.assign({}, baseStyle), customStyle);
|
|
19821
19822
|
return finalStyle;
|
|
19822
19823
|
}, [editorMode, multiCTAConfig]);
|
|
19824
|
+
// 新增：获取边框样式的辅助函数（用于文本元素）
|
|
19825
|
+
React.useCallback((configKey) => {
|
|
19826
|
+
if (!multiCTAConfig || !multiCTAConfig[configKey]) {
|
|
19827
|
+
return {};
|
|
19828
|
+
}
|
|
19829
|
+
const config = multiCTAConfig[configKey];
|
|
19830
|
+
const customStyle = {
|
|
19831
|
+
display: 'inline-block', // 确保边框正确显示
|
|
19832
|
+
boxSizing: 'border-box'
|
|
19833
|
+
};
|
|
19834
|
+
if (config.showBorder && config.borderWidth && typeof config.borderWidth === 'number') {
|
|
19835
|
+
customStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
|
|
19836
|
+
// 添加一些内边距，让边框不会紧贴文字
|
|
19837
|
+
customStyle.padding = '4px 8px';
|
|
19838
|
+
}
|
|
19839
|
+
if (config.borderRadius && typeof config.borderRadius === 'number') {
|
|
19840
|
+
customStyle.borderRadius = `${config.borderRadius}px`;
|
|
19841
|
+
}
|
|
19842
|
+
return customStyle;
|
|
19843
|
+
}, [multiCTAConfig]);
|
|
19823
19844
|
// 渲染 CTA 按钮或模版组件
|
|
19824
19845
|
const renderCTA = React.useCallback((buttonKey, ctaData, productData, fallbackStyle) => {
|
|
19825
19846
|
var _a, _b, _c;
|
|
@@ -20095,13 +20116,60 @@ const StructurePage = (_a) => {
|
|
|
20095
20116
|
}
|
|
20096
20117
|
return (React.createElement("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth }), containerStyle) },
|
|
20097
20118
|
data.heroSection && (React.createElement("div", { style: baseStyles.heroSection },
|
|
20098
|
-
data.heroSection.text && (React.createElement("div", { style:
|
|
20119
|
+
data.heroSection.text && (React.createElement("div", { style: {
|
|
20120
|
+
width: '100%',
|
|
20121
|
+
padding: '20px',
|
|
20122
|
+
backgroundColor: '#000',
|
|
20123
|
+
textAlign: 'center',
|
|
20124
|
+
boxSizing: 'border-box'
|
|
20125
|
+
} },
|
|
20126
|
+
React.createElement("span", { style: Object.assign({}, (() => {
|
|
20127
|
+
const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.heroTopText;
|
|
20128
|
+
if (!config) {
|
|
20129
|
+
return {
|
|
20130
|
+
color: '#fff',
|
|
20131
|
+
fontSize: '16px',
|
|
20132
|
+
fontWeight: 'bold'
|
|
20133
|
+
};
|
|
20134
|
+
}
|
|
20135
|
+
const textStyle = {
|
|
20136
|
+
color: config.color || '#fff',
|
|
20137
|
+
fontSize: config.fontSize ? `${config.fontSize}px` : '16px',
|
|
20138
|
+
fontWeight: config.fontWeight || 'bold',
|
|
20139
|
+
fontStyle: config.fontStyle || 'normal',
|
|
20140
|
+
textDecoration: config.textDecoration || 'none',
|
|
20141
|
+
display: 'inline-block',
|
|
20142
|
+
boxSizing: 'border-box'
|
|
20143
|
+
};
|
|
20144
|
+
// 应用背景色（如果配置了）
|
|
20145
|
+
if (config.backgroundColor) {
|
|
20146
|
+
textStyle.backgroundColor = config.backgroundColor;
|
|
20147
|
+
}
|
|
20148
|
+
// 应用边框和padding
|
|
20149
|
+
if (config.showBorder && config.borderWidth) {
|
|
20150
|
+
textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
|
|
20151
|
+
// 如果用户自定义了 padding，使用自定义的，否则使用默认的 4px 8px
|
|
20152
|
+
textStyle.padding = config.padding || '4px 8px';
|
|
20153
|
+
}
|
|
20154
|
+
else if (config.padding) {
|
|
20155
|
+
// 即使没有边框，也应用自定义 padding
|
|
20156
|
+
textStyle.padding = config.padding;
|
|
20157
|
+
}
|
|
20158
|
+
if (config.borderRadius) {
|
|
20159
|
+
textStyle.borderRadius = `${config.borderRadius}px`;
|
|
20160
|
+
}
|
|
20161
|
+
// 应用外边距（如果配置了）
|
|
20162
|
+
if (config.margin) {
|
|
20163
|
+
textStyle.margin = config.margin;
|
|
20164
|
+
}
|
|
20165
|
+
return textStyle;
|
|
20166
|
+
})()) }, data.heroSection.text))),
|
|
20099
20167
|
React.createElement("div", { style: baseStyles.heroImageContainer },
|
|
20100
20168
|
data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
|
|
20101
20169
|
React.createElement("video", { ref: heroVideoRef, src: data.heroSection.url, style: baseStyles.heroVideo, autoPlay: true, muted: true, loop: true, playsInline: true, controls: false }),
|
|
20102
20170
|
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,
|
|
20103
20171
|
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))))),
|
|
20104
|
-
data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection') },
|
|
20172
|
+
data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.carouselSection, 'carouselSection', { excludeBorder: true }) },
|
|
20105
20173
|
React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
|
|
20106
20174
|
React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.carouselContainer), { transform: `translateX(-${carouselIndex * 100}%)` }) }, data.carouselSection.map((item, index) => {
|
|
20107
20175
|
var _a;
|
|
@@ -20113,15 +20181,98 @@ const StructurePage = (_a) => {
|
|
|
20113
20181
|
})),
|
|
20114
20182
|
React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { left: '10px' }), onClick: handleCarouselPrev }, "\u2039"),
|
|
20115
20183
|
React.createElement("button", { style: Object.assign(Object.assign({}, baseStyles.arrowButton), { right: '10px' }), onClick: handleCarouselNext }, "\u203A")),
|
|
20116
|
-
React.createElement("div", { style:
|
|
20117
|
-
|
|
20184
|
+
React.createElement("div", { style: {
|
|
20185
|
+
width: '100%',
|
|
20186
|
+
padding: '10px 20px',
|
|
20187
|
+
backgroundColor: '#000',
|
|
20188
|
+
color: '#fff',
|
|
20189
|
+
textAlign: 'center'
|
|
20190
|
+
} },
|
|
20191
|
+
((_j = data.carouselSection[carouselIndex]) === null || _j === void 0 ? void 0 : _j.text) && (React.createElement("div", { style: { marginBottom: '15px' } },
|
|
20192
|
+
React.createElement("span", { style: Object.assign({}, (() => {
|
|
20193
|
+
const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselSection;
|
|
20194
|
+
if (!config) {
|
|
20195
|
+
return {
|
|
20196
|
+
fontSize: '16px',
|
|
20197
|
+
fontWeight: 'normal',
|
|
20198
|
+
color: '#fff'
|
|
20199
|
+
};
|
|
20200
|
+
}
|
|
20201
|
+
const textStyle = {
|
|
20202
|
+
fontSize: config.fontSize ? `${config.fontSize}px` : '16px',
|
|
20203
|
+
fontWeight: config.fontWeight || 'normal',
|
|
20204
|
+
fontStyle: config.fontStyle || 'normal',
|
|
20205
|
+
textDecoration: config.textDecoration || 'none',
|
|
20206
|
+
color: config.color || '#fff',
|
|
20207
|
+
display: 'inline-block',
|
|
20208
|
+
boxSizing: 'border-box'
|
|
20209
|
+
};
|
|
20210
|
+
if (config.backgroundColor) {
|
|
20211
|
+
textStyle.backgroundColor = config.backgroundColor;
|
|
20212
|
+
}
|
|
20213
|
+
if (config.showBorder && config.borderWidth) {
|
|
20214
|
+
textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
|
|
20215
|
+
textStyle.padding = config.padding || '4px 8px';
|
|
20216
|
+
}
|
|
20217
|
+
else if (config.padding) {
|
|
20218
|
+
textStyle.padding = config.padding;
|
|
20219
|
+
}
|
|
20220
|
+
if (config.borderRadius) {
|
|
20221
|
+
textStyle.borderRadius = `${config.borderRadius}px`;
|
|
20222
|
+
}
|
|
20223
|
+
if (config.margin) {
|
|
20224
|
+
textStyle.margin = config.margin;
|
|
20225
|
+
}
|
|
20226
|
+
return textStyle;
|
|
20227
|
+
})()) }, (_k = data.carouselSection[carouselIndex]) === null || _k === void 0 ? void 0 : _k.text))),
|
|
20118
20228
|
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)))),
|
|
20119
|
-
data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection') },
|
|
20229
|
+
data.highlightRevealSection && (React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection', { excludeBorder: true }) },
|
|
20120
20230
|
React.createElement("div", { style: baseStyles.highlightImageContainer },
|
|
20121
20231
|
React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
|
|
20122
|
-
React.createElement("div", { style:
|
|
20232
|
+
React.createElement("div", { style: {
|
|
20233
|
+
width: '100%',
|
|
20234
|
+
padding: '20px',
|
|
20235
|
+
backgroundColor: '#000',
|
|
20236
|
+
color: '#fff',
|
|
20237
|
+
textAlign: 'center'
|
|
20238
|
+
} },
|
|
20123
20239
|
data.highlightRevealSection.description && (React.createElement("div", { style: { marginBottom: '10px' } },
|
|
20124
|
-
React.createElement("
|
|
20240
|
+
React.createElement("span", { style: Object.assign({}, (() => {
|
|
20241
|
+
const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.highlightSection;
|
|
20242
|
+
if (!config) {
|
|
20243
|
+
return {
|
|
20244
|
+
fontSize: '18px',
|
|
20245
|
+
fontWeight: 'bold',
|
|
20246
|
+
color: '#fff'
|
|
20247
|
+
};
|
|
20248
|
+
}
|
|
20249
|
+
const textStyle = {
|
|
20250
|
+
fontSize: config.fontSize ? `${config.fontSize}px` : '18px',
|
|
20251
|
+
fontWeight: config.fontWeight || 'bold',
|
|
20252
|
+
fontStyle: config.fontStyle || 'normal',
|
|
20253
|
+
textDecoration: config.textDecoration || 'none',
|
|
20254
|
+
color: config.color || '#fff',
|
|
20255
|
+
display: 'inline-block',
|
|
20256
|
+
boxSizing: 'border-box'
|
|
20257
|
+
};
|
|
20258
|
+
if (config.backgroundColor) {
|
|
20259
|
+
textStyle.backgroundColor = config.backgroundColor;
|
|
20260
|
+
}
|
|
20261
|
+
if (config.showBorder && config.borderWidth) {
|
|
20262
|
+
textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
|
|
20263
|
+
textStyle.padding = config.padding || '4px 8px';
|
|
20264
|
+
}
|
|
20265
|
+
else if (config.padding) {
|
|
20266
|
+
textStyle.padding = config.padding;
|
|
20267
|
+
}
|
|
20268
|
+
if (config.borderRadius) {
|
|
20269
|
+
textStyle.borderRadius = `${config.borderRadius}px`;
|
|
20270
|
+
}
|
|
20271
|
+
if (config.margin) {
|
|
20272
|
+
textStyle.margin = config.margin;
|
|
20273
|
+
}
|
|
20274
|
+
return textStyle;
|
|
20275
|
+
})()) }, data.highlightRevealSection.description))),
|
|
20125
20276
|
renderCTA('highlightButton', data.highlightRevealSection.bindCta, data.highlightRevealSection, baseStyles.highlightButton)))),
|
|
20126
20277
|
data.productGridSection && data.productGridSection.length > 0 && (React.createElement("div", { style: mergeStyles(baseStyles.productGrid, 'productGrid') }, (() => {
|
|
20127
20278
|
// 创建一个6格的网格 (3行 x 2列)，根据position放置产品
|
|
@@ -20170,10 +20321,53 @@ const StructurePage = (_a) => {
|
|
|
20170
20321
|
React.createElement("div", { style: { width: '100%', paddingBottom: '100%' } }))));
|
|
20171
20322
|
});
|
|
20172
20323
|
})())),
|
|
20173
|
-
data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection') },
|
|
20174
|
-
React.createElement("div", { style:
|
|
20324
|
+
data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection', { excludeBorder: true }) },
|
|
20325
|
+
React.createElement("div", { style: {
|
|
20326
|
+
width: '100%',
|
|
20327
|
+
padding: '20px',
|
|
20328
|
+
backgroundColor: '#000',
|
|
20329
|
+
color: '#fff',
|
|
20330
|
+
textAlign: 'center'
|
|
20331
|
+
} },
|
|
20175
20332
|
data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
|
|
20176
|
-
React.createElement("
|
|
20333
|
+
React.createElement("span", { style: Object.assign({}, (() => {
|
|
20334
|
+
const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection;
|
|
20335
|
+
if (!config) {
|
|
20336
|
+
return {
|
|
20337
|
+
fontSize: '18px',
|
|
20338
|
+
fontWeight: 'normal',
|
|
20339
|
+
lineHeight: '1.4',
|
|
20340
|
+
color: '#fff'
|
|
20341
|
+
};
|
|
20342
|
+
}
|
|
20343
|
+
const textStyle = {
|
|
20344
|
+
fontSize: config.fontSize ? `${config.fontSize}px` : '18px',
|
|
20345
|
+
fontWeight: config.fontWeight || 'normal',
|
|
20346
|
+
fontStyle: config.fontStyle || 'normal',
|
|
20347
|
+
textDecoration: config.textDecoration || 'none',
|
|
20348
|
+
color: config.color || '#fff',
|
|
20349
|
+
lineHeight: '1.4',
|
|
20350
|
+
display: 'inline-block',
|
|
20351
|
+
boxSizing: 'border-box'
|
|
20352
|
+
};
|
|
20353
|
+
if (config.backgroundColor) {
|
|
20354
|
+
textStyle.backgroundColor = config.backgroundColor;
|
|
20355
|
+
}
|
|
20356
|
+
if (config.showBorder && config.borderWidth) {
|
|
20357
|
+
textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
|
|
20358
|
+
textStyle.padding = config.padding || '4px 8px';
|
|
20359
|
+
}
|
|
20360
|
+
else if (config.padding) {
|
|
20361
|
+
textStyle.padding = config.padding;
|
|
20362
|
+
}
|
|
20363
|
+
if (config.borderRadius) {
|
|
20364
|
+
textStyle.borderRadius = `${config.borderRadius}px`;
|
|
20365
|
+
}
|
|
20366
|
+
if (config.margin) {
|
|
20367
|
+
textStyle.margin = config.margin;
|
|
20368
|
+
}
|
|
20369
|
+
return textStyle;
|
|
20370
|
+
})()) }, data.footerSection.text))),
|
|
20177
20371
|
renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton)),
|
|
20178
20372
|
React.createElement("div", { style: baseStyles.footerImageContainer },
|
|
20179
20373
|
React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
|