pb-sxp-ui 1.20.46 → 1.20.48

package/dist/index.cjs

@@ -19648,18 +19648,23 @@ const PostView = ({ children, videoRef, isVideo, onExposure, autoPlayTriggerRef,
                     autoPlayTriggerRef.current = true;
                     console.log('[PostView onVisible] 已设置自动播放标记');
                 }
+                // 立即更新暂停图标状态，不等待 play() Promise
+                // 这样可以确保图标状态与视频播放状态同步
+                if (onVideoPlay) {
+                    onVideoPlay();
+                }
                 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;
                     }
+                    // 播放失败，恢复暂停图标
+                    if (onVideoPause) {
+                        onVideoPause();
+                    }
                 });
             }
         },
@@ -20011,7 +20016,7 @@ const baseStyles = {
     }
 };
 const StructurePage = (_a) => {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     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);
@@ -20024,24 +20029,28 @@ const StructurePage = (_a) => {
     // 视频暂停状态管理
     const [isHeroVideoPaused, setIsHeroVideoPaused] = React.useState(false);
     const [carouselVideoPausedStates, setCarouselVideoPausedStates] = React.useState([]);
-    // 引入事件上报 hooks
-    const { ctaEvent, bffFbReport, bffEventReport } = useSxpDataSource();
+    // 引入事件上报 hooks 和 Session 刷新功能
+    const { ctaEvent, bffFbReport, bffEventReport, refreshFeSession, curTime } = useSxpDataSource();
     // 防止重复上报的标记
     const h5EnterReportedRef = React.useRef(false);
-    // CTA 曝光状态追踪（避免重复上报）
-    const exposedCtaRefs = React.useRef(new Set());
+    // 全局事件管理：用于追踪弹窗打开时间和状态
+    const popupCurTimeRef = React.useRef(new Date());
+    const currentPopupDataRef = React.useRef(null);
+    // CTA 曝光时间追踪（允许重复上报）
+    const ctaExposureTime = React.useRef({});
     // Carousel 图片浏览时间追踪
     const carouselImageStartTime = React.useRef(0);
     const carouselImageLoadTime = React.useRef({});
-    // 产品浏览状态追踪（避免重复上报）
-    const exposedProductRefs = React.useRef(new Set());
+    // 产品浏览状态追踪（记录每次浏览的开始时间）
+    // 注意：不使用 Set 来避免重复，因为用户每次浏览都应该上报
     const productViewStartTime = React.useRef({});
     // 视频播放状态追踪
     const videoStartTime = React.useRef({});
     const isFirstPlay = React.useRef({});
     const videoLoadTime = React.useRef({});
-    const videoAutoPlayReported = React.useRef(new Set()); // 追踪哪些视频已通过自动播放上报
+    // 注释：移除 videoAutoPlayReported，允许视频重复上报
     const videoPlayReportTime = React.useRef({}); // 追踪视频播放上报的时间戳，防止短时间内重复上报
+    const videoLastCurrentTime = React.useRef({}); // 追踪视频的上一次播放时间，用于检测循环
     // 自动播放触发标记（用于区分自动播放和用户手动播放）
     const heroAutoPlayTrigger = React.useRef(false);
     const carouselAutoPlayTriggers = React.useRef({});
@@ -20061,6 +20070,11 @@ const StructurePage = (_a) => {
         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]);
+    // 获取 globalConfig 中的 session 配置
+    const globalConfig = React.useMemo(() => {
+        var _a;
+        return (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig;
+    }, [(_c = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _c === void 0 ? void 0 : _c.globalConfig]);
     // 默认播放图标 URL（直接使用 CDN 地址作为后备）
     const DEFAULT_PAUSE_ICON = 'https://sxph5-uat.chatlabs.net/pb_static/06f28a2025c74c1cb49be6767316d827.png';
     // 获取视频播放图标
@@ -20084,7 +20098,7 @@ const StructurePage = (_a) => {
         }
         // 最后使用默认图标
         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]);
