pb-sxp-ui 1.0.85 → 1.0.87

package/dist/pb-ui.js

@@ -430,70 +430,6 @@
         SXP_EVENT_TYPE["CHANGE_THEME_TAG"] = "changeThemeTag";
     })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2024-06-13 15:16:53
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-17 14:25:01
-     * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
-     *
-     */
-    const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
-        const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
-        const channelObj = React.useMemo(() => {
-            const queryString = location.search.slice(1);
-            const params = qs.parse(queryString.replace(/\+/g, '%2B'));
-            for (const key in params) {
-                params[key] = params[key].replace(/%2B/g, '+');
-            }
-            return params;
-        }, []);
-        const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
-        React.useEffect(() => {
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'privacyEnter',
-                    eventDescription: 'User enter privacy page',
-                    utmSource: getUtmValue('utm_source'),
-                    utmMedium: getUtmValue('utm_medium'),
-                    utmCampaign: getUtmValue('utm_campaign'),
-                    utmId: getUtmValue('utm_id'),
-                    utmContent: getUtmValue('utm_content'),
-                    clSource: getUtmValue('cl_source'),
-                    enterTime: `${Date.now()}`,
-                    enterUrl: window.location.href,
-                    rtc: null,
-                    requestId: null,
-                    sessionID: null
-                }
-            });
-        }, []);
-        const handleAgree = () => {
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'userConsent',
-                    eventDescription: '用户授权【操作结果】',
-                    consentResult: '0',
-                    consentTags: '[]',
-                    rtc: null,
-                    requestId: null,
-                    sessionID: null
-                }
-            });
-            setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
-            window.localStorage.setItem(AGREE_POLICY, 'yes');
-        };
-        return (React.createElement("div", { className: 'consent-bg' },
-            React.createElement("div", { className: 'consent' },
-                React.createElement("div", { className: 'consent-col' },
-                    React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
-                    React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
-                React.createElement("div", { className: 'consent-col' },
-                    React.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
-                    React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
-    };
-    var Consent$3 = React.memo(Consent$2);
-
     const SxpDataSourceContext = React.createContext({
         rtcList: [],
         tagList: []
@@ -503,8 +439,8 @@
         DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
     })(DataSourceType || (DataSourceType = {}));
     const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
+    const DEFAULT_TAG = 'FOR U';
     const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
-        var _a, _b, _c;
         const [rtcList, setRtcList] = React.useState([]);
         const [tagList, setTagList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
@@ -522,6 +458,7 @@
         const [videoRef, setVideoRef] = React.useState(null);
         const themeTag = React.useRef();
         const curTime = React.useRef();
+        const [selectTag, setSelectTag] = React.useState(DEFAULT_TAG);
         const isShowConsent = React.useMemo(() => {
             var _a, _b, _c, _d;
             return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
@@ -570,10 +507,10 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e;
             query = {
-                maxSize: (_d = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _d !== void 0 ? _d : maxSize,
-                defaultSize: (_e = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _e !== void 0 ? _e : defaultSize,
+                maxSize: (_a = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _a !== void 0 ? _a : maxSize,
+                defaultSize: (_b = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _b !== void 0 ? _b : defaultSize,
                 'itemFilter.itemId': query === null || query === void 0 ? void 0 : query['itemFilter.itemId'],
                 'itemFilter.itemType': query === null || query === void 0 ? void 0 : query['itemFilter.itemType'],
                 hashTag: query === null || query === void 0 ? void 0 : query.hashTag,
@@ -581,10 +518,10 @@
                 themeTag: query === null || query === void 0 ? void 0 : query.themeTag
             };
             if (utmVal) {
-                const val = (_h = (_g = (_f = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _f === void 0 ? void 0 : _f.filter((val) => {
+                const val = (_e = (_d = (_c = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _c === void 0 ? void 0 : _c.filter((val) => {
                     const key = val.split('=')[0];
                     return UTM_KEYS.includes(key);
-                })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
+                })) === null || _d === void 0 ? void 0 : _d.join('&')) !== null && _e !== void 0 ? _e : '';
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
@@ -596,7 +533,7 @@
             return result === null || result === void 0 ? void 0 : result.data;
         }), [bffFetch, utmVal, maxSize, defaultSize]);
         const loadVideos = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _j, _k;
+            var _f, _g;
             if (rtcList.length <= 0) {
                 return;
             }
@@ -606,8 +543,8 @@
                 'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
                 themeTag: themeTag.current
             });
-            setRtcList(rtcList.concat((_j = data === null || data === void 0 ? void 0 : data.recList) !== null && _j !== void 0 ? _j : []));
-            setCacheRtcList(cacheRtcList.concat((_k = data === null || data === void 0 ? void 0 : data.recList) !== null && _k !== void 0 ? _k : []));
+            setRtcList(rtcList.concat((_f = data === null || data === void 0 ? void 0 : data.recList) !== null && _f !== void 0 ? _f : []));
+            setCacheRtcList(cacheRtcList.concat((_g = data === null || data === void 0 ? void 0 : data.recList) !== null && _g !== void 0 ? _g : []));
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
@@ -671,16 +608,16 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _l, _m, _o, _p, _q;
+            var _h, _j, _k, _l, _m;
             if (!utmVal || !isShowTag)
                 return;
             try {
-                const val = (_o = (_m = (_l = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _l === void 0 ? void 0 : _l.filter((val) => {
+                const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
                     const key = val.split('=')[0];
                     return UTM_KEYS.includes(key);
-                })) === null || _m === void 0 ? void 0 : _m.join('&')) !== null && _o !== void 0 ? _o : '';
+                })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
                 const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-                setTagList((_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []);
+                setTagList((_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []);
             }
             catch (e) {
                 console.log('e', e);
@@ -811,14 +748,17 @@
                 setIsAgreePolicy,
                 curTime,
                 h5EnterLink,
-                themeTag
-            } }, isShowConsent ? (React.createElement(Consent$3, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
+                themeTag,
+                isShowConsent,
+                selectTag,
+                setSelectTag
+            } }, render({
             rtcList,
             mutateLike: bffMutateLike,
             mutateUnlike: bffMutateUnlike,
             submitForm: bffSubmitForm,
             tagList
-        }))));
+        })));
     };
     var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
 
@@ -1222,7 +1162,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-12 10:59:06
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-12 10:53:57
+     * @LastEditTime: 2024-06-20 13:39:07
      * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
      *
      */
@@ -1292,16 +1232,18 @@
                 }
             });
         }, [bffEventReport, popupDetailData]);
