pb-sxp-ui 1.20.14 → 1.20.15

package/dist/pb-ui.js

@@ -671,6 +671,10 @@
         const [popupDetailData, setPopupDetailData] = React.useState();
         const [waterFallData, setWaterFallData] = React.useState();
         const [openHashtag, setOpenHashtag] = React.useState(isOpenHashTag);
+        // 将 setPopupDetailData 挂载到 window 对象，供 StructurePage 使用
+        if (typeof window !== 'undefined') {
+            window.setPopupDetailData = setPopupDetailData;
+        }
         const [cacheRtcList, setCacheRtcList] = React.useState([]);
         const [cacheActiveIndex, setCacheActiveIndex] = React.useState(0);
         const [isFromHashtag, setIsFromHashtag] = React.useState(false);
@@ -1130,7 +1134,7 @@
                     query.pageNum = pageNum;
                     result = isDiyH5
                         ? yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct/page/view', { method: 'POST', body: query }))
-                        : yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('recommend/direct_page', { method: 'POST', body: query }));
+                        : yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/direct_page', { method: 'POST', body: query }));
                     if (!(result === null || result === void 0 ? void 0 : result.success)) {
                         return undefined;
                     }
@@ -1358,6 +1362,7 @@
                                         var _a;
                                         const prop = match.substring(2, match.length - 2);
                                         try {
+                                            // eslint-disable-next-line no-new-func
                                             let replaceValue = new Function('fix_par', 'product', `return ${prop}`)(fix_par, product === null || product === void 0 ? void 0 : product[0]);
                                             if (replaceValue) {
                                                 if ((prop === null || prop === void 0 ? void 0 : prop.indexOf('currency')) !== -1 &&
@@ -1941,9 +1946,820 @@
             React.createElement(DataSourceProvider$1, { isSsr: isSsr, enable: enableDataSource }, children)));
     });
 
