pb-sxp-ui 1.0.71 → 1.0.73

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

@@ -79,23 +79,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     };
     const firstRef = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
-        if (!firstRef.current && !videoRef) {
+        var _a, _b, _c;
+        if (!firstRef.current && !videoRef && (playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
             firstRef.current = true;
             const player = TCPlayer('player-container-id', {
                 licenseUrl,
                 controls: false,
-                autoplay: false,
                 loop: false,
+                autoplay: true,
                 muted: true,
                 preload: 'auto',
                 posterImage: false,
-                bigPlayButton: true
+                bigPlayButton: true,
+                sources: [
+                    {
+                        src: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''
+                    }
+                ]
             });
             player === null || player === void 0 ? void 0 : player.ready(() => {
                 setVideoRef(player);
             });
         }
-    }, [videoRef, licenseUrl]);
+    }, [videoRef, licenseUrl, data]);
     (0, react_1.useEffect)(() => {
         if (!isInit)
             handleH5EnterLink();
@@ -128,7 +134,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
                     fromKName = 'pdpPage';
                 }
-                else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
+                else if (popupDetailData && (tempMap === null || tempMap === void 0 ? void 0 : tempMap[(_f = (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : ''].item.type) === 'Appoint') {
                     fromKName = 'formPage';
                 }
                 else if (isFromHashtag) {
@@ -153,7 +159,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                         position: activeIndex + '',
                         fromKName,
                         fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                        ctatId: (_q = (_p = (_o = item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
+                        ctatId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.bindCta) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : ''
                     }
                 });
             }
@@ -190,11 +196,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [globalConfig]);
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
-        if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
             return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef }));
         }
-        if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-            return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+        if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
+            return (react_1.default.createElement(PictureGroup_1.default, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
         }
         if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
             return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
@@ -235,16 +241,16 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [isShowMore]);
     const renderBottom = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d, _e, _f, _g;