-        const backMainFeed = React.useCallback((lastFeed, themeTag, hashTag) => {
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    lastFeed,
-                    themeTags: themeTag ? `[${themeTag}]` : '',
-                    hashTags: hashTag ? `[${hashTag}]` : '',
-                    eventSubject: 'backMainFeed',
-                    eventDescription: 'back Main Feed'
-                }
-            });
+        const backMainFeed = React.useCallback((lastFeed, selectTag, themeTag, hashTag) => {
+            if (selectTag && selectTag === DEFAULT_TAG) {
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        lastFeed,
+                        themeTags: themeTag ? `['${themeTag}']` : '',
+                        hashTags: hashTag ? `['${hashTag}']` : '',
+                        eventSubject: 'backMainFeed',
+                        eventDescription: 'back Main Feed'
+                    }
+                });
+            }
         }, [bffEventReport]);
         return {
             jumpToWeb,
@@ -1388,7 +1330,7 @@
                 React.createElement("div", { className: 'pb-appoint-form-container' },
                     React.createElement(proComponents.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
             React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
-                React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
+                React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
     };
     var AppointFormComponent = React.memo(AppointForm$1);
 
@@ -8580,7 +8522,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-05-27 09:47:19
+     * @LastEditTime: 2024-06-19 16:25:46
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
      *
      */
@@ -8630,9 +8572,9 @@
             React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
             React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
                     onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-                } }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
+                }, alt: 'image' }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            } }))));
+            }, alt: 'image' }))));
     });
     var FormatImage$1 = React.memo(FormatImage);
 
