pb-sxp-ui 1.3.8 → 1.4.1

package/dist/pb-ui.js

@@ -650,6 +650,7 @@
         const [selectTag, setSelectTag] = React.useState(DEFAULT_TAG);
         const checkCommodityIndexRef = React.useRef(-1);
         const popupCurTimeRef = React.useRef(null);
+        const [isNoMoreData, setIsNoMoreData] = React.useState(false);
         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;
@@ -711,7 +712,7 @@
         }, [bffDataSource]);
         // 获取推荐视频数据
         const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
             query = Object.assign(Object.assign(Object.assign({ 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, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag }, ((query === null || query === void 0 ? void 0 : query.contentFilter) && { contentFilter: `[${query === null || query === void 0 ? void 0 : query.contentFilter}]` })), ((query === null || query === void 0 ? void 0 : query.productFilter) && { productFilter: `[${query === null || query === void 0 ? void 0 : query.productFilter}]` })), { pageNum: query === null || query === void 0 ? void 0 : query.pageNum });
             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) => {
@@ -721,9 +722,6 @@
                 })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
                 query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
             }
-            if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
-                query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_j = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _j !== void 0 ? _j : 1 });
-            }
             if (isEditor) {
                 let pageNum = 1;
                 query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
@@ -734,15 +732,15 @@
                 let list = [];
                 let result = null;
                 const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
-                    var _r, _s, _t, _u, _v, _w;
+                    var _t, _u, _v, _w, _x, _y;
                     query.pageNum = pageNum;
                     result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
                     if (!(result === null || result === void 0 ? void 0 : result.success)) {
                         return undefined;
                     }
                     setLoading(false);
-                    const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.every((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                     list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
+                    const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
                     if (isNotNullList) {
                         pageNum = pageNum + 1;
                         yield recurveRecList(query);
@@ -750,9 +748,12 @@
                 });
                 yield recurveRecList(query);
                 if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
-                    setCurReqInfo({ rtc: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.rtc, requestId: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.requestId });
+                    setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
                 return Object.assign(Object.assign({}, result.data), { recList: list });
             }
+            if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
+                query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
+            }
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/recommend/list', { method: 'GET', query }));
             if (!(result === null || result === void 0 ? void 0 : result.success)) {
                 return undefined;
@@ -762,19 +763,24 @@
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
                 let list = [];
                 list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
+                const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
+                if (!isNotNullList) {
+                    setIsNoMoreData(true);
+                }
                 return Object.assign(Object.assign({}, result.data), { recList: list });
             }
             return result === null || result === void 0 ? void 0 : result.data;
         }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList]);
         const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
-            var _x, _y, _z, _0;
+            var _z, _0, _1, _2;
             if (rtcList.length <= 0) {
                 return;
             }
             const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
