pb-sxp-ui 1.2.7 → 1.2.8

package/es/core/components/SxpPageRender/FormatImage.d.ts

@@ -5,6 +5,7 @@ interface IFormatImageProps {
     style?: CSSProperties;
     className?: any;
     loading?: 'eager' | 'lazy';
+    alt?: string;
 }
 interface IFormatImageRefProps {
     setSrc: (v: string) => void;

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

@@ -1,6 +1,7 @@
+import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../core/utils/event';
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 const FormatImage = forwardRef((props, ref) => {
-    const { src, onLoad, style, className, loading } = props;
+    const { src, onLoad, style, className, loading, alt = 'image' } = props;
     const [imgSrc, setImgSrc] = useState();
     const imgRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -11,6 +12,19 @@ const FormatImage = forwardRef((props, ref) => {
     useEffect(() => {
         setImgSrc(src);
     }, [src]);
+    useEffect(() => {
+        const onShow = () => {
+            var _a, _b;
+            if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
+                imgRef.current.src = '';
+                imgRef.current.src = src;
+            }
+        };
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        return () => {
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        };
+    }, [src]);
     return (React.createElement(React.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (React.createElement("picture", null,
         React.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
         React.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -19,10 +33,10 @@ const FormatImage = forwardRef((props, ref) => {
                 if (imgRef.current)
                     imgRef.current.style.display = 'block';
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            }, alt: 'image' }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
+            }, alt: alt }))) : (React.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
             if (imgRef.current)
                 imgRef.current.style.display = 'block';
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-        }, alt: 'image' }))));
+        }, alt: alt }))));
 });
 export default memo(FormatImage);

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

@@ -340,7 +340,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             } },
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
+                isPauseVideo && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))),
         renderPoster,
         renderLoading)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
@@ -351,6 +351,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
+        isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
 };
 export default memo(VideoWidget);

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

@@ -30,6 +30,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = useRef();
     const [isLoadMore, setIsLoadMore] = useState(false);
     const [isShowMore, setIsShowMore] = useState(false);
+    const [isReload, setIsReload] = useState(false);
+    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();
@@ -121,6 +123,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 });
             }
             else if (document.visibilityState === 'visible') {
+                if (skipLinkRef.current === true) {
+                    setIsReload(true);
+                }
                 handleH5EnterLink();
                 if (repCond) {
                     handleViewImageStartEvent(activeIndex);
@@ -309,6 +314,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 });
                 setSlideSkipState();
+                skipLinkRef.current = true;
                 window.location.href = window.getJointUtmLink(link);
             }
         }
@@ -421,7 +427,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderBottom(rec, index),
                 renderLikeButton(rec, index)))))));
         });
-    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
+    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
     const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },

package/es/core/context/SxpDataSourceProvider.js