+    const FormatImage = React.forwardRef((props, ref) => {
+        const { src, onLoad, style, className, loading, alt = 'image' } = props;
+        const [imgSrc, setImgSrc] = React.useState(src);
+        const imgRef = React.useRef(null);
+        const [visible, setVisible] = React.useState(false);
+        React.useImperativeHandle(ref, () => ({
+            setSrc: (v) => {
+                if (v)
+                    setImgSrc(v);
+            }
+        }));
+        React.useEffect(() => {
+            if (src)
+                setImgSrc(src);
+        }, [src]);
+        React.useEffect(() => {
+            const onShow = () => {
+                if (src && !visible && imgRef.current) {
+                    imgRef.current.src = '';
+                    imgRef.current.src = src;
+                }
+            };
+            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            return () => {
+                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            };
+        }, [src, visible]);
+        return (React.createElement(React.Fragment, null,
+            !visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
+            (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
+                React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
+                React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
+                React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
+                React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
+                        setVisible(true);
+                        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+                    }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
+                    setVisible(true);
+                    onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
+                }, alt: alt }))));
+    });
+    var FormatImage$1 = React.memo(FormatImage);
+
+    // 动态导入材料库（避免循环依赖）
+    const RESOLVER$3 = {};
+    try {
+        // 尝试动态导入材料库
+        const materialsModule = require('../../materials/sxp');
+        Object.values(materialsModule).forEach((v) => {
+            var _a;
+            if ((_a = v === null || v === void 0 ? void 0 : v.extend) === null || _a === void 0 ? void 0 : _a.type) {
+                RESOLVER$3[v.extend.type] = v;
+            }
+        });
+    }
+    catch (error) {
+        console.warn('Failed to load materials for StructurePage:', error);
+    }
+    // 基础样式定义
+    const baseStyles = {
+        container: {
+            backgroundColor: '#000',
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            padding: 0,
+            boxSizing: 'border-box'
+        },
+        section: {
+            width: '100%',
+            position: 'relative',
+            boxSizing: 'border-box'
+        },
+        // Hero Section
+        heroSection: {
+            width: '100%',
+            height: 'auto',
+            position: 'relative',
+            overflow: 'hidden',
+            backgroundColor: '#000'
+        },
+        heroTopText: {
+            width: '100%',
+            padding: '20px',
+            backgroundColor: '#fff',
+            color: '#000',
+            fontSize: '16px',
+            fontWeight: 'bold',
+            textAlign: 'center',
+            boxSizing: 'border-box'
+        },
+        heroImageContainer: {
+            width: '100%',
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        heroImage: {
+            width: '100%',
+            height: 'auto',
+            display: 'block',
+            objectFit: 'cover'
+        },
+        heroVideo: {
+            width: '100%',
+            height: 'auto',
+            display: 'block',
+            objectFit: 'cover'
+        },
+        heroOverlay: {
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            padding: '40px 20px',
+            background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%)',
+            color: '#fff',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
+        },
+        heroButton: {
+            padding: '12px 30px',
+            backgroundColor: '#fff',
+            color: '#000',
+            border: 'none',
+            fontSize: '14px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase'
+        },
+        // Carousel Section
+        carouselSection: {
+            width: '100%',
+            position: 'relative'
+        },
+        carouselImageContainer: {
+            width: '100%',
+            height: 'auto',
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        carouselContainer: {
+            display: 'flex',
+            transition: 'transform 0.5s ease-in-out',
+            width: '100%'
+        },
+        carouselSlide: {
+            minWidth: '100%',
+            position: 'relative'
+        },
+        carouselImage: {
+            width: '100%',
+            height: 'auto',
+            display: 'block',
+            objectFit: 'cover'
+        },
+        carouselVideo: {
+            width: '100%',
+            height: 'auto',
+            display: 'block',
+            objectFit: 'cover'
+        },
+        carouselInfoSection: {
+            width: '100%',
+            padding: '20px',
+            backgroundColor: '#000',
+            color: '#fff',
+            textAlign: 'center'
+        },
+        carouselText: {
+            fontSize: '16px',
+            fontWeight: 'normal',
+            marginBottom: '15px',
+            color: '#fff'
+        },
+        carouselButton: {
+            padding: '10px 25px',
+            backgroundColor: '#fff',
+            color: '#000',
+            border: '1px solid #fff',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase'
+        },
+        arrowButton: {
+            position: 'absolute',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            width: '40px',
+            height: '40px',
+            backgroundColor: 'rgba(255,255,255,0.8)',
+            border: 'none',
+            borderRadius: '50%',
+            fontSize: '18px',
+            cursor: 'pointer',
+            zIndex: 10,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        // Highlight Reveal Section
+        highlightSection: {
+            width: '100%',
+            position: 'relative',
+            backgroundColor: '#000'
+        },
+        highlightImageContainer: {
+            width: '100%',
+            aspectRatio: '1/1',
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        highlightImage: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block'
+        },
+        highlightInfoSection: {
+            width: '100%',
+            padding: '20px',
+            backgroundColor: '#000',
+            color: '#fff',
+            textAlign: 'center'
+        },
+        highlightTitle: {
+            fontSize: '18px',
+            fontWeight: 'bold',
+            marginBottom: '10px',
+            textAlign: 'center',
+            color: '#fff'
+        },
+        highlightDesc: {
+            fontSize: '14px',
+            marginBottom: '15px',
+            textAlign: 'center',
+            lineHeight: '1.5',
+            color: '#ccc'
+        },
+        highlightButton: {
+            padding: '10px 25px',
+            backgroundColor: 'transparent',
+            color: '#fff',
+            border: '1px solid #fff',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase'
+        },
+        // Product Grid Section
+        productGrid: {
+            display: 'grid',
+            gridTemplateColumns: '50% 50%',
+            gridAutoRows: 'auto',
+            gap: '0',
+            width: '100%',
+            backgroundColor: '#000',
+            boxSizing: 'border-box',
+            margin: 0,
+            padding: 0,
+            overflow: 'hidden'
+        },
+        productItem: {
+            position: 'relative',
+            backgroundColor: '#000',
+            display: 'block',
+            boxSizing: 'border-box',
+            width: '100%',
+            minWidth: 0,
+            overflow: 'hidden'
+        },
+        productImageContainer: {
+            width: '100%',
+            paddingBottom: '100%',
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        productImage: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block'
+        },
+        productCtaContainer: {
+            width: '100%',
+            padding: '15px',
+            backgroundColor: '#000',
+            textAlign: 'center',
+            boxSizing: 'border-box'
+        },
+        productText: {
+            width: '100%',
+            padding: '15px',
+            backgroundColor: '#000',
+            color: '#fff',
+            textAlign: 'center',
+            fontSize: '14px',
+            fontWeight: 'normal',
+            boxSizing: 'border-box'
+        },
+        productButton: {
+            padding: '8px 20px',
+            backgroundColor: 'transparent',
+            color: '#fff',
+            border: '1px solid #fff',
+            fontSize: '12px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            whiteSpace: 'nowrap'
+        },
+        // Footer Section
+        footerSection: {
+            width: '100%',
+            position: 'relative',
+            backgroundColor: '#000'
+        },
+        footerInfoSection: {
+            width: '100%',
+            padding: '20px',
+            backgroundColor: '#000',
+            color: '#fff',
+            textAlign: 'center'
+        },
+        footerText: {
+            fontSize: '18px',
+            fontWeight: 'normal',
+            marginBottom: '15px',
+            lineHeight: '1.4',
+            color: '#fff'
+        },
+        footerButton: {
+            padding: '10px 25px',
+            backgroundColor: 'transparent',
+            color: '#fff',
+            border: '1px solid #fff',
+            fontSize: '13px',
+            fontWeight: 500,
+            cursor: 'pointer',
+            textTransform: 'uppercase',
+            marginBottom: '20px',
+            display: 'inline-block'
+        },
+        footerImageContainer: {
+            width: '100%',
+            aspectRatio: '1/1',
+            overflow: 'hidden'
+        },
+        footerImage: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            display: 'block'
+        }
+    };
+    const StructurePage = (_a) => {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        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);
+        const [error, setError] = React.useState(null);
+        const [carouselIndex, setCarouselIndex] = React.useState(0);
+        const heroVideoRef = React.useRef(null);
+        const carouselVideoRefs = React.useRef([]);
+        // 视频暂停状态管理
+        const [isHeroVideoPaused, setIsHeroVideoPaused] = React.useState(false);
+        const [carouselVideoPausedStates, setCarouselVideoPausedStates] = React.useState([]);
+        // 从 schema 中获取 multiCTAConfig（优先使用 props 传入的）
+        const { schema } = useEditor();
+        const multiCTAConfig = React.useMemo(() => {
+            var _a;
+            return propMultiCTAConfig || ((_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.multiCTAConfig) || {};
+        }, [propMultiCTAConfig, (_b = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _b === void 0 ? void 0 : _b.multiCTAConfig]);
+        // 默认播放图标 URL（直接使用 CDN 地址作为后备）
+        const DEFAULT_PAUSE_ICON = 'https://sxph5-uat.chatlabs.net/pb_static/06f28a2025c74c1cb49be6767316d827.png';
+        // 获取视频播放图标
+        const videoPlayIcon = React.useMemo(() => {
+            var _a, _b;
+            // 优先使用 props 传入的
+            if (propVideoPlayIcon)
+                return propVideoPlayIcon;
+            // 然后使用 schema 配置的
+            const configIcon = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.videoPlayIcon;
+            if (configIcon) {
+                // 如果是完整 URL，直接使用
+                if (configIcon.startsWith('http://') || configIcon.startsWith('https://')) {
+                    return configIcon;
+                }
+                // 如果是相对路径，拼接当前域名
+                if (configIcon.startsWith('/')) {
+                    return `${window.location.origin}${configIcon}`;
+                }
+                return configIcon;
+            }
+            // 最后使用默认图标
+            return DEFAULT_PAUSE_ICON;
+        }, [propVideoPlayIcon, (_d = (_c = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _c === void 0 ? void 0 : _c.globalConfig) === null || _d === void 0 ? void 0 : _d.videoPlayIcon]);
+        // 处理 CTA 点击
+        const handleCtaClick = React.useCallback((link, interaction, productData, ctaData) => {
+            // 如果配置了交互设置，优先使用交互设置
+            if (interaction) {
+                const { linkType, popupType, popupAni } = interaction;
+                if (linkType === 'popup' && popupType) {
+                    // 设置弹窗要显示的产品数据
+                    if (productData && typeof window !== 'undefined' && window.setPopupDetailData) {
+                        // 构造与原有系统一致的数据结构
+                        const popupData = {
+                            video: {
+                                bindProduct: productData,
+                                bindProducts: [productData],
+                                bindCta: ctaData
+                            }
+                        };
+                        window.setPopupDetailData(popupData);
+                    }
+                    // 打开弹窗 - 使用与现有系统一致的方式
+                    if (typeof window !== 'undefined' && window.sxpPopup) {
+                        // 如果有动画配置，传递动画参数；否则只传弹窗 ID
+                        if (popupAni && popupAni.name) {
+                            window.sxpPopup(popupType, popupAni);
+                        }
+                        else {
+                            window.sxpPopup(popupType);
+                        }
+                    }
+                    return;
+                }
+            }
+            // 默认行为：打开外部链接
+            if (link) {
+                window.open(link, '_blank');
+            }
+        }, []);
+        // 合并基础样式和编辑器配置的样式
+        const mergeStyles = React.useCallback((baseStyle, configKey) => {
+            if (!editorMode || !multiCTAConfig[configKey]) {
+                return baseStyle;
+            }
+            const config = multiCTAConfig[configKey];
+            // 定义允许的样式属性列表
+            const styleKeys = [
+                'fontSize', 'color', 'textAlign', 'fontWeight',
+                'backgroundColor', 'padding', 'margin', 'borderRadius',
+                'showBorder', 'borderWidth', 'borderColor',
+                'buttonBackgroundColor', 'buttonTextColor', 'buttonWidth', 'buttonHeight'
+            ];
+            // 只处理样式相关的属性，忽略 interaction 等非样式属性
+            const styleConfig = Object.keys(config)
+                .filter(key => styleKeys.includes(key))
+                .reduce((obj, key) => {
+                obj[key] = config[key];
+                return obj;
+            }, {});
+            // 如果配置中没有任何样式字段（只有 interaction），直接返回基础样式
+            if (Object.keys(styleConfig).length === 0) {
+                return baseStyle;
+            }
+            const customStyle = {};
+            // 应用配置中的样式
+            if (styleConfig.fontSize && typeof styleConfig.fontSize === 'number') {
+                customStyle.fontSize = `${styleConfig.fontSize}px`;
+            }
+            if (styleConfig.color && typeof styleConfig.color === 'string') {
+                customStyle.color = styleConfig.color;
+            }
+            if (styleConfig.textAlign && typeof styleConfig.textAlign === 'string') {
+                customStyle.textAlign = styleConfig.textAlign;
+            }
+            if (styleConfig.fontWeight && typeof styleConfig.fontWeight === 'number') {
+                customStyle.fontWeight = styleConfig.fontWeight;
+            }
+            if (styleConfig.backgroundColor && typeof styleConfig.backgroundColor === 'string') {
+                customStyle.backgroundColor = styleConfig.backgroundColor;
+            }
+            if (styleConfig.padding && typeof styleConfig.padding === 'string') {
+                customStyle.padding = styleConfig.padding;
+            }
+            if (styleConfig.margin && typeof styleConfig.margin === 'string') {
+                customStyle.margin = styleConfig.margin;
+            }
+            if (styleConfig.borderRadius && typeof styleConfig.borderRadius === 'number') {
+                customStyle.borderRadius = `${styleConfig.borderRadius}px`;
+            }
+            if (styleConfig.showBorder && styleConfig.borderWidth && typeof styleConfig.borderWidth === 'number') {
+                customStyle.border = `${styleConfig.borderWidth}px solid ${styleConfig.borderColor || '#d9d9d9'}`;
+            }
+            // 按钮特殊样式
+            if (styleConfig.buttonBackgroundColor && typeof styleConfig.buttonBackgroundColor === 'string') {
+                customStyle.backgroundColor = styleConfig.buttonBackgroundColor;
+            }
+            if (styleConfig.buttonTextColor && typeof styleConfig.buttonTextColor === 'string') {
+                customStyle.color = styleConfig.buttonTextColor;
+            }
+            if (styleConfig.buttonWidth && typeof styleConfig.buttonWidth === 'number') {
+                customStyle.width = `${styleConfig.buttonWidth}px`;
+            }
+            if (styleConfig.buttonHeight && typeof styleConfig.buttonHeight === 'number') {
+                customStyle.height = `${styleConfig.buttonHeight}px`;
+            }
+            return Object.assign(Object.assign({}, baseStyle), customStyle);
+        }, [editorMode, multiCTAConfig]);
+        // 渲染 CTA 按钮或模版组件
+        const renderCTA = React.useCallback((buttonKey, ctaData, productData, fallbackStyle) => {
+            var _a, _b, _c;
+            if (!ctaData) {
+                return null;
+            }
+            const config = multiCTAConfig[buttonKey];
+            const templateType = config === null || config === void 0 ? void 0 : config.templateType;
+            const interaction = config === null || config === void 0 ? void 0 : config.interaction;
+            // 如果配置了模版类型，渲染对应的模版组件
+            if (editorMode && templateType && RESOLVER$3[templateType]) {
+                const TemplateComponent = RESOLVER$3[templateType];
+                const templateExtend = TemplateComponent === null || TemplateComponent === void 0 ? void 0 : TemplateComponent.extend;
+                if (templateExtend) {
+                    // 准备模版组件的 props
+                    const templateProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (_a = templateExtend.defaulSetting) === null || _a === void 0 ? void 0 : _a.props), { style: Object.assign(Object.assign(Object.assign({}, (_b = templateExtend.defaulSetting) === null || _b === void 0 ? void 0 : _b.style), mergeStyles(fallbackStyle || {}, buttonKey)), { marginBottom: 0, width: '100%' }), textStyle: (_c = templateExtend.defaulSetting) === null || _c === void 0 ? void 0 : _c.textStyle }), (productData && { bindProduct: productData })), { isTel: true }), rest);
+                    // 渲染模版组件
+                    return React.createElement(TemplateComponent, templateProps);
+                }
+            }
+            // 默认渲染按钮
+            return (React.createElement("button", { style: mergeStyles(fallbackStyle || baseStyles.heroButton, buttonKey), onClick: () => handleCtaClick(ctaData === null || ctaData === void 0 ? void 0 : ctaData.link, interaction, productData, ctaData) }, ctaData.title));
+        }, [multiCTAConfig, editorMode, handleCtaClick, mergeStyles, rest]);
+        // 获取数据 - 只在组件挂载时执行一次
+        React.useEffect(() => {
+            // 重要：在 PB 编辑器模式下，propMultiCTAConfig 只是样式配置，不是数据源
+            // 只有在 CMS 模式 (isCmsMode=false) 且 propMultiCTAConfig 包含实际数据时才跳过 API 调用
+            // 判断是否包含实际数据：检查是否有 heroSection, carouselSection 等数据字段
+            const hasActualData = propMultiCTAConfig && (propMultiCTAConfig.heroSection ||
+                propMultiCTAConfig.carouselSection ||
+                propMultiCTAConfig.highlightRevealSection ||
+                propMultiCTAConfig.productGridSection ||
+                propMultiCTAConfig.footerSection);
+            if (editorMode && hasActualData && !isCmsMode) {
+                setLoading(false);
+                setError(null);
+                // 使用传入的 multiCTAConfig 作为数据源
+                setData(propMultiCTAConfig);
+                return;
+            }
+            // 如果已经有数据了，且在编辑器模式下，不要重新请求
+            if (editorMode && data && !isCmsMode) {
+                return;
+            }
+            setLoading(true);
+            setError(null);
+            // 根据模式决定使用哪个接口
+            let finalApiUrl = apiUrl;
+            let bodyToSend = {};
+            if (isCmsMode) {
+                // CMS 模式：使用 /api/console/ad/multiCta/rec/detail 接口
+                if (!storyId) {
+                    console.error('[StructurePage CMS Mode] storyId is required but not provided');
+                    setError('storyId is required in CMS mode');
+                    setLoading(false);
+                    return;
+                }
+                // 构建 CMS 接口的 URL 和请求体
+                // apiUrl 应该是域名（如 http://localhost:8001），然后拼接 /api/console/ad/multiCta/rec/detail
+                finalApiUrl = `${apiUrl}/api/console/ad/multiCta/rec/detail`;
+                bodyToSend = { storyId };
+            }
+            else {
+                // 普通模式：使用原有的 /api/v1/recommend/list 接口
+                const defaultBody = {
+                    maxSize: 20,
+                    defaultSize: 10,
+                    type: 'story'
+                };
+                bodyToSend = requestBody ? Object.assign(Object.assign({}, defaultBody), requestBody) : defaultBody;
+            }
+            // 构建请求头
+            const headers = {
+                'Content-Type': 'application/json'
+            };
+            if (isCmsMode) {
+                // CMS 模式：使用自定义 headers（如果有传入）
+                if (customHeaders) {
+                    Object.assign(headers, customHeaders);
+                }
+            }
+            else {
+                // 普通模式：从 requestBody 或 bodyToSend 中提取 BFF headers
+                if (bodyToSend['x-app-id']) {
+                    headers['x-app-id'] = bodyToSend['x-app-id'];
+                    delete bodyToSend['x-app-id'];
+                }
+                if (bodyToSend['x-user-id']) {
+                    headers['x-user-id'] = bodyToSend['x-user-id'];
+                    delete bodyToSend['x-user-id'];
+                }
+                if (bodyToSend['tenant-id']) {
+                    headers['tenant-id'] = bodyToSend['tenant-id'];
+                    delete bodyToSend['tenant-id'];
+                }
+            }
+            fetch(finalApiUrl, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(bodyToSend),
+                credentials: 'include'
+            })
+                .then((res) => {
+                if (!res.ok) {
+                    throw new Error(`HTTP error! status: ${res.status}`);
+                }
+                return res.json();
+            })
+                .then((result) => {
+                var _a, _b, _c, _d;
+                if (result.code === '0' || result.code === '00000') {
+                    // 判断数据结构：CMS 模式和普通模式可能不同
+                    let multiCtaData = null;
+                    if (isCmsMode) {
+                        // CMS 模式：data.multiCta
+                        multiCtaData = (_a = result.data) === null || _a === void 0 ? void 0 : _a.multiCta;
+                    }
+                    else {
+                        // 普通模式：data.recList[0].multiCta
+                        multiCtaData = (_d = (_c = (_b = result.data) === null || _b === void 0 ? void 0 : _b.recList) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.multiCta;
+                    }
+                    if (multiCtaData) {
+                        setData(multiCtaData);
+                    }
+                    else {
+                        console.error('[StructurePage] No multiCta data found in response:', result);
+                        setError(result.message || 'No multiCta data found');
+                    }
+                }
+                else {
+                    setError(result.message || 'Failed to load data');
+                }
+                setLoading(false);
+            })
+                .catch((err) => {
+                console.error('[StructurePage] Failed to fetch data:', {
+                    error: err,
+                    message: err.message,
+                    url: finalApiUrl,
+                    body: bodyToSend,
+                    isCmsMode,
+                    storyId
+                });
+                setError(err.message || 'Network error');
+                setLoading(false);
+            });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [apiUrl, isCmsMode, storyId, customHeaders]);
+        // 注意：移除了 editorMode 和 propMultiCTAConfig 依赖，因为：
+        // 1. editorMode 和 propMultiCTAConfig 在编辑器中频繁变化
+        // 2. propMultiCTAConfig 只是样式配置，不是数据源
+        // 3. 数据获取只应该在组件挂载时执行一次（除非 apiUrl/storyId 等关键参数变化）
+        // Hero Section 视频自动播放
+        React.useEffect(() => {
+            var _a;
+            if (heroVideoRef.current && ((_a = data === null || data === void 0 ? void 0 : data.heroSection) === null || _a === void 0 ? void 0 : _a.url)) {
+                heroVideoRef.current.play().catch((err) => console.log('Video autoplay failed:', err));
+                setIsHeroVideoPaused(false);
+            }
+        }, [data === null || data === void 0 ? void 0 : data.heroSection]);
+        // 初始化 carousel 视频暂停状态
+        React.useEffect(() => {
+            if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+                // carousel 视频默认不自动播放，所以初始状态应该是暂停（true）
+                setCarouselVideoPausedStates(new Array(data.carouselSection.length).fill(true));
+            }
+        }, [data === null || data === void 0 ? void 0 : data.carouselSection]);
+        // Hero 视频点击处理
+        const handleHeroVideoClick = React.useCallback(() => {
+            if (heroVideoRef.current) {
+                if (heroVideoRef.current.paused) {
+                    heroVideoRef.current.play();
+                    setIsHeroVideoPaused(false);
+                }
+                else {
+                    heroVideoRef.current.pause();
+                    setIsHeroVideoPaused(true);
+                }
+            }
+        }, []);
+        // Carousel 视频点击处理
+        const handleCarouselVideoClick = React.useCallback((index) => {
+            const videoRef = carouselVideoRefs.current[index];
+            if (videoRef) {
+                if (videoRef.paused) {
+                    videoRef.play();
+                    setCarouselVideoPausedStates(prev => {
+                        const newStates = [...prev];
+                        newStates[index] = false;
+                        return newStates;
+                    });
+                }
+                else {
+                    videoRef.pause();
+                    setCarouselVideoPausedStates(prev => {
+                        const newStates = [...prev];
+                        newStates[index] = true;
+                        return newStates;
+                    });
+                }
+            }
+        }, []);
+        // Carousel 导航
+        const handleCarouselPrev = () => {
+            if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+                setCarouselIndex((prev) => (prev === 0 ? data.carouselSection.length - 1 : prev - 1));
+            }
+        };
+        const handleCarouselNext = () => {
+            if (data === null || data === void 0 ? void 0 : data.carouselSection) {
+                setCarouselIndex((prev) => (prev === data.carouselSection.length - 1 ? 0 : prev + 1));
+            }
+        };
+        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..."));
+        }
+        if (error) {
+            return (React.createElement("div", { style: Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', color: '#fff', padding: '20px', textAlign: 'center' }) },
+                React.createElement("div", { style: { fontSize: '18px', marginBottom: '10px' } }, "\u26A0\uFE0F Error"),
+                React.createElement("div", { style: { fontSize: '14px', opacity: 0.8 } }, error)));
+        }
+        if (!data) {
+            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' }) }, "No data available"));
+        }
+        return (React.createElement("div", { className: className, style: Object.assign(Object.assign(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth }), containerStyle) },
+            data.heroSection && (React.createElement("div", { style: baseStyles.heroSection },
+                data.heroSection.text && (React.createElement("div", { style: mergeStyles(baseStyles.heroTopText, 'heroTopText') }, data.heroSection.text)),
+                React.createElement("div", { style: baseStyles.heroImageContainer },
+                    data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
+                        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 },
+                    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));
+                    })),
+                    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)))),
+            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),
+                    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放置产品
+                const gridItems = [null, null, null, null, null, null];
+                // 创建产品索引映射表：gridIndex -> 产品在数据数组中的索引（从1开始）
+                const productIndexMap = {};
+                data.productGridSection.forEach((product, idx) => {
+                    var _a;
+                    const pos = (_a = product.position) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+                    let gridIndex = -1;
+                    if (pos === 'top_right') {
+                        gridIndex = 1; // 第一行右侧
+                    }
+                    else if (pos === 'top_left') {
+                        gridIndex = 0; // 第一行左侧
+                    }
+                    else if (pos === 'center_left') {
+                        gridIndex = 2; // 第二行左侧
+                    }
+                    else if (pos === 'center_right') {
+                        gridIndex = 3; // 第二行右侧
+                    }
+                    else if (pos === 'bottom_left') {
+                        gridIndex = 4; // 第三行左侧
+                    }
+                    else if (pos === 'bottom_right') {
+                        gridIndex = 5; // 第三行右侧
+                    }
+                    if (gridIndex >= 0) {
+                        gridItems[gridIndex] = product;
+                        // 映射：网格位置 -> 产品序号（基于数据数组的顺序，从1开始）
+                        productIndexMap[gridIndex] = idx + 1;
+                    }
+                });
+                return gridItems.map((product, gridIndex) => {
+                    // 使用产品在数据数组中的实际索引来确定 buttonKey
+                    const productDataIndex = productIndexMap[gridIndex];
+                    const buttonKey = `productButton${productDataIndex || gridIndex + 1}`;
+                    return (React.createElement("div", { key: (product === null || product === void 0 ? void 0 : product.itemId) || `empty-${gridIndex}`, style: baseStyles.productItem }, product ? (React.createElement(React.Fragment, null,
+                        React.createElement("div", { style: baseStyles.productImageContainer },
+                            React.createElement("img", { src: product.landingImageUrl || product.cover, 
+                                // alt={product.title}
+                                style: baseStyles.productImage })),
+                        product.bindCta && (React.createElement("div", { style: baseStyles.productCtaContainer }, renderCTA(buttonKey, product.bindCta, product, baseStyles.productButton))))) : (
+                    // 空格子
+                    React.createElement("div", { style: { width: '100%', paddingBottom: '100%' } }))));
+                });
+            })())),
+            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: baseStyles.footerImageContainer },
+                    React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
+    };
+
     var index$3 = /*#__PURE__*/Object.freeze({
         __proto__: null,
-        EditorCore: EditorCore
+        EditorCore: EditorCore,
+        StructurePage: StructurePage
     });
 
     var interactionRender$h = [
@@ -3892,9 +4708,8 @@
           allSlidesSize += slideSizeValue + (spaceBetween || 0);
         });
         allSlidesSize -= spaceBetween;