-            const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_x = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _x === void 0 ? void 0 : _x.itemId) && { productFilter: (_y = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _y === void 0 ? void 0 : _y.itemId })), (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _z === void 0 ? void 0 : _z.itemId) && { contentFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _0 === void 0 ? void 0 : _0.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
+            const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: (_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: (_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
             setRtcList(rtcList.concat(getFilterRecList(data)));
             setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
+            return data;
         }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
         const bffEventReport = React.useCallback(({ userInfo, eventInfo }) => {
             // 关闭 BFF 事件上报
@@ -819,7 +825,7 @@
                     eventName,
                     actionSource,
                     eventSourceUrl,
-                    userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { client_user_agent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
+                    userData: Object.assign(Object.assign(Object.assign({ externalId: fakeUserId }, (fbclid && { fbc: `fb.2.${new Date().getTime()}.${fbclid}` })), (getCookie('_fbp') && { fbp: `fb.2.${new Date().getTime()}.${getCookie('_fbp')}` })), { clientUserAgent: (_d = (_c = window === null || window === void 0 ? void 0 : window.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : '' })
                 },
                 type: 'beacon'
             });
@@ -838,17 +844,17 @@
         }), [bffFetch]);
         // 获取 Tag
         const bffGetTagList = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _1, _2, _3, _4, _5;
+            var _3, _4, _5, _6, _7;
             if (!utmVal || !isShowTag)
                 return;
             try {
-                const val = (_3 = (_2 = (_1 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _1 === void 0 ? void 0 : _1.filter((val) => {
+                const val = (_5 = (_4 = (_3 = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _3 === void 0 ? void 0 : _3.filter((val) => {
                     var _a, _b;
                     const key = val.split('=')[0];
                     return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
-                })) === null || _2 === void 0 ? void 0 : _2.join('&')) !== null && _3 !== void 0 ? _3 : '';
+                })) === null || _4 === void 0 ? void 0 : _4.join('&')) !== null && _5 !== void 0 ? _5 : '';
                 const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-                setTagList((_5 = (_4 = result === null || result === void 0 ? void 0 : result.data) === null || _4 === void 0 ? void 0 : _4.tags) !== null && _5 !== void 0 ? _5 : []);
+                setTagList((_7 = (_6 = result === null || result === void 0 ? void 0 : result.data) === null || _6 === void 0 ? void 0 : _6.tags) !== null && _7 !== void 0 ? _7 : []);
             }
             catch (e) {
                 console.log('e', e);
@@ -995,7 +1001,8 @@
                 globalConfig,
                 popupCurTimeRef,
                 checkCommodityIndexRef,
-                isEditor
+                isEditor,
+                isNoMoreData
             } }, 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({
             rtcList,
             mutateLike: bffMutateLike,
@@ -1438,14 +1445,14 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-12 10:59:06
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-22 17:43:04
+     * @LastEditTime: 2024-08-28 17:51:37
      * @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
      *
      */
     function useEventReport() {
         const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
         const jumpToWeb = React.useCallback((data, product, cta, position, traceInfo) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
             let fromKName = '';
             if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
                 fromKName = 'pdpPage';
@@ -1463,22 +1470,15 @@
                 fromKName = 'productPage';
             }
             const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = data === null || data === void 0 ? void 0 : data.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = data === null || data === void 0 ? void 0 : data.product) === null || _q === void 0 ? void 0 : _q.tags;
+            let contentFormat = null;
+            if ((_r = data === null || data === void 0 ? void 0 : data.video) === null || _r === void 0 ? void 0 : _r.url) {
+                contentFormat = 'video';
+            }
+            else if (((_s = data === null || data === void 0 ? void 0 : data.video) === null || _s === void 0 ? void 0 : _s.imgUrls) && ((_u = (_t = data === null || data === void 0 ? void 0 : data.video) === null || _t === void 0 ? void 0 : _t.imgUrls) === null || _u === void 0 ? void 0 : _u.length)) {
+                contentFormat = 'image';
+            }
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'jumpToWeb',
-                    eventDescription: 'User jumped to website',
-                    productId: (_r = product === null || product === void 0 ? void 0 : product.itemId) !== null && _r !== void 0 ? _r : '',
-                    productName: (_s = product === null || product === void 0 ? void 0 : product.title) !== null && _s !== void 0 ? _s : '',
-                    price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0',
-                    productCollection: (_t = product === null || product === void 0 ? void 0 : product.collection) !== null && _t !== void 0 ? _t : '',
-                    fromKName,
-                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                    contentTags: contentTags ? JSON.stringify(contentTags) : '',
-                    position: position + '',
-                    contentId: (_v = (_u = data === null || data === void 0 ? void 0 : data.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
-                    ctatId: (_w = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _w !== void 0 ? _w : '',
-                    traceInfo: (_9 = (_6 = (_4 = (_0 = (_x = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _x !== void 0 ? _x : (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProduct) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : (_3 = (_2 = (_1 = data === null || data === void 0 ? void 0 : data.video) === null || _1 === void 0 ? void 0 : _1.bindProducts) === null || _2 === void 0 ? void 0 : _2[0]) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_5 = data === null || data === void 0 ? void 0 : data.product) === null || _5 === void 0 ? void 0 : _5.traceInfo) !== null && _6 !== void 0 ? _6 : (_8 = (_7 = data === null || data === void 0 ? void 0 : data.video) === null || _7 === void 0 ? void 0 : _7.bindCta) === null || _8 === void 0 ? void 0 : _8.traceInfo) !== null && _9 !== void 0 ? _9 : ''
-                }
+                eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', ctatId: (_0 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _0 !== void 0 ? _0 : '', traceInfo: (_13 = (_10 = (_8 = (_4 = (_1 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _1 !== void 0 ? _1 : (_3 = (_2 = data === null || data === void 0 ? void 0 : data.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.traceInfo) !== null && _4 !== void 0 ? _4 : (_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProducts) === null || _6 === void 0 ? void 0 : _6[0]) === null || _7 === void 0 ? void 0 : _7.traceInfo) !== null && _8 !== void 0 ? _8 : (_9 = data === null || data === void 0 ? void 0 : data.product) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = data === null || data === void 0 ? void 0 : data.video) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '' }, (contentFormat && { contentFormat }))
             });
         }, [bffEventReport, popupDetailData, isFromHashtag]);
         const productView = React.useCallback((data, product, cta, viewTime, position) => {
@@ -1533,22 +1533,25 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-06-27 16:22:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-05 14:55:25
+     * @LastEditTime: 2024-08-27 16:59:46
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\Form.tsx
      *
      */
     const Form = ({ layout, columns, onChange }) => {
         return (React.createElement(React.Fragment, null, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => (React.createElement("div", { key: index, className: 'pb-appoint-form-container-item', style: { flexDirection: layout === 'horizontal' ? 'row' : 'column' } },
             layout !== 'inline' && React.createElement("label", { className: 'pb-appoint-form-container-label' }, item === null || item === void 0 ? void 0 : item.title),
-            (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange: onChange })))))))));
+            (item === null || item === void 0 ? void 0 : item.valueType) === 'text' && (React.createElement("input", Object.assign({ className: 'pb-appoint-form-container-input', type: 'text', placeholder: layout === 'inline' ? item === null || item === void 0 ? void 0 : item.title : '请输入', name: item === null || item === void 0 ? void 0 : item.dataIndex }, (onChange && { onChange })))))))));
     };
     var Form$1 = React.memo(Form);
 
     const AppointForm$1 = (_a) => {
+        var _b, _c;
         var { columns, style, title, textStyle, submitBgColor, submitColor, submitText, layoutType = 'inline', isExternalLink, isPopup, onClick, onClose, submitButtonStyle } = _a, props = __rest(_a, ["columns", "style", "title", "textStyle", "submitBgColor", "submitColor", "submitText", "layoutType", "isExternalLink", "isPopup", "onClick", "onClose", "submitButtonStyle"]);
         const { submitForm, popupDetailData } = useSxpDataSource();
         const { jumpToWeb } = useEventReport();
         const [loading, setLoading] = React.useState(false);
+        const [formData, setFormData] = React.useState({});
+        const [marginTop, setMarginTop] = React.useState(0);
         const defaultColumns = React.useMemo(() => [
             {
                 title: '',
@@ -1575,7 +1578,7 @@
                 key: '4'
             }
         ], []);
-        const [formData, setFormData] = React.useState({});
+        const originalHeight = ((_b = document === null || document === void 0 ? void 0 : document.documentElement) === null || _b === void 0 ? void 0 : _b.clientHeight) || ((_c = document === null || document === void 0 ? void 0 : document.body) === null || _c === void 0 ? void 0 : _c.clientHeight);
         const columnsData = React.useMemo(() => {
             return lodash.cloneDeep(columns) || defaultColumns;
         }, [columns, defaultColumns]);
@@ -1584,17 +1587,17 @@
             setFormData(Object.assign(Object.assign({}, formData), { [name]: value }));
         }, [formData]);
         const handleSubmit = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _b, _c, _d, _e, _f;