@@ -128,8 +128,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        setRtcList(getFilterRecList(data));
-        setCacheRtcList(getFilterRecList(data));
+        setRtcList(rtcList.concat(getFilterRecList(data)));
+        setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = useCallback(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {

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

@@ -35,7 +35,7 @@ const AniLink = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
     const aniTimStyle = useMemo(() => {
         var _a, _b;
         const ani = event === null || event === void 0 ? void 0 : event.animation;

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

@@ -11,7 +11,6 @@ declare const _default: ({
         name: string[];
         label: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
         addonAfter?: undefined;
     } | {
@@ -22,7 +21,6 @@ declare const _default: ({
             label: string;
             value: number;
         }[];
-        initialValue: number;
         fieldProps: {
             style: {
                 width: string;
@@ -35,7 +33,6 @@ declare const _default: ({
         name: string[];
         addonAfter: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
     })[];
 })[];

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

@@ -22,11 +22,10 @@ export default [
                 label: '动画',
                 options: [
                     {
-                        label: '由左向右/中间扩散',
+                        label: '默认',
                         value: 1
                     }
                 ],
-                initialValue: 1,
                 fieldProps: {
                     style: {
                         width: '100%'

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

@@ -18,7 +18,15 @@ const AniLink = createMaterial(AniLinkComponent, {
                 ctaTitle: {
                     fontSize: 15,
                     color: '#fff',
-                    textAlign: 'left'
+                    textAlign: 'center'
+                }
+            },
+            event: {
+                animation: {
+                    backgroundColor: '#F40082',
+                    name: 1,
+                    delay: 1000,
+                    duration: 2000
                 }
             }
         },

package/es/materials/sxp/cta/AniLinkPopup/index.js

@@ -35,7 +35,7 @@ const AniLinkPopup = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
     const aniTimStyle = useMemo(() => {
         const ani = event === null || event === void 0 ? void 0 : event.animation;
         if (ani) {
@@ -67,7 +67,7 @@ const AniLinkPopup = (_a) => {
         React.createElement("div", { onClick: onClose, className: styles['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
             React.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: styles['modal-icon-wrapper-img'] })),
         React.createElement(Img, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-        (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+        (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (React.createElement("div", { className: styles['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                 __html: setFontForText((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
             } })),
         React.createElement("div", { className: styles['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {

package/es/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts

@@ -7,14 +7,6 @@ declare const _default: ({
 } | {
     title: string;
     child: ({
-        type: string;
-        name: string[];
-        label: string;
-        options?: undefined;
-        initialValue?: undefined;
-        fieldProps?: undefined;
-        addonAfter?: undefined;
-    } | {
         type: string;
         name: string[];
         label: string;
@@ -22,7 +14,6 @@ declare const _default: ({
             label: string;
             value: number;
         }[];
-        initialValue: number;
         fieldProps: {
             style: {
                 width: string;
@@ -35,7 +26,6 @@ declare const _default: ({
         name: string[];
         addonAfter: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
     })[];
 })[];

package/es/materials/sxp/cta/AniLinkPopup/interactionRender.js

@@ -11,22 +11,16 @@ export default [
     {
         title: '动画效果',
         child: [
-            {
-                type: 'Color',
-                name: ['animation', 'backgroundColor'],
-                label: '动画颜色'
-            },
             {
                 type: 'Select',
                 name: ['animation', 'name'],
                 label: '动画',
                 options: [
                     {
-                        label: '由左向右/中间扩散',
+                        label: '默认',
                         value: 1
                     }
                 ],
-                initialValue: 1,
                 fieldProps: {
                     style: {
                         width: '100%'

package/es/materials/sxp/cta/AniLinkPopup/material.js

@@ -17,32 +17,39 @@ const AniLinkPopup = createMaterial(AniLinkPopupComponent, {
             ctaTempStyles: {
                 img: {
                     borderRadius: 3,
-                    width: 76,
-                    height: 76,
-                    marginBottom: 10
+                    width: 108,
+                    height: 108,
+                    marginBottom: 0
                 },
                 title: {
-                    fontSize: 12,
+                    fontSize: 14,
                     color: '#000',
                     textAlign: 'left'
                 },
                 ctaTitle: {
-                    fontSize: 10,
+                    width: 108,
+                    height: 22,
+                    fontSize: 12,
                     color: '#fff',
                     textAlign: 'center',
-                    width: 76,
-                    height: 20,
                     backgroundColor: 'rgba(0,0,0,1)'
                 }
+            },
+            event: {
+                animation: {
+                    name: 1,
+                    delay: 1000,
+                    duration: 2000
+                }
             }
         },
         style: {
-            width: 90,
-            height: 160,
+            width: 120,
+            height: 185,
             borderRadius: 3,
             backgroundColor: 'rgba(255,255,255,1)',
             padding: 7,
-            margin: 10
+            margin: 15
         }
     },
     w: 100,

package/lib/core/components/SxpPageRender/FormatImage.d.ts

@@ -5,6 +5,7 @@ interface IFormatImageProps {
     style?: CSSProperties;
     className?: any;
     loading?: 'eager' | 'lazy';
+    alt?: string;
 }
 interface IFormatImageRefProps {
     setSrc: (v: string) => void;

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const event_1 = tslib_1.__importStar(require("../../../core/utils/event"));
 const react_1 = tslib_1.__importStar(require("react"));
 const FormatImage = (0, react_1.forwardRef)((props, ref) => {
-    const { src, onLoad, style, className, loading } = props;
+    const { src, onLoad, style, className, loading, alt = 'image' } = props;
     const [imgSrc, setImgSrc] = (0, react_1.useState)();
     const imgRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -14,6 +15,19 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
     (0, react_1.useEffect)(() => {
         setImgSrc(src);
     }, [src]);
+    (0, react_1.useEffect)(() => {
+        const onShow = () => {
+            var _a, _b;
+            if (src && ((_b = (_a = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === 'none') {
+                imgRef.current.src = '';
+                imgRef.current.src = src;
+            }
+        };
+        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        return () => {
+            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        };
+    }, [src]);
     return (react_1.default.createElement(react_1.default.Fragment, null, (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.includes('.avif')) ? (react_1.default.createElement("picture", null,
         react_1.default.createElement("source", { type: 'image/avif', srcSet: imgSrc }),
         react_1.default.createElement("source", { type: 'image/webp', srcSet: `${imgSrc}?imageMogr2/format/webp` }),
@@ -22,10 +36,10 @@ const FormatImage = (0, react_1.forwardRef)((props, ref) => {
                 if (imgRef.current)
                     imgRef.current.style.display = 'block';
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-            }, alt: 'image' }))) : (react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
+            }, alt: alt }))) : (react_1.default.createElement("img", { ref: imgRef, className: className, src: imgSrc, style: Object.assign(Object.assign({}, style), { display: 'none' }), loading: loading, onLoad: (e) => {
             if (imgRef.current)
                 imgRef.current.style.display = 'block';
             onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
-        }, alt: 'image' }))));
+        }, alt: alt }))));
 });
 exports.default = (0, react_1.memo)(FormatImage);

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

@@ -343,7 +343,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             } },
             react_1.default.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
                 react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
-                react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON }))),
+                isPauseVideo && (react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))),
         renderPoster,
         renderLoading)) : (react_1.default.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
             position: 'relative',
@@ -354,6 +354,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         react_1.default.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
         renderPoster,
         renderLoading,
-        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
+        isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

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

@@ -33,6 +33,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const viewTime = (0, react_1.useRef)();
     const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
     const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
+    const [isReload, setIsReload] = (0, react_1.useState)(false);
+    const skipLinkRef = (0, react_1.useRef)(false);
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview } = (0, hooks_1.useSxpDataSource)();
     const { backMainFeed } = (0, useEventReport_1.useEventReport)();
     const { productView } = (0, useEventReport_1.useEventReport)();
@@ -124,6 +126,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 });
             }
             else if (document.visibilityState === 'visible') {
+                if (skipLinkRef.current === true) {
+                    setIsReload(true);
+                }
                 handleH5EnterLink();
                 if (repCond) {
                     handleViewImageStartEvent(activeIndex);
@@ -312,6 +317,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     }
                 });
                 (0, localStore_1.setSlideSkipState)();
+                skipLinkRef.current = true;
                 window.location.href = window.getJointUtmLink(link);
             }
         }
@@ -424,7 +430,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                 renderBottom(rec, index),
                 renderLikeButton(rec, index)))))));
         });