-        if (rec.video) {
+        if (rec === null || rec === void 0 ? void 0 : rec.video) {
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
                 react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
                     react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
                     (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
                         react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
-                        react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
+                        react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
+                        react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
         }
         return null;
     }, [
@@ -268,7 +274,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
         if (waterFallData && top < 40) {
             top += 40;
         }
-        if (rec.video) {
+        if (rec === null || rec === void 0 ? void 0 : rec.video) {
             return (react_1.default.createElement(LikeButton_1.default, { key: rec.position, activeIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon, unActicveIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
                     [(_b = globalConfig.likeIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig.likeIconX) !== null && _c !== void 0 ? _c : 0,
                     [(_d = globalConfig.likeIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top
@@ -278,21 +284,21 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     }, [globalConfig, waterFallData]);
     const handleReportViewImageEnd = (item) => {
         var _a, _b, _c, _d, _e, _f;
-        if (!((_a = item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
+        if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
             const endTime = Date.now();
             const duration = (endTime - viewImageStartTime.current) / 1000;
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'viewImageCarouselEnd',
                     eventDescription: 'User end view the image carousel',
-                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                    contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                    contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
                     imageEndTime: `${endTime}`,
                     playDuration: `${duration}`,
-                    contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                    contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
                     position: activeIndex + '',
                     contentFormat: 'image',
-                    traceInfo: item.video.traceInfo
+                    traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
                 }
             });
         }
@@ -308,8 +314,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'scrollDown',
                     eventDescription: 'User scroll down',
-                    contentId: (_b = (_a = item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
-                    productId: (_d = (_c = item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentId: (_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.itemId) !== null && _b !== void 0 ? _b : '',
+                    productId: (_d = (_c = item === null || item === void 0 ? void 0 : item.product) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
                     requestId: null
                 }
             });
@@ -320,7 +326,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'scrollUp',
                     eventDescription: 'User scroll up',
-                    contentId: (_f = (_e = item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                    contentId: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
                     productId: (_h = (_g = item.product) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
                     requestId: null
                 }
@@ -356,13 +362,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 eventInfo: {
                     eventSubject: 'viewImageCarouselStart',
                     eventDescription: 'User start view the image carousel',
-                    contentId: (_d = (_c = item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
-                    contentName: (_e = item.video.title) !== null && _e !== void 0 ? _e : '',
+                    contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
+                    contentName: (_e = item === null || item === void 0 ? void 0 : item.video.title) !== null && _e !== void 0 ? _e : '',
                     imageStartTime: `${startTime}`,
-                    contentTags: JSON.stringify((_f = item.video.tags) !== null && _f !== void 0 ? _f : []),
+                    contentTags: JSON.stringify((_f = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _f !== void 0 ? _f : []),
                     position: activeIndex + '',
                     contentFormat: 'image',
-                    traceInfo: item.video.traceInfo
+                    traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
                 }
             });
             bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({

package/lib/core/context/SxpDataSourceProvider.d.ts

@@ -102,6 +102,7 @@ export interface SxpDataSourceProviderProps {
     loadingImage?: string;
     isOpenHashTag?: boolean;
     enabledMetaConversionApi?: boolean;
+    isShowTag?: boolean;
 }
 declare const _default: React.NamedExoticComponent<SxpDataSourceProviderProps>;
 export default _default;

package/lib/core/context/SxpDataSourceProvider.js

@@ -17,7 +17,7 @@ var DataSourceType;
     DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
 })(DataSourceType || (DataSourceType = {}));
 const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
-const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false }) => {
+const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, isShowTag = true }) => {
     const [rtcList, setRtcList] = (0, react_1.useState)([]);
     const [tagList, setTagList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
@@ -167,7 +167,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
     }), [bffFetch]);
     const bffGetTagList = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         var _h, _j, _k, _l, _m;
-        if (!utmVal)
+        if (!utmVal || !isShowTag)
             return;
         try {
             const val = (_k = (_j = (_h = utmVal === null || utmVal === void 0 ? void 0 : utmVal.split('&')) === null || _h === void 0 ? void 0 : _h.filter((val) => {
@@ -180,7 +180,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
         catch (e) {
             console.log('e', e);
         }
-    }), [bffFetch, utmVal]);
+    }), [bffFetch, utmVal, isShowTag]);
     const ctaEvent = (0, react_1.useCallback)((eventInfo, rec, product, position) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         const cta = product === null || product === void 0 ? void 0 : product.bindCta;

package/lib/materials/sxp/popup/AppointForm/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const css_1 = require("@emotion/css");
 const react_1 = tslib_1.__importStar(require("react"));
+const pro_components_1 = require("@ant-design/pro-components");
 const lodash_1 = require("lodash");
 const hooks_1 = require("../../../../core/hooks");
 require("./index.less");
@@ -82,7 +83,8 @@ const AppointForm = (_a) => {
     return (react_1.default.createElement("div", { className: 'pb-appoint-form' },
         react_1.default.createElement("div", { className: `pb-appoint-form-title ${(0, css_1.css)(Object.assign({}, textStyle))}` }, title),
         react_1.default.createElement("div", Object.assign({ className: (0, css_1.css)(Object.assign({}, style)) }, props),
-            react_1.default.createElement("div", { className: 'pb-appoint-form-container' })),
+            react_1.default.createElement("div", { className: 'pb-appoint-form-container' },
+                react_1.default.createElement(pro_components_1.BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
         react_1.default.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
             react_1.default.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? react_1.default.createElement(react_1.default.Fragment, null, "loading...") : submitText))));
 };

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

@@ -103,11 +103,6 @@ exports.default = [
                 type: 'TextAlign',
                 name: ['props', 'submitButtonStyle']
             },
-            {
-                label: '提交文本颜色',
-                type: 'Color',
-                name: ['props', 'submitColor']
-            },
             {
                 label: '提交按钮颜色',
                 type: 'Color',

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

@@ -100,7 +100,7 @@ const CommodityDetail = (_a) => {
                                 width: '100%',
                                 objectFit: 'cover',
                                 display: 'block',
-                                transform: `translateY(${swiper === null || swiper === void 0 ? void 0 : swiper.translateY})%`
+                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                             }, src: src }))));
             }))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({

package/lib/materials/sxp/popup/CommodityDetail/settingRender.js

@@ -33,7 +33,7 @@ exports.default = [
                         label: '居中垂直偏移',
                         type: 'Number',
                         name: ['props', 'swiper', 'translateY'],
-                        min: -100,
+                        min: -1000,
                         addonAfter: '%',
                         initialValue: 0
                     }

package/lib/materials/sxp/popup/CommodityDetailDiro/index.js

@@ -70,9 +70,8 @@ const CommodityDetailDiro = (_a) => {
         setSpread(!spread);
     };
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        console.log((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight, window.innerHeight);
-        if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && ((_b = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) > window.innerHeight) {
+        var _a;
+        if ((scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) && ((_a = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollHeight) > window.innerHeight) {
             setStopSlide(true);
         }
     }, [scrollRef]);

package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js

@@ -118,7 +118,7 @@ Made in Italy` })));
                                 width: '100%',
                                 objectFit: 'cover',
                                 display: 'block',
-                                transform: `translateY(${swiper === null || swiper === void 0 ? void 0 : swiper.translateY})%`
+                                objectPosition: `50% ${(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) ? -(swiper === null || swiper === void 0 ? void 0 : swiper.translateY) + 50 : 50}%`
                             }, src: src }))));
             }))),
             !((_j = product === null || product === void 0 ? void 0 : product.homePage) === null || _j === void 0 ? void 0 : _j.length) && (react_1.default.createElement("div", { className: (0, css_1.css)({

package/lib/materials/sxp/popup/CommodityDetailDiroNew/settingRender.js

@@ -33,7 +33,7 @@ exports.default = [
                         label: '居中垂直偏移',
                         type: 'Number',
                         name: ['props', 'swiper', 'translateY'],
-                        min: -100,
+                        min: -1000,
                         addonAfter: '%',
                         initialValue: 0
                     }

package/lib/materials/sxp/template/Commodity/index.js

@@ -20,7 +20,7 @@ const Commodity = (_a) => {
                     objectFit: 'cover',
                     height: '100%',
                     display: 'block',
-                    transform: `translateY(${translateY}%)`
+                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                 }), src: src })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',

package/lib/materials/sxp/template/CommodityDiro/index.js

@@ -20,7 +20,7 @@ const CommodityDiro = (_a) => {
                     objectFit: 'cover',
                     height: '100%',
                     display: 'block',
-                    transform: `translateY(${translateY}%)`
+                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                 }), src: src })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',

package/lib/materials/sxp/template/CommodityDiroNew/index.js

@@ -20,7 +20,7 @@ const CommodityDiroNew = (_a) => {
                     objectFit: 'cover',
                     height: '100%',
                     display: 'block',
-                    transform: `translateY(${translateY}%)`
+                    objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                 }), src: src })),
         react_1.default.createElement("div", { className: (0, css_1.css)({
                 color: '#fff',

package/lib/materials/sxp/template/MultiCommodity/index.js

@@ -39,7 +39,7 @@ const MultiCommodity = (_a) => {
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        transform: `translateY(${translateY}%)`
+                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                     } })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',

package/lib/materials/sxp/template/MultiCommodityDiro/index.js

@@ -38,7 +38,7 @@ const MultiCommodityDiro = (_a) => {
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        transform: `translateY(${translateY}%)`
+                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                     } })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#000',

package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js

@@ -38,7 +38,7 @@ const MultiCommodityDiroNew = (_a) => {
         return (react_1.default.createElement(react_2.SwiperSlide, Object.assign({ hidden: recData && !(item === null || item === void 0 ? void 0 : item.bindCta), key: item === null || item === void 0 ? void 0 : item.itemId, className: (0, css_1.css)(Object.assign(Object.assign({}, style), { display: 'flex', flexShrink: 0, marginLeft: 0, marginRight: '8px' })) }, props, { onClick: () => handleClick(item) }),
             react_1.default.createElement("div", { className: (0, css_1.css)(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
                 react_1.default.createElement(Img_1.default, { src: (_d = (_c = (_a = item === null || item === void 0 ? void 0 : item.cover) !== null && _a !== void 0 ? _a : (_b = item === null || item === void 0 ? void 0 : item.homePage) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, rec: recData, item: item, index: index, style: {
-                        transform: `translateY(${translateY}%)`
+                        objectPosition: `50% ${translateY ? -translateY + 50 : 50}%`
                     } })),
             react_1.default.createElement("div", { className: (0, css_1.css)({
                     color: '#fff',

package/lib/materials/sxp/template/components/settingRender.js

@@ -104,7 +104,7 @@ exports.default = [
                 label: '居中垂直偏移',
                 type: 'Number',
                 name: ['props', 'translateY'],
-                min: -100,
+                min: -1000,
                 addonAfter: '%',
                 initialValue: 0
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.71",
+  "version": "1.0.73",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -37,10 +37,11 @@
   "author": "frontend@chatlabs.cn",
   "license": "MIT",
   "dependencies": {
+    "@ant-design/pro-components": "^2.6.35",
     "@emotion/css": "^11.11.2",
+    "antd": "^5.15.3",
     "eslint": "^8.48.0",
     "eventemitter3": "^5.0.1",
-    "hls.js": "^1.5.8",
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",