pb-sxp-ui 1.3.0 → 1.3.1

package/es/core/components/SxpPageRender/Modal/index.js

@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 import { useEditor, useSxpDataSource } from '../../../../core/hooks';
 const closeIcon = '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, _w;
     const touchRef = useRef(null);
     const fTouchRef = useRef(null);
     const touchMoveRef = useRef(null);
@@ -126,7 +126,8 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
                 React.createElement("div", { onClick: onClose, className: 'modal-icon-wrapper' },
                     React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: 'modal-icon' })),
                 React.createElement("div", { ref: ref, style: {
-                        height: isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H,
+                        height: (isScrollFullScreen ? fullHeight : MODAL_DEF_CON_H) -
+                            ((_w = (_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.popupBg) === null || _w === void 0 ? void 0 : _w.bottomMargin),
                         overflow: (isScrollFullScreen && modalTrans <= 0) || !isScrollFullScreen ? 'auto' : 'hidden'
                     } }, children)))))), modalEleRef.current);
 };

package/es/core/components/SxpPageRender/WaterFall/List.js

@@ -6,9 +6,10 @@ import previewData from './preview.json';
 import { useSxpDataSource } from '../../../../core/hooks';
 import { css } from '@emotion/css';
 import { setFontForText } from '../../../../core/utils/tool';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
 const WaterfallFlowItem = (props) => {
     const { rec, index, list, reportTagsView, textStyles, space } = props;
-    const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+    const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
     const [showVideo, setShowVideo] = useState(false);
     const imgDom = useRef(null);
     const ref = useRef(null);
@@ -121,7 +122,8 @@ const WaterfallFlowItem = (props) => {
 export default function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+    const { jumpToWeb } = useEventReport();
     const [list, setList] = useState();
     const [data, setData] = useState();
     const [isLoadingData, setIsLoadingData] = useState(false);
@@ -157,10 +159,12 @@ export default function WaterfallList(_a) {
         }
     }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
     const handleClickLink = () => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
             reportTagsView();
-            window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+            const rec = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec;
+            jumpToWeb(rec, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProduct, (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta, cacheActiveIndex, (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo);
+            window.location.href = window.getJointUtmLink((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link);
         }
     };
     return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },

package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js

@@ -6,6 +6,7 @@ import previewData from './preview.json';
 import FormatImage from '../FormatImage';
 import { css } from '@emotion/css';
 import { setFontForText } from '../../../../core/utils/tool';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
 const WaterfallFlowItem = (props) => {
     const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
     const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
@@ -113,7 +114,8 @@ const WaterfallFlowItem = (props) => {
 export default function WaterfallList(_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag, cacheActiveIndex } = useSxpDataSource();
+    const { jumpToWeb } = useEventReport();
     const scrollParent = useRef(null);
     const [scrollTop, setScrollTop] = useState(0);
     const [data, setData] = useState();
@@ -265,10 +267,12 @@ export default function WaterfallList(_a) {
         };
     }, [onScroll, scrollParent]);
     const handleClickLink = () => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e;
         if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
             reportTagsView();
-            window.location.href = window.getJointUtmLink((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link);
+            const rec = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.rec;
+            jumpToWeb(rec, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProduct, (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindCta, cacheActiveIndex, (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo);
+            window.location.href = window.getJointUtmLink((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link);
         }
     };
     return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },

package/es/core/components/SxpPageRender/index.js

@@ -20,7 +20,7 @@ import './index.less';
 import { useEventReport } from '../../../core/hooks/useEventReport';
 import withBindDataSource from '../../../core/hoc/withBindDataSource';
 import Tagbar from './Tagbar';
-import { getFeUserId, getSlideSkipState, setSlideSkipState } from '../../../core/utils/localStore';
+import { getFeUserId, getSlideSkipState } from '../../../core/utils/localStore';
 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;
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
@@ -35,8 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const [isReload, setIsReload] = useState(new Date().getTime());
     const skipLinkRef = useRef(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = useSxpDataSource();
-    const { backMainFeed } = useEventReport();
-    const { productView } = useEventReport();
+    const { backMainFeed, productView, jumpToWeb } = useEventReport();
     const isShowFingerTip = useMemo(() => {
         return data.length > 0 && !loading && (getFeUserId() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
     }, [data, loading, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip]);
@@ -176,15 +175,39 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const height = useMemo(() => {
         return containerHeight - minusHeight - tagHeight;
     }, [globalConfig, containerHeight, tagHeight]);
+    const visList = useMemo(() => {
+        var _a;
+        const list = activeIndex === 0 && !waterFallData
+            ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
+            : data === null || data === void 0 ? void 0 : data.map((item, index) => {
+                if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
+                    return item;
+                }
+                else {
+                    return null;
+                }
+            });
+        return !waterFallData ? list.concat([{ loading: true }]) : list;
+    }, [data, activeIndex, waterFallData]);
     const renderLogo = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
             const link = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoBar) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.value;
-            return (React.createElement("div", Object.assign({ className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } }, (link && { onClick: () => new Function(link)() })),
+            const isExternalLink = ((_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoBar) === null || _c === void 0 ? void 0 : _c.onClick) === null || _d === void 0 ? void 0 : _d.linkType) === 'externalLink';
+            const rec = visList[activeIndex];
+            return (React.createElement("div", Object.assign({ className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } }, (link && {
+                onClick: () => {
+                    var _a, _b, _c, _d;
+                    if (isExternalLink) {
+                        jumpToWeb(rec, (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct, (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindCta, activeIndex, ((_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.traceInfo) || ((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.traceInfo));
+                    }
+                    new Function(link)();
+                }
+            })),
                 React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
         }
         return null;
-    }, [globalConfig]);
+    }, [globalConfig, activeIndex, visList]);
     const renderContent = useCallback((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
@@ -321,7 +344,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         traceInfo: (_u = (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : (_t = item === null || item === void 0 ? void 0 : item.product) === null || _t === void 0 ? void 0 : _t.traceInfo) !== null && _u !== void 0 ? _u : ''
                     }
                 });
-                setSlideSkipState();
                 skipLinkRef.current = true;
                 window.location.href = window.getJointUtmLink(link);
             }
@@ -403,20 +425,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
             });
         }
     };
