pb-sxp-ui 1.20.49 → 1.20.51

package/dist/index.cjs

@@ -20990,8 +20990,74 @@ const StructurePage = (_a) => {
             }
         });
     }, [bffEventReport]);
+    // Hero Section 图片浏览事件上报
+    const heroImageStartTime = React.useRef(0);
+    const heroImageStartReported = React.useRef(false); // 标记是否已上报 start 事件
+    const handleHeroImageStartEvent = React.useCallback(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.heroSection))
+            return;
+        const item = data.heroSection;
+        // 只对图片类型上报（不包括视频）
+        if (item.url)
+            return;
+        const startTime = Date.now();
+        heroImageStartTime.current = startTime;
+        heroImageStartReported.current = true; // 标记已上报
+        console.log('[handleHeroImageStartEvent] 上报 viewImageCarouselStart');
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'viewImageCarouselStart',
+                eventDescription: 'User start view the image carousel',
+                sceneId: '',
+                contentId: item.itemId || '',
+                contentName: item.title || '',
+                imageStartTime: `${startTime}`,
+                contentTags: item.tags ? JSON.stringify(item.tags) : '[]',
+                position: '0',
+                contentFormat: 'image',
+                rtc: '',
+                traceInfo: item.traceInfo || ''
+            }
+        });
+    }, [data, bffEventReport]);
+    const handleHeroImageEndEvent = React.useCallback(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.heroSection))
+            return;
+        const item = data.heroSection;
+        // 只对图片类型上报（不包括视频）
+        if (item.url)
+            return;
+        // 只有上报过 start 事件才上报 end 事件
+        if (!heroImageStartReported.current) {
+            console.log('[handleHeroImageEndEvent] 未上报过 start 事件，跳过 end 事件');
+            return;
+        }
+        const endTime = Date.now();
+        const duration = heroImageStartTime.current === 0 ? 0 : (endTime - heroImageStartTime.current) / 1000;
+        console.log('[handleHeroImageEndEvent] 上报 viewImageCarouselEnd, duration:', duration);
+        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+            eventInfo: {
+                eventSubject: 'viewImageCarouselEnd',
+                eventDescription: 'User end view the image carousel',
+                sceneId: '',
+                contentId: item.itemId || '',
+                contentName: item.title || '',
+                imageEndTime: `${endTime}`,
+                playDuration: `${duration}`,
+                contentTags: item.tags ? JSON.stringify(item.tags) : '[]',
+                position: '0',
+                contentFormat: 'image',
+                rtc: '',
+                traceInfo: item.traceInfo || ''
+            }
+        });
+        // 重置标记，允许下次重新上报
+        heroImageStartReported.current = false;
+        heroImageStartTime.current = 0;
+    }, [data, bffEventReport]);
     // Carousel 导航
     // Carousel 图片浏览开始事件上报
+    const carouselImageStartReported = React.useRef({}); // 记录每个索引是否已上报 start
     const handleCarouselImageStartEvent = React.useCallback((index, loadTime) => {
         var _a, _b;
         if (!((_a = data === null || data === void 0 ? void 0 : data.carouselSection) === null || _a === void 0 ? void 0 : _a[index]))
@@ -21000,8 +21066,15 @@ const StructurePage = (_a) => {
         // 只对图片类型上报（不包括视频）
         if (item.url)
             return;
+        // 如果该索引已经上报过 start 事件（且还没有 end），跳过重复上报
+        if (carouselImageStartReported.current[index]) {
+            console.log('[handleCarouselImageStartEvent] 索引', index, '已上报过 start 事件，跳过重复上报');
+            return;
+        }
         const startTime = Date.now();
         carouselImageStartTime.current = startTime;
+        carouselImageStartReported.current[index] = true; // 标记已上报
+        console.log('[handleCarouselImageStartEvent] 上报 viewImageCarouselStart, index:', index);
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: Object.assign(Object.assign({ eventSubject: 'viewImageCarouselStart', eventDescription: 'User start view the image carousel', sceneId: '', contentId: item.itemId || '', contentName: item.title || '', imageStartTime: `${startTime}`, contentTags: item.tags ? JSON.stringify(item.tags) : '[]', position: `${index}`, contentFormat: 'image', rtc: '', traceInfo: item.traceInfo || '' }, (loadTime && { loadTime: `${loadTime}` })), { contentSize: ((_b = item.imgUrls) === null || _b === void 0 ? void 0 : _b[0]) ? '1' : '0' })
         });
@@ -21015,8 +21088,14 @@ const StructurePage = (_a) => {
         // 只对图片类型上报（不包括视频）
         if (item.url)
             return;
+        // 只有上报过 start 事件才上报 end 事件
+        if (!carouselImageStartReported.current[index]) {
+            console.log('[handleCarouselImageEndEvent] 索引', index, '未上报过 start 事件，跳过 end 事件');
+            return;
+        }
         const endTime = Date.now();
         const duration = carouselImageStartTime.current === 0 ? 0 : (endTime - carouselImageStartTime.current) / 1000;
+        console.log('[handleCarouselImageEndEvent] 上报 viewImageCarouselEnd, index:', index, 'duration:', duration);
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'viewImageCarouselEnd',
@@ -21033,6 +21112,9 @@ const StructurePage = (_a) => {
                 traceInfo: item.traceInfo || ''
             }
         });