+            var _d, _e, _f, _g, _h;
             const vals = formData;
             if (!vals)
                 return;
-            const arr = (_c = (_b = Object.keys(vals)) === null || _b === void 0 ? void 0 : _b.map((key) => {
+            const arr = (_e = (_d = Object.keys(vals)) === null || _d === void 0 ? void 0 : _d.map((key) => {
                 var _a;
                 return ({
                     name: key,
                     value: (_a = vals[key]) !== null && _a !== void 0 ? _a : ''
                 });
-            })) === null || _c === void 0 ? void 0 : _c.filter((item) => item === null || item === void 0 ? void 0 : item.value);
+            })) === null || _e === void 0 ? void 0 : _e.filter((item) => item === null || item === void 0 ? void 0 : item.value);
             if (!arr || !(arr === null || arr === void 0 ? void 0 : arr.length))
                 return;
             setLoading(true);
@@ -1603,8 +1606,8 @@
             if (res) {
                 if (isExternalLink) {
                     const data = popupDetailData;
-                    const product = (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.bindProduct;
-                    const cta = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProduct) === null || _f === void 0 ? void 0 : _f.bindCta;
+                    const product = (_f = data === null || data === void 0 ? void 0 : data.video) === null || _f === void 0 ? void 0 : _f.bindProduct;
+                    const cta = (_h = (_g = data === null || data === void 0 ? void 0 : data.video) === null || _g === void 0 ? void 0 : _g.bindProduct) === null || _h === void 0 ? void 0 : _h.bindCta;
                     const position = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index;
                     jumpToWeb(data, product, cta, position);
                 }
@@ -1614,11 +1617,33 @@
                 onClick === null || onClick === void 0 ? void 0 : onClick();
             }
         }), 1000);