@@ -8700,8 +8642,8 @@
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
         };
         const renderBtn = () => {
-            var _a;
-            return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website'))));
+            var _a, _b;
+            return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
         };
         const getStyle = React.useCallback((style) => {
             if (style === null || style === void 0 ? void 0 : style.lineClamp) {
@@ -8747,7 +8689,7 @@
                             top: 0,
                             objectFit: 'cover',
                             width: '100%'
-                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
                 React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
             renderBtn(),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
@@ -8951,9 +8893,9 @@
         };
         return (React.createElement("div", Object.assign({ className: `pb-prompt ${css.css(Object.assign({}, style))}` }, props),
             React.createElement("div", { className: 'pb-prompt-icon' },
-                React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2 })),
+                React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2, alt: 'success image' })),
             React.createElement("div", { className: 'pb-prompt-content' }, content),
-            React.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
+            React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
     };
     var PromptComponent = React.memo(Prompt$1);
 
@@ -9177,7 +9119,7 @@
     ];
 
     const CommodityDetailDiroNew$1 = (_a) => {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
         React.useState(true);
         const { sxpParameter } = useSxpDataSource();
@@ -9283,7 +9225,7 @@ Made in Italy` })));
                             top: 0,
                             objectFit: 'cover',
                             width: '100%'
-                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
+                        }), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
                 React.createElement("div", { className: 'pb-commondityDiroNew-content' },
                     React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
@@ -9292,7 +9234,7 @@ Made in Italy` })));
                         React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
                             React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
-                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now')),
+                    (!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now')),
                     productInfoText({ isPost }))),
             React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
     };
@@ -9784,7 +9726,7 @@ Made in Italy` })));
         const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
         return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css.css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
-                React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
+                React.createElement("img", { className: css.css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
             React.createElement("div", { className: css.css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
     };
     var AppointComponent = React.memo(Appoint$1);
@@ -10702,7 +10644,7 @@ Made in Italy` })));
         var _a;
         const { waterFallData, setOpenHashtag } = useSxpDataSource();
         return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
-            React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
+            React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
             React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
     };
     var Navbar$1 = React.memo(Navbar);
@@ -11994,15 +11936,15 @@ Made in Italy` })));
         const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
         const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
         const [showVideo, setShowVideo] = React.useState(false);
-        const [isLoading, setIsLoading] = React.useState(false);
-        const [imgInfo, setImgInfo] = React.useState({
+        React.useState(false);
+        React.useState({
             height: 1,
             width: 1
         });
         const imgDom = React.useRef(null);
         const ref = React.useRef(null);
-        const videoDom = React.useRef(null);
-        const canvasRef = React.useRef(null);
+        React.useRef(null);
+        React.useRef(null);
         const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
         const src = React.useMemo(() => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -12032,7 +11974,7 @@ Made in Italy` })));
             return y;
         }, [style]);
         /** 是否加载图片 */
-        const isImgShow = React.useMemo(() => {
+        React.useMemo(() => {
             if (top === undefined) {
                 return false;
             }
@@ -12058,58 +12000,25 @@ Made in Italy` })));
             if (imgDom.current === null || src === '') {
                 return;
             }
-            const img = new Image();
+            let imgSrc = null;
             if (showVideo && firstFrameSrc) {
-                img.src = firstFrameSrc;
+                imgSrc = firstFrameSrc;
             }
             else {
-                img.src = src;
+                imgSrc = src;
             }
-            img.onload = () => {
-                setImgInfo({
-                    height: img.height,
-                    width: img.width
-                });
-                setIsLoading(true);
-            };
-            imgDom.current.setSrc(img.src);
-        }, [src, showVideo, firstFrameSrc, isImgShow]);
-        React.useEffect(() => {
-            // 通过宽度比例获取图片高度
-            const height = imgInfo.height * (unitWidth / imgInfo.width);
-            if (isLoading) {
-                // 加40是因为下方文字部分高度为40，可以自己设置
-                sizeChange(height + 76 + space, index);
-            }
-        }, [imgInfo, index, unitWidth, isLoading, space]); /* 增加sizeChange依赖项会导致在admin预览编辑时无限刷新 */
-        const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
-            const aspectRatio = videoWidth / videoHeight;
-            const targetHeight = targetWidth / aspectRatio;
-            return targetHeight;
-        };
-        React.useEffect(() => {
-            const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
-            if (video === null || src === '' || !showVideo) {
-                return;
-            }
-            video.src = src;
-            video.currentTime = 1;
-            video.crossOrigin = 'anonymous';
-            video.onloadeddata = () => {
-                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-                if (!canvas)
-                    return;
-                const ctx = canvas.getContext('2d');
-                const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
-                const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
-                canvas.height = targetHeight;
-                canvas.width = targetWidth;
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                setFirstFrameSrc(canvas.toDataURL());
-                video.remove();
-                canvas.remove();
-            };
-        }, [src, showVideo]);
+            if (imgSrc)
+                imgDom.current.setSrc(imgSrc);
+        }, [src, showVideo, firstFrameSrc]);
+        const pictRef = React.useRef();
+        const imgLoad = React.useCallback((img) => {
+            setTimeout(() => {
+                var _a;
+                const height = (_a = pictRef === null || pictRef === void 0 ? void 0 : pictRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+                // 加56是因为下方文字部分高度为56，可以自己设置
+                sizeChange(height + 56 + space, index);
+            }, 0);
+        }, [space, sizeChange, index, unitWidth, pictRef]);
         const handleClickToDetail = () => {
             reportTagsView();
             setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
@@ -12120,17 +12029,14 @@ Made in Italy` })));
             }, 0);
         };
         return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