-        const offsetSize = (params.slidesOffsetBefore || 0) + (params.slidesOffsetAfter || 0);
-        if (allSlidesSize + offsetSize < swiperSize) {
-          const allSlidesOffset = (swiperSize - allSlidesSize - offsetSize) / 2;
+        if (allSlidesSize < swiperSize) {
+          const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
           snapGrid.forEach((snap, snapIndex) => {
             snapGrid[snapIndex] = snap - allSlidesOffset;
           });
@@ -3998,13 +4813,6 @@
       }
     }
 
-    const toggleSlideClasses$1 = (slideEl, condition, className) => {
-      if (condition && !slideEl.classList.contains(className)) {
-        slideEl.classList.add(className);
-      } else if (!condition && slideEl.classList.contains(className)) {
-        slideEl.classList.remove(className);
-      }
-    };
     function updateSlidesProgress(translate) {
       if (translate === void 0) {
         translate = this && this.translate || 0;
@@ -4020,6 +4828,11 @@
       if (typeof slides[0].swiperSlideOffset === 'undefined') swiper.updateSlidesOffset();
       let offsetCenter = -translate;
       if (rtl) offsetCenter = translate;
+
+      // Visible Slides
+      slides.forEach(slideEl => {
+        slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass);
+      });
       swiper.visibleSlidesIndexes = [];
       swiper.visibleSlides = [];
       let spaceBetween = params.spaceBetween;
@@ -4043,9 +4856,11 @@
         if (isVisible) {
           swiper.visibleSlides.push(slide);
           swiper.visibleSlidesIndexes.push(i);
+          slides[i].classList.add(params.slideVisibleClass);
+        }
+        if (isFullyVisible) {
+          slides[i].classList.add(params.slideFullyVisibleClass);
         }
-        toggleSlideClasses$1(slide, isVisible, params.slideVisibleClass);
-        toggleSlideClasses$1(slide, isFullyVisible, params.slideFullyVisibleClass);
         slide.progress = rtl ? -slideProgress : slideProgress;
         slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
       }