+        // 重置标记，允许下次重新上报
+        carouselImageStartReported.current[index] = false;
+        carouselImageStartTime.current = 0;
     }, [data, bffEventReport]);
     const handleCarouselPrev = () => {
         var _a;
@@ -21126,55 +21208,121 @@ const StructurePage = (_a) => {
             handleCarouselImageStartEvent(newIndex, carouselImageLoadTime.current[newIndex]);
         }
     };
+    // Hero Section 的曝光检测 ref
+    const heroSectionRef = React.useRef(null);
+    // Hero Section 进入可视区域时的回调
+    const handleHeroVisible = React.useCallback(() => {
+        var _a, _b;
+        if (!(data === null || data === void 0 ? void 0 : data.heroSection))
+            return;
+        const item = data.heroSection;
+        console.log('[Hero onVisible] 是否是视频:', !!item.url, '是否是图片:', !!((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]));
+        // 只对图片类型上报（不包括视频），允许重复上报
+        if (!item.url && ((_b = item.imgUrls) === null || _b === void 0 ? void 0 : _b[0])) {
+            console.log('[Hero onVisible] 上报 viewImageCarouselStart');
+            handleHeroImageStartEvent();
+        }
+    }, [data === null || data === void 0 ? void 0 : data.heroSection, handleHeroImageStartEvent]);
+    // Hero Section 离开可视区域时的回调
+    const handleHeroHidden = React.useCallback(() => {
+        var _a, _b;
+        if (!(data === null || data === void 0 ? void 0 : data.heroSection))
+            return;
+        const item = data.heroSection;
+        console.log('[Hero onHidden] 是否是视频:', !!item.url, '是否是图片:', !!((_a = item.imgUrls) === null || _a === void 0 ? void 0 : _a[0]));
+        // 只对图片类型上报（不包括视频）
+        if (!item.url && ((_b = item.imgUrls) === null || _b === void 0 ? void 0 : _b[0])) {
+            console.log('[Hero onHidden] 上报 viewImageCarouselEnd');
+            handleHeroImageEndEvent();
+        }
+    }, [data === null || data === void 0 ? void 0 : data.heroSection, handleHeroImageEndEvent]);
+    // 使用高级曝光检测监听 Hero Section
+    useAdvancedOnScreen(heroSectionRef, {
+        threshold: 0.67, // 2/3 区域可见才开始计时
+        delay: 1000, // 停留 1 秒后触发
+        onVisible: handleHeroVisible,
+        onHidden: handleHeroHidden
+    });
     // Carousel Section 的曝光检测 ref
     const carouselSectionRef = React.useRef(null);