-    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage]);
+    }, [containerWidth, data, height, loading, renderBottom, renderContent, visList, loadingImage, isReload]);
     const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
     const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
     return (react_1.default.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },

package/lib/core/context/SxpDataSourceProvider.js

@@ -131,8 +131,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
             'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
             themeTag: themeTag.current
         });
-        setRtcList(getFilterRecList(data));
-        setCacheRtcList(getFilterRecList(data));
+        setRtcList(rtcList.concat(getFilterRecList(data)));
+        setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
     }), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
     const bffEventReport = (0, react_1.useCallback)(({ userInfo, eventInfo }) => {
         if (!enableReportEvent) {

package/lib/materials/sxp/cta/AniLink/index.js

@@ -37,7 +37,7 @@ const AniLink = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
     const aniTimStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
         const ani = event === null || event === void 0 ? void 0 : event.animation;

package/lib/materials/sxp/cta/AniLink/interactionRender.d.ts

@@ -11,7 +11,6 @@ declare const _default: ({
         name: string[];
         label: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
         addonAfter?: undefined;
     } | {
@@ -22,7 +21,6 @@ declare const _default: ({
             label: string;
             value: number;
         }[];
-        initialValue: number;
         fieldProps: {
             style: {
                 width: string;
@@ -35,7 +33,6 @@ declare const _default: ({
         name: string[];
         addonAfter: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
     })[];
 })[];

package/lib/materials/sxp/cta/AniLink/interactionRender.js

@@ -24,11 +24,10 @@ exports.default = [
                 label: '动画',
                 options: [
                     {
-                        label: '由左向右/中间扩散',
+                        label: '默认',
                         value: 1
                     }
                 ],
-                initialValue: 1,
                 fieldProps: {
                     style: {
                         width: '100%'

package/lib/materials/sxp/cta/AniLink/material.js

@@ -22,7 +22,15 @@ const AniLink = (0, create_1.createMaterial)(_1.default, {
                 ctaTitle: {
                     fontSize: 15,
                     color: '#fff',
-                    textAlign: 'left'
+                    textAlign: 'center'
+                }
+            },
+            event: {
+                animation: {
+                    backgroundColor: '#F40082',
+                    name: 1,
+                    delay: 1000,
+                    duration: 2000
                 }
             }
         },

package/lib/materials/sxp/cta/AniLinkPopup/index.js

@@ -37,7 +37,7 @@ const AniLinkPopup = (_a) => {
             onClick === null || onClick === void 0 ? void 0 : onClick();
         }
     };
-    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情 >';
+    const title = (cta === null || cta === void 0 ? void 0 : cta.enTitle) || '查看详情';
     const aniTimStyle = (0, react_1.useMemo)(() => {
         const ani = event === null || event === void 0 ? void 0 : event.animation;
         if (ani) {
@@ -69,7 +69,7 @@ const AniLinkPopup = (_a) => {
         react_1.default.createElement("div", { onClick: onClose, className: index_module_less_1.default['modal-icon-wrapper'], style: { padding: (_s = style === null || style === void 0 ? void 0 : style['padding']) !== null && _s !== void 0 ? _s : 0 } },
             react_1.default.createElement("img", { src: (_t = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.popupCloseIcon) !== null && _t !== void 0 ? _t : closeIcon, alt: 'close', className: index_module_less_1.default['modal-icon-wrapper-img'] })),
         react_1.default.createElement(Img_1.default, { src: src, rec: recData, item: (_y = (_w = (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v[0]) !== null && _w !== void 0 ? _w : (_x = recData === null || recData === void 0 ? void 0 : recData.video) === null || _x === void 0 ? void 0 : _x.bindProduct) !== null && _y !== void 0 ? _y : recData === null || recData === void 0 ? void 0 : recData.video, index: index, translateY: translateY, imgStyle: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img }),
-        (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['two-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
+        (!recData || (product === null || product === void 0 ? void 0 : product.title)) && (react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title, dangerouslySetInnerHTML: {
                 __html: (0, tool_1.setFontForText)((_z = product === null || product === void 0 ? void 0 : product.title) !== null && _z !== void 0 ? _z : 'Product Name', ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.title)
             } })),
         react_1.default.createElement("div", { className: index_module_less_1.default['one-line-ellipsis'], style: Object.assign(Object.assign({}, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle), { lineHeight: ((_0 = ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle) === null || _0 === void 0 ? void 0 : _0.height) + 'px' }), dangerouslySetInnerHTML: {

package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.d.ts

@@ -7,14 +7,6 @@ declare const _default: ({
 } | {
     title: string;
     child: ({
-        type: string;
-        name: string[];
-        label: string;
-        options?: undefined;
-        initialValue?: undefined;
-        fieldProps?: undefined;
-        addonAfter?: undefined;
-    } | {
         type: string;
         name: string[];
         label: string;
@@ -22,7 +14,6 @@ declare const _default: ({
             label: string;
             value: number;
         }[];
-        initialValue: number;
         fieldProps: {
             style: {
                 width: string;
@@ -35,7 +26,6 @@ declare const _default: ({
         name: string[];
         addonAfter: string;
         options?: undefined;
-        initialValue?: undefined;
         fieldProps?: undefined;
     })[];
 })[];

package/lib/materials/sxp/cta/AniLinkPopup/interactionRender.js

@@ -13,22 +13,16 @@ exports.default = [
     {
         title: '动画效果',
         child: [
-            {
-                type: 'Color',
-                name: ['animation', 'backgroundColor'],
-                label: '动画颜色'
-            },
             {
                 type: 'Select',
                 name: ['animation', 'name'],
                 label: '动画',
                 options: [
                     {
-                        label: '由左向右/中间扩散',
+                        label: '默认',
                         value: 1
                     }
                 ],
-                initialValue: 1,
                 fieldProps: {
                     style: {
                         width: '100%'

package/lib/materials/sxp/cta/AniLinkPopup/material.js

@@ -21,32 +21,39 @@ const AniLinkPopup = (0, create_1.createMaterial)(_1.default, {
             ctaTempStyles: {
                 img: {
                     borderRadius: 3,
-                    width: 76,
-                    height: 76,
-                    marginBottom: 10
+                    width: 108,
+                    height: 108,
+                    marginBottom: 0
                 },
                 title: {
-                    fontSize: 12,
+                    fontSize: 14,
                     color: '#000',
                     textAlign: 'left'
                 },
                 ctaTitle: {
-                    fontSize: 10,
+                    width: 108,
+                    height: 22,
+                    fontSize: 12,
                     color: '#fff',
                     textAlign: 'center',
-                    width: 76,
-                    height: 20,
                     backgroundColor: 'rgba(0,0,0,1)'
                 }
+            },
+            event: {
+                animation: {
+                    name: 1,
+                    delay: 1000,
+                    duration: 2000
+                }
             }
         },
         style: {
-            width: 90,
-            height: 160,
+            width: 120,
+            height: 185,
             borderRadius: 3,
             backgroundColor: 'rgba(255,255,255,1)',
             padding: 7,
-            margin: 10
+            margin: 15
         }
     },
     w: 100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",