@@ -4114,13 +4929,6 @@
       swiper.emit('progress', progress);
     }
 
-    const toggleSlideClasses = (slideEl, condition, className) => {
-      if (condition && !slideEl.classList.contains(className)) {
-        slideEl.classList.add(className);
-      } else if (!condition && slideEl.classList.contains(className)) {
-        slideEl.classList.remove(className);
-      }
-    };
     function updateSlidesClasses() {
       const swiper = this;
       const {
@@ -4134,6 +4942,9 @@
       const getFilteredSlide = selector => {
         return elementChildren(slidesEl, `.${params.slideClass}${selector}, swiper-slide${selector}`)[0];
       };
+      slides.forEach(slideEl => {
+        slideEl.classList.remove(params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
+      });
       let activeSlide;
       let prevSlide;
       let nextSlide;
@@ -4156,25 +4967,35 @@
         }
       }
       if (activeSlide) {
-        if (!gridEnabled) {
+        // Active classes
+        activeSlide.classList.add(params.slideActiveClass);
+        if (gridEnabled) {
+          if (nextSlide) {
+            nextSlide.classList.add(params.slideNextClass);
+          }
+          if (prevSlide) {
+            prevSlide.classList.add(params.slidePrevClass);
+          }
+        } else {
           // Next Slide
           nextSlide = elementNextAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
           if (params.loop && !nextSlide) {
             nextSlide = slides[0];
           }
+          if (nextSlide) {
+            nextSlide.classList.add(params.slideNextClass);
+          }
 
           // Prev Slide
           prevSlide = elementPrevAll(activeSlide, `.${params.slideClass}, swiper-slide`)[0];
           if (params.loop && !prevSlide === 0) {
             prevSlide = slides[slides.length - 1];
           }
+          if (prevSlide) {
+            prevSlide.classList.add(params.slidePrevClass);
+          }
         }
       }
-      slides.forEach(slideEl => {
-        toggleSlideClasses(slideEl, slideEl === activeSlide, params.slideActiveClass);
-        toggleSlideClasses(slideEl, slideEl === nextSlide, params.slideNextClass);
-        toggleSlideClasses(slideEl, slideEl === prevSlide, params.slidePrevClass);
-      });
       swiper.emitSlidesClasses();
     }
 
@@ -4552,7 +5373,6 @@
               swiper.wrapperEl.removeEventListener('transitionend', swiper.onTranslateToWrapperTransitionEnd);
               swiper.onTranslateToWrapperTransitionEnd = null;
               delete swiper.onTranslateToWrapperTransitionEnd;
-              swiper.animating = false;
               if (runCallbacks) {
                 swiper.emit('transitionEnd');
               }
@@ -4660,6 +5480,9 @@
       if (index === void 0) {
         index = 0;
       }
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -4679,12 +5502,9 @@
         wrapperEl,
         enabled
       } = swiper;