-    const visList = useMemo(() => {
-        var _a;
-        const list = activeIndex === 0 && !waterFallData
-            ? [(_a = data === null || data === void 0 ? void 0 : data[0]) !== null && _a !== void 0 ? _a : null]
-            : data === null || data === void 0 ? void 0 : data.map((item, index) => {
-                if (activeIndex === index || index - 1 === activeIndex || index + 1 === activeIndex) {
-                    return item;
-                }
-                else {
-                    return null;
-                }
-            });
-        return !waterFallData ? list.concat([{ loading: true }]) : list;
-    }, [data, activeIndex, waterFallData]);
     const renderToggleButton = useCallback((visible) => {
         var _a, _b, _c, _d, _e, _f;
         if (!visible)

package/es/core/context/EditorContext.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useStat
 import { cloneDeep } from 'lodash';
 import DataSourceProvider from './DataSourceProvider';
 import { uuid } from '../../core/utils/tool';
+import { setSlideSkipState } from '../utils/localStore';
 const item = {
     id: uuid(6, 10),
     item: {
@@ -75,6 +76,7 @@ const EditorCore = forwardRef(({ children, resolver, isSsr, schema, enableDataSo
         });
     typeof window !== 'undefined' &&
         (window.getJointUtmLink = (url) => {
+            setSlideSkipState();
             if ((url === null || url === void 0 ? void 0 : url.indexOf('?')) !== -1) {
                 return url + (utmVal ? '&' + utmVal : '');
             }

package/es/core/context/SxpDataSourceProvider.js

@@ -93,7 +93,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .catch((err) => Promise.reject(err));
     }, [bffDataSource]);
     const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e, _f, _g, _h;
+        var _d, _e, _f, _g, _h, _j, _k;
         query = 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}]` }));
         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) => {
@@ -104,7 +104,30 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
         }
         if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) || isEditor) {
-            query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.join('&') }));
+            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] }));
+            if (!(query === null || query === void 0 ? void 0 : query.channel))
+                return;
+            let list = [];
+            let result = null;
+            let pageNum = 1;
+            const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
+                var _l, _m, _o, _p;
+                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;
+                }
+                const rec = (_m = (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.recList) === null || _m === void 0 ? void 0 : _m[0];
+                list = list.concat((_p = (_o = result === null || result === void 0 ? void 0 : result.data) === null || _o === void 0 ? void 0 : _o.recList) !== null && _p !== void 0 ? _p : []);
+                if ((rec === null || rec === void 0 ? void 0 : rec.product) || (rec === null || rec === void 0 ? void 0 : rec.video)) {
+                    pageNum = pageNum + 1;
+                    yield recurveRecList(query);
+                }
+            });
+            yield recurveRecList(query);
+            if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
+                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 });
         }
         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)) {
@@ -115,12 +138,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return result === null || result === void 0 ? void 0 : result.data;
     }), [bffFetch, utmVal, maxSize, defaultSize, globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview, channelQueryList, isEditor]);
     const loadVideos = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _j, _k, _l, _m;
+        var _q, _r, _s, _t;
         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({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_j = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _j === void 0 ? void 0 : _j.itemId) && { productFilter: (_k = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _k === void 0 ? void 0 : _k.itemId })), (((_l = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _l === void 0 ? void 0 : _l.itemId) && { contentFilter: (_m = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _m === void 0 ? void 0 : _m.itemId })), { themeTag: themeTag.current }));
+        const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_q = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _q === void 0 ? void 0 : _q.itemId) && { productFilter: (_r = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _r === void 0 ? void 0 : _r.itemId })), (((_s = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _s === void 0 ? void 0 : _s.itemId) && { contentFilter: (_t = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _t === void 0 ? void 0 : _t.itemId })), { themeTag: themeTag.current }));
         setRtcList(rtcList.concat(getFilterRecList(data)));
         setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
@@ -183,17 +206,17 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         return res === null || res === void 0 ? void 0 : res.success;
     }), [bffFetch]);
     const bffGetTagList = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        var _o, _p, _q, _r, _s;
+        var _u, _v, _w, _x, _y;
         if (!utmVal || !isShowTag)
             return;
         try {
-            const val = (_q = (_p = (_o = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _o === void 0 ? void 0 : _o.filter((val) => {
+            const val = (_w = (_v = (_u = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _u === void 0 ? void 0 : _u.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 || _p === void 0 ? void 0 : _p.join('&')) !== null && _q !== void 0 ? _q : '';
+            })) === null || _v === void 0 ? void 0 : _v.join('&')) !== null && _w !== void 0 ? _w : '';
             const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
-            setTagList((_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []);
+            setTagList((_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.tags) !== null && _y !== void 0 ? _y : []);
         }
         catch (e) {
             console.log('e', e);
@@ -270,7 +293,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         });
     }, [isShowConsent]);
     useEffect(() => {
-        if (!isInit.current)
+        if (!isInit.current && !isEditor)
             return;
         setLoading(true);
         bffGetTagList();
@@ -282,7 +305,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             .finally(() => {
             setLoading(false);
         });
-    }, [getRecommendVideos, bffGetTagList]);
+    }, [bffGetTagList, isEditor, getRecommendVideos]);
     const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
     return (React.createElement(SxpDataSourceContext.Provider, { value: {
             rtcList,

package/es/core/hooks/useEventReport.d.ts

@@ -1,6 +1,6 @@
 import { RecItemType } from '../components/SxpPageRender/typing';
 export declare function useEventReport(): {
-    jumpToWeb: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], position?: number) => void;
+    jumpToWeb: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], position?: number, traceInfo?: string) => void;
     productView: (data?: RecItemType, product?: RecItemType['product'], cta?: RecItemType['cta'], viewTime?: any, position?: number) => void;
     backMainFeed: (lastFeed: 'theme' | 'branch' | 'external', selectTag?: string, themeTag?: string, hashTag?: string) => void;
 };

package/es/core/hooks/useEventReport.js

@@ -3,7 +3,7 @@ import { useSxpDataSource } from './useSxpDataSource';
 import { DEFAULT_TAG } from '../context/SxpDataSourceProvider';
 export function useEventReport() {
     const { bffEventReport, popupDetailData, waterFallData, isFromHashtag } = useSxpDataSource();
-    const jumpToWeb = useCallback((data, product, cta, position) => {
+    const jumpToWeb = 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;
         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))) {
@@ -36,7 +36,7 @@ export function useEventReport() {
                 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 = 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 : ''
+                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 : ''
             }
         });
     }, [bffEventReport, popupDetailData, isFromHashtag]);

package/es/materials/sxp/HashTag/settingRender.d.ts

@@ -1,11 +1,4 @@
 declare const _default: ({
-    title: string;
-    child: {
-        type: string;
-        label: string;
-        name: string[];
-    }[];
-} | {
     title: string;
     child: ({
         type: string;
@@ -126,6 +119,12 @@ declare const _default: ({
         })[];
         name?: undefined;
         initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        initialValue?: undefined;
+        child?: undefined;
     })[];
 })[];
 export default _default;

package/es/materials/sxp/HashTag/settingRender.js

@@ -99,6 +99,10 @@ export default [
                     {
                         label: '标题对齐',
                         type: 'TextAlign'
+                    },
+                    {
+                        label: '间距',
+                        type: 'TextSpace'
                     }
                 ]
             }
@@ -184,6 +188,11 @@ export default [
             {
                 type: 'TextAlign',
                 name: ['props', 'buttonStyle']
+            },
+            {
+                label: '间距',
+                type: 'TextSpace',
+                name: ['props', 'buttonStyle']
             }
         ]
     },

package/es/materials/sxp/cta/AniLink/settingRender.d.ts

@@ -68,6 +68,11 @@ declare const _default: ({
         type: string;
         name: string[];
         child?: undefined;
+    } | {
+        type: string;
+        name: string[];
+        label?: undefined;
+        child?: undefined;
     })[];
 })[];
 export default _default;

package/es/materials/sxp/cta/AniLink/settingRender.js

@@ -97,6 +97,10 @@ export default [
                 label: '对齐',
                 type: 'TextAlign',
                 name: ['props', 'ctaTempStyles', 'ctaTitle']
+            },
+            {
+                type: 'TextSpace',
+                name: ['props', 'ctaTempStyles', 'ctaTitle']
             }
         ]
     }

package/es/materials/sxp/popup/AppointForm/settingRender.d.ts

@@ -64,13 +64,16 @@ declare const _default: ({
         })[];
         name?: undefined;
         options?: undefined;
-    } | {
+    })[];
+    type?: undefined;
+    label?: undefined;
+    name?: undefined;
+} | {
+    title: string;
+    child: {
         type: string;
         name: string[];
-        label?: undefined;
-        child?: undefined;
-        options?: undefined;
-    })[];
+    }[];
     type?: undefined;
     label?: undefined;
     name?: undefined;

package/es/materials/sxp/popup/AppointForm/settingRender.js

@@ -68,6 +68,11 @@ export default [
                 type: 'TextAlign',
                 name: ['textStyle']
             },
+            {
+                label: '标题间距',
+                type: 'TextSpace',
+                name: ['textStyle']
+            },
             {
                 label: '表单布局',
                 type: 'Radius',
@@ -126,10 +131,12 @@ export default [
                 ]
             },
             {
+                label: '提交按钮文本样式',
                 type: 'TextStyle',
                 name: ['props', 'submitButtonStyle']
             },
             {
+                label: '提交按钮对齐',
                 type: 'TextAlign',
                 name: ['props', 'submitButtonStyle']
             },
@@ -137,6 +144,11 @@ export default [
                 label: '提交按钮颜色',
                 type: 'Color',
                 name: ['props', 'submitBgColor']
+            },
+            {
+                label: '提交按钮间距',
+                type: 'TextSpace',
+                name: ['props', 'submitButtonStyle']
             }
         ]
     },

package/es/materials/sxp/popup/CommodityDetail/index.d.ts

@@ -25,7 +25,9 @@ export interface ICommodityDetailProps {
     commodityStyles?: {
         title: CSSProperties;
         collection: CSSProperties;
-        price: CSSProperties;
+        price: CSSProperties & {
+            enableFormattedPrice?: boolean;
+        };
         info: CSSProperties;
         taxInfo: CSSProperties;
     };

package/es/materials/sxp/popup/CommodityDetail/index.js

@@ -12,7 +12,7 @@ import FormatImage from '../../../../core/components/SxpPageRender/FormatImage';
 import { setFontForText } from '../../../../core/utils/tool';
 import CommodityGroup from '../../template/components/CommodityGroup';
 const CommodityDetail = (_a) => {
-    var _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;
+    var _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;
     var { content, style, bgImg, onClick, schema, isDefault, bottom_image, tipText, isPost, viewTime, rec, swiper, commodityStyles, buttonStyle, index, commodityGroup, popupBg, iframeIcon, commodityImgRatio } = _a, props = __rest(_a, ["content", "style", "bgImg", "onClick", "schema", "isDefault", "bottom_image", "tipText", "isPost", "viewTime", "rec", "swiper", "commodityStyles", "buttonStyle", "index", "commodityGroup", "popupBg", "iframeIcon", "commodityImgRatio"]);
     const { sxpParameter, popupDetailData, isPreview, bffFbReport, popupCurTimeRef, checkCommodityIndexRef } = useSxpDataSource();
     const { jumpToWeb, productView } = useEventReport();
@@ -20,6 +20,7 @@ const CommodityDetail = (_a) => {
     const [showModal, setShowModal] = useState(false);
     const [show3DModal, setShow3DModal] = useState(false);
     const [checkCommodityIndex, setCheckCommodityIndex] = useState((_b = popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.multiCheckIndex) !== null && _b !== void 0 ? _b : 0);
+    const ref = useRef();
     const data = isPost ? rec : popupDetailData;
     let product = isPost ? data === null || data === void 0 ? void 0 : data.product : (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) !== null && _d !== void 0 ? _d : (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.bindProducts) === null || _f === void 0 ? void 0 : _f[0];
     let cta = isPost
@@ -59,17 +60,20 @@ const CommodityDetail = (_a) => {
         };
     }, []);
     const priceText = useMemo(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
+        const isToLocStr = ((_a = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _a === void 0 ? void 0 : _a.enableFormattedPrice) === undefined || ((_b = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _b === void 0 ? void 0 : _b.enableFormattedPrice);
         if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
-            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _e !== void 0 ? _e : ''}`;
+            return `${(_e = (_d = (_c = product === null || product === void 0 ? void 0 : product.currency) === null || _c === void 0 ? void 0 : _c.split('-')[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase()) !== null && _e !== void 0 ? _e : ''}${isToLocStr
+                ? (_g = (_f = product === null || product === void 0 ? void 0 : product.price) === null || _f === void 0 ? void 0 : _f.toLocaleString('zh', {
+                    minimumFractionDigits: 0
+                })) !== null && _g !== void 0 ? _g : ''
+                : product === null || product === void 0 ? void 0 : product.price}`;
         }
         else {
             return '$7,000';
         }
-    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
-    const width = (isPreview ? 375 : (_t = style === null || style === void 0 ? void 0 : style.width) !== null && _t !== void 0 ? _t : window.innerWidth) - ((_u = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _u !== void 0 ? _u : 0) * 2;
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency, (_t = commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) === null || _t === void 0 ? void 0 : _t.enableFormattedPrice]);
+    const width = (isPreview ? 375 : (_u = style === null || style === void 0 ? void 0 : style.width) !== null && _u !== void 0 ? _u : window.innerWidth) - ((_v = popupBg === null || popupBg === void 0 ? void 0 : popupBg.horizontalMargin) !== null && _v !== void 0 ? _v : 0) * 2;
     const height = commodityImgRatio ? width * (commodityImgRatio.h / commodityImgRatio.w) : width;
     const renderContent = ({ isPost }) => {
         var _a, _b, _c, _d;
@@ -110,6 +114,10 @@ const CommodityDetail = (_a) => {
         popupCurTimeRef.current = new Date();
         setCheckCommodityIndex(index);
         checkCommodityIndexRef.current = index;
+        if (ref === null || ref === void 0 ? void 0 : ref.current) {
+            ref.current.swiper.slideTo(0);
+            ref.current.swiper.autoplay.start();
+        }
     }, []);
     const renderCommodityGroup = useCallback(() => {
         var _a, _b, _c;
@@ -125,18 +133,18 @@ const CommodityDetail = (_a) => {
         };
         return dotsAlignClass === null || dotsAlignClass === void 0 ? void 0 : dotsAlignClass[swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign];
     }, [swiper === null || swiper === void 0 ? void 0 : swiper.dotsAlign]);
-    const iframeUrl = ((_w = (_v = data === null || data === void 0 ? void 0 : data.video) === null || _v === void 0 ? void 0 : _v.bindProduct) === null || _w === void 0 ? void 0 : _w.remark) || ((_z = (_y = (_x = data === null || data === void 0 ? void 0 : data.video) === null || _x === void 0 ? void 0 : _x.bindProducts) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.remark) || ((_0 = data === null || data === void 0 ? void 0 : data.product) === null || _0 === void 0 ? void 0 : _0.remark);
+    const iframeUrl = ((_x = (_w = data === null || data === void 0 ? void 0 : data.video) === null || _w === void 0 ? void 0 : _w.bindProduct) === null || _x === void 0 ? void 0 : _x.remark) || ((_0 = (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.bindProducts) === null || _z === void 0 ? void 0 : _z[0]) === null || _0 === void 0 ? void 0 : _0.remark) || ((_1 = data === null || data === void 0 ? void 0 : data.product) === null || _1 === void 0 ? void 0 : _1.remark);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({ className: css(Object.assign({}, style)) }, props),
             React.createElement("div", { style: { position: 'relative' } },
-                product && ((_1 = product === null || product === void 0 ? void 0 : product.homePage) === null || _1 === void 0 ? void 0 : _1.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
+                product && ((_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.length) > 0 && (React.createElement(Swiper, { height: height, modules: [Pagination, Autoplay], pagination: {
                         clickable: true,
                         bulletActiveClass: 'swipe-item-active-bullet',
                         clickableClass: getDotsAlign
                     }, loop: true, autoplay: {
                         delay: (swiper === null || swiper === void 0 ? void 0 : swiper.delay) * 1000
-                    } },
-                    React.createElement(React.Fragment, null, (_2 = product === null || product === void 0 ? void 0 : product.homePage) === null || _2 === void 0 ? void 0 : _2.map((src) => {
+                    }, ref: ref },
+                    React.createElement(React.Fragment, null, (_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.map((src) => {
                         var _a;
                         return (React.createElement(SwiperSlide, { key: src },
                             React.createElement("div", { style: {
@@ -152,7 +160,7 @@ const CommodityDetail = (_a) => {
                                         objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? (swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                                     }, src: (_a = src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _a !== void 0 ? _a : bottom_image }))));
                     })))),
-                !((_3 = product === null || product === void 0 ? void 0 : product.homePage) === null || _3 === void 0 ? void 0 : _3.length) && (React.createElement("div", { className: css({
+                !((_4 = product === null || product === void 0 ? void 0 : product.homePage) === null || _4 === void 0 ? void 0 : _4.length) && (React.createElement("div", { className: css({
                         height,
                         width
                     }) },
@@ -160,7 +168,7 @@ const CommodityDetail = (_a) => {
                             objectFit: 'cover',
                             width: '100%',
                             height: '100%'
-                        }), src: (_4 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _4 !== void 0 ? _4 : bottom_image, alt: 'pdp image' }))),
+                        }), src: (_5 = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _5 !== void 0 ? _5 : bottom_image, alt: 'pdp image' }))),
                 (iframeUrl && iframeIcon) ||
                     (!product && iframeIcon && (React.createElement("div", { style: {
                             padding: '5px 10px',

package/es/materials/sxp/popup/CommodityDetail/settingRender.d.ts

@@ -147,6 +147,13 @@ declare const _default: ({
             options?: undefined;
             initialValue?: undefined;
             child?: undefined;
+        } | {
+            label: string;
+            type: string;
+            name: string[];
+            initialValue: boolean;
+            options?: undefined;
+            child?: undefined;
         })[];
     }[];
 } | {
@@ -205,6 +212,12 @@ declare const _default: ({
         })[];
         name?: undefined;
         initialValue?: undefined;
+    } | {
+        label: string;
+        type: string;
+        name: string[];
+        initialValue?: undefined;
+        child?: undefined;
     })[];
 } | {
     title: string;