+        React.useEffect(() => {
+            const handleScroll = () => {
+                var _a, _b;
+                // 获取用户代理字符串
+                const userAgent = navigator.userAgent;
+                // 判断是否是安卓设备
+                const isAndroid = userAgent.toLowerCase().includes('android');
+                if (!isAndroid)
+                    return;
+                const resizeHeight = ((_a = document === null || document === void 0 ? void 0 : document.documentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || ((_b = document === null || document === void 0 ? void 0 : document.body) === null || _b === void 0 ? void 0 : _b.clientHeight);
+                if (resizeHeight < originalHeight) {
+                    setMarginTop(50);
+                }
+                else {
+                    setMarginTop(0);
+                }
+            };
+            window.addEventListener('resize', handleScroll);
+            return () => {
+                window.removeEventListener('resize', handleScroll);
+            };
+        }, []);
         return (React.createElement("div", { className: 'pb-appoint-form' },
             React.createElement("div", { className: `pb-appoint-form-title ${css.css(Object.assign({}, textStyle))}`, dangerouslySetInnerHTML: {
                     __html: setFontForText(title, textStyle)
                 } }),
-            React.createElement("div", Object.assign({ className: css.css(Object.assign({}, style)) }, props),
+            React.createElement("div", Object.assign({ className: css.css(Object.assign(Object.assign({}, style), { marginTop })) }, props),
                 React.createElement("div", { className: 'pb-appoint-form-container' },
                     React.createElement(Form$1, { columns: columnsData, layout: layoutType, onChange: handleChange }))),
             React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
@@ -2000,6 +2025,37 @@
                     name: ['props', 'iframeBgColor']
                 }
             ]
+        },
+        {
+            title: '轮播指示器',
+            child: [
+                {
+                    label: '背景色',
+                    name: ['props', 'swiper', 'dotsBgColor'],
+                    type: 'Color'
+                },
+                {
+                    label: '选中色',
+                    name: ['props', 'swiper', 'dotsActiveColor'],
+                    type: 'Color'
+                },
+                {
+                    label: '底边距',
+                    name: ['props', 'swiper', 'dotsMarginBottom'],
+                    type: 'Number',
+                    addonAfter: 'px'
+                }
+            ]
+        },
+        {
+            title: '关闭按钮',
+            child: [
+                {
+                    label: '跟随弹窗滚动',
+                    type: 'Switch',
+                    name: ['props', 'enableFixedCloseButton']
+                }
+            ]
         }
     ];
 
@@ -8829,13 +8885,13 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2023-11-02 18:34:34
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-22 18:48:44
+     * @LastEditTime: 2024-08-29 16:40:25
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Modal\index.tsx
      *
      */
     const closeIcon$1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
     const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         const touchRef = React.useRef(null);
         const fTouchRef = React.useRef(null);
         const touchMoveRef = React.useRef(null);
@@ -8847,6 +8903,7 @@
         const modalEleRef = React.useRef(null);
         const { globalConfig, popupDetailData } = useSxpDataSource();
         const { schema: _schema } = useEditor();
+        const [scrollTop, setScrollTop] = React.useState(15);
         React.useEffect(() => {
             const parentNode = document.getElementById('sxp-render');
             const node = document.getElementById('pb-modal');
@@ -8957,12 +9014,17 @@
                     onTouchStart: handleTouchStart,
                     onTouchEnd: handleTouchEnd
                 })),