-      if (!enabled && !internal && !initial || swiper.destroyed || swiper.animating && params.preventInteractionOnTransition) {
+      if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial || swiper.destroyed) {
         return false;
       }
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
       let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
       if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
@@ -4811,6 +5631,9 @@
       if (index === void 0) {
         index = 0;
       }
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -4820,9 +5643,6 @@
       }
       const swiper = this;
       if (swiper.destroyed) return;
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       const gridEnabled = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
       let newIndex = index;
       if (swiper.params.loop) {
@@ -4854,9 +5674,6 @@
           if (centeredSlides) {
             needLoopFix = needLoopFix || targetSlideIndex < Math.ceil(slidesPerView / 2);
           }
-          if (internal && centeredSlides && swiper.params.slidesPerView !== 'auto' && !gridEnabled) {
-            needLoopFix = false;
-          }
           if (needLoopFix) {
             const direction = centeredSlides ? targetSlideIndex < swiper.activeIndex ? 'prev' : 'next' : targetSlideIndex - swiper.activeIndex - 1 < swiper.params.slidesPerView ? 'next' : 'prev';
             swiper.loopFix({
@@ -4882,6 +5699,9 @@
 
     /* eslint no-unused-vars: "off" */
     function slideNext(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -4892,9 +5712,6 @@
         animating
       } = swiper;
       if (!enabled || swiper.destroyed) return swiper;
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       let perGroup = params.slidesPerGroup;
       if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
         perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
@@ -4923,6 +5740,9 @@
 
     /* eslint no-unused-vars: "off" */
     function slidePrev(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -4936,9 +5756,6 @@
         animating
       } = swiper;
       if (!enabled || swiper.destroyed) return swiper;
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       const isVirtual = swiper.virtual && params.virtual.enabled;
       if (params.loop) {
         if (animating && !isVirtual && params.loopPreventsSliding) return false;
@@ -4991,19 +5808,22 @@
 
     /* eslint no-unused-vars: "off" */
     function slideReset(speed, runCallbacks, internal) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
       const swiper = this;
       if (swiper.destroyed) return;
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
     }
 
     /* eslint no-unused-vars: "off" */
     function slideToClosest(speed, runCallbacks, internal, threshold) {
+      if (speed === void 0) {
+        speed = this.params.speed;
+      }
       if (runCallbacks === void 0) {
         runCallbacks = true;
       }
@@ -5012,9 +5832,6 @@
       }
       const swiper = this;
       if (swiper.destroyed) return;
-      if (typeof speed === 'undefined') {
-        speed = swiper.params.speed;
-      }
       let index = swiper.activeIndex;
       const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
       const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
@@ -5649,7 +6466,7 @@
           data.startMoving = true;
         }
       }
-      if (data.isScrolling || e.type === 'touchmove' && data.preventTouchMoveFromPointerMove) {
+      if (data.isScrolling) {
         data.isTouched = false;
         return;
       }
@@ -5691,10 +6508,7 @@
         if (swiper.animating) {
           const evt = new window.CustomEvent('transitionend', {
             bubbles: true,
-            cancelable: true,
-            detail: {
-              bySwiperTouchMove: true
-            }
+            cancelable: true
           });
           swiper.wrapperEl.dispatchEvent(evt);
         }
@@ -6088,7 +6902,6 @@
       const capture = !!params.nested;
       const domMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
       const swiperMethod = method;
-      if (!el || typeof el === 'string') return;
 
       // Touch Events
       document[domMethod]('touchstart', swiper.onDocumentTouchStart, {
@@ -6197,8 +7010,6 @@
       const breakpointParams = breakpointOnlyParams || swiper.originalParams;
       const wasMultiRow = isGridEnabled(swiper, params);
       const isMultiRow = isGridEnabled(swiper, breakpointParams);
-      const wasGrabCursor = swiper.params.grabCursor;
-      const isGrabCursor = breakpointParams.grabCursor;
       const wasEnabled = params.enabled;
       if (wasMultiRow && !isMultiRow) {
         el.classList.remove(`${params.containerModifierClass}grid`, `${params.containerModifierClass}grid-column`);
@@ -6210,11 +7021,6 @@
         }
         swiper.emitContainerClasses();
       }
-      if (wasGrabCursor && !isGrabCursor) {
-        swiper.unsetGrabCursor();
-      } else if (!wasGrabCursor && isGrabCursor) {
-        swiper.setGrabCursor();
-      }
 
       // Toggle navigation, pagination, scrollbar
       ['navigation', 'pagination', 'scrollbar'].forEach(prop => {
@@ -6365,7 +7171,6 @@
         el,
         classNames
       } = swiper;
-      if (!el || typeof el === 'string') return;
       el.classList.remove(...classNames);
       swiper.emitContainerClasses();
     }
@@ -7130,12 +7935,8 @@
         // Cleanup styles
         if (cleanStyles) {
           swiper.removeClasses();
-          if (el && typeof el !== 'string') {
-            el.removeAttribute('style');
-          }
-          if (wrapperEl) {
-            wrapperEl.removeAttribute('style');
-          }
+          el.removeAttribute('style');
+          wrapperEl.removeAttribute('style');
           if (slides && slides.length) {
             slides.forEach(slideEl => {
               slideEl.classList.remove(params.slideVisibleClass, params.slideFullyVisibleClass, params.slideActiveClass, params.slideNextClass, params.slidePrevClass);
@@ -7151,9 +7952,7 @@
           swiper.off(eventName);
         });
         if (deleteInstance !== false) {
-          if (swiper.el && typeof swiper.el !== 'string') {
-            swiper.el.swiper = null;
-          }
+          swiper.el.swiper = null;
           deleteProps(swiper);
         }
         swiper.destroyed = true;
@@ -7547,7 +8346,7 @@
     };
 
     /**
-     * Swiper React 11.1.4
+     * Swiper React 11.0.7
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -7555,7 +8354,7 @@
      *
      * Released under the MIT License
      *
-     * Released on: May 30, 2024
+     * Released on: February 27, 2024
      */
 
 
@@ -8482,10 +9281,8 @@
         }
         if (el) {
           if (typeof el === 'string') res = [...document.querySelectorAll(el)];
-          if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
+          if (swiper.params.uniqueNavElements && typeof el === 'string' && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
             res = swiper.el.querySelector(el);
-          } else if (res && res.length === 1) {
-            res = res[0];
           }
         }
         if (el && !res) return el;
@@ -8607,14 +9404,7 @@
         nextEl = makeElementsArray(nextEl);
         prevEl = makeElementsArray(prevEl);
         const targetEl = e.target;
-        let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
-        if (swiper.isElement && !targetIsButton) {
-          const path = e.path || e.composedPath && e.composedPath();
-          if (path) {
-            targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
-          }
-        }
-        if (swiper.params.navigation.hideOnClick && !targetIsButton) {
+        if (swiper.params.navigation.hideOnClick && !prevEl.includes(targetEl) && !nextEl.includes(targetEl)) {
           if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
           let isHidden;
           if (nextEl.length) {
@@ -9270,7 +10060,7 @@
           dragEl
         } = scrollbar;
         if (!isTouched) return;
-        if (e.preventDefault && e.cancelable) e.preventDefault();else e.returnValue = false;
+        if (e.preventDefault) e.preventDefault();else e.returnValue = false;
         setDragPosition(e);
         wrapperEl.style.transitionDuration = '0ms';
         el.style.transitionDuration = '0ms';
@@ -9481,9 +10271,6 @@
         clicked: false
       };
       let liveRegion = null;
-      let preventFocusHandler;
-      let focusTargetSlideEl;
-      let visibilityChangedTimestamp = new Date().getTime();
       function notify(message) {
         const notification = liveRegion;
         if (notification.length === 0) return;
@@ -9564,28 +10351,24 @@
         if (swiper.pagination && swiper.pagination.el && (targetEl === swiper.pagination.el || swiper.pagination.el.contains(e.target))) {
           if (!e.target.matches(classesToSelector(swiper.params.pagination.bulletClass))) return;
         }
-        if (swiper.navigation && swiper.navigation.prevEl && swiper.navigation.nextEl) {
-          const prevEls = makeElementsArray(swiper.navigation.prevEl);
-          const nextEls = makeElementsArray(swiper.navigation.nextEl);
-          if (nextEls.includes(targetEl)) {
-            if (!(swiper.isEnd && !swiper.params.loop)) {
-              swiper.slideNext();
-            }
-            if (swiper.isEnd) {
-              notify(params.lastSlideMessage);
-            } else {
-              notify(params.nextSlideMessage);
-            }
+        if (swiper.navigation && swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl) {
+          if (!(swiper.isEnd && !swiper.params.loop)) {
+            swiper.slideNext();
           }
-          if (prevEls.includes(targetEl)) {
-            if (!(swiper.isBeginning && !swiper.params.loop)) {
-              swiper.slidePrev();
-            }
-            if (swiper.isBeginning) {
-              notify(params.firstSlideMessage);
-            } else {
-              notify(params.prevSlideMessage);
-            }
+          if (swiper.isEnd) {
+            notify(params.lastSlideMessage);
+          } else {
+            notify(params.nextSlideMessage);
+          }
+        }
+        if (swiper.navigation && swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl) {
+          if (!(swiper.isBeginning && !swiper.params.loop)) {
+            swiper.slidePrev();
+          }
+          if (swiper.isBeginning) {
+            notify(params.firstSlideMessage);
+          } else {
+            notify(params.prevSlideMessage);
           }
         }
         if (swiper.pagination && targetEl.matches(classesToSelector(swiper.params.pagination.bulletClass))) {
@@ -9650,14 +10433,10 @@
         addElLabel(el, message);
         addElControls(el, wrapperId);
       };
-      const handlePointerDown = e => {
-        if (focusTargetSlideEl && focusTargetSlideEl !== e.target && !focusTargetSlideEl.contains(e.target)) {
-          preventFocusHandler = true;
-        }
+      const handlePointerDown = () => {
         swiper.a11y.clicked = true;
       };
       const handlePointerUp = () => {
-        preventFocusHandler = false;
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
             if (!swiper.destroyed) {
@@ -9666,15 +10445,10 @@
           });
         });
       };
-      const onVisibilityChange = e => {
-        visibilityChangedTimestamp = new Date().getTime();
-      };
       const handleFocus = e => {
         if (swiper.a11y.clicked) return;
-        if (new Date().getTime() - visibilityChangedTimestamp < 100) return;
         const slideEl = e.target.closest(`.${swiper.params.slideClass}, swiper-slide`);
         if (!slideEl || !swiper.slides.includes(slideEl)) return;
-        focusTargetSlideEl = slideEl;
         const isActive = swiper.slides.indexOf(slideEl) === swiper.activeIndex;
         const isVisible = swiper.params.watchSlidesProgress && swiper.visibleSlides && swiper.visibleSlides.includes(slideEl);
         if (isActive || isVisible) return;
@@ -9684,15 +10458,7 @@
         } else {
           swiper.el.scrollTop = 0;
         }
-        requestAnimationFrame(() => {
-          if (preventFocusHandler) return;
-          if (swiper.params.loop) {
-            swiper.slideToLoop(parseInt(slideEl.getAttribute('data-swiper-slide-index')), 0);
-          } else {
-            swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
-          }
-          preventFocusHandler = false;
-        });
+        swiper.slideTo(swiper.slides.indexOf(slideEl), 0);
       };
       const initSlides = () => {
         const params = swiper.params.a11y;
@@ -9757,9 +10523,6 @@
         }
 
         // Tab focus
-        const document = getDocument();
-        document.addEventListener('visibilitychange', onVisibilityChange);
-        swiper.el.addEventListener('focus', handleFocus, true);
         swiper.el.addEventListener('focus', handleFocus, true);
         swiper.el.addEventListener('pointerdown', handlePointerDown, true);
         swiper.el.addEventListener('pointerup', handlePointerUp, true);
@@ -9786,14 +10549,11 @@
             el.removeEventListener('keydown', onEnterOrSpaceKey);
           });
         }
-        const document = getDocument();
-        document.removeEventListener('visibilitychange', onVisibilityChange);
+
         // Tab focus
-        if (swiper.el && typeof swiper.el !== 'string') {
-          swiper.el.removeEventListener('focus', handleFocus, true);
-          swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
-          swiper.el.removeEventListener('pointerup', handlePointerUp, true);
-        }
+        swiper.el.removeEventListener('focus', handleFocus, true);
+        swiper.el.removeEventListener('pointerdown', handlePointerDown, true);
+        swiper.el.removeEventListener('pointerup', handlePointerUp, true);
       }
       on('beforeInit', () => {
         liveRegion = createElement('span', swiper.params.a11y.notificationClass);
@@ -9865,7 +10625,7 @@
         if (!swiper || swiper.destroyed || !swiper.wrapperEl) return;
         if (e.target !== swiper.wrapperEl) return;
         swiper.wrapperEl.removeEventListener('transitionend', onTransitionEnd);
-        if (pausedByPointerEnter || e.detail && e.detail.bySwiperTouchMove) {
+        if (pausedByPointerEnter) {
           return;
         }
         resume();
@@ -10036,10 +10796,8 @@
         }
       };
       const detachMouseEvents = () => {
-        if (swiper.el && typeof swiper.el !== 'string') {
-          swiper.el.removeEventListener('pointerenter', onPointerEnter);
-          swiper.el.removeEventListener('pointerleave', onPointerLeave);
-        }
+        swiper.el.removeEventListener('pointerenter', onPointerEnter);
+        swiper.el.removeEventListener('pointerleave', onPointerLeave);
       };
       const attachDocumentEvents = () => {
         const document = getDocument();
@@ -10377,49 +11135,6 @@
     };
     var Scroll$1 = React.memo(Scroll);
 
-    const FormatImage = React.forwardRef((props, ref) => {
-        const { src, onLoad, style, className, loading, alt = 'image' } = props;
-        const [imgSrc, setImgSrc] = React.useState(src);
-        const imgRef = React.useRef(null);
-        const [visible, setVisible] = React.useState(false);
-        React.useImperativeHandle(ref, () => ({
-            setSrc: (v) => {
-                if (v)
-                    setImgSrc(v);
-            }
-        }));
-        React.useEffect(() => {
-            if (src)
-                setImgSrc(src);
-        }, [src]);
-        React.useEffect(() => {
-            const onShow = () => {
-                if (src && !visible && imgRef.current) {
-                    imgRef.current.src = '';
-                    imgRef.current.src = src;
-                }
-            };
-            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-            return () => {
-                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-            };
-        }, [src, visible]);
-        return (React.createElement(React.Fragment, null,
-            !visible && !imgSrc && React.createElement("div", { style: { width: '100%', height: '100%', zIndex: 1, backgroundColor: '#fff' } }),
-            (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
-                React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
-                React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
-                React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
-                React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
-                        setVisible(true);
-                        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-                    }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign({}, style), loading: loading, onLoad: (e) => {
-                    setVisible(true);
-                    onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-                }, alt: alt }))));
-    });
-    var FormatImage$1 = React.memo(FormatImage);
-
     const CommodityGroup = ({ products, data, defImg, style, onCLick, popupDetailData, check }) => {
         var _a;
         const { productView } = useEventReport();
@@ -10509,13 +11224,13 @@
                 styleElement.id = 'onetrust-pc-sdk';
                 styleElement.setAttribute('type', 'text/css');
                 document.head.appendChild(styleElement);
-                const css = `
-      #onetrust-pc-sdk {
-        height: ${finalHeight}px !important;
-      }
-      #onetrust-pc-sdk #ot-pc-content{
-        bottom: ${b}px !important;
-      }
+                const css = `
+      #onetrust-pc-sdk {
+        height: ${finalHeight}px !important;
+      }
+      #onetrust-pc-sdk #ot-pc-content{
+        bottom: ${b}px !important;
+      }
       `;
                 styleElement.textContent = css;
             }
@@ -11062,10 +11777,10 @@
                         __html: setFontForText((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                     } }),
                 React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
-                    React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+                    React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
         };
         const renderBtn = () => {
@@ -12064,7 +12779,7 @@
         const productInfoText = ({ isPost }) => {
             return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
-                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
 Made in Italy` })));
         };
         const getStyle = React.useCallback((style) => {
@@ -18246,10 +18961,10 @@ Made in Italy` })));
         const traceInfo = ((_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.traceInfo) || ((_c = recData === null || recData === void 0 ? void 0 : recData.product) === null || _c === void 0 ? void 0 : _c.traceInfo) || '';
         const getPropsVal = React.useCallback((index, str) => {
             try {
-                return new Function('props', 'str', `if (str) {
-            return props?.button${index + 1}${str}
-          } else {
-            return props?.button${index + 1}
+                return new Function('props', 'str', `if (str) {
+            return props?.button${index + 1}${str}
+          } else {
+            return props?.button${index + 1}
           }`)(props, str);
             }
             catch (_a) { }
@@ -20132,10 +20847,16 @@ Made in Italy` })));
                 React.createElement(Swiper, { style: {
                         marginTop: tagHeight
                     }, ref: swiperRef, onSlideChange: () => {
-                        swiperRef.current.swiper.allowTouchMove = false;
-                        setTimeout(() => {
-                            swiperRef.current.swiper.allowTouchMove = true;
-                        }, 500);
+                        var _a;
+                        if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
+                            swiperRef.current.swiper.allowTouchMove = false;
+                            setTimeout(() => {
+                                var _a;
+                                if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
+                                    swiperRef.current.swiper.allowTouchMove = true;
+                                }
+                            }, 500);
+                        }
                     }, onActiveIndexChange: (swiper) => {
                         var _a, _b;
                         setActiveIndex(swiper.activeIndex);
@@ -21028,10 +21749,16 @@ Made in Italy` })));
             // className={style['clc-sxp-container']}
             style: { height: containerHeight, position: 'relative', pointerEvents } },
             React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
-                    swiperRef.current.swiper.allowTouchMove = false;
-                    setTimeout(() => {
-                        swiperRef.current.swiper.allowTouchMove = true;
-                    }, 500);
+                    var _a;
+                    if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
+                        swiperRef.current.swiper.allowTouchMove = false;
+                        setTimeout(() => {
+                            var _a;
+                            if ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) {
+                                swiperRef.current.swiper.allowTouchMove = true;
+                            }
+                        }, 500);
+                    }
                 }, onActiveIndexChange: (swiper) => {
                     setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
                     onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
@@ -21187,6 +21914,7 @@ Made in Italy` })));
     exports.DiyStoryPreview = index$1;
     exports.EditorDataProvider = EditorDataProvider;
     exports.Modal = Modal$1;
+    exports.StructurePage = StructurePage;
     exports.SxpDataSourceProvider = SxpDataSourceProvider$1;
     exports.SxpPageCore = index;
     exports.SxpPageRender = SxpPageRender$1;