pb-sxp-ui 1.20.43 → 1.20.45

package/dist/index.cjs

@@ -2224,7 +2224,7 @@ const EditorCore = React.forwardRef(({ children, resolver, isSsr, schema, enable
  * @returns isVisible 是否可见
  */
 function useAdvancedOnScreen(ref, options = {}) {
-    const { threshold = 0, delay = 0, onVisible, onHidden } = options;
+    const { threshold = 0, delay = 0, onVisible, onHidden, name = 'unknown' } = options;
     const observerRef = React.useRef(null);
     const [isVisible, setIsVisible] = React.useState(false);
     const timerRef = React.useRef(null);
@@ -2250,7 +2250,7 @@ function useAdvancedOnScreen(ref, options = {}) {
             var _a, _b;
             const isIntersecting = entry.isIntersecting;
             const intersectionRatio = entry.intersectionRatio;
-            console.log('[useAdvancedOnScreen] IntersectionObserver callback:', {
+            console.log(`[useAdvancedOnScreen ${name}] IntersectionObserver callback:`, {
                 isIntersecting,
                 threshold,
                 delay,
@@ -2262,18 +2262,18 @@ function useAdvancedOnScreen(ref, options = {}) {
             if (isIntersecting && intersectionRatio >= threshold) {
                 // 元素进入可视区域且达到阈值
                 setIsVisible(true);
-                // 如果已经在等待中，不要重复设置定时器
+                // 如果已经在等待中，清除旧的定时器，重新开始计时
                 if (isWaitingRef.current) {
-                    console.log('[useAdvancedOnScreen] 已在等待中，跳过');
-                    return;
+                    console.log(`[useAdvancedOnScreen ${name}] 已在等待中，清除旧定时器并重新计时`);
+                    clearTimer();
                 }
                 // 如果设置了延迟时间
                 if (delay > 0) {
-                    console.log(`[useAdvancedOnScreen] 设置延迟定时器: ${delay}ms`);
+                    console.log(`[useAdvancedOnScreen ${name}] 设置延迟定时器: ${delay}ms`);
                     isWaitingRef.current = true;
                     timerRef.current = setTimeout(() => {
                         var _a;
-                        console.log('[useAdvancedOnScreen] 延迟时间到，触发 onVisible');
+                        console.log(`[useAdvancedOnScreen ${name}] 延迟时间到，触发 onVisible`);
                         isWaitingRef.current = false;
                         timerRef.current = null;
                         (_a = onVisibleRef.current) === null || _a === void 0 ? void 0 : _a.call(onVisibleRef);
@@ -2281,13 +2281,13 @@ function useAdvancedOnScreen(ref, options = {}) {
                 }
                 else {
                     // 没有延迟，立即触发
-                    console.log('[useAdvancedOnScreen] 无延迟，立即触发 onVisible');
+                    console.log(`[useAdvancedOnScreen ${name}] 无延迟，立即触发 onVisible`);
                     (_a = onVisibleRef.current) === null || _a === void 0 ? void 0 : _a.call(onVisibleRef);
                 }
             }
             else if (!isIntersecting || intersectionRatio < threshold) {
                 // 元素离开可视区域或未达到阈值
-                console.log('[useAdvancedOnScreen] 元素离开可视区域或未达到阈值，清除定时器');
+                console.log(`[useAdvancedOnScreen ${name}] 元素离开可视区域或未达到阈值，清除定时器`);
                 setIsVisible(false);
                 clearTimer();
                 (_b = onHiddenRef.current) === null || _b === void 0 ? void 0 : _b.call(onHiddenRef);
@@ -19611,45 +19611,71 @@ const CTAButton = ({ ctaData, style, onClick, onExposure }) => {
     });
     return (React.createElement("button", { ref: buttonRef, style: style, onClick: onClick }, ctaData.title));
 };
-const ProductView = ({ children, onExposure }) => {
+const ProductView = ({ children, onExposure, onLeave }) => {
     const productRef = React.useRef(null);
     // 使用高级曝光检测：2/3区域 + 1000ms延迟
     useAdvancedOnScreen(productRef, {
         threshold: 0.67, // 2/3 区域可见才开始计时
         delay: 1000,
         onVisible: () => {
-            // 每次进入2/3可视区域并停留1秒后都触发上报
+            // 每次进入2/3可视区域并停留1秒后记录开始浏览时间
             onExposure();
+        },
+        onHidden: () => {
+            // 离开可视区域时上报productView事件
+            onLeave === null || onLeave === void 0 ? void 0 : onLeave();
         }
     });
     return (React.createElement("div", { ref: productRef, style: { width: '100%' } }, children));
 };
-const PostView = ({ children, videoRef, isVideo, onExposure, onVideoAutoPlay }) => {
+const PostView = ({ children, videoRef, isVideo, onExposure, autoPlayTriggerRef, onVideoPlay, onVideoPause }) => {
     const postRef = React.useRef(null);
     // 使用高级曝光检测：2/3区域（threshold=0.67）+ 1000ms延迟
     useAdvancedOnScreen(postRef, {
         threshold: 0.67,
         delay: 1000,
         onVisible: () => {
+            console.log('[PostView onVisible] 触发，isVideo:', isVideo, 'hasVideoRef:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current));
             // 每次进入2/3区域并停留1秒后都触发曝光上报
             if (onExposure) {
                 onExposure();
             }
             // 如果是视频，自动播放
             if (isVideo && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
-                videoRef.current.play().catch(err => {
+                console.log('[PostView onVisible] 准备播放视频');
+                // 标记这次播放是自动触发的
+                if (autoPlayTriggerRef) {
+                    autoPlayTriggerRef.current = true;
+                    console.log('[PostView onVisible] 已设置自动播放标记');
+                }
+                videoRef.current.play().then(() => {
+                    console.log('[PostView onVisible] 视频 play() 成功');
+                    // 触发播放回调，更新暂停图标状态
+                    if (onVideoPlay) {
+                        onVideoPlay();
+                    }
+                }).catch(err => {
                     console.warn('[PostView] Video autoplay failed:', err);
+                    // 播放失败时重置标记
+                    if (autoPlayTriggerRef) {
+                        autoPlayTriggerRef.current = false;
+                    }
                 });
-                // 触发自动播放回调（用于上报 playVideo 事件）
-                onVideoAutoPlay === null || onVideoAutoPlay === void 0 ? void 0 : onVideoAutoPlay();
             }
         },
         onHidden: () => {
+            console.log('[PostView onHidden] 触发，isVideo:', isVideo, 'hasVideoRef:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current));
             // 如果是视频，离开2/3区域时自动暂停
             if (isVideo && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current)) {
+                console.log('[PostView onHidden] 暂停视频');
                 videoRef.current.pause();
+                // 触发暂停回调，更新暂停图标状态
+                if (onVideoPause) {
+                    onVideoPause();
+                }
             }
-        }
+        },
+        name: 'PostView(Hero)'
     });
     return (React.createElement("div", { ref: postRef, style: { width: '100%', height: '100%' } }, children));
 };
@@ -20015,6 +20041,12 @@ const StructurePage = (_a) => {
     const isFirstPlay = React.useRef({});
     const videoLoadTime = React.useRef({});
     const videoAutoPlayReported = React.useRef(new Set()); // 追踪哪些视频已通过自动播放上报
+    const videoPlayReportTime = React.useRef({}); // 追踪视频播放上报的时间戳，防止短时间内重复上报
+    // 自动播放触发标记（用于区分自动播放和用户手动播放）
+    const heroAutoPlayTrigger = React.useRef(false);
+    const carouselAutoPlayTriggers = React.useRef({});
+    // 追踪当前正在播放的 Carousel 视频索引（用于 onHidden 回调）
+    const currentPlayingCarouselIndex = React.useRef(-1);
     // 调试日志
     console.log('[StructurePage] Props:', {
         editorMode,
@@ -20251,17 +20283,45 @@ const StructurePage = (_a) => {
         ctaEvent === null || ctaEvent === void 0 ? void 0 : ctaEvent(Object.assign({ eventSubject: 'ctaExposure', eventDescription: 'The cta was shown to the user' }, (viewPosition && { viewPosition })), rec, productData, sectionIndex !== undefined ? sectionIndex : 0);
     }, [ctaEvent, data]);
     // 视频播放事件处理
-    const handleVideoPlay = React.useCallback((videoData, viewPosition, sectionIndex, videoRef, isAutoPlay = false) => {
-        if (!videoRef || !videoRef.duration)
+    const handleVideoPlay = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+        console.log('[handleVideoPlay] 调用，viewPosition:', viewPosition, 'sectionIndex:', sectionIndex, 'hasDuration:', !!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration));
+        if (!videoRef || !videoRef.duration) {
+            console.log('[handleVideoPlay] 返回：没有 videoRef 或 duration');
             return;
+        }
         const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
-        // 如果是自动播放调用，标记为已上报
+        const now = Date.now();
+        // 防止短时间内重复上报（play 和 playing 事件可能连续触发）
+        // 如果距离上次上报不到500ms，则跳过
+        const lastReportTime = videoPlayReportTime.current[videoId];
+        if (lastReportTime && (now - lastReportTime) < 500) {
+            console.log('[handleVideoPlay] 跳过上报：距离上次上报时间过短', {
+                timeSinceLastReport: now - lastReportTime
+            });
+            return;
+        }
+        // 检查是否是自动播放触发的
+        let isAutoPlay = false;
+        if (viewPosition === 'heroSection' && heroAutoPlayTrigger.current) {
+            isAutoPlay = true;
+            console.log('[handleVideoPlay] Hero Section 自动播放标记为 true');
+            heroAutoPlayTrigger.current = false; // 重置标记
+        }
+        else if (viewPosition === 'carouselSection' && sectionIndex !== undefined && carouselAutoPlayTriggers.current[sectionIndex]) {
+            isAutoPlay = true;
+            console.log('[handleVideoPlay] Carousel Section 自动播放标记为 true, index:', sectionIndex);
+            carouselAutoPlayTriggers.current[sectionIndex] = false; // 重置标记
+        }
+        console.log('[handleVideoPlay] isAutoPlay:', isAutoPlay, 'videoId:', videoId);
+        // 如果是自动播放，标记为已上报
         if (isAutoPlay) {
             videoAutoPlayReported.current.add(videoId);
+            console.log('[handleVideoPlay] 标记为已通过自动播放上报');
         }
         else {
             // 如果不是自动播放，但已经通过自动播放上报过，则跳过
             if (videoAutoPlayReported.current.has(videoId)) {
+                console.log('[handleVideoPlay] 跳过上报：已经通过自动播放上报过');
                 // 只记录播放时间，不上报
                 videoStartTime.current[videoId] = videoRef.currentTime || 0;
                 return;
@@ -20269,11 +20329,21 @@ const StructurePage = (_a) => {
         }
         // 记录视频开始播放时间
         videoStartTime.current[videoId] = videoRef.currentTime || 0;
+        // 记录本次上报时间
+        videoPlayReportTime.current[videoId] = now;
         // 判断是否首次播放
         const playType = isFirstPlay.current[videoId] === false ? '1' : '0';
         isFirstPlay.current[videoId] = false;
         const videoDuration = videoRef.duration.toFixed(2);
         const startTime = videoRef.currentTime.toFixed(2);
+        console.log('[handleVideoPlay] 准备上报 playVideo 事件:', {
+            videoId,
+            isAutoPlay,
+            playType,
+            viewPosition,
+            sectionIndex,
+            duration: videoDuration
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', sceneId: '', contentId: (videoData === null || videoData === void 0 ? void 0 : videoData.itemId) || '', contentName: (videoData === null || videoData === void 0 ? void 0 : videoData.title) || '', playType,
                 startTime,
@@ -20332,20 +20402,40 @@ const StructurePage = (_a) => {
             }
         });
     }, [bffEventReport, data]);
-    // 产品浏览事件处理
+    // 产品进入可视区域时记录开始浏览时间
     const handleProductViewExposure = React.useCallback((productData, viewPosition, sectionIndex) => {
+        // 生成唯一标识
+        const productId = `${productData === null || productData === void 0 ? void 0 : productData.itemId}-${viewPosition}-${sectionIndex}`;
+        // 如果已经记录过开始时间，不再重复记录
+        if (productViewStartTime.current[productId]) {
+            return;
+        }
+        // 记录开始浏览时间
+        productViewStartTime.current[productId] = Date.now();
+        console.log('[handleProductViewExposure] 记录产品开始浏览时间:', {
+            productId,
+            startTime: productViewStartTime.current[productId]
+        });
+    }, []);
+    // 产品离开可视区域时上报 productView 事件
+    const handleProductViewLeave = React.useCallback((productData, viewPosition, sectionIndex) => {
         var _a;
-        // 生成唯一标识，避免重复上报
+        // 生成唯一标识
         const productId = `${productData === null || productData === void 0 ? void 0 : productData.itemId}-${viewPosition}-${sectionIndex}`;
-        // 如果已经上报过，不再上报
+        // 如果已经上报过，不再重复上报
         if (exposedProductRefs.current.has(productId)) {
             return;
         }
-        // 标记为已上报并记录开始浏览时间
+        // 获取开始浏览时间
+        const startTime = productViewStartTime.current[productId];
+        if (!startTime) {
+            console.warn('[handleProductViewLeave] 未找到开始浏览时间，跳过上报:', productId);
+            return;
+        }
+        // 计算停留时长（秒）
+        const timeOnSite = Math.floor((Date.now() - startTime) / 1000);
+        // 标记为已上报
         exposedProductRefs.current.add(productId);
-        productViewStartTime.current[productId] = Date.now();
-        // 计算在页面停留时间（从产品出现到现在）
-        const timeOnSite = 0; // 首次曝光时为0
         // 根据 viewPosition 确定 fromKName
         let fromKName = 'productPage';
         if (viewPosition === 'heroSection') {
@@ -20360,6 +20450,11 @@ const StructurePage = (_a) => {
         else if (viewPosition === 'footerSection') {
             fromKName = 'pdpPage';
         }
+        console.log('[handleProductViewLeave] 上报 productView 事件:', {
+            productId,
+            timeOnSite,
+            fromKName
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'productView',
@@ -20584,13 +20679,18 @@ const StructurePage = (_a) => {
     // 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]);
+    // 注意：视频的自动播放逻辑由 PostView 组件处理（进入2/3可视区域并停留1秒后播放）
+    // 移除了初始播放逻辑，避免与 PostView 冲突，确保视频加载完成后再播放
+    // useEffect(() => {
+    //   if (heroVideoRef.current && data?.heroSection?.url) {
+    //     heroAutoPlayTrigger.current = true;
+    //     heroVideoRef.current.play().catch((err) => {
+    //       console.log('Video autoplay failed:', err);
+    //       heroAutoPlayTrigger.current = false;
+    //     });
+    //     setIsHeroVideoPaused(false);
+    //   }
+    // }, [data?.heroSection]);
     // 初始化 carousel 视频暂停状态
     React.useEffect(() => {
         if (data === null || data === void 0 ? void 0 : data.carouselSection) {
@@ -20635,7 +20735,7 @@ const StructurePage = (_a) => {
     }, []);
     // Post 图片/视频曝光上报（用于 Hero Section 等非轮播的 Post）
     const postExposureReported = React.useRef(new Set());
-    const handlePostExposure = React.useCallback((postData, viewPosition, sectionIndex) => {
+    React.useCallback((postData, viewPosition, sectionIndex) => {
         var _a;
         const postId = `${postData === null || postData === void 0 ? void 0 : postData.itemId}-${viewPosition}-${sectionIndex}`;
         // 防止重复上报
@@ -20732,26 +20832,87 @@ const StructurePage = (_a) => {
     // Carousel Section 的曝光检测 ref
     const carouselSectionRef = React.useRef(null);
     const hasCarouselReported = React.useRef(false);
-    // Carousel Section 进入可视区域时上报第一张图片的浏览事件
+    // Carousel Section 进入可视区域时的回调
+    const handleCarouselVisible = React.useCallback(() => {
+        if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
+            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);
+            }
+        }
+        // 如果当前项是视频，自动播放
+        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[carouselIndex]) {
+            const currentVideo = carouselVideoRefs.current[carouselIndex];
+            if (currentVideo) {
+                console.log('[Carousel onVisible] 开始播放视频，索引:', carouselIndex);
+                // 更新当前正在播放的视频索引
+                currentPlayingCarouselIndex.current = carouselIndex;
+                // 标记这次播放是自动触发的
+                carouselAutoPlayTriggers.current[carouselIndex] = true;
+                currentVideo.play().catch(err => {
+                    console.warn('[Carousel] Video autoplay failed (onVisible):', err);
+                    // 播放失败时重置标记
+                    carouselAutoPlayTriggers.current[carouselIndex] = false;
+                });
+                // 更新播放状态
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[carouselIndex] = false;
+                    return newStates;
+                });
+            }
+        }
+    }, [data === null || data === void 0 ? void 0 : data.carouselSection, carouselIndex, handleCarouselImageStartEvent]);
+    // Carousel Section 离开可视区域时的回调
+    const handleCarouselHidden = React.useCallback(() => {
+        // Carousel Section 离开可视区域时，暂停当前正在播放的视频
+        // 使用 ref 来获取当前正在播放的视频索引，避免闭包问题
+        const playingIndex = currentPlayingCarouselIndex.current;
+        console.log('[Carousel onHidden] 被调用');
+        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 (playingIndex >= 0 && carouselVideoRefs.current[playingIndex]) {
+            const currentVideo = carouselVideoRefs.current[playingIndex];
+            if (currentVideo) {
+                console.log('[Carousel onHidden] 准备暂停视频，索引:', playingIndex, '当前播放状态:', !currentVideo.paused);
+                currentVideo.pause();
+                console.log('[Carousel onHidden] 已调用 pause()');
+                // 更新暂停状态
+                setCarouselVideoPausedStates(prev => {
+                    const newStates = [...prev];
+                    newStates[playingIndex] = true;
+                    return newStates;
+                });
+            }
+            else {
+                console.log('[Carousel onHidden] currentVideo 为空');
+            }
+        }
+        else {
+            console.log('[Carousel onHidden] 条件不满足，不暂停视频');
+        }
+    }, []);
+    // Carousel Section 进入可视区域时上报第一张图片的浏览事件，并自动播放视频
     useAdvancedOnScreen(carouselSectionRef, {
         threshold: 0.67,
         delay: 1000,
-        onVisible: () => {
-            // 只在首次进入可视区域时上报第一张图片
-            if (!hasCarouselReported.current && (data === null || data === void 0 ? void 0 : data.carouselSection) && data.carouselSection.length > 0) {
-                hasCarouselReported.current = true;
-                const currentItem = data.carouselSection[carouselIndex];
-                // 只对图片类型上报（不包括视频）
-                if (!currentItem.url) {
-                    handleCarouselImageStartEvent(carouselIndex);
-                }
-            }
-        }
+        onVisible: handleCarouselVisible,
+        onHidden: handleCarouselHidden,
+        name: 'Carousel'
     });
-    // Carousel 切换时自动播放/暂停视频（Post 2/3/4）
+    // Carousel 切换时暂停其他视频
+    // 注意：不再在切换时立即播放当前视频，而是由 PostView 组件处理（进入2/3可视区域并停留1秒后播放）
     React.useEffect(() => {
         if (!(data === null || data === void 0 ? void 0 : data.carouselSection) || data.carouselSection.length === 0)
             return;
+        console.log('[Carousel useEffect] 切换到索引:', carouselIndex);
         // 暂停所有其他视频
         carouselVideoRefs.current.forEach((videoRef, index) => {
             if (videoRef && index !== carouselIndex) {
@@ -20764,22 +20925,6 @@ const StructurePage = (_a) => {
                 });
             }
         });
-        // 如果当前项是视频，自动播放
-        const currentItem = data.carouselSection[carouselIndex];
-        if ((currentItem === null || currentItem === void 0 ? void 0 : currentItem.url) && carouselVideoRefs.current[carouselIndex]) {
-            const currentVideo = carouselVideoRefs.current[carouselIndex];
-            if (currentVideo) {
-                currentVideo.play().catch(err => {
-                    console.warn('[Carousel] Video autoplay failed:', err);
-                });
-                // 更新播放状态
-                setCarouselVideoPausedStates(prev => {
-                    const newStates = [...prev];
-                    newStates[carouselIndex] = false;
-                    return newStates;
-                });
-            }
-        }
     }, [carouselIndex, data]);
     // 触摸滑动处理
     const handleTouchStart = (e) => {
@@ -20904,27 +21049,41 @@ const StructurePage = (_a) => {
                         return textStyle;
                     })()) }, data.heroSection.text))),
             React.createElement("div", { style: baseStyles.heroImageContainer },
-                React.createElement(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, onExposure: () => {
-                        // 图片或视频的曝光上报
-                        handlePostExposure(data.heroSection, 'heroSection', 0);
-                    }, onVideoAutoPlay: () => {
-                        // 视频自动播放时上报 playVideo 事件（2/3区域 + 300ms后）
-                        if (heroVideoRef.current) {
-                            handleVideoPlay(data.heroSection, 'heroSection', 0, heroVideoRef.current, true);
-                        }
-                    } }, 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, muted: true, loop: true, playsInline: true, controls: false, onLoadedMetadata: () => {
+                React.createElement(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, autoPlayTriggerRef: heroAutoPlayTrigger }, data.heroSection.url ? (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: handleHeroVideoClick },
+                    React.createElement("video", { ref: (el) => {
+                            if (heroVideoRef) {
+                                heroVideoRef.current = el;
+                            }
+                            // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                            if (el && !el.dataset.playListenerAdded) {
+                                el.dataset.playListenerAdded = 'true';
+                                // play 事件：视频开始播放时触发（可能还在缓冲）
+                                el.addEventListener('play', (e) => {
+                                    console.log('[Hero Video] play event triggered');
+                                    handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                // 这是网络慢时更可靠的事件
+                                el.addEventListener('playing', (e) => {
+                                    console.log('[Hero Video] playing event triggered (backup)');
+                                    // playing 也触发一次，防止 play 事件没触发
+                                    handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                el.addEventListener('pause', (e) => {
+                                    console.log('[Hero Video] pause event triggered');
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                                el.addEventListener('ended', (e) => {
+                                    console.log('[Hero Video] ended event triggered');
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                });
+                            }
+                        }, src: data.heroSection.url, style: baseStyles.heroVideo, muted: true, loop: true, playsInline: true, controls: false, onLoadedMetadata: () => {
                             var _a;
                             const videoId = `${(_a = data.heroSection) === null || _a === void 0 ? void 0 : _a.itemId}-heroSection-0`;
                             const loadTime = Date.now();
                             const initTime = videoLoadTime.current[videoId] || loadTime;
                             videoLoadTime.current[videoId] = loadTime - initTime;
-                        }, onPlay: (e) => {
-                            handleVideoPlay(data.heroSection, 'heroSection', 0, e.currentTarget);
-                        }, onPause: (e) => {
-                            handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
-                        }, onEnded: (e) => {
-                            handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
                         } }),
                     isHeroVideoPaused && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_f = data.heroSection.imgUrls) === null || _f === void 0 ? void 0 : _f[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null),
                 React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_h = (_g = data.heroSection.bindProducts) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.bindCta, (_j = data.heroSection.bindProducts) === null || _j === void 0 ? void 0 : _j[0], baseStyles.heroButton, 'heroSection', 0))))),
@@ -20932,22 +21091,99 @@ const StructurePage = (_a) => {
             React.createElement("div", { style: baseStyles.carouselImageContainer, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
                 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) },
+                    // 只有当前显示的 slide 才应用曝光检测
+                    const isCurrentSlide = index === carouselIndex;
+                    return (React.createElement("div", { key: item.itemId, style: baseStyles.carouselSlide }, item.url ? (
+                    // 视频：使用 PostView 包裹，但只在当前显示时生效
+                    isCurrentSlide ? (React.createElement(PostView, { videoRef: { current: carouselVideoRefs.current[index] }, isVideo: true, autoPlayTriggerRef: {
+                            get current() {
+                                return carouselAutoPlayTriggers.current[index] || false;
+                            },
+                            set current(value) {
+                                carouselAutoPlayTriggers.current[index] = value;
+                            }
+                        }, onVideoPlay: () => {
+                            // 视频开始播放，隐藏暂停图标
+                            console.log('[Carousel PostView] onVideoPlay 回调，索引:', index);
+                            setCarouselVideoPausedStates(prev => {
+                                const newStates = [...prev];
+                                newStates[index] = false;
+                                return newStates;
+                            });
+                        }, onVideoPause: () => {
+                            // 视频暂停，显示暂停图标
+                            console.log('[Carousel PostView] onVideoPause 回调，索引:', index);
+                            setCarouselVideoPausedStates(prev => {
+                                const newStates = [...prev];
+                                newStates[index] = true;
+                                return newStates;
+                            });
+                        } },
+                        React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
+                            React.createElement("video", { ref: (el) => {
+                                    carouselVideoRefs.current[index] = el;
+                                    // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                                    if (el && !el.dataset.playListenerAdded) {
+                                        el.dataset.playListenerAdded = 'true';
+                                        // play 事件：视频开始播放时触发（可能还在缓冲）
+                                        el.addEventListener('play', (e) => {
+                                            console.log('[Carousel Video] play event triggered, index:', index);
+                                            handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                        el.addEventListener('playing', (e) => {
+                                            console.log('[Carousel Video] playing event triggered (backup), index:', index);
+                                            handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        el.addEventListener('pause', (e) => {
+                                            console.log('[Carousel Video] pause event triggered, index:', index);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                        el.addEventListener('ended', (e) => {
+                                            console.log('[Carousel Video] ended event triggered, index:', index);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        });
+                                    }
+                                }, src: item.url, style: baseStyles.carouselVideo, 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;
+                                    videoLoadTime.current[videoId] = loadTime - initTime;
+                                } }),
+                            carouselVideoPausedStates[index] && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' }))))) : (
+                    // 非当前 slide，不使用 PostView
+                    React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' }, onClick: () => handleCarouselVideoClick(index) },
                         React.createElement("video", { ref: (el) => {
                                 carouselVideoRefs.current[index] = el;
+                                // 添加 addEventListener 监听事件，确保网络慢时也能触发
+                                if (el && !el.dataset.playListenerAdded) {
+                                    el.dataset.playListenerAdded = 'true';
+                                    // play 事件：视频开始播放时触发（可能还在缓冲）
+                                    el.addEventListener('play', (e) => {
+                                        console.log('[Carousel Video (non-current)] play event triggered, index:', index);
+                                        handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    // playing 事件：视频真正开始播放时触发（已缓冲足够数据）
+                                    el.addEventListener('playing', (e) => {
+                                        console.log('[Carousel Video (non-current)] playing event triggered (backup), index:', index);
+                                        handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    el.addEventListener('pause', (e) => {
+                                        console.log('[Carousel Video (non-current)] pause event triggered, index:', index);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                    el.addEventListener('ended', (e) => {
+                                        console.log('[Carousel Video (non-current)] ended event triggered, index:', index);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                    });
+                                }
                             }, src: item.url, style: baseStyles.carouselVideo, 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;
                                 videoLoadTime.current[videoId] = loadTime - initTime;
-                            }, onPlay: (e) => {
-                                handleVideoPlay(item, 'carouselSection', index, e.currentTarget);
-                            }, onPause: (e) => {
-                                handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
-                            }, onEnded: (e) => {
-                                handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
                             } }),
-                        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, draggable: false, onDragStart: (e) => e.preventDefault(), onLoad: () => {
+                        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, draggable: false, onDragStart: (e) => e.preventDefault(), onLoad: () => {
                             // 记录图片加载完成时间
                             if (!carouselImageLoadTime.current[index]) {
                                 carouselImageLoadTime.current[index] = Date.now();
@@ -21001,7 +21237,7 @@ const StructurePage = (_a) => {
                             return textStyle;
                         })()) }, (_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text))),
                 renderCTA('carouselButton', (_q = (_p = (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p[0]) === null || _q === void 0 ? void 0 : _q.bindCta, (_s = (_r = data.carouselSection[carouselIndex]) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s[0], baseStyles.carouselButton, 'carouselSection', carouselIndex)))),
-        data.highlightRevealSection && (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(data.highlightRevealSection, 'highlightRevealSection', 0) },
+        data.highlightRevealSection && (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(data.highlightRevealSection, 'highlightRevealSection', 0), onLeave: () => handleProductViewLeave(data.highlightRevealSection, 'highlightRevealSection', 0) },
             React.createElement("div", { style: mergeStyles(baseStyles.highlightSection, 'highlightSection', { excludeBorder: true }) },
                 React.createElement("div", { style: baseStyles.highlightImageContainer },
                     React.createElement("img", { src: data.highlightRevealSection.landingImageUrl || data.highlightRevealSection.cover, alt: data.highlightRevealSection.title, style: baseStyles.highlightImage })),
@@ -21087,7 +21323,7 @@ const StructurePage = (_a) => {
                 // 使用产品在数据数组中的实际索引来确定 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(ProductView, { onExposure: () => handleProductViewExposure(product, 'productGridSection', gridIndex) },
+                return (React.createElement("div", { key: (product === null || product === void 0 ? void 0 : product.itemId) || `empty-${gridIndex}`, style: baseStyles.productItem }, product ? (React.createElement(ProductView, { onExposure: () => handleProductViewExposure(product, 'productGridSection', gridIndex), onLeave: () => handleProductViewLeave(product, 'productGridSection', gridIndex) },
                     React.createElement(React.Fragment, null,
                         React.createElement("div", { style: baseStyles.productImageContainer },
                             React.createElement("img", { src: product.landingImageUrl || product.cover,