+    }, [propVideoPlayIcon, (_e = (_d = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _d === void 0 ? void 0 : _d.globalConfig) === null || _e === void 0 ? void 0 : _e.videoPlayIcon]);
     // 处理 CTA 点击
     const handleCtaClick = React.useCallback((link, interaction, productData, ctaData, viewPosition, sectionIndex) => {
         // 判断是否为外部链接
@@ -20135,6 +20149,46 @@ const StructurePage = (_a) => {
         if (interaction) {
             const { linkType, popupType, popupAni } = interaction;
             if (linkType === 'popup' && popupType) {
+                // ========== 打开弹窗前：记录弹窗数据和时间 ==========
+                // 重置弹窗时间
+                popupCurTimeRef.current = new Date();
+                // 保存当前弹窗的产品数据，用于全局事件监听
+                currentPopupDataRef.current = {
+                    productData,
+                    ctaData,
+                    viewPosition,
+                    sectionIndex,
+                    popupType
+                };
+                console.log('[StructurePage] 打开弹窗，记录数据:', {
+                    productId: productData === null || productData === void 0 ? void 0 : productData.itemId,
+                    viewPosition,
+                    sectionIndex,
+                    popupType
+                });
+                // ========== 弹窗打开时：立即上报 ProductView 和 PageView 事件 ==========
+                // 这与非 multi-cta 的 CommodityDetail 组件行为一致
+                const recData = Object.assign(Object.assign({}, rec), { video: (rec === null || rec === void 0 ? void 0 : rec.video) ? Object.assign(Object.assign({}, rec.video), { title: '', imgUrls: (productData === null || productData === void 0 ? void 0 : productData.homePage) || rec.video.imgUrls, url: rec.video.url || null }) : null });
+                // 上报 ProductView 事件
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ProductView',
+                    product: productData ? [productData] : undefined,
+                    contentType: 'product',
+                    rec: recData,
+                    position: sectionIndex !== undefined ? sectionIndex : 0
+                });
+                // 上报 PageView 事件
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'PageView',
+                    product: productData ? [productData] : undefined,
+                    contentType: 'product',
+                    rec: recData,
+                    position: sectionIndex !== undefined ? sectionIndex : 0
+                });
+                console.log('[StructurePage] 上报弹窗打开事件 (ProductView + PageView)', {
+                    productId: productData === null || productData === void 0 ? void 0 : productData.itemId,
+                    position: sectionIndex
+                });
                 // 设置弹窗要显示的产品数据
                 if (productData && typeof window !== 'undefined' && window.setPopupDetailData) {
                     // 构造与原有系统一致的数据结构
@@ -20243,16 +20297,19 @@ const StructurePage = (_a) => {
         const finalStyle = Object.assign(Object.assign({}, baseStyle), customStyle);
         return finalStyle;
     }, [multiCTAConfig]);
-    // CTA 曝光事件处理
+    // CTA 曝光事件处理（允许重复上报）
     const handleCtaExposure = React.useCallback((ctaData, productData, viewPosition, sectionIndex, buttonKey) => {
-        // 生成唯一标识，避免重复上报
+        // 生成唯一标识
         const ctaId = `${buttonKey}-${viewPosition}-${sectionIndex}`;
-        // 如果已经上报过，不再上报
-        if (exposedCtaRefs.current.has(ctaId)) {
+        // 记录本次曝光时间（允许重复上报）
+        const now = Date.now();
+        const lastExposureTime = ctaExposureTime.current[ctaId];
+        // 防抖：如果距离上次曝光不到 1 秒，跳过（避免同一次曝光重复触发）
+        if (lastExposureTime && (now - lastExposureTime) < 1000) {
             return;
         }
-        // 标记为已上报
-        exposedCtaRefs.current.add(ctaId);
+        // 更新曝光时间
+        ctaExposureTime.current[ctaId] = now;
         // 获取当前 section 的 post/image 数据（用于 contentId 和 sceneId）
         let postData = null;
         if (viewPosition === 'heroSection' && (data === null || data === void 0 ? void 0 : data.heroSection)) {
@@ -20313,20 +20370,8 @@ const StructurePage = (_a) => {
             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;
-            }
-        }
+        // 记录播放上报（允许重复上报，已通过 videoPlayReportTime 防抖）
+        console.log('[handleVideoPlay] 视频播放上报，isAutoPlay:', isAutoPlay);
         // 记录视频开始播放时间
         videoStartTime.current[videoId] = videoRef.currentTime || 0;
         // 记录本次上报时间
@@ -20352,8 +20397,48 @@ const StructurePage = (_a) => {
             }))
         });
     }, [bffEventReport]);