-                    React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
+                    React.createElement("div", { className: 'modal-icon-wrapper', onClick: onClose, style: { top: scrollTop } },
                         React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon$1, alt: 'close', className: 'modal-icon' })),
-                    React.createElement("div", { ref: ref, style: {
+                    React.createElement("div", Object.assign({ ref: ref, style: {
                             height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
                             overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
-                        } }, children)))))), modalEleRef.current);
+                        } }, (((_v = (_u = getPopupById === null || getPopupById === void 0 ? void 0 : getPopupById.item) === null || _u === void 0 ? void 0 : _u.props) === null || _v === void 0 ? void 0 : _v.enableFixedCloseButton) && {
+                        onScroll: (e) => {
+                            var _a;
+                            setScrollTop(15 - ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.scrollTop));
+                        }
+                    })), children)))))), modalEleRef.current);
     };
     var Modal$1 = React.memo(Modal);
 
@@ -9207,10 +9269,10 @@
                         __html: setFontForText((_c = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _c !== void 0 ? _c : '税费', commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo)
                     } }),
                 React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
-                    React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
-            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
-            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
-            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
+                    React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_d = product === null || product === void 0 ? void 0 : product.info) !== null && _d !== void 0 ? _d : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
+            bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
+            collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
+            necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
             18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
         };
         const renderBtn = () => {
@@ -9259,7 +9321,17 @@
                             clickableClass: getDotsAlign
                         }, loop: true, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                        }, ref: ref },
+                        }, ref: ref, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                            '.swiper-pagination-bullet': {
+                                backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
+                                opacity: 1
+                            }
+                        })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
+                            '.swipe-item-active-bullet': {
+                                backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
+                                opacity: 1
+                            }
+                        }))) },
                         React.createElement(React.Fragment, null, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
                             var _a;
                             return (React.createElement(SwiperSlide, { key: src },
@@ -9648,7 +9720,7 @@
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-23 10:58:38
+     * @LastEditTime: 2024-08-29 16:45:54
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
@@ -9963,6 +10035,37 @@
                     name: ['props', 'iframeBgColor']
                 }
             ]
+        },
+        {
+            title: '轮播指示器',
+            child: [
+                {
+                    label: '背景色',
+                    name: ['props', 'swiper', 'dotsBgColor'],
+                    type: 'Color'
+                },
+                {
+                    label: '选中色',
+                    name: ['props', 'swiper', 'dotsActiveColor'],
+                    type: 'Color'
+                },
+                {
+                    label: '底边距',
+                    name: ['props', 'swiper', 'dotsMarginBottom'],
+                    type: 'Number',
+                    addonAfter: 'px'
+                }
+            ]
+        },
+        {
+            title: '关闭按钮',
+            child: [
+                {
+                    label: '跟随弹窗滚动',
+                    type: 'Switch',
+                    name: ['props', 'enableFixedCloseButton']
+                }
+            ]
         }
     ];
 