-            React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
-                showVideo && (React.createElement("div", { style: { display: 'none' } },
-                    React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
-                    React.createElement("canvas", { ref: canvasRef }))),
-                React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
+            React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
+                React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
             React.createElement("div", { className: 'waterFallList-content-listItem-info' },
                 React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
                 React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
     };
     function WaterfallList$1(_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
         var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
         const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
         /** 滚动的父元素 */
@@ -12182,7 +12088,6 @@ Made in Italy` })));
             for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
                 // 原本应对应的行数
                 const currentRow = Math.floor(i / rowsNum);
-                //
                 const remainder = (i % rowsNum) + 1;
                 // 最低item下标
                 let minHeightInd = 0;
@@ -12359,7 +12264,7 @@ Made in Italy` })));
                         } }))),
             React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
             React.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-                React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection'))))));
+                React.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
     }
 
     var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -12488,7 +12393,7 @@ Made in Italy` })));
                 React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
     };
     function WaterfallList(_a) {
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
         const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
         const [list, setList] = React.useState();
@@ -12577,20 +12482,20 @@ Made in Italy` })));
                     } })),
             React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
             React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
-                React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection'))))));
+                React.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
     }
 
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-10 10:58:24
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-12 14:18:56
+     * @LastEditTime: 2024-06-20 12:45:26
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
      *
      */
     const WaterFall = (props) => {
         var _a;
-        const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = useSxpDataSource();
+        const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
         React.useRef(null);
         const modalEleRef = React.useRef(null);
@@ -12612,9 +12517,7 @@ Made in Italy` })));
             if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
                 setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
             }
-            if (!(themeTag === null || themeTag === void 0 ? void 0 : themeTag.current)) {
-                backMainFeed('branch', themeTag === null || themeTag === void 0 ? void 0 : themeTag.current, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
-            }
+            backMainFeed('branch', selectTag, undefined, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
             reportTagsView();
             setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
             setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
@@ -12818,10 +12721,10 @@ Made in Italy` })));
         }
     ];
 
-    const Consent$1 = (props) => {
-        return React.createElement(Consent$1, Object.assign({}, props));
+    const Consent$3 = (props) => {
+        return React.createElement(Consent$3, Object.assign({}, props));
     };
-    var ConsentComponent = React.memo(Consent$1);
+    var ConsentComponent = React.memo(Consent$3);
 
     /*
      * @Author: binruan@chatlabs.com
@@ -12831,7 +12734,7 @@ Made in Italy` })));
      * @FilePath: \pb-sxp-ui\src\materials\sxp\Consent\material.tsx
      *
      */
-    const Consent = createMaterial(ConsentComponent, {
+    const Consent$2 = createMaterial(ConsentComponent, {
         displayName: 'Consent',
         icon: '',
         category: 'base',
@@ -12866,7 +12769,7 @@ Made in Italy` })));
         CommodityDetailDiroNew: CommodityDetailDiroNew,
         CommodityDiro: CommodityDiro,
         CommodityDiroNew: CommodityDiroNew,
-        Consent: Consent,
+        Consent: Consent$2,
         HashTag: HashTag,
         Link: Link,
         MultiCommodity: MultiCommodity,
@@ -12926,7 +12829,7 @@ Made in Italy` })));
                 }
             }
         }), 200);