-    const hasCarouselReported = React.useRef(false);
+    const carouselIsVisible = React.useRef(false); // 记录 carousel section 是否在可视区域内
+    // 调试：检查 carouselSectionRef 是否正确挂载
+    React.useEffect(() => {
+        var _a;
+        console.log('[Carousel Debug] carouselSectionRef.current:', !!carouselSectionRef.current);
+        console.log('[Carousel Debug] carouselSection 数据存在:', !!(data === null || data === void 0 ? void 0 : data.carouselSection));
+        console.log('[Carousel Debug] carouselSection 长度:', (_a = data === null || data === void 0 ? void 0 : data.carouselSection) === null || _a === void 0 ? void 0 : _a.length);
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection]);
     // Carousel Section 进入可视区域时的回调
     const handleCarouselVisible = React.useCallback(() => {
-        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
+        var _a;
+        console.log('[Carousel onVisible] 回调被触发');
+        console.log('[Carousel onVisible] data?.carouselSection:', !!(data === null || data === void 0 ? void 0 : data.carouselSection));
+        console.log('[Carousel onVisible] carouselSection.length:', (_a = data === null || data === void 0 ? void 0 : data.carouselSection) === null || _a === void 0 ? void 0 : _a.length);
+        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0) {
+            console.log('[Carousel onVisible] 没有 carouselSection 数据，返回');
             return;
-        const currentItem = data.carouselSection[carouselIndex];
-        console.log('[Carousel onVisible] 当前索引:', carouselIndex, '是否是视频:', !!(currentItem === null || currentItem === void 0 ? void 0 : currentItem.url));
-        // 只在首次进入可视区域时上报第一张图片
-        if (!hasCarouselReported.current) {
-            hasCarouselReported.current = true;
-            // 只对图片类型上报（不包括视频）
-            if (!currentItem.url) {
-                handleCarouselImageStartEvent(carouselIndex);
-            }
+        }
+        const currentIndex = currentCarouselIndexRef.current;
+        const currentItem = data.carouselSection[currentIndex];
+        carouselIsVisible.current = true;
+        console.log('[Carousel onVisible] 当前索引:', currentIndex, '是否是视频:', !!(currentItem === null || currentItem === void 0 ? void 0 : currentItem.url));
+        // 只对图片类型上报（不包括视频），允许重复上报
+        if (!currentItem.url) {
+            console.log('[Carousel onVisible] 上报 viewImageCarouselStart, 索引:', currentIndex);
+            handleCarouselImageStartEvent(currentIndex);
         }
         // 如果当前项是视频，自动播放
-        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[carouselIndex]) {
-            const currentVideo = carouselVideoRefs.current[carouselIndex];
+        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[currentIndex]) {
+            const currentVideo = carouselVideoRefs.current[currentIndex];
             if (currentVideo) {
-                console.log('[Carousel onVisible] 开始播放视频，索引:', carouselIndex);
+                console.log('[Carousel onVisible] 开始播放视频，索引:', currentIndex);
                 // 更新当前正在播放的视频索引
-                currentPlayingCarouselIndex.current = carouselIndex;
+                currentPlayingCarouselIndex.current = currentIndex;
                 // 标记这次播放是自动触发的
-                carouselAutoPlayTriggers.current[carouselIndex] = true;
+                carouselAutoPlayTriggers.current[currentIndex] = true;
                 currentVideo.play().catch(err => {
                     console.warn('[Carousel] Video autoplay failed (onVisible):', err);
                     // 播放失败时重置标记
-                    carouselAutoPlayTriggers.current[carouselIndex] = false;
+                    carouselAutoPlayTriggers.current[currentIndex] = false;
                 });
                 // 更新播放状态
                 setCarouselVideoPausedStates(prev => {
                     const newStates = [...prev];
-                    newStates[carouselIndex] = false;
+                    newStates[currentIndex] = false;
                     return newStates;
                 });
             }
         }
-    }, [data === null || data === void 0 ? void 0 : data.carouselSection, carouselIndex, handleCarouselImageStartEvent]);
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection, handleCarouselImageStartEvent]);
+    // 使用 ref 保存当前的 carouselIndex，避免闭包问题
+    const currentCarouselIndexRef = React.useRef(carouselIndex);
+    React.useEffect(() => {
+        currentCarouselIndexRef.current = carouselIndex;
+    }, [carouselIndex]);
     // Carousel Section 离开可视区域时的回调
     const handleCarouselHidden = React.useCallback(() => {
+        var _a;
+        console.log('[Carousel onHidden] ========== 回调被触发 ==========');
         // Carousel Section 离开可视区域时，暂停当前正在播放的视频
         // 使用 ref 来获取当前正在播放的视频索引，避免闭包问题
         const playingIndex = currentPlayingCarouselIndex.current;
+        const currentIndex = currentCarouselIndexRef.current;
+        carouselIsVisible.current = false;
         console.log('[Carousel onHidden] 被调用');
+        console.log('[Carousel onHidden] 当前索引:', currentIndex);
         console.log('[Carousel onHidden] 正在播放的视频索引:', playingIndex);
         console.log('[Carousel onHidden] carouselVideoRefs.current 长度:', carouselVideoRefs.current.length);
         console.log('[Carousel onHidden] carouselVideoRefs.current[playingIndex] 存在:', !!carouselVideoRefs.current[playingIndex]);
+        // 如果当前显示的是图片，上报图片结束事件
+        if (((_a = data === null || data === void 0 ? void 0 : data.carouselSection) === null || _a === void 0 ? void 0 : _a[currentIndex]) && !data.carouselSection[currentIndex].url) {
+            console.log('[Carousel onHidden] 当前是图片，尝试上报 viewImageCarouselEnd, 索引:', currentIndex);
+            console.log('[Carousel onHidden] carouselImageStartReported[' + currentIndex + ']:', carouselImageStartReported.current[currentIndex]);
+            handleCarouselImageEndEvent(currentIndex);
+        }
+        else {
+            console.log('[Carousel onHidden] 当前不是图片或数据为空，跳过上报');
+        }
         if (playingIndex >= 0 && carouselVideoRefs.current[playingIndex]) {
             const currentVideo = carouselVideoRefs.current[playingIndex];
             if (currentVideo) {
@@ -21195,15 +21343,96 @@ const StructurePage = (_a) => {
         else {
             console.log('[Carousel onHidden] 条件不满足，不暂停视频');
         }
-    }, []);
+    }, [data, handleCarouselImageEndEvent]);
     // Carousel Section 进入可视区域时上报第一张图片的浏览事件，并自动播放视频
-    useAdvancedOnScreen(carouselSectionRef, {
-        threshold: 0.67,
-        delay: 1000,
-        onVisible: handleCarouselVisible,
-        onHidden: handleCarouselHidden,
-        name: 'Carousel'
-    });
+    // 注意：只有当 carouselSection 数据存在且 ref 已挂载时才启用监听
+    React.useEffect(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || !carouselSectionRef.current) {
+            return;
+        }
+        let visibleTimer = null;
+        // 手动创建 IntersectionObserver
+        const observer = new IntersectionObserver(([entry]) => {
+            const isIntersecting = entry.isIntersecting;
+            const intersectionRatio = entry.intersectionRatio;
+            console.log('[Carousel Observer] 状态变化:', {
+                isIntersecting,
+                intersectionRatio,
+                threshold: 0.67
+            });
+            if (isIntersecting && intersectionRatio >= 0.67) {
+                // 进入可视区域且达到阈值
+                console.log('[Carousel Observer] 进入可视区域，设置延迟定时器 1000ms');
+                // 清除旧的定时器
+                if (visibleTimer) {
+                    clearTimeout(visibleTimer);
+                }
+                visibleTimer = setTimeout(() => {
+                    console.log('[Carousel Observer] 延迟时间到，触发 handleCarouselVisible');
+                    handleCarouselVisible();
+                    visibleTimer = null;
+                }, 1000);
+            }
+            else if (!isIntersecting || intersectionRatio < 0.67) {
+                // 离开可视区域或未达到阈值
+                console.log('[Carousel Observer] 离开可视区域');
+                // 清除定时器
+                if (visibleTimer) {
+                    console.log('[Carousel Observer] 清除延迟定时器（还未到时间）');
+                    clearTimeout(visibleTimer);
+                    visibleTimer = null;
+                }
+                else {
+                    console.log('[Carousel Observer] 触发 handleCarouselHidden');
+                    handleCarouselHidden();
+                }
+            }
+        }, { threshold: 0.67 });
+        observer.observe(carouselSectionRef.current);
+        return () => {
+            console.log('[Carousel] 停止监听 carousel section');
+            if (visibleTimer) {
+                clearTimeout(visibleTimer);
+            }
+            observer.disconnect();
+        };
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection, handleCarouselVisible, handleCarouselHidden]);
+    // 监听 carouselIndex 变化，当 carousel section 可见时上报图片切换事件
+    const prevCarouselIndex = React.useRef(0);
+    React.useEffect(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
+            return;
+        if (!carouselIsVisible.current)
+            return; // 只在 carousel 可见时处理
+        const prevIndex = prevCarouselIndex.current;
+        const currentIndex = carouselIndex;
+        // 如果索引发生变化
+        if (prevIndex !== currentIndex) {
+            console.log('[Carousel Index Change] 从', prevIndex, '切换到', currentIndex);
+            console.log('[Carousel Index Change] carouselIsVisible:', carouselIsVisible.current);
+            // 上报旧图片的结束事件（如果是图片）
+            const prevItem = data.carouselSection[prevIndex];
+            if (prevItem && !prevItem.url) {
+                console.log('[Carousel Index Change] 旧图片, 索引:', prevIndex, 'startReported:', carouselImageStartReported.current[prevIndex]);
+                handleCarouselImageEndEvent(prevIndex);
+            }
+            else {
+                console.log('[Carousel Index Change] 旧项不是图片，索引:', prevIndex);
+            }
+            // 上报新图片的开始事件（如果是图片）
+            const currentItem = data.carouselSection[currentIndex];
+            if (currentItem && !currentItem.url) {
+                console.log('[Carousel Index Change] 新图片, 索引:', currentIndex, '即将上报 start');
+                handleCarouselImageStartEvent(currentIndex, carouselImageLoadTime.current[currentIndex]);
+                console.log('[Carousel Index Change] 新图片 start 已上报, startReported:', carouselImageStartReported.current[currentIndex]);
+            }
+            else {
+                console.log('[Carousel Index Change] 新项不是图片，索引:', currentIndex);
+            }
+            // 更新 prevIndex
+            prevCarouselIndex.current = currentIndex;
+        }
+    }, [carouselIndex, data === null || data === void 0 ? void 0 : data.carouselSection, handleCarouselImageStartEvent, handleCarouselImageEndEvent]);
     // Carousel 切换时暂停其他视频
     // 注意：不再在切换时立即播放当前视频，而是由 PostView 组件处理（进入2/3可视区域并停留1秒后播放）
     React.useEffect(() => {
@@ -21507,10 +21736,6 @@ const StructurePage = (_a) => {
                     view_time: viewTime,
                     content_id: (productData === null || productData === void 0 ? void 0 : productData.itemId) || ''
                 });
-                console.log('[StructurePage] PAGE_DID_HIDE - 上报 ExitFeed (弹窗内)', {
-                    viewTime,
-                    productId: productData === null || productData === void 0 ? void 0 : productData.itemId
-                });
             }
         };
         SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