+    // 视频时间更新事件处理（用于检测循环播放）
+    const handleVideoTimeUpdate = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+        if (!videoRef || !videoRef.duration)
+            return;
+        const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
+        const currentTime = videoRef.currentTime;
+        const lastTime = videoLastCurrentTime.current[videoId] || 0;
+        // 检测视频循环（当前时间明显小于上次时间，说明视频重新开始了）
+        if (lastTime > 0 && currentTime < lastTime && lastTime > videoRef.duration * 0.9) {
+            console.log('[handleVideoTimeUpdate] 检测到视频循环，currentTime:', currentTime, 'lastTime:', lastTime);
+            // 上报 playOverVideo（循环结束）
+            const videoDuration = videoRef.duration.toFixed(2);
+            const startTime = videoStartTime.current[videoId] || 0;
+            const playDuration = (lastTime - startTime).toFixed(2);
+            if (parseFloat(playDuration) >= 0.1) {
+                console.log('[handleVideoTimeUpdate] 上报循环结束的 playOverVideo 事件');
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'playOverVideo',
+                        eventDescription: 'User finished playing the video',
+                        sceneId: '',
+                        contentId: (videoData === null || videoData === void 0 ? void 0 : videoData.itemId) || '',
+                        contentName: (videoData === null || videoData === void 0 ? void 0 : videoData.title) || '',
+                        endTime: videoDuration,
+                        videoDuration,
+                        playDuration,
+                        contentTags: (videoData === null || videoData === void 0 ? void 0 : videoData.tags) ? JSON.stringify(videoData.tags) : '[]',
+                        position: `${sectionIndex || 0}`,
+                        contentFormat: 'video',
+                        rtc: '',
+                        traceInfo: (videoData === null || videoData === void 0 ? void 0 : videoData.traceInfo) || ''
+                    }
+                });
+            }
+            // 重置上次上报时间，让下次 play 事件可以上报
+            delete videoPlayReportTime.current[videoId];
+        }
+        // 更新上次播放时间
+        videoLastCurrentTime.current[videoId] = currentTime;
+    }, [bffEventReport]);
     // 视频播放结束/暂停事件处理
-    const handleVideoPlayOver = React.useCallback((videoData, viewPosition, sectionIndex, videoRef) => {
+    const handleVideoPlayOver = React.useCallback((videoData, viewPosition, sectionIndex, videoRef, isEndedEvent) => {
         if (!videoRef || !videoRef.duration)
             return;
         const videoId = `${videoData === null || videoData === void 0 ? void 0 : videoData.itemId}-${viewPosition}-${sectionIndex}`;
@@ -20362,6 +20447,18 @@ const StructurePage = (_a) => {
         // 计算播放时长
         const startTime = videoStartTime.current[videoId] || 0;
         const playDuration = (videoRef.currentTime - startTime).toFixed(2);
+        // 如果播放时长过短（小于100ms），可能是误触发，不上报
+        if (parseFloat(playDuration) < 0.1) {
+            console.log('[handleVideoPlayOver] 播放时长过短，跳过上报:', playDuration);
+            return;
+        }
+        console.log('[handleVideoPlayOver] 上报 playOverVideo 事件:', {
+            videoId,
+            isEndedEvent,
+            endTime,
+            playDuration,
+            videoDuration
+        });
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
                 eventSubject: 'playOverVideo',
@@ -20406,11 +20503,7 @@ const StructurePage = (_a) => {
     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,
@@ -20422,10 +20515,6 @@ const StructurePage = (_a) => {
         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) {
@@ -20434,8 +20523,8 @@ const StructurePage = (_a) => {
         }
         // 计算停留时长（秒）
         const timeOnSite = Math.floor((Date.now() - startTime) / 1000);
-        // 标记为已上报
-        exposedProductRefs.current.add(productId);
+        // 清除开始时间记录，以便下次进入时能再次记录
+        delete productViewStartTime.current[productId];
         // 根据 viewPosition 确定 fromKName
         let fromKName = 'productPage';
         if (viewPosition === 'heroSection') {
@@ -20733,16 +20822,20 @@ const StructurePage = (_a) => {
             }
         }
     }, []);
-    // Post 图片/视频曝光上报（用于 Hero Section 等非轮播的 Post）
-    const postExposureReported = React.useRef(new Set());
+    // Post 图片/视频曝光时间追踪（允许重复上报）
+    const postExposureTime = React.useRef({});
     React.useCallback((postData, viewPosition, sectionIndex) => {
         var _a;
         const postId = `${postData === null || postData === void 0 ? void 0 : postData.itemId}-${viewPosition}-${sectionIndex}`;
-        // 防止重复上报
-        if (postExposureReported.current.has(postId)) {
+        // 记录本次曝光时间（允许重复上报）
+        const now = Date.now();
+        const lastExposureTime = postExposureTime.current[postId];
+        // 防抖：如果距离上次曝光不到 1 秒，跳过（避免同一次曝光重复触发）
+        if (lastExposureTime && (now - lastExposureTime) < 1000) {
             return;
         }
-        postExposureReported.current.add(postId);
+        // 更新曝光时间
+        postExposureTime.current[postId] = now;
         // 判断是图片还是视频
         const contentFormat = (postData === null || postData === void 0 ? void 0 : postData.url) ? 'video' : 'image';
         const eventSubject = contentFormat === 'video' ? 'viewVideo' : 'viewImage';
@@ -20959,6 +21052,270 @@ const StructurePage = (_a) => {
         setTouchStart(null);
         setTouchEnd(null);
     };
+    // ==================== 全局事件监听：visibilitychange ====================
+    // 监听页面可见性变化（最小化、切换标签页、返回等）
+    // 参考 SxpPageRender 的实现
+    React.useEffect(() => {
+        const handleVisibilityChange = () => {
+            var _a, _b;
+            if (document.visibilityState === 'hidden') {
+                // ========== 页面隐藏时 ==========
+                console.log('[StructurePage] Page hidden - 触发全局事件');
+                // 1. 发送 PAGE_DID_HIDE 事件到事件总线
+                SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, data);
+                // 2. 如果有打开的弹窗，上报 ExitFeed 事件
+                if (currentPopupDataRef.current) {
+                    const { productData, viewPosition, sectionIndex } = currentPopupDataRef.current;
+                    // 获取当前 section 的 post 数据
+                    let postData = null;
+                    if (viewPosition === 'heroSection' && (data === null || data === void 0 ? void 0 : data.heroSection)) {
+                        postData = data.heroSection;
+                    }
+                    else if (viewPosition === 'carouselSection' && (data === null || data === void 0 ? void 0 : data.carouselSection) && sectionIndex !== undefined) {
+                        postData = data.carouselSection[sectionIndex];
+                    }
+                    const rec = {
+                        video: {
+                            bindProduct: productData,
+                            bindProducts: productData ? [productData] : [],
+                            itemId: (postData === null || postData === void 0 ? void 0 : postData.itemId) || '',
+                            tags: (postData === null || postData === void 0 ? void 0 : postData.tags) || null,
+                            scene: (postData === null || postData === void 0 ? void 0 : postData.scene) || null,
+                            url: (postData === null || postData === void 0 ? void 0 : postData.url) || null,
+                            imgUrls: (postData === null || postData === void 0 ? void 0 : postData.imgUrls) || null
+                        },
+                        product: null
+                    };
+                    const viewTime = new Date() - popupCurTimeRef.current;
+                    bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                        eventName: 'ExitFeed',
+                        product: productData ? [productData] : undefined,
+                        contentType: 'product',
+                        rec: rec,
+                        position: sectionIndex !== undefined ? sectionIndex : 0,
+                        view_time: viewTime,
+                        content_id: (productData === null || productData === void 0 ? void 0 : productData.itemId) || ''
+                    });
+                    console.log('[StructurePage] 上报 ExitFeed 事件', { viewTime, productId: productData === null || productData === void 0 ? void 0 : productData.itemId });
+                }
+                // 3. 刷新 Session（处理 Session 过期）
+                // 只有在非 organic menu 模式下才刷新 Session（与非 multi-cta 逻辑一致）
+                if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.playbook) !== 'organic menu' && refreshFeSession && curTime) {
+                    const isExpire = refreshFeSession(false, (reason) => {
+                        console.log('[StructurePage] Session expired:', reason);
+                        // Session 过期时的回调处理
+                        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                            eventInfo: {
+                                eventSubject: 'sessionExpired',
+                                eventDescription: 'User session has expired',
+                                reason
+                            }
+                        });
+                    });
+                    // 只有当明确返回 false 时才上报 sessionCompleted
+                    if (typeof isExpire !== 'undefined' && !isExpire) {
+                        // Session 未过期，上报正常的 Session 完成事件
+                        const sessionDuration = (new Date() - curTime.current) / 1000;
+                        bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                            eventInfo: {
+                                eventSubject: 'sessionCompleted',
+                                eventDescription: 'User session completed normally',
+                                duration: `${sessionDuration}`
+                            }
+                        });
+                    }
+                }
+            }
+            else if (document.visibilityState === 'visible') {
+                // ========== 页面可见时 ==========
+                console.log('[StructurePage] Page visible - 触发全局事件');
+                // ⚠️ 重要：必须先刷新 Session，再上报事件（使用最新的 Session ID）
+                // 1. 刷新 Session（根据配置决定）
+                if (refreshFeSession) {
+                    refreshFeSession(false);
+                }
+                // 2. 如果未启用 session 配置，则强制刷新 Session ID（与非 multi-cta 逻辑一致）
+                // ⚠️ 必须在上报事件之前刷新，这样上报的事件才会使用最新的 Session ID
+                if (!((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.session) === null || _a === void 0 ? void 0 : _a.enable)) {
+                    refreshFeSessionId();
+                    console.log('[StructurePage] Session 未启用，强制刷新 Session ID');
+                }
+                // 3. 上报 h5LinkEnterFeed 事件（现在使用的是刷新后的 Session ID）
+                const getUrlParamByKey = (key) => {
+                    const urlParams = new URLSearchParams(window.location.search);
+                    return urlParams.get(key) || '';
+                };
+                const time = new Date();
+                if (curTime) {
+                    curTime.current = time;
+                }
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'h5LinkEnterFeed',
+                        eventDescription: 'User enter h5 link',
+                        utmSource: getUrlParamByKey('utm_source'),
+                        utmMedium: getUrlParamByKey('utm_medium'),
+                        utmCampaign: getUrlParamByKey('utm_campaign'),
+                        utmId: getUrlParamByKey('utm_id'),
+                        utmContent: getUrlParamByKey('utm_content'),
+                        enterTime: Math.floor(time / 1000) + '',
+                        requestId: '',
+                        enterUrl: ((_b = window === null || window === void 0 ? void 0 : window.location) === null || _b === void 0 ? void 0 : _b.href) || ''
+                    },
+                    reportLayId: false
+                });
+                // 3. 发送 PAGE_DID_SHOW 事件到事件总线（延迟 100ms，与 SxpPageRender 保持一致）
+                setTimeout(() => {
+                    SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, data);
+                }, 100);
+                // 4. 如果有打开的弹窗，重置弹窗时间
+                if (currentPopupDataRef.current) {
+                    popupCurTimeRef.current = new Date();
+                    console.log('[StructurePage] 重置弹窗计时器');
+                }
+            }
+        };
+        // 添加事件监听
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        // 清理函数
+        return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+        };
+    }, [data, bffFbReport, bffEventReport, refreshFeSession, curTime, globalConfig]);
+    // ==================== 初始化弹窗时间记录 ====================
+    React.useEffect(() => {
+        const initTime = () => {
+            popupCurTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    // ==================== 监听弹窗关闭事件 ====================
+    // 通过轮询检测弹窗是否关闭（因为弹窗关闭时会清空 popupDetailData）
+    React.useEffect(() => {
+        let checkInterval = null;
+        let wasPopupOpen = false;
+        const checkPopupStatus = () => {
+            // 检查是否有弹窗打开
+            const isPopupOpen = typeof window !== 'undefined' &&
+                window.popup &&
+                window.popup.id !== '';
+            // 检测从打开到关闭的转换
+            if (wasPopupOpen && !isPopupOpen && currentPopupDataRef.current) {
+                console.log('[StructurePage] 检测到弹窗关闭');
+                // 弹窗关闭时上报事件
+                const { productData, viewPosition, sectionIndex } = currentPopupDataRef.current;
+                // 获取当前 section 的 post 数据
+                let postData = null;
+                if (viewPosition === 'heroSection' && (data === null || data === void 0 ? void 0 : data.heroSection)) {
+                    postData = data.heroSection;
+                }
+                else if (viewPosition === 'carouselSection' && (data === null || data === void 0 ? void 0 : data.carouselSection) && sectionIndex !== undefined) {
+                    postData = data.carouselSection[sectionIndex];
+                }
+                const rec = {
+                    video: {
+                        bindProduct: productData,
+                        bindProducts: productData ? [productData] : [],
+                        itemId: (postData === null || postData === void 0 ? void 0 : postData.itemId) || '',
+                        tags: (postData === null || postData === void 0 ? void 0 : postData.tags) || null,
+                        scene: (postData === null || postData === void 0 ? void 0 : postData.scene) || null,
+                        url: (postData === null || postData === void 0 ? void 0 : postData.url) || null,
+                        imgUrls: (postData === null || postData === void 0 ? void 0 : postData.imgUrls) || null
+                    },
+                    product: null
+                };
+                const viewTime = new Date() - popupCurTimeRef.current;
+                // 上报 Engagement 事件（engagement_type: 'close_popup'）
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'Engagement',
+                    product: productData ? [productData] : undefined,
+                    rec: rec,
+                    position: sectionIndex !== undefined ? sectionIndex : 0,
+                    content_id: (productData === null || productData === void 0 ? void 0 : productData.itemId) || '',
+                    engagement_type: 'close_popup',
+                    contentType: 'product',
+                    view_time: viewTime
+                });
+                console.log('[StructurePage] 上报弹窗关闭事件 (Engagement)', {
+                    viewTime,
+                    productId: productData === null || productData === void 0 ? void 0 : productData.itemId,
+                    engagement_type: 'close_popup'
+                });
+                // 清空弹窗数据引用
+                currentPopupDataRef.current = null;
+            }
+            wasPopupOpen = isPopupOpen;
+        };
+        // 每 200ms 检查一次弹窗状态
+        checkInterval = setInterval(checkPopupStatus, 200);
+        return () => {
+            if (checkInterval) {
+                clearInterval(checkInterval);
+            }
+        };
+    }, [data, bffFbReport]);
+    // ==================== 监听 SXP_EVENT_BUS 事件（用于弹窗内的事件响应）====================
+    // 当页面可见性变化时，如果有弹窗打开，需要相应处理
+    React.useEffect(() => {
+        // 弹窗打开时监听 PAGE_DID_SHOW 事件，重置计时器
+        const onShow = () => {
+            if (currentPopupDataRef.current) {
+                popupCurTimeRef.current = new Date();
+                console.log('[StructurePage] PAGE_DID_SHOW - 重置弹窗计时器');
+            }
+        };
+        // 弹窗打开时监听 PAGE_DID_HIDE 事件，上报 ExitFeed
+        const onHide = () => {
+            if (currentPopupDataRef.current) {
+                const { productData, viewPosition, sectionIndex } = currentPopupDataRef.current;
+                // 获取当前 section 的 post 数据
+                let postData = null;
+                if (viewPosition === 'heroSection' && (data === null || data === void 0 ? void 0 : data.heroSection)) {
+                    postData = data.heroSection;
+                }
+                else if (viewPosition === 'carouselSection' && (data === null || data === void 0 ? void 0 : data.carouselSection) && sectionIndex !== undefined) {
+                    postData = data.carouselSection[sectionIndex];
+                }
+                const rec = {
+                    video: {
+                        bindProduct: productData,
+                        bindProducts: productData ? [productData] : [],
+                        itemId: (postData === null || postData === void 0 ? void 0 : postData.itemId) || '',
+                        tags: (postData === null || postData === void 0 ? void 0 : postData.tags) || null,
+                        scene: (postData === null || postData === void 0 ? void 0 : postData.scene) || null,
+                        url: (postData === null || postData === void 0 ? void 0 : postData.url) || null,
+                        imgUrls: (postData === null || postData === void 0 ? void 0 : postData.imgUrls) || null
+                    },
+                    product: null
+                };
+                const viewTime = new Date() - popupCurTimeRef.current;
+                // 上报 ExitFeed 事件（页面隐藏时）
+                bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
+                    eventName: 'ExitFeed',
+                    product: productData ? [productData] : undefined,
+                    contentType: 'product',
+                    rec: rec,
+                    position: sectionIndex !== undefined ? sectionIndex : 0,
+                    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);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        return () => {
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        };
+    }, [data, bffFbReport]);
     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..."));
     }
@@ -20990,7 +21347,7 @@ const StructurePage = (_a) => {
                         return '20px';
                     })(),
                     backgroundColor: '#000',
-                    textAlign: ((_e = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.heroTopText) === null || _e === void 0 ? void 0 : _e.textAlign) || 'center',
+                    textAlign: ((_f = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.heroTopText) === null || _f === void 0 ? void 0 : _f.textAlign) || 'center',
                     boxSizing: 'border-box',
                     display: 'flex',
                     alignItems: 'center',
@@ -21049,7 +21406,15 @@ const StructurePage = (_a) => {
                         return textStyle;
                     })()) }, data.heroSection.text))),
             React.createElement("div", { style: baseStyles.heroImageContainer },
-                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(PostView, { videoRef: heroVideoRef, isVideo: !!data.heroSection.url, autoPlayTriggerRef: heroAutoPlayTrigger, onVideoPlay: () => {
+                        // 视频开始播放，隐藏暂停图标
+                        console.log('[Hero PostView] onVideoPlay 回调');
+                        setIsHeroVideoPaused(false);
+                    }, onVideoPause: () => {
+                        // 视频暂停，显示暂停图标
+                        console.log('[Hero PostView] onVideoPause 回调');
+                        setIsHeroVideoPaused(true);
+                    } }, 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;
@@ -21075,7 +21440,10 @@ const StructurePage = (_a) => {
                                 });
                                 el.addEventListener('ended', (e) => {
                                     console.log('[Hero Video] ended event triggered');
-                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget);
+                                    handleVideoPlayOver(data.heroSection, 'heroSection', 0, e.currentTarget, true);
+                                });
+                                el.addEventListener('timeupdate', (e) => {
+                                    handleVideoTimeUpdate(data.heroSection, 'heroSection', 0, e.currentTarget);
                                 });
                             }
                         }, src: data.heroSection.url, style: baseStyles.heroVideo, muted: true, loop: true, playsInline: true, controls: false, onLoadedMetadata: () => {
@@ -21085,8 +21453,8 @@ const StructurePage = (_a) => {
                             const initTime = videoLoadTime.current[videoId] || loadTime;
                             videoLoadTime.current[videoId] = loadTime - initTime;
                         } }),
-                    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))))),
+                    isHeroVideoPaused && (React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon, alt: 'play' })))) : ((_g = data.heroSection.imgUrls) === null || _g === void 0 ? void 0 : _g[0]) ? (React.createElement("img", { src: data.heroSection.imgUrls[0], alt: 'Hero', style: baseStyles.heroImage })) : null),
+                React.createElement("div", { style: baseStyles.heroOverlay }, renderCTA('heroButton', (_j = (_h = data.heroSection.bindProducts) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.bindCta, (_k = data.heroSection.bindProducts) === null || _k === void 0 ? void 0 : _k[0], baseStyles.heroButton, 'heroSection', 0))))),
         data.carouselSection && data.carouselSection.length > 0 && (React.createElement("div", { ref: carouselSectionRef, style: mergeStyles(baseStyles.carouselSection, 'carouselSection', { excludeBorder: true }) },
             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) => {
@@ -21141,7 +21509,10 @@ const StructurePage = (_a) => {
                                         });
                                         el.addEventListener('ended', (e) => {
                                             console.log('[Carousel Video] ended event triggered, index:', index);
-                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                            handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget, true);
+                                        });
+                                        el.addEventListener('timeupdate', (e) => {
+                                            handleVideoTimeUpdate(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: () => {
@@ -21174,7 +21545,10 @@ const StructurePage = (_a) => {
                                     });
                                     el.addEventListener('ended', (e) => {
                                         console.log('[Carousel Video (non-current)] ended event triggered, index:', index);
-                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget);
+                                        handleVideoPlayOver(item, 'carouselSection', index, e.currentTarget, true);
+                                    });
+                                    el.addEventListener('timeupdate', (e) => {
+                                        handleVideoTimeUpdate(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: () => {
@@ -21197,9 +21571,9 @@ const StructurePage = (_a) => {
                     padding: '10px 20px',
                     backgroundColor: '#000',
                     color: '#fff',
-                    textAlign: ((_k = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselSection) === null || _k === void 0 ? void 0 : _k.textAlign) || 'center'
+                    textAlign: ((_l = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselSection) === null || _l === void 0 ? void 0 : _l.textAlign) || 'center'
                 } },
-                ((_l = data.carouselSection[carouselIndex]) === null || _l === void 0 ? void 0 : _l.text) && (React.createElement("div", { style: { marginBottom: '15px' } },
+                ((_m = data.carouselSection[carouselIndex]) === null || _m === void 0 ? void 0 : _m.text) && (React.createElement("div", { style: { marginBottom: '15px' } },
                     React.createElement("span", { style: Object.assign({}, (() => {
                             const config = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.carouselSection;
                             if (!config) {
@@ -21235,8 +21609,8 @@ const StructurePage = (_a) => {
                                 textStyle.margin = config.margin;
                             }
                             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)))),
+                        })()) }, (_o = data.carouselSection[carouselIndex]) === null || _o === void 0 ? void 0 : _o.text))),
+                renderCTA('carouselButton', (_r = (_q = (_p = data.carouselSection[carouselIndex]) === null || _p === void 0 ? void 0 : _p.bindProducts) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.bindCta, (_t = (_s = data.carouselSection[carouselIndex]) === null || _s === void 0 ? void 0 : _s.bindProducts) === null || _t === void 0 ? void 0 : _t[0], baseStyles.carouselButton, 'carouselSection', carouselIndex)))),
         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 },
@@ -21246,7 +21620,7 @@ const StructurePage = (_a) => {
                         padding: '20px',
                         backgroundColor: '#000',
                         color: '#fff',
-                        textAlign: ((_t = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.highlightSection) === null || _t === void 0 ? void 0 : _t.textAlign) || 'center'
+                        textAlign: ((_u = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.highlightSection) === null || _u === void 0 ? void 0 : _u.textAlign) || 'center'
                     } },
                     data.highlightRevealSection.description && (React.createElement("div", { style: { marginBottom: '10px' } },
                         React.createElement("span", { style: Object.assign({}, (() => {
@@ -21340,7 +21714,7 @@ const StructurePage = (_a) => {
                     padding: '20px',
                     backgroundColor: '#000',
                     color: '#fff',
-                    textAlign: ((_u = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection) === null || _u === void 0 ? void 0 : _u.textAlign) || 'center'
+                    textAlign: ((_v = multiCTAConfig === null || multiCTAConfig === void 0 ? void 0 : multiCTAConfig.footerSection) === null || _v === void 0 ? void 0 : _v.textAlign) || 'center'
                 } },
                 data.footerSection.text && (React.createElement("div", { style: { marginBottom: '15px' } },
                     React.createElement("span", { style: Object.assign({}, (() => {