-        return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
+        return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
             React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
     };
     var LikeButton$1 = React.memo(LikeButton);
@@ -13185,7 +13088,7 @@ Made in Italy` })));
             if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
                 return null;
             }
-            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
         }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
         React.useEffect(() => {
             if (!videoRef)
@@ -13218,7 +13121,7 @@ Made in Italy` })));
                 } },
                 React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                     React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
             renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
                 position: 'relative',
                 width: '100%',
@@ -13227,7 +13130,7 @@ Made in Italy` })));
             }, onClick: handleClickVideo() },
             React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
             renderPoster,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
+            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
     };
     var VideoWidget$3 = React.memo(VideoWidget$2);
 
@@ -13247,8 +13150,8 @@ Made in Italy` })));
             setIsTure(result);
             onChange === null || onChange === void 0 ? void 0 : onChange(result);
         };
-        return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
-            React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
+        return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
+            React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
     };
     var ToggleButton$1 = React.memo(ToggleButton);
 
@@ -13273,7 +13176,7 @@ Made in Italy` })));
             return show ? 'pb-fadeIn' : 'pb-fadeOut';
         }, [show]);
         return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
-            React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
+            React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
     };
 
     /*
@@ -13535,7 +13438,7 @@ Made in Italy` })));
                 backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
                 borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
             } },
-            (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
+            (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
             React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
     };
 
@@ -13543,14 +13446,12 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-04-29 16:32:21
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-12 11:01:48
+     * @LastEditTime: 2024-06-20 10:53:08
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Tagbar.tsx
      *
      */
-    const DEFAULT_TAG = 'FOR U';
     const Tagbar = ({ tagList = [], setActiveIndex }) => {
-        const [selectTag, setSelectTag] = React.useState(DEFAULT_TAG);
-        const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = useSxpDataSource();
+        const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
         const realTagList = React.useMemo(() => {
             return [DEFAULT_TAG, ...tagList];
@@ -13563,12 +13464,12 @@ Made in Italy` })));
                     eventInfo: {
                         eventSubject: 'clickThemeTagsViewContents',
                         eventDescription: 'click Theme Tags View Contents',
-                        themeTags: `[${tag}]`
+                        themeTags: `['${tag}']`
                     }
                 });
             }
             else {
-                backMainFeed('theme', selectTag);
+                backMainFeed('theme', tag, selectTag);
             }
             let themeTag;
             if (tag !== DEFAULT_TAG) {
@@ -13586,7 +13487,7 @@ Made in Italy` })));
             }).finally(() => {
                 setLoading === null || setLoading === void 0 ? void 0 : setLoading(false);
             });
-            setSelectTag(tag);
+            setSelectTag === null || setSelectTag === void 0 ? void 0 : setSelectTag(tag);
         };
         if (waterFallData || tagList.length <= 0)
             return null;
@@ -13597,16 +13498,80 @@ Made in Italy` })));
     };
     var Tagbar$1 = React.memo(Tagbar);
 
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-06-13 15:16:53
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-06-19 14:13:50
+     * @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
+     *
+     */
+    const Consent = ({ width = window.innerWidth, height = window.innerHeight, privacy_title, privacy_context, privacy_policy_url, privacy_policy_title }) => {
+        const { setIsAgreePolicy, bffEventReport } = useSxpDataSource();
+        const channelObj = React.useMemo(() => {
+            const queryString = location.search.slice(1);
+            const params = qs.parse(queryString.replace(/\+/g, '%2B'));
+            for (const key in params) {
+                params[key] = params[key].replace(/%2B/g, '+');
+            }
+            return params;
+        }, []);
+        const getUtmValue = (key) => { var _a; return (_a = channelObj[key]) !== null && _a !== void 0 ? _a : null; };
+        React.useEffect(() => {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'privacyEnter',
+                    eventDescription: 'User enter privacy page',
+                    utmSource: getUtmValue('utm_source'),
+                    utmMedium: getUtmValue('utm_medium'),
+                    utmCampaign: getUtmValue('utm_campaign'),
+                    utmId: getUtmValue('utm_id'),
+                    utmContent: getUtmValue('utm_content'),
+                    clSource: getUtmValue('cl_source'),
+                    enterTime: `${Date.now()}`,
+                    enterUrl: window.location.href,
+                    rtc: null,
+                    requestId: null,
+                    sessionID: null
+                }
+            });
+        }, []);
+        const handleAgree = () => {
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    eventSubject: 'userConsent',
+                    eventDescription: '用户授权【操作结果】',
+                    consentResult: '0',
+                    consentTags: '["系统运营"]',
+                    rtc: null,
+                    requestId: null,
+                    sessionID: null
+                }
+            });
+            setIsAgreePolicy === null || setIsAgreePolicy === void 0 ? void 0 : setIsAgreePolicy(true);
+            window.localStorage.setItem(AGREE_POLICY, 'yes');
+        };
+        return (React.createElement("div", { className: 'consent-bg' },
+            React.createElement("div", { className: 'consent' },
+                React.createElement("div", { className: 'consent-col' },
+                    React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
+                    React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
+                React.createElement("div", { className: 'consent-col' },
+                    React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
+                    React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
+    };
+    var Consent$1 = React.memo(Consent);
+
     /*
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-06-13 18:09:16
+     * @LastEditTime: 2024-06-20 10:37:06
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
     const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
         const viewImageStartTime = React.useRef(0);
@@ -13615,7 +13580,7 @@ Made in Italy` })));
         const viewTime = React.useRef();
         const [isLoadMore, setIsLoadMore] = React.useState(false);
         const [isShowMore, setIsShowMore] = React.useState(false);
-        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = useSxpDataSource();
+        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
         const { backMainFeed } = useEventReport();
         const [videoRef, setVideoRef] = React.useState(null);
         const playerRef = React.useRef();
@@ -13689,12 +13654,15 @@ Made in Italy` })));
             const item = data === null || data === void 0 ? void 0 : data[activeIndex];
             const visibleChange = () => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                const repCond = !openHashtag && !isShowConsent;
                 if (document.visibilityState === 'hidden') {
                     // 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面（即离开原页面时），或者在移动设备上从浏览器切换到不同的应用程序时
                     // 移动端h5直接杀掉浏览器或宿主app时不会触发，pc端直接杀掉标签页时能触发
-                    SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
-                    handleReportViewImageEnd(item);
-                    handleReportProductView(item);
+                    if (repCond) {
+                        SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
+                        handleReportViewImageEnd(item);
+                        handleReportProductView(item);
+                    }
                     let fromKName = '';
                     if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
                         fromKName = 'pdpPage';
@@ -13731,9 +13699,11 @@ Made in Italy` })));
                 else if (document.visibilityState === 'visible') {
                     // 页面可见时触发，注意页面初始化时不会触发
                     handleH5EnterLink();
-                    handleViewImageStartEvent(activeIndex);
-                    SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
-                    backMainFeed('external');
+                    if (repCond) {
+                        handleViewImageStartEvent(activeIndex);
+                        SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
+                        backMainFeed('external', selectTag);
+                    }
                 }
             };
             document.addEventListener('visibilitychange', visibleChange);
@@ -13749,17 +13719,11 @@ Made in Italy` })));
             isFromHashtag,
             tempMap,
             curTime,
-            backMainFeed
+            backMainFeed,
+            openHashtag,
+            isShowConsent,
+            selectTag
         ]);
-        React.useEffect(() => {
-            const initTime = () => {
-                backMainFeed('external');
-            };
-            window.addEventListener('pageshow', initTime);
-            return () => {
-                window.removeEventListener('pageshow', initTime);
-            };
-        }, []);
         const tagHeight = React.useMemo(() => {
             let h = 0;
             if (tagList.length > 0) {
@@ -14003,62 +13967,46 @@ Made in Italy` })));
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
-                    setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-                } })),
-            renderLogo,
-            React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
-            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _a !== void 0 ? _a : 0)}%` } })) : null,
-            React.createElement(Swiper, { style: {
-                    marginTop: tagHeight
-                }, ref: swiperRef, onSlideChange: () => {
-                    swiperRef.current.swiper.allowTouchMove = false;
-                    setTimeout(() => {
-                        swiperRef.current.swiper.allowTouchMove = true;
-                    }, 500);
-                }, onActiveIndexChange: (swiper) => {
-                    setActiveIndex(swiper.activeIndex);
-                    if (openHashtag)
-                        return;
-                    // 处理上滑下滑事件
-                    handleScrollEvent(swiper);
-                    if (waterFallData)
-                        return;
-                    if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
-                        if (!isLoadMore) {
-                            setIsLoadMore(true);
-                            loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
-                                setIsLoadMore(false);
-                            });
+            isShowConsent ? (React.createElement(Consent$1, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (React.createElement(React.Fragment, null,
+                waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+                        setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
+                    } })),
+                renderLogo,
+                React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex }),
+                isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 + ((_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _d !== void 0 ? _d : 0)}%` } })) : null,
+                React.createElement(Swiper, { style: {
+                        marginTop: tagHeight
+                    }, ref: swiperRef, onSlideChange: () => {
+                        swiperRef.current.swiper.allowTouchMove = false;
+                        setTimeout(() => {
+                            swiperRef.current.swiper.allowTouchMove = true;
+                        }, 500);
+                    }, onActiveIndexChange: (swiper) => {
+                        setActiveIndex(swiper.activeIndex);
+                        if (openHashtag)
+                            return;
+                        // 处理上滑下滑事件
+                        handleScrollEvent(swiper);
+                        if (waterFallData)
+                            return;
+                        if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 2 >= (data === null || data === void 0 ? void 0 : data.length)) {
+                            if (!isLoadMore) {
+                                setIsLoadMore(true);
+                                loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(Math.ceil(activeIndex / 10) + 1).then(() => {
+                                    setIsLoadMore(false);
+                                });
+                            }
                         }
-                    }
-                }, 
-                // style={{
-                //   pointerEvents: canSwiper ? 'auto' : 'none'
-                // }}
-                // onReachEnd={() => {
-                //   // 由hashtaglist跳转过来时不执行下面的方法
-                //   if (waterFallData) return;
-                //   if (!isLoadMore) {
-                //     console.log('trigger load 2');
-                //     setIsLoadMore(true);
-                //     loadVideos?.(Math.ceil(activeIndex / 10) + 1).then(() => {
-                //       setIsLoadMore(false);
-                //     });
-                //   }
-                // }}
-                // modules={[Virtual]}
-                // virtual={{ enabled: true, cache: true }}
-                direction: 'vertical', height: height },
-                React.createElement(ToggleButton$1, { style: {
-                        position: 'fixed',
-                        visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
-                        zIndex: 999,
-                        [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _d !== void 0 ? _d : 'right']: (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _e !== void 0 ? _e : 0,
-                        [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
-                    }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
-                renderView),
-            React.createElement(WaterFall$1, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
+                    }, direction: 'vertical', height: height },
+                    React.createElement(ToggleButton$1, { style: {
+                            position: 'fixed',
+                            visibility: ((_f = (_e = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _e === void 0 ? void 0 : _e.video) === null || _f === void 0 ? void 0 : _f.url) ? 'visible' : 'hidden',
+                            zIndex: 999,
+                            [(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _g !== void 0 ? _g : 'right']: (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _h !== void 0 ? _h : 0,
+                            [(_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _j !== void 0 ? _j : 'bottom']: (_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _k !== void 0 ? _k : 23
+                        }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
+                    renderView))),
+            React.createElement(WaterFall$1, Object.assign({}, (_o = (_m = (_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.item) === null || _o === void 0 ? void 0 : _o.props)),
             React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
                 React.createElement("video", { ref: playerRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', style: {
                         backgroundColor: 'transparent',
@@ -14248,7 +14196,7 @@ Made in Italy` })));
             if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
                 return null;
             }
-            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+            return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
         }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
         React.useEffect(() => {
             const handleBeforeUnload = () => {
@@ -14297,7 +14245,7 @@ Made in Italy` })));
                             height,
                             objectFit: 'contain'
                         } }),
-                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' }))),
             renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
                 position: 'relative',
                 width,
@@ -14306,7 +14254,7 @@ Made in Italy` })));
             } },
             React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', style: { width: '100%' }, ref: videoRef, crossOrigin: 'anonymous', muted: true, autoPlay: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
             renderPoster,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
+            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
     };
     var VideoWidget$1 = React.memo(VideoWidget);