@@ -21550,7 +21775,7 @@ const StructurePage = (_a) => {
         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(Object.assign({}, baseStyles.container), { height: containerHeight, width: containerWidth }), containerStyle), { backgroundColor: 'transparent' }) },
-        data.heroSection && (React.createElement("div", { style: baseStyles.heroSection },
+        data.heroSection && (React.createElement("div", { ref: heroSectionRef, style: baseStyles.heroSection },
             data.heroSection.text && (React.createElement("div", { style: {
                     width: '100%',
                     padding: (() => {
@@ -21673,15 +21898,12 @@ const StructurePage = (_a) => {
                                             // Cover 已加载，计算已显示的时间
                                             const coverDisplayTime = Date.now() - heroCoverLoadTime.current;
                                             const remainingDisplayTime = Math.max(0, minCoverDisplayTime - coverDisplayTime);
-                                            console.log('[Hero Video] Cover loaded, displayed for', coverDisplayTime, 'ms, waiting', remainingDisplayTime, 'ms more before showing video');
                                             if (remainingDisplayTime > 0) {
                                                 // 还需要继续显示 cover
                                                 setTimeout(() => {
-                                                    console.log('[Hero Video] Cover displayed long enough, transitioning to video');
                                                     // 检查视频当前的缓冲状态
                                                     // readyState: 0=HAVE_NOTHING, 1=HAVE_METADATA, 2=HAVE_CURRENT_DATA, 3=HAVE_FUTURE_DATA, 4=HAVE_ENOUGH_DATA
                                                     const isVideoBuffering = videoEl.readyState < 3; // 小于 3 说明还在缓冲
-                                                    console.log('[Hero Video] Video readyState:', videoEl.readyState, 'isBuffering:', isVideoBuffering);
                                                     if (isVideoBuffering) {
                                                         setIsHeroVideoWaiting(true);
                                                     }
@@ -21693,10 +21915,8 @@ const StructurePage = (_a) => {
                                             }
                                             else {
                                                 // 已经显示足够长时间，直接显示视频
-                                                console.log('[Hero Video] Cover already displayed long enough, transitioning to video');
                                                 // 检查视频当前的缓冲状态
                                                 const isVideoBuffering = videoEl.readyState < 3;
-                                                console.log('[Hero Video] Video readyState:', videoEl.readyState, 'isBuffering:', isVideoBuffering);
                                                 if (isVideoBuffering) {
                                                     setIsHeroVideoWaiting(true);
                                                 }
@@ -21743,14 +21963,9 @@ const StructurePage = (_a) => {
                             const initTime = videoLoadTime.current[videoId] || loadTime;
                             videoLoadTime.current[videoId] = loadTime - initTime;
                         } }),
-                    (!isHeroVideoLoaded || (((_g = data.heroSection) === null || _g === void 0 ? void 0 : _g.cover) && !isHeroCoverLoaded)) && (React.createElement("img", { src: (((_h = data.heroSection) === null || _h === void 0 ? void 0 : _h.cover) && !isHeroCoverError) ? data.heroSection.cover : ((sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.loading_image) || img$2), alt: 'video cover', onLoad: () => {
-                            var _a, _b;
+                    (!isHeroVideoLoaded || (((_g = data.heroSection) === null || _g === void 0 ? void 0 : _g.cover) && !isHeroCoverLoaded)) && (React.createElement("img", { src: (((_h = data.heroSection) === null || _h === void 0 ? void 0 : _h.cover) && !isHeroCoverError) ? data.heroSection.cover : ((sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || img$2), alt: 'video cover', onLoad: () => {
                             const loadTime = Date.now();
                             heroCoverLoadTime.current = loadTime;
-                            console.log('[Hero] Cover/Loading image loaded successfully at', loadTime);
-                            console.log('  - cover:', (_a = data.heroSection) === null || _a === void 0 ? void 0 : _a.cover);
-                            console.log('  - loading_image:', sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.loading_image);
-                            console.log('  - using:', (((_b = data.heroSection) === null || _b === void 0 ? void 0 : _b.cover) && !isHeroCoverError) ? data.heroSection.cover : ((sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.loading_image) || img$2));
                             setIsHeroCoverError(false);
                             // 延迟一点再设置 loaded 状态，确保图片已经渲染到屏幕上
                             setTimeout(() => {
@@ -21759,11 +21974,11 @@ const StructurePage = (_a) => {
                             }, 100); // 给 100ms 的渲染时间
                         }, onError: (e) => {
                             var _a, _b;
-                            console.error('[Hero] Cover/Loading image failed to load:', e);
+                            console.error('[Hero] Cover/Placeholder image failed to load:', e);
                             console.log('  - cover:', (_a = data.heroSection) === null || _a === void 0 ? void 0 : _a.cover);
-                            console.log('  - loading_image:', sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.loading_image);
-                            console.log('  - Switching to loading animation');
-                            // 如果 cover 加载失败，标记错误并切换到加载动画
+                            console.log('  - placeholder_image:', sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image);
+                            console.log('  - Switching to fallback image');
+                            // 如果 cover 加载失败，标记错误并切换到占位图
                             if ((_b = data.heroSection) === null || _b === void 0 ? void 0 : _b.cover) {
                                 setIsHeroCoverError(true);
                             }
@@ -21856,29 +22071,30 @@ const StructurePage = (_a) => {
                                             const elapsedTime = Date.now() - startTime;
                                             const remainingTime = Math.max(0, minDisplayTime - elapsedTime);
                                             setTimeout(() => {
-                                                // 视频准备好了，隐藏 cover/placeholder
-                                                setCarouselShowCoverStates(prev => {
+                                                // 步骤1：先让视频淡入（在 cover 下面），等待视频完全不透明
+                                                setCarouselVideoLoadedStates(prev => {
                                                     const newStates = [...prev];
-                                                    newStates[index] = false;
+                                                    newStates[index] = true;
                                                     return newStates;
                                                 });
-                                                // 重置暂停状态（视频开始播放，不是暂停状态）
-                                                setCarouselVideoPausedStates(prev => {
+                                                setCarouselVideoWaitingStates(prev => {
                                                     const newStates = [...prev];
                                                     newStates[index] = false;
                                                     return newStates;
                                                 });
-                                                // 标记为已加载
-                                                setCarouselVideoLoadedStates(prev => {
-                                                    const newStates = [...prev];
-                                                    newStates[index] = true;
-                                                    return newStates;
-                                                });
-                                                setCarouselVideoWaitingStates(prev => {
+                                                setCarouselVideoPausedStates(prev => {
                                                     const newStates = [...prev];
                                                     newStates[index] = false;
                                                     return newStates;
                                                 });
+                                                // 步骤2：等待视频淡入完成（300ms）+ 额外缓冲（50ms），再开始淡出 cover
+                                                setTimeout(() => {
+                                                    setCarouselShowCoverStates(prev => {
+                                                        const newStates = [...prev];
+                                                        newStates[index] = false;
+                                                        return newStates;
+                                                    });
+                                                }, 350); // 视频淡入时间 300ms + 50ms 缓冲
                                             }, remainingTime);
                                         });
                                         el.addEventListener('pause', (e) => {
@@ -21911,7 +22127,7 @@ const StructurePage = (_a) => {
                                             });
                                         });
                                     }
-                                }, src: item.url, style: Object.assign(Object.assign({}, baseStyles.carouselVideo), { opacity: carouselVideoLoadedStates[index] ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }), preload: "auto", muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
+                                }, src: item.url, style: Object.assign(Object.assign({}, baseStyles.carouselVideo), { position: 'absolute', left: 0, top: 0, zIndex: 1, opacity: carouselVideoLoadedStates[index] ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }), preload: "auto", muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
                                     const videoId = `${item.itemId}-carouselSection-${index}`;
                                     const loadTime = Date.now();
                                     const initTime = videoLoadTime.current[videoId] || loadTime;
@@ -21928,11 +22144,12 @@ const StructurePage = (_a) => {
                                         : (item.cover || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) ? 'cover' : 'contain',
                                     zIndex: 10,
                                     backgroundColor: '#000',
-                                    display: carouselShowCoverStates[index] ? 'block' : 'none',
+                                    opacity: carouselShowCoverStates[index] ? 1 : 0,
+                                    visibility: carouselShowCoverStates[index] ? 'visible' : 'hidden',
+                                    transition: 'opacity 0.3s ease-out',
                                     pointerEvents: 'none',
-                                    // CSS 优化：使用 will-change 和 content-visibility
-                                    willChange: carouselShowCoverStates[index] ? 'auto' : 'contents',
-                                    contentVisibility: carouselShowCoverStates[index] ? 'visible' : 'hidden',
+                                    // CSS 优化：使用 will-change
+                                    willChange: 'opacity',
                                     // 硬件加速
                                     transform: 'translateZ(0)',
                                     backfaceVisibility: 'hidden',
@@ -21980,29 +22197,30 @@ const StructurePage = (_a) => {
                                         const elapsedTime = Date.now() - startTime;
                                         const remainingTime = Math.max(0, minDisplayTime - elapsedTime);
                                         setTimeout(() => {
-                                            // 视频准备好了，隐藏 cover/placeholder
-                                            setCarouselShowCoverStates(prev => {
+                                            // 步骤1：先让视频淡入（在 cover 下面），等待视频完全不透明
+                                            setCarouselVideoLoadedStates(prev => {
                                                 const newStates = [...prev];
-                                                newStates[index] = false;
+                                                newStates[index] = true;
                                                 return newStates;
                                             });
-                                            // 重置暂停状态（视频开始播放，不是暂停状态）
-                                            setCarouselVideoPausedStates(prev => {
+                                            setCarouselVideoWaitingStates(prev => {
                                                 const newStates = [...prev];
                                                 newStates[index] = false;
                                                 return newStates;
                                             });
-                                            // 标记为已加载
-                                            setCarouselVideoLoadedStates(prev => {
-                                                const newStates = [...prev];
-                                                newStates[index] = true;
-                                                return newStates;
-                                            });
-                                            setCarouselVideoWaitingStates(prev => {
+                                            setCarouselVideoPausedStates(prev => {
                                                 const newStates = [...prev];
                                                 newStates[index] = false;
                                                 return newStates;
                                             });
+                                            // 步骤2：等待视频淡入完成（300ms）+ 额外缓冲（50ms），再开始淡出 cover
+                                            setTimeout(() => {
+                                                setCarouselShowCoverStates(prev => {
+                                                    const newStates = [...prev];
+                                                    newStates[index] = false;
+                                                    return newStates;
+                                                });
+                                            }, 350); // 视频淡入时间 300ms + 50ms 缓冲
                                         }, remainingTime);
                                     });
                                     el.addEventListener('pause', (e) => {
@@ -22035,7 +22253,7 @@ const StructurePage = (_a) => {
                                         });
                                     });
                                 }
-                            }, src: item.url, style: Object.assign(Object.assign({}, baseStyles.carouselVideo), { opacity: carouselVideoLoadedStates[index] ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }), preload: "auto", muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
+                            }, src: item.url, style: Object.assign(Object.assign({}, baseStyles.carouselVideo), { position: 'absolute', left: 0, top: 0, zIndex: 1, opacity: carouselVideoLoadedStates[index] ? 1 : 0, transition: 'opacity 0.3s ease-in-out' }), preload: "auto", muted: true, loop: true, playsInline: true, controls: false, draggable: false, onDragStart: (e) => e.preventDefault(), onLoadedMetadata: () => {
                                 const videoId = `${item.itemId}-carouselSection-${index}`;
                                 const loadTime = Date.now();
                                 const initTime = videoLoadTime.current[videoId] || loadTime;
@@ -22052,11 +22270,12 @@ const StructurePage = (_a) => {
                                     : (item.cover || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) ? 'cover' : 'contain',
                                 zIndex: 10,
                                 backgroundColor: '#000',
-                                display: carouselShowCoverStates[index] ? 'block' : 'none',
+                                opacity: carouselShowCoverStates[index] ? 1 : 0,
+                                visibility: carouselShowCoverStates[index] ? 'visible' : 'hidden',
+                                transition: 'opacity 0.3s ease-out',
                                 pointerEvents: 'none',
-                                // CSS 优化：使用 will-change 和 content-visibility
-                                willChange: carouselShowCoverStates[index] ? 'auto' : 'contents',
-                                contentVisibility: carouselShowCoverStates[index] ? 'visible' : 'hidden',
+                                // CSS 优化：使用 will-change
+                                willChange: 'opacity',
                                 // 硬件加速
                                 transform: 'translateZ(0)',
                                 backfaceVisibility: 'hidden',
@@ -22223,56 +22442,57 @@ const StructurePage = (_a) => {
                 React.createElement("div", { style: { width: '100%', height: 0, visibility: 'hidden' } }))));
             }).filter(Boolean);
         })())),
-        data.footerSection && (React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection', { excludeBorder: true }) },
-            React.createElement("div", { style: {
-                    width: '100%',
-                    padding: '20px',
-                    backgroundColor: '#000',
-                    color: '#fff',
-                    textAlign: ((_z = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection) === null || _z === void 0 ? void 0 : _z.textAlign) || 'center'
-                } },
-                data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
-                    React.createElement("span", { style: Object.assign({}, (() => {
-                            const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection;
-                            if (!config) {
-                                return {
-                                    fontSize: '18px',
-                                    fontWeight: 'normal',
+        data.footerSection && (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(data.footerSection, 'footerSection', 0), onLeave: () => handleProductViewLeave(data.footerSection, 'footerSection', 0) },
+            React.createElement("div", { style: mergeStyles(baseStyles.footerSection, 'footerSection', { excludeBorder: true }) },
+                React.createElement("div", { style: {
+                        width: '100%',
+                        padding: '20px',
+                        backgroundColor: '#000',
+                        color: '#fff',
+                        textAlign: ((_z = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection) === null || _z === void 0 ? void 0 : _z.textAlign) || 'center'
+                    } },
+                    data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
+                        React.createElement("span", { style: Object.assign({}, (() => {
+                                const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection;
+                                if (!config) {
+                                    return {
+                                        fontSize: '18px',
+                                        fontWeight: 'normal',
+                                        lineHeight: '1.4',
+                                        color: '#fff'
+                                    };
+                                }
+                                const textStyle = {
+                                    fontSize: config.fontSize ? `${config.fontSize}px` : '18px',
+                                    fontWeight: config.fontWeight || 'normal',
+                                    fontStyle: config.fontStyle || 'normal',
+                                    textDecoration: config.textDecoration || 'none',
+                                    color: config.color || '#fff',
                                     lineHeight: '1.4',
-                                    color: '#fff'
+                                    display: 'inline-block',
+                                    boxSizing: 'border-box'
                                 };
-                            }
-                            const textStyle = {
-                                fontSize: config.fontSize ? `${config.fontSize}px` : '18px',
-                                fontWeight: config.fontWeight || 'normal',
-                                fontStyle: config.fontStyle || 'normal',
-                                textDecoration: config.textDecoration || 'none',
-                                color: config.color || '#fff',
-                                lineHeight: '1.4',
-                                display: 'inline-block',
-                                boxSizing: 'border-box'
-                            };
-                            if (config.backgroundColor) {
-                                textStyle.backgroundColor = config.backgroundColor;
-                            }
-                            if (config.showBorder && config.borderWidth) {
-                                textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
-                                textStyle.padding = config.padding || '4px 8px';
-                            }
-                            else if (config.padding) {
-                                textStyle.padding = config.padding;
-                            }
-                            if (config.borderRadius) {
-                                textStyle.borderRadius = `${config.borderRadius}px`;
-                            }
-                            if (config.margin) {
-                                textStyle.margin = config.margin;
-                            }
-                            return textStyle;
-                        })()) }, data.footerSection.text))),
-                renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton, 'footerSection', 0)),
-            React.createElement("div", { style: baseStyles.footerImageContainer },
-                React.createElement("img", { src: data.footerSection.landingImageUrl || data.footerSection.cover, alt: data.footerSection.title, style: baseStyles.footerImage }))))));
+                                if (config.backgroundColor) {
+                                    textStyle.backgroundColor = config.backgroundColor;
+                                }
+                                if (config.showBorder && config.borderWidth) {
+                                    textStyle.border = `${config.borderWidth}px solid ${config.borderColor || '#d9d9d9'}`;
+                                    textStyle.padding = config.padding || '4px 8px';
+                                }
+                                else if (config.padding) {
+                                    textStyle.padding = config.padding;
+                                }
+                                if (config.borderRadius) {
+                                    textStyle.borderRadius = `${config.borderRadius}px`;
+                                }
+                                if (config.margin) {
+                                    textStyle.margin = config.margin;
+                                }
+                                return textStyle;
+                            })()) }, data.footerSection.text))),
+                    renderCTA('footerButton', data.footerSection.bindCta, data.footerSection, baseStyles.footerButton, 'footerSection', 0)),
+                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({