@@ -10087,7 +10190,7 @@
         const productInfoText = ({ isPost }) => {
             return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
                 React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
-                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
+                        `Unveiled at the Spring-Summer 2023 fashion show, the Dior Toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with Macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the D of the CD Lock closure twists to adjust the sides and enhance the bag's silhouette. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
 Made in Italy` })));
         };
         const getStyle = React.useCallback((style) => {
@@ -10125,11 +10228,21 @@ Made in Italy` })));
                 React.createElement("div", { style: { position: 'relative' } },
                     product && ((_w = product === null || product === void 0 ? void 0 : product.homePage) === null || _w === void 0 ? void 0 : _w.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
                             clickable: true,
-                            bulletActiveClass: 'commondityDiroNew-swipe-item-active-bullet',
+                            bulletActiveClass: 'swipe-item-active-bullet',
                             clickableClass: getDotsAlign
                         }, loop: true, autoplay: {
                             delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                        }, ref: ref }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
+                        }, ref: ref, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom) && { bottom: swiper === null || swiper === void 0 ? void 0 : swiper.dotsMarginBottom })), { fontSize: '14px' }) }, ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor) && {
+                            '.swiper-pagination-bullet': {
+                                backgroundColor: swiper === null || swiper === void 0 ? void 0 : swiper.dotsBgColor,
+                                opacity: 1
+                            }
+                        })), ((swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor) && {
+                            '.swipe-item-active-bullet': {
+                                backgroundColor: `${swiper === null || swiper === void 0 ? void 0 : swiper.dotsActiveColor}!important`,
+                                opacity: 1
+                            }
+                        }))) }, (_x = product === null || product === void 0 ? void 0 : product.homePage) === null || _x === void 0 ? void 0 : _x.map((src) => {
                         var _a;
                         return (React.createElement(SwiperSlide, { key: src },
                             React.createElement("div", { style: {
@@ -10187,7 +10300,8 @@ Made in Italy` })));
                                 __html: setFontForText((_3 = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _3 !== void 0 ? _3 : 'Shop now', buttonStyle)
                             } }))),
                     productInfoText({ isPost }))),
-            React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false })),
+            React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
+                React.createElement("div", { style: { paddingTop: '20px' } }, productInfoText({ isPost: false }))),
             React.createElement(Modal$1, { visible: show3DModal, padding: 0, isFullScreen: true, onClose: () => setShow3DModal(false) },
                 React.createElement("div", { style: { backgroundColor: iframeBgColor, height: '100%' } },
                     React.createElement("iframe", { src: iframeUrl, style: {
@@ -15737,11 +15851,11 @@ Made in Italy` })));
      * @Author: lewinlu@chatlabs.com
      * @Date: 2024-01-03 14:39:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-07-02 18:25:17
+     * @LastEditTime: 2024-08-29 18:03:12
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
      */
     const PictureGroup$2 = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent, imgUrlsPostConfig }) => {
-        var _a, _b;
+        var _a;
         const ref = React.useRef();
         const { isActive } = useSwiperSlide();
         const { sxpParameter, openHashtag } = useSxpDataSource();
@@ -15771,11 +15885,17 @@ Made in Italy` })));
         return (React.createElement(Swiper, { ref: ref, defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
                 clickable: true,
                 bulletActiveClass: 'swipe-item-active-bullet'
-            }, className: css.css(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && {
-                '.swiper-pagination': {
-                    bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0
+            }, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': Object.assign(Object.assign({}, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) && { bottom: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom })), { fontSize: '14px' }) }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
+                '.swiper-pagination-bullet': {
+                    backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor,
+                    opacity: 1
                 }
-            }))), height: height, loop: true, autoplay: { delay: ((_b = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _b !== void 0 ? _b : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
+            })), ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor) && {
+                '.swipe-item-active-bullet': {
+                    backgroundColor: `${imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsActiveColor}!important`,
+                    opacity: 1
+                }
+            }))), height: height, loop: true, autoplay: { delay: ((_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.delay) !== null && _a !== void 0 ? _a : 3) * 1000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url, index) => {
             return (React.createElement(SwiperSlide, { key: index },
                 React.createElement(Picture, { src: !isLoad && index > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
         })));
@@ -16029,12 +16149,12 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-08-23 14:04:14
+     * @LastEditTime: 2024-08-29 11:23:41
      * @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;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         const { schema } = useEditor();
@@ -16046,7 +16166,8 @@ Made in Italy` })));
         const [isShowMore, setIsShowMore] = React.useState(false);
         const [isReload, setIsReload] = React.useState(new Date().getTime());
         const skipLinkRef = React.useRef(false);
-        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList } = useSxpDataSource();
+        const [pageNum, setPageNum] = React.useState(2);
+        const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData } = useSxpDataSource();
         const { backMainFeed, productView, jumpToWeb } = useEventReport();
         const isShowFingerTip = React.useMemo(() => {
             return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -16205,8 +16326,8 @@ Made in Italy` })));
                         return null;
                     }
                 });
-            return !waterFallData ? list.concat([{ loading: true }]) : list;
-        }, [data, activeIndex, waterFallData, isEditor]);
+            return !waterFallData && !isNoMoreData ? list.concat([{ loading: true }]) : list;
+        }, [data, activeIndex, waterFallData, isEditor, isNoMoreData]);
         const renderLogo = React.useMemo(() => {
             var _a, _b, _c, _d;
             if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -16495,8 +16616,8 @@ Made in Italy` })));
             isReload,
             renderToggleButton
         ]);
-        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' }, textStyle: Object.assign(Object.assign({}, (_e = (_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === 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.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagTitle), { color: '#fff' }), onClose: () => {
+        return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container', style: { textUnderlineOffset: `${(_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.textUnderlineOffset) !== null && _a !== void 0 ? _a : 0}px` } },
+            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, textStyle: Object.assign(Object.assign({}, (_f = (_e = (_d = (_c = (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.item) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.textStyles) === null || _f === void 0 ? void 0 : _f.hashTagTitle), { color: '#fff' }), onClose: () => {
                     const isEq = lodash.isEqual(rtcList, cacheRtcList);
                     if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
                         setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
@@ -16507,7 +16628,7 @@ Made in Italy` })));
             React.createElement(Tagbar$1, { tagList: tagList, setActiveIndex: setActiveIndex, style: {
                     top: minusHeight
                 } }),
-            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _f !== void 0 ? _f : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
+            isShowFingerTip ? (React.createElement(FingerSwipeTip, { imageUrl: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipIcon, style: { top: `${50 - ((_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swipeTipOffset) !== null && _g !== void 0 ? _g : 0)}%` }, duration: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.swiperTipAniDur })) : null,
             React.createElement(Swiper, { style: {
                     marginTop: tagHeight
                 }, ref: swiperRef, onSlideChange: () => {
@@ -16526,8 +16647,12 @@ Made in Italy` })));
                     if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (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(() => {
+                            loadVideos === null || loadVideos === void 0 ? void 0 : loadVideos(pageNum).then((res) => {
+                                var _a;
                                 setIsLoadMore(false);
+                                if (res && ((_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                                    setPageNum((pageNum + 1));
+                                }
                             });
                         }
                     }
@@ -16535,7 +16660,7 @@ Made in Italy` })));
                 renderLikeButton(visList[activeIndex], activeIndex, !!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconFixed)),
                 renderToggleButton(!!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
                 renderView),
-            React.createElement(WaterFall$1, Object.assign({}, (_j = (_h = (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.item) === null || _j === void 0 ? void 0 : _j.props))));
+            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))));
     };
 
     const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {