pb-sxp-ui 1.0.3-alpha.1 → 1.0.3-alpha.2

package/dist/pb-ui.js

@@ -421,7 +421,7 @@
         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 }) => {
+    const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false }) => {
         const [rtcList, setRtcList] = React.useState([]);
         const [loading, setLoading] = React.useState(false);
         const [curReqInfo, setCurReqInfo] = React.useState({ rtc: '', requestId: '' });
@@ -430,10 +430,13 @@
         // 弹窗数据
         const [popupDetailData, setPopupDetailData] = React.useState();
         const [waterFallData, setWaterFallData] = React.useState();
-        const [openHashtag, setOpenHashtag] = React.useState(false);
+        const [openHashtag, setOpenHashtag] = React.useState(isOpenHashTag);
         const [cacheRtcList, setCacheRtcList] = React.useState([]);
         const [cacheActiveIndex, setCacheActiveIndex] = React.useState(0);
         const [isFromHashtag, setIsFromHashtag] = React.useState(false);
+        React.useEffect(() => {
+            setOpenHashtag(isOpenHashTag);
+        }, [isOpenHashTag]);
         // BFF 数据源
         const bffDataSource = React.useMemo(() => {
             return dataSources === null || dataSources === void 0 ? void 0 : dataSources.find((d) => d.type === DataSourceType.BFF);
@@ -618,7 +621,8 @@
                 setIsFromHashtag,
                 appDomain,
                 hashTagSize,
-                loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage
+                loadingImage: loadingImage !== null && loadingImage !== void 0 ? loadingImage : defaultLoadingImage,
+                isOpenHashTag
             } }, render({ rtcList, mutateLike: bffMutateLike, mutateUnlike: bffMutateUnlike, submitForm: bffSubmitForm })));
     };
     var SxpDataSourceProvider$1 = React.memo(SxpDataSourceProvider);
@@ -882,7 +886,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\AppointForm\settingRender.tsx
      *
      */
-    var settingRender$4 = [
+    var settingRender$5 = [
         {
             type: 'Text',
             label: '组件名称',
@@ -1071,7 +1075,7 @@
         category: 'popup',
         type: 'AppointForm',
         related: {
-            settingRender: settingRender$4,
+            settingRender: settingRender$5,
             bindableProps: [],
             interactionRender: interactionRender$8
         },
@@ -1113,7 +1117,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$3 = [
+    var settingRender$4 = [
         {
             title: '商品图片',
             child: [
@@ -8400,7 +8404,7 @@
         category: 'popup',
         type: 'CommodityDetail',
         related: {
-            settingRender: settingRender$3
+            settingRender: settingRender$4
         },
         defaulSetting: {
             props: {
@@ -8462,7 +8466,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\Prompt\settingRender.tsx
      *
      */
-    var settingRender$2 = [
+    var settingRender$3 = [
         {
             type: 'Media',
             label: '图标',
@@ -8537,7 +8541,7 @@
         category: 'popup',
         type: 'Prompt',
         related: {
-            settingRender: settingRender$2,
+            settingRender: settingRender$3,
             bindableProps: [],
             interactionRender: interactionRender$7
         },
@@ -8562,7 +8566,7 @@
      * @FilePath: \pb-sxp-ui\src\materials\sxp\popup\CommodityDetailDiroNew\settingRender.tsx
      *
      */
-    var settingRender$1 = [
+    var settingRender$2 = [
         {
             title: '商品图片',
             child: [
@@ -8849,7 +8853,7 @@ Made in Italy` })));
         category: 'popup',
         type: 'CommodityDetailDiroNew',
         related: {
-            settingRender: settingRender$1
+            settingRender: settingRender$2
         },
         defaulSetting: {
             props: {
@@ -8905,11 +8909,11 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-26 16:50:25
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-29 17:03:07
+     * @LastEditTime: 2024-04-03 15:51:15
      * @FilePath: \pb-sxp-ui\src\materials\sxp\template\components\settingRender.tsx
      *
      */
-    var settingRender = [
+    var settingRender$1 = [
         {
             title: '主题样式',
             child: [
@@ -9069,6 +9073,23 @@ Made in Italy` })));
                         }
                     ]
                 },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'ctaTempStyles', 'ctaTitle', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
                 {
                     type: 'Color',
                     label: '背景色',
@@ -9217,7 +9238,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$6,
             bindableProps: [],
-            settingRender
+            settingRender: settingRender$1
         },
         defaulSetting: {
             props: {
@@ -9295,7 +9316,7 @@ Made in Italy` })));
         type: 'Appoint',
         related: {
             interactionRender: interactionRender$5,
-            settingRender: settingRender === null || settingRender === void 0 ? void 0 : settingRender.filter((i) => i.type !== 'commodityTitle'),
+            settingRender: settingRender$1 === null || settingRender$1 === void 0 ? void 0 : settingRender$1.filter((i) => i.type !== 'commodityTitle'),
             bindableProps: []
         },
         defaulSetting: {
@@ -9371,7 +9392,7 @@ Made in Italy` })));
         category: 'template',
         type: 'Link',
         related: {
-            settingRender: settingRender === null || settingRender === void 0 ? void 0 : settingRender.filter((i) => i.type !== 'commodityTitle'),
+            settingRender: settingRender$1 === null || settingRender$1 === void 0 ? void 0 : settingRender$1.filter((i) => i.type !== 'commodityTitle'),
             bindableProps: []
         },
         defaulSetting: {
@@ -9456,7 +9477,7 @@ Made in Italy` })));
         type: 'CommodityDiro',
         related: {
             interactionRender: interactionRender$4,
-            settingRender,
+            settingRender: settingRender$1,
             bindableProps: []
         },
         defaulSetting: {
@@ -9548,7 +9569,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$3,
             bindableProps: [],
-            settingRender
+            settingRender: settingRender$1
         },
         defaulSetting: {
             props: {
@@ -9680,7 +9701,7 @@ Made in Italy` })));
         related: {
             interactionRender: interactionRender$2,
             bindableProps: [],
-            settingRender
+            settingRender: settingRender$1
         },
         defaulSetting: {
             props: {
@@ -9782,7 +9803,7 @@ Made in Italy` })));
         type: 'MultiCommodity',
         related: {
             interactionRender: interactionRender$1,
-            settingRender,
+            settingRender: settingRender$1,
             bindableProps: []
         },
         defaulSetting: {
@@ -9886,7 +9907,7 @@ Made in Italy` })));
         related: {
             interactionRender,
             bindableProps: [],
-            settingRender
+            settingRender: settingRender$1
         },
         defaulSetting: {
             props: {
@@ -9928,898 +9949,2424 @@ Made in Italy` })));
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2023-07-25 14:56:49
+     * @Date: 2024-04-07 14:07:12
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-20 13:46:06
-     * @FilePath: \pb-sxp-ui\src\materials\index.ts
+     * @LastEditTime: 2024-04-07 14:54:11
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
      *
      */
-
-    var _materials_ = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        Appoint: Appoint,
-        AppointForm: AppointForm,
-        Commodity: Commodity,
-        CommodityDetail: CommodityDetail,
-        CommodityDetailDiroNew: CommodityDetailDiroNew,
-        CommodityDiro: CommodityDiro,
-        CommodityDiroNew: CommodityDiroNew,
-        Link: Link,
-        MultiCommodity: MultiCommodity,
-        MultiCommodityDiro: MultiCommodityDiro,
-        MultiCommodityDiroNew: MultiCommodityDiroNew,
-        Prompt: Prompt
-    });
-
-    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
-    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
-    const LikeButton = (_a) => {
-        var { active, activeIcon, unActicveIcon, recData } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData"]);
-        const { mutateLike, mutateUnlike, bffEventReport } = useSxpDataSource();
-        const [state, setState] = React.useState(active);
-        const likeIcon = useIconLink(defaultLikeIconPath);
-        const unlikeIcon = useIconLink(defaultUnLikeIconPath);
-        const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
-            if (state) {
-                // 先设置状态
-                setState(false);
-                const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'favoriteContentCanceled',
-                        eventDescription: 'This content was unfavorite by the user',
-                        contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
-                        contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
-                        contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
-                        position: recData.position,
-                        contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
-                        traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
-                    }
-                });
-                // 如果接口调用失败，则回滚状态
-                if (!result) {
-                    setState(true);
+    var settingRender = [
+        {
+            title: '卡片样式',
+            child: [
+                {
+                    type: 'Number',
+                    label: '文本行数',
+                    name: ['props', 'lineClamp']
+                },
+                {
+                    type: 'Number',
+                    label: '上下边距',
+                    name: ['props', 'space'],
+                    addonAfter: 'px'
                 }
-            }
-            else {
-                setState(true);
-                const result = (_o = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _o !== void 0 ? _o : false;
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'favoriteContent',
-                        eventDescription: 'This content was favorite by the user',
-                        contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
-                        contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
-                        contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
-                        position: recData.position,
-                        contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
-                        traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
-                    }
-                });
-                if (!result) {
-                    setState(false);
+            ]
+        },
+        {
+            title: '文本设置',
+            child: [
+                {
+                    name: ['props', 'textStyles'],
+                    type: 'SelectLinkage',
+                    child: [
+                        {
+                            label: '字段',
+                            type: 'Select',
+                            options: [
+                                {
+                                    label: 'hashtag标题',
+                                    value: 'hashTagTitle'
+                                },
+                                {
+                                    label: 'hashtag描述',
+                                    value: 'hashTagDesc'
+                                },
+                                {
+                                    label: '标题',
+                                    value: 'title'
+                                },
+                                {
+                                    label: '价格',
+                                    value: 'price'
+                                }
+                            ],
+                            name: ['props', 'textStyles', 'field'],
+                            initialValue: 'title'
+                        },
+                        {
+                            type: 'Group',
+                            label: '标题字体',
+                            child: [
+                                {
+                                    type: 'Color',
+                                    name: ['color']
+                                },
+                                {
+                                    type: 'Select',
+                                    options: [{ label: '黑体', value: '黑体' }],
+                                    name: ['fontFamily']
+                                },
+                                {
+                                    type: 'Number',
+                                    addonAfter: 'px',
+                                    name: ['fontSize']
+                                }
+                            ]
+                        },
+                        {
+                            label: '标题样式',
+                            type: 'TextStyle'
+                        },
+                        {
+                            label: '标题对齐',
+                            type: 'TextAlign'
+                        }
+                    ]
                 }
-            }
-        }), 200);
-        return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
-            React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
+            ]
+        },
+        {
+            title: '按钮样式',
+            child: [
+                {
+                    type: 'Color',
+                    label: '背景色',
+                    name: ['props', 'buttonStyle', 'backgroundColor'],
+                    initialValue: '#000'
+                },
+                {
+                    type: 'Group',
+                    label: '尺寸',
+                    child: [
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'height'],
+                            addonAfter: 'H'
+                        }
+                    ]
+                },
+                {
+                    type: 'Group',
+                    label: '圆角',
+                    child: [
+                        {
+                            type: 'Slider',
+                            name: ['props', 'buttonStyle', 'borderRadius'],
+                            max: 100
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'borderRadius'],
+                            addonAfter: 'px',
+                            max: 100
+                        }
+                    ]
+                },
+                {
+                    type: 'TextMargin',
+                    name: ['props', 'buttonStyle']
+                },
+                {
+                    type: 'Group',
+                    label: '字体',
+                    child: [
+                        {
+                            type: 'Color',
+                            name: ['props', 'buttonStyle', 'color'],
+                            initialValue: '#fff'
+                        },
+                        {
+                            type: 'Select',
+                            name: ['props', 'buttonStyle', 'fontFamily'],
+                            options: [{ label: '黑体', value: '黑体' }]
+                        },
+                        {
+                            type: 'Number',
+                            name: ['props', 'buttonStyle', 'fontSize'],
+                            addonAfter: 'px'
+                        }
+                    ]
+                },
+                {
+                    type: 'TextStyle',
+                    name: ['props', 'buttonStyle']
+                },
+                {
+                    type: 'TextAlign',
+                    name: ['props', 'buttonStyle']
+                }
+            ]
+        }
+    ];
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-12-26 16:11:34
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-04-08 11:53:47
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Navbar.tsx
+     *
+     */
+    const Navbar = ({ icon, styles, textStyle, onClose }) => {
+        var _a;
+        const { waterFallData, setOpenHashtag } = useSxpDataSource();
+        return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
+            React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
+            React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
     };
-    var LikeButton$1 = React.memo(LikeButton);
+    var Navbar$1 = React.memo(Navbar);
 
-    const SXP_EVENT_BUS = new EventEmitter();
-    var SXP_EVENT_TYPE;
-    (function (SXP_EVENT_TYPE) {
-        SXP_EVENT_TYPE["PAGE_DID_SHOW"] = "pageDidShow";
-        SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
-    })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
+    var productUserId = null;
+    var requestId = "3d989325-e7d6-4a74-8a97-98febdf5b567";
+    var channel = null;
+    var rtc = null;
+    var tag = {
+    	info: "The dior toujours bag is distinguished by a casual and practical design. Fully embroidered with black textured tweed, it is accented by a blend of threads displaying the cannage motif.",
+    	link: "www.baidu.com",
+    	linkTitle: null,
+    	linkType: "WEB"
+    };
+    var recList = [
+    	{
+    		position: "0",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOY2BMu1710323630175",
+    			title: "A symbol of excellence, the Dior Toujours bag is reinterpreted in an unprecedented version. For the Dior spring-summer 2024 ready-to-wear collection, this exceptional accessory, dreamed up by Maria Grazia Chiuri, is dressed in irresistible crinkled leather featuring the iconic macrocannage motif. A new emblem of the virtuoso, perpetually reinvented savoir-faire of the Dior Ateliers.",
+    			tags: [
+    				"Dior Toujours Bag",
+    				"Casual",
+    				"Leather Strap",
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOY2BMu1710323630175:default:3::branch:Handbags:0",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M2821SNIOM900",
+    				title: "Medium Dior Toujours Bag Black Macrocannage Crinkled Leather",
+    				tags: [
+    					"Medium",
+    					"Black",
+    					"Women",
+    					"Handbags",
+    					"Bucket Bag"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M2821SNIOM900:default:3::branch:Handbags:0",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:0",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsy6AN0OWw3rj8Luw3RTSP9n2kDLq1710497237677.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fszTc3uEUrtppdN9QVVU2XBnaaaBY1710497237986.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKbBMTRa0tTTX661wu7DzLw9OP0r1710497237980.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsOYHlYCwgzalxzmIJcsZmIsJ2L3g1710497237145.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKJqNVm1ZBlrgZ8XLC0YAaO6ws2F1710497237650.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsm2VoVancBQ20nDHceESUPNLyrUy1710497238312.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs2B5YYmv8OztP3d9rlM2a9KmYswl1710497237339.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The dior toujours bag is distinguished by a casual and practical design. Crafted in black crinkled calfskin with macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize the essentials. Its leather strap closure keeps items secure while the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette.",
+    				price: 4400,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fswbY3wT0hCmrYkrqDzFKnHb3NMux1710323481052.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fs3Ifqv7fk2Tn9nPtwOTO2YjxAuRO1710323470472.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Dior Toujours Bag",
+    				"Casual",
+    				"Leather Strap",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "1",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEO6JCOb1710323364018",
+    			title: "Maria grazia chiuri's hallmark dior book tote offers an original take on elegance. Unveiled at the cruise 2024 fashion show, the refined style showcases the iconic blue dior oblique embroidery and calfskin. Designed to keep all the daily essentials organized, the interior is equipped with a zipped pocket and patch pockets.",
+    			tags: [
+    				"Handbags",
+    				"Manufacturing Craftsmanship",
+    				"Dior Book Tote"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEO6JCOb1710323364018:default:3::branch:Handbags:1",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M1296ZRIWM828",
+    				title: "Medium Dior Book Tote",
+    				tags: [
+    					"Maria Grazia Chiuri",
+    					"Hand",
+    					"Shoulder",
+    					"Handbags",
+    					"Blue",
+    					"Women"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M1296ZRIWM828:default:3::branch:Handbags:1",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:1",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fs69g46K9wPCwi5VRAP2QAgRHM0Pc1709696901624.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsAIliGV0ZJP8MNa8DECYtwsK4ker1709696900761.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsMJ4JfZ0Vhzq6H71NdIPg6YozbIz1709696897845.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsWXI06zGOmACXn9wD3EegRLkB7dg1709696911033.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    				price: 3350,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsAHlkdbqYj5F84o2faRzU1E3AvG11710323339209.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fs7KIGk2IB0MsoDL1ANWB1Mb2hqu41710323314146.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Handbags",
+    				"Dior Book Tote"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "2",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "M2820OTKVM911",
+    			title: "Large Dior Toujours Bag Black Cannage Tweed",
+    			tags: [
+    				"Black",
+    				"Women",
+    				"Handbags",
+    				"Bucket Bag",
+    				"Dior Toujours Bag"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:M2820OTKVM911:default:3::branch:Handbags:2",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:2",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240312/fsJTjyFchOFEJSTRYxXvL2XPU1dP61710238469418.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fstdFA1dFT55QjtQPU2qHNENo5peF1710836061716.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fs9xf8AlIApbHezVL3BsxjUGIrN231710836061181.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240312/fs9iZ20MjLAPkXmFKvD8HzhLaBJ671710238470272.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240312/fsSSodev3wicDfE1DYNWPQVeRjErt1710238464035.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240312/fs3YAOuN6Pd9NFvH1Rdooj6eLI18S1710238465296.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240312/fsBwIEp6OzI49isvHgiKD0cPSFtrD1710238459007.jpg"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/M2820OTKV_M911-large-dior-toujours-bag",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: "The dior toujours bag is distinguished by a casual and practical design. Fully embroidered with black textured tweed, it is accented by a blend of threads displaying the cannage motif. It showcases a spacious interior compartment with a matching pouch to organize the essentials, while a leather strap closure keeps items secure and the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette.",
+    			price: 4200,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	},
+    	{
+    		position: "3",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOOL1qU1709616182569",
+    			title: "Maria grazia chiuri brings a fresh update to the iconic saddle bag. Crafted in black grained calfskin, the legendary design features a saddle flap with a d stirrup clasp on a magnetic strap, as well as an antique gold-finish metal cd signature on either side of the strap. Equipped with a thin, adjustable and removable shoulder strap, the saddle bag may be carried by hand, worn over the shoulder or crossbody.. Saddle bag with strap Black grained calfskin",
+    			tags: [
+    				"Maria Grazia Chiuri",
+    				"Saddle Bags",
+    				"Removable Shoulder Strap",
+    				"Shoulder",
+    				"Crossbody",
+    				"Cross-body & Shoulder Bags",
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOOL1qU1709616182569:default:3::branch:Handbags:3",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0455CBAAM900",
+    				title: "Saddle Bag with Strap",
+    				tags: [
+    					"Saddle Bags",
+    					"Handbags",
+    					"Maria Grazia Chiuri"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0455CBAAM900:default:3::branch:Handbags:3",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:3",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsiwfgnCrVBGcGPh6gaFsvbYBIpxX1709285334896.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsXpilTgUS4u4oFWr0hUew8DQITi11709285353202.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsWxJm6YIeRYmDtDoB5WtYMjRX8bm1709285366208.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsj69PxKh1SAZ6p0902FbBT0vg2at1709285373714.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fs78nKueByU2cNulReOw8gJ1ZsieF1709285412981.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsmAEriTIohZAUMUE6gUCWvXwbbRE1709285429332.png"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M0455CBAA_M900-saddle-bag-with-strap-black-grained-calfskin?objectID=M0455CBAA_M900&query=M0455CBAAM900&queryID=c171c63e69d6d109953e2de631718496",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "Maria Grazia Chiuri brings a fresh update to the iconic Saddle bag. Crafted in black grained calfskin, the legendary design features a Saddle flap with a D stirrup clasp on a magnetic strap, as well as an antique gold-finish metal CD signature on either side of the strap. Equipped with a thin, adjustable and removable shoulder strap, the Saddle bag may be carried by hand, worn over the shoulder or crossbody.",
+    				price: 4400,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: null,
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsvbBN3IRfwctVIhdqgq3doWmhbb21710399187965.jpg"
+    			],
+    			hashTags: [
+    				"Maria Grazia Chiuri",
+    				"Saddle Bags",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "4",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "S5909CTZQM928",
+    			title: "Saddle Shoulder Pouch Blue Dior Oblique Jacquard ",
+    			tags: [
+    				"Saddle Bags",
+    				"Handbags",
+    				"Small-Leather-Goods",
+    				"Small",
+    				"Mini Bags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:S5909CTZQM928:default:3::branch:Handbags:4",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:4",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fs34CpwKJOyjEDgoHypoLYakF8oR31710316280669.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsLOSOEf9pmz7wKnFaifWNw3TZ7Gy1710316287874.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsWHmVcrzHKKj6EfhfnQkxYIOt20a1710316295683.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fslyBNMyQwjpjY4EKzyrqzTMlOGRQ1710316313161.png"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/S5909CTZQ",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: null,
+    			price: 4900,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	},
+    	{
+    		position: "5",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOrZguC1710324513737",
+    			title: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    			tags: [
+    				"Handbags",
+    				"Dior Book Tote"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOrZguC1710324513737:default:3::branch:Handbags:5",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M1296ZRIWM828",
+    				title: "Medium Dior Book Tote",
+    				tags: [
+    					"Maria Grazia Chiuri",
+    					"Hand",
+    					"Shoulder",
+    					"Handbags",
+    					"Blue",
+    					"Women"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M1296ZRIWM828:default:3::branch:Handbags:5",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:5",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fs69g46K9wPCwi5VRAP2QAgRHM0Pc1709696901624.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsAIliGV0ZJP8MNa8DECYtwsK4ker1709696900761.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsMJ4JfZ0Vhzq6H71NdIPg6YozbIz1709696897845.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsWXI06zGOmACXn9wD3EegRLkB7dg1709696911033.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    				price: 3350,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fstXNWStczbY8HbIKEqMwfCkv5CI51710324494939.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsOqu34FxaJTdascLcj6DHoYIIAs01710324439851.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Handbags",
+    				"Dior Book Tote"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "6",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "M1296ZRIWM828",
+    			title: "Medium Dior Book Tote",
+    			tags: [
+    				"Maria Grazia Chiuri",
+    				"Hand",
+    				"Shoulder",
+    				"Handbags",
+    				"Blue",
+    				"Women"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:M1296ZRIWM828:default:3::branch:Handbags:6",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:6",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fs69g46K9wPCwi5VRAP2QAgRHM0Pc1709696901624.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsAIliGV0ZJP8MNa8DECYtwsK4ker1709696900761.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsMJ4JfZ0Vhzq6H71NdIPg6YozbIz1709696897845.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsWXI06zGOmACXn9wD3EegRLkB7dg1709696911033.jpg"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    			price: 3350,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	},
+    	{
+    		position: "7",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOEtr621710300614047",
+    			title: "Unveiled at the spring-summer 2023 fashion show, the dior toujours bag is distinguished by a casual and practical design. Crafted in black calfskin with macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize essentials. Its leather strap closure keeps items secure while the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette. T",
+    			tags: [
+    				"Handbags",
+    				"Leather Strap",
+    				"Spring-Summer 2024 Fashion Show",
+    				"Backstage",
+    				"Dior Toujours Bag"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOEtr621710300614047:default:3::branch:Handbags:7",
+    			bindCta: null,
+    			bindProduct: null,
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fshkOldZwfsSqTgvxHJzNBwS66ySc1710300910103.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsryDXTtPWXjYFWoSUEBUi48RHZCh1710398617300.jpg"
+    			],
+    			hashTags: [
+    				"Backstage",
+    				"Handbags",
+    				"Spring-Summer 2024 Fashion Show",
+    				"Dior Toujours Bag"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "8",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOO8Zjt1709616802987",
+    			title: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    			tags: [
+    				"Blue",
+    				"Medium",
+    				"Shoulder",
+    				"Hand",
+    				"Handbags",
+    				"Dior Book Tote"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOO8Zjt1709616802987:default:3::branch:Handbags:8",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M1296ZRIWM828",
+    				title: "Medium Dior Book Tote",
+    				tags: [
+    					"Maria Grazia Chiuri",
+    					"Hand",
+    					"Shoulder",
+    					"Handbags",
+    					"Blue",
+    					"Women"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M1296ZRIWM828:default:3::branch:Handbags:8",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:8",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fs69g46K9wPCwi5VRAP2QAgRHM0Pc1709696901624.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsAIliGV0ZJP8MNa8DECYtwsK4ker1709696900761.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsMJ4JfZ0Vhzq6H71NdIPg6YozbIz1709696897845.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240306/fsWXI06zGOmACXn9wD3EegRLkB7dg1709696911033.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "Introduced by Maria Grazia Chiuri, Creative Director of Christian Dior, the Dior Book Tote has become a staple of the Dior aesthetic. Designed to hold all the daily essentials, the style is fully embroidered with the ecru and blue Dior Oblique motif. Adorned with the Christian Dior Paris signature on the front, the medium tote exemplifies the House's signature savoir-faire and may be carried by hand or worn over the shoulder.",
+    				price: 3350,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240305/fsmS72zfInwmblYTnuYzRuZKAOlhr1709616742898.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsU2gDw28XFd1nOAqlUjb1r1h6mpT1710400349981.jpg"
+    			],
+    			hashTags: [
+    				"Dior Book Tote",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "9",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "M2821SNIOM900",
+    			title: "Medium Dior Toujours Bag Black Macrocannage Crinkled Leather",
+    			tags: [
+    				"Medium",
+    				"Black",
+    				"Women",
+    				"Handbags",
+    				"Bucket Bag"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:M2821SNIOM900:default:3::branch:Handbags:9",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:9",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsy6AN0OWw3rj8Luw3RTSP9n2kDLq1710497237677.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fszTc3uEUrtppdN9QVVU2XBnaaaBY1710497237986.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKbBMTRa0tTTX661wu7DzLw9OP0r1710497237980.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsOYHlYCwgzalxzmIJcsZmIsJ2L3g1710497237145.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKJqNVm1ZBlrgZ8XLC0YAaO6ws2F1710497237650.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsm2VoVancBQ20nDHceESUPNLyrUy1710497238312.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs2B5YYmv8OztP3d9rlM2a9KmYswl1710497237339.jpg"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: "The dior toujours bag is distinguished by a casual and practical design. Crafted in black crinkled calfskin with macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize the essentials. Its leather strap closure keeps items secure while the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette.",
+    			price: 4400,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	},
+    	{
+    		position: "10",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOesZlV1710323980494",
+    			title: "The lady dior bag embodies dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the house's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic cannage topstitching, while the ultra-matte metal d.i.o.r. Charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium lady dior bag can be carried by hand or worn crossbody.",
+    			tags: [
+    				"Lady Dior",
+    				"Removable Shoulder Strap",
+    				"Medium",
+    				"Handbags",
+    				"Crossbody"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOesZlV1710323980494:default:3::branch:Handbags:10",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0565SDBRM900",
+    				title: "Medium Lady Dior Bag",
+    				tags: [
+    					"Women",
+    					"Black",
+    					"Handbags",
+    					"Hand",
+    					"Lady Dior",
+    					"Crossbody"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0565SDBRM900:default:3::branch:Handbags:10",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:10",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsnyiCm9oirbXLqmqY7231O8O2Yhb1710498970982.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fskwIRRKCtuw9cb9btuubt2D5bXfB1710498970676.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsqXFTCyhxspeYCD3uo4UiuN5vQ7w1710498970671.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs8rDRSKJmWUNI42MjrMWVlI0D9Fz1710498970729.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsca9Cjqo3WMJVU0OL0OjQo8xOoMx1710498972076.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsjl1bxi56X0QrKwfvl8YocBVJ2N81710498971352.jpg"
+    				],
+    				collection: null,
+    				link: "https://www.dior.com/en_us/fashion/products/M0565SDBR_M900-medium-lady-dior-bag-black-patent-to-matte-gradient-cannage-lambskin?objectID=M0565SDBR_M900&query=M0565SDBRM900&queryID=14cc52b35774a9a42e78fd9ba199860e",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the House's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic Cannage topstitching, while the ultra-matte metal D.I.O.R. charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium Lady Dior bag can be carried by hand or worn crossbody.",
+    				price: 7100,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsiwMQ88zO5Xdnl939krMyBMbz7Js1710323763013.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsxyS8nr7nn0LMe7EqOt3ETXqLu7d1710323753073.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Lady Dior",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "11",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOdvsXq1710324342942",
+    			title: "New for summer 2024, the lady d-sire my abcdior bag draws inspiration from the signature elegance of the lady dior design. Reimagined with a casual style for an urban look, the lightweight black grained bull leather feels soft to the touch yet offers excellent durability. The medium bag is embellished with pale gold-finish metal d.i.o.r. Charms that highlight the silhouette.",
+    			tags: [
+    				"Summer 2024",
+    				"Lady Dior",
+    				"Casual",
+    				"Lightweight",
+    				"Medium",
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOdvsXq1710324342942:default:3::branch:Handbags:11",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M1151OTRLM900",
+    				title: "Medium Lady D-Sire My ABCDior Bag",
+    				tags: [
+    					"Handbags",
+    					"Summer 2024",
+    					"Lady Dior",
+    					"Black",
+    					"Medium",
+    					"Women",
+    					"Lady D-Sire"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M1151OTRLM900:default:3::branch:Handbags:11",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:11",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsBvqPYhaE9Ct1JzBd4gm8g9YOiAZ1710499102900.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs6sf9nB7WpJuLNIZT3c8O8Fmf3Gu1710499102936.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsSxYBxyVx2yRrUgEaYmarWhlUbk41710499102531.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsyhykK1B7W9613MAfipfIuE1foim1710499102345.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs6FXJdaXib8lP0NPloe1XQGpoiKc1710499103268.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsCRx7T4ejNvgKNensH6LT4dPt6251710499103615.jpg"
+    				],
+    				collection: null,
+    				link: "https://www.dior.com/en_us/fashion/products/M1151OTRL_M900-medium-lady-d-sire-my-abcdior-bag-black-bull-leather?objectID=M1151OTRL_M900&query=M1151OTRLM900&queryID=e82938220687c425c75277a7c526b932",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "New for Summer 2024, the Lady D-Sire My ABCDior bag draws inspiration from the signature elegance of the Lady Dior design. Reimagined with a casual style for an urban look, the lightweight black grained bull leather feels soft to the touch yet offers excellent durability. The medium bag is embellished with pale gold-finish metal D.I.O.R. charms that highlight the silhouette. Showcasing a shoulder strap that can be personalized by adding symbolic badges, the unique bag can be carried by hand or w",
+    				price: 6100,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsOsdUSXr57U5Twhhkv17th3yHqBJ1710324292456.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsZyr3slVtlsParX6D0DqsM0QEx8d1710324283147.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Summer 2024",
+    				"Lady Dior",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "12",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOy76Fr1710324746846",
+    			title: "Maria grazia chiuri brings a fresh update to the iconic saddle bag. Crafted in black grained calfskin, the legendary design features a saddle flap with a d stirrup clasp on a magnetic strap, as well as an antique gold-finish metal cd signature on either side of the strap. Equipped with a thin, adjustable and removable shoulder strap, the saddle bag may be carried by hand, worn over the shoulder or crossbody.. Saddle bag with strap Black grained calfskin",
+    			tags: [
+    				"Maria Grazia Chiuri",
+    				"Saddle Bags",
+    				"Removable Shoulder Strap",
+    				"Hand",
+    				"Shoulder",
+    				"Crossbody",
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOy76Fr1710324746846:default:3::branch:Handbags:12",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0455CBAAM900",
+    				title: "Saddle Bag with Strap",
+    				tags: [
+    					"Saddle Bags",
+    					"Handbags",
+    					"Maria Grazia Chiuri"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0455CBAAM900:default:3::branch:Handbags:12",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:12",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsiwfgnCrVBGcGPh6gaFsvbYBIpxX1709285334896.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsXpilTgUS4u4oFWr0hUew8DQITi11709285353202.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsWxJm6YIeRYmDtDoB5WtYMjRX8bm1709285366208.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsj69PxKh1SAZ6p0902FbBT0vg2at1709285373714.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fs78nKueByU2cNulReOw8gJ1ZsieF1709285412981.png",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsmAEriTIohZAUMUE6gUCWvXwbbRE1709285429332.png"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M0455CBAA_M900-saddle-bag-with-strap-black-grained-calfskin?objectID=M0455CBAA_M900&query=M0455CBAAM900&queryID=c171c63e69d6d109953e2de631718496",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "Maria Grazia Chiuri brings a fresh update to the iconic Saddle bag. Crafted in black grained calfskin, the legendary design features a Saddle flap with a D stirrup clasp on a magnetic strap, as well as an antique gold-finish metal CD signature on either side of the strap. Equipped with a thin, adjustable and removable shoulder strap, the Saddle bag may be carried by hand, worn over the shoulder or crossbody.",
+    				price: 4400,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsqwogfFahvNml7vmATxwfKLcNlh91710324602536.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsVRd4z4V8UScNc7Wc96xv4xDVByb1710324589932.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Maria Grazia Chiuri",
+    				"Saddle Bags",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "13",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOvqhF71709609258469",
+    			title: "The lady dior bag embodies dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the house's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic cannage topstitching, while the ultra-matte metal d.i.o.r. Charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium lady dior bag can be carried by hand or worn crossbody.",
+    			tags: [
+    				"Thin",
+    				"Removable Shoulder Strap",
+    				"Medium",
+    				"Lady Dior",
+    				"Crossbody",
+    				"Handbags",
+    				"Cross-body & Shoulder Bags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOvqhF71709609258469:default:3::branch:Handbags:13",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0565SDBRM900",
+    				title: "Medium Lady Dior Bag",
+    				tags: [
+    					"Women",
+    					"Black",
+    					"Handbags",
+    					"Hand",
+    					"Lady Dior",
+    					"Crossbody"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0565SDBRM900:default:3::branch:Handbags:13",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:13",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsnyiCm9oirbXLqmqY7231O8O2Yhb1710498970982.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fskwIRRKCtuw9cb9btuubt2D5bXfB1710498970676.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsqXFTCyhxspeYCD3uo4UiuN5vQ7w1710498970671.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs8rDRSKJmWUNI42MjrMWVlI0D9Fz1710498970729.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsca9Cjqo3WMJVU0OL0OjQo8xOoMx1710498972076.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsjl1bxi56X0QrKwfvl8YocBVJ2N81710498971352.jpg"
+    				],
+    				collection: null,
+    				link: "https://www.dior.com/en_us/fashion/products/M0565SDBR_M900-medium-lady-dior-bag-black-patent-to-matte-gradient-cannage-lambskin?objectID=M0565SDBR_M900&query=M0565SDBRM900&queryID=14cc52b35774a9a42e78fd9ba199860e",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the House's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic Cannage topstitching, while the ultra-matte metal D.I.O.R. charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium Lady Dior bag can be carried by hand or worn crossbody.",
+    				price: 7100,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240305/fsHmNyOcNdgB9Y8aIFYWCHlEZVl4x1709608981919.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fslhMX6mwCM4i5XFY6dpcMZdPocYv1710398865153.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsJQCe9rZmsEjuIUpdck9Hs2gpNU81710398856427.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsnHUJufSHptF88bNsyUGmSSKYH4A1710398855734.jpg"
+    			],
+    			hashTags: [
+    				"Lady Dior",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "14",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "M0455CBAAM900",
+    			title: "Saddle Bag with Strap",
+    			tags: [
+    				"Saddle Bags",
+    				"Handbags",
+    				"Maria Grazia Chiuri"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0455CBAAM900:default:3::branch:Handbags:14",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:14",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsiwfgnCrVBGcGPh6gaFsvbYBIpxX1709285334896.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsXpilTgUS4u4oFWr0hUew8DQITi11709285353202.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsWxJm6YIeRYmDtDoB5WtYMjRX8bm1709285366208.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsj69PxKh1SAZ6p0902FbBT0vg2at1709285373714.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fs78nKueByU2cNulReOw8gJ1ZsieF1709285412981.png",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240301/fsmAEriTIohZAUMUE6gUCWvXwbbRE1709285429332.png"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/M0455CBAA_M900-saddle-bag-with-strap-black-grained-calfskin?objectID=M0455CBAA_M900&query=M0455CBAAM900&queryID=c171c63e69d6d109953e2de631718496",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: "Maria Grazia Chiuri brings a fresh update to the iconic Saddle bag. Crafted in black grained calfskin, the legendary design features a Saddle flap with a D stirrup clasp on a magnetic strap, as well as an antique gold-finish metal CD signature on either side of the strap. Equipped with a thin, adjustable and removable shoulder strap, the Saddle bag may be carried by hand, worn over the shoulder or crossbody.",
+    			price: 4400,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	},
+    	{
+    		position: "15",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEO693hq1709628690318",
+    			title: "New for the summer 2024 season, the dior caro top handle camera bag is a sophisticated and practical design. Crafted in black calfskin, the small model is elevated by the originality of the macrocannage stitching's quilted effect. The bag features a zip closure and an antique gold-tone metal cd signature.",
+    			tags: [
+    				"Ready-To-Wear",
+    				"Handbags",
+    				"Signature Hardware Design",
+    				"Monogram/Logo Print",
+    				"Calfskin Leather",
+    				"Summer 2024",
+    				"Black"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEO693hq1709628690318:default:3::branch:Handbags:15",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M3352UBHMM900",
+    				title: "Small Dior Caro Top Handle Camera Bag Black Macrocannage Calfskin ",
+    				tags: [
+    					"Summer 2024",
+    					"Black",
+    					"Women",
+    					"Handbags",
+    					"Dior Caro"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M3352UBHMM900:default:3::branch:Handbags:15",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:15",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsx3wufMP9P6ovvCrXL58eVVA61gI1710499528917.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs82a414vXXhbgMXsw3Zm8TWyDMvI1710499528543.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsJaZoFhur3jfMEciQdk5GMV8O2un1710499528346.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fstO8CRKfBzpJUmAMyCDHDo23ji9N1710499528346.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsagaUiox7KECRhbPn6MScg3s4Nwd1710499528602.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsBsyFADiYBLWHaAIQfNRsgweVOWj1710499529947.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsqJEwfvOLpXQ6nQt76o92XdLwzs11710499529939.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M3352UBHM_M900",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "New for the Summer 2024 season, the Dior Caro Top Handle Camera bag is a sophisticated and practical design. Crafted in black calfskin, the small model is elevated by the originality of the Macrocannage stitching's quilted effect. The bag features a zip closure and an antique gold-tone metal CD signature. ",
+    				price: 3350,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240305/fsZhMDVzP6kuh9Qt86c11whAMglMU1709628656988.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsWrEKA6oRWUmOY14D1POTJjgiks51710401973577.jpg"
+    			],
+    			hashTags: [
+    				"Ready-To-Wear"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "16",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEO2rUuG1709617832960",
+    			title: "The dior toujours bag is distinguished by a casual and practical design. Crafted in black crinkled calfskin with macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize the essentials. Its leather strap closure keeps items secure while the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette.",
+    			tags: [
+    				"Dior Toujours Bag",
+    				"Casual",
+    				"Leather Strap",
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEO2rUuG1709617832960:default:3::branch:Handbags:16",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M2821SNIOM900",
+    				title: "Medium Dior Toujours Bag Black Macrocannage Crinkled Leather",
+    				tags: [
+    					"Medium",
+    					"Black",
+    					"Women",
+    					"Handbags",
+    					"Bucket Bag"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M2821SNIOM900:default:3::branch:Handbags:16",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:16",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsy6AN0OWw3rj8Luw3RTSP9n2kDLq1710497237677.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fszTc3uEUrtppdN9QVVU2XBnaaaBY1710497237986.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKbBMTRa0tTTX661wu7DzLw9OP0r1710497237980.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsOYHlYCwgzalxzmIJcsZmIsJ2L3g1710497237145.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsKJqNVm1ZBlrgZ8XLC0YAaO6ws2F1710497237650.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsm2VoVancBQ20nDHceESUPNLyrUy1710497238312.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs2B5YYmv8OztP3d9rlM2a9KmYswl1710497237339.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M1296ZRIW_M828-medium-dior-book-tote-ecru-and-blue-dior-oblique-embroidery-36-x-27.5-x-16.5-cm",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The dior toujours bag is distinguished by a casual and practical design. Crafted in black crinkled calfskin with macrocannage topstitching, it showcases a spacious interior compartment with a matching pouch to organize the essentials. Its leather strap closure keeps items secure while the d of the cd lock closure twists to adjust the sides and enhance the bag's silhouette.",
+    				price: 4400,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240305/fs0BUtn8TYp4l8gWsg5WD9Ht8AP7R1709617796077.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsmecPfhI3OtZwJmKAXLv8scBSSdK1710399333565.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsfsWBLxbC36B7Pm7Ae1uL98EmoaH1710399333017.jpg"
+    			],
+    			hashTags: [
+    				"Handbags",
+    				"Dior Toujours Bag"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "17",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOGZGZI1709629679782",
+    			title: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless white and navy blue calfskin style offers a new take on the iconic House motif with this season's signature Toile de Jouy Soleil, layering suns and crescent moons into a floral design representing the four seasons. A",
+    			tags: [
+    				"Handbags"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOGZGZI1709629679782:default:3::branch:Handbags:17",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0565OZEDM928",
+    				title: "Medium Lady Dior Bag",
+    				tags: [
+    					"Lady Dior",
+    					"Medium",
+    					"Handbags",
+    					"Crossbody"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0565OZEDM928:default:3::branch:Handbags:17",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:17",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsbVwOx4grEmqCNmvOnKpIS0vTPPc1710499656033.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsJrpY9R8uGenvzM7NnzI4lPMCF8g1710836215790.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsYQG9gipUNt6UbzFPXTwLTNgj5BF1710836214937.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsqPEXjWl7l3wPAxJIZbnnhZPXDCw1710836216838.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsNHlPmAsNYPsGDJ5w0G213wJkwFf1710499654946.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs8dAObnEoAYe1V6pwJOGTs4vCBJO1710499655963.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsJpaBPC8OxQ4aYwxsMcqZpGtPWnq1710499655730.jpg"
+    				],
+    				collection: "Eté 2024",
+    				link: "https://www.dior.com/en_us/fashion/products/M0565OZED_M928",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless white and navy blue calfskin style offers a new take on the iconic House motif with this season's signature Toile de Jouy Soleil, layering suns and crescent moons into a floral design representing the four seasons. Accented by pale gold-finish metal D.I.O.R. charms illuminating the silhouette and featuring a thin, removable leather shoulder strap, the medium Lady Dior bag can be carried by hand or wo",
+    				price: 6500,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240305/fsG1IT2gcB5iabcTL89Xs9bRHISMb1709629659698.jpg",
+    			url: null,
+    			imgUrls: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240314/fsJB1txgzSsQLBBJSTzqGI40BvLkr1710399454552.jpg"
+    			],
+    			hashTags: [
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "18",
+    		isCollected: null,
+    		video: {
+    			itemId: "VIDEOC2IMa1710324169054",
+    			title: "The lady dior bag embodies dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the house's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic cannage topstitching, while the ultra-matte metal d.i.o.r. Charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium lady dior bag can be carried by hand or worn crossbody.",
+    			tags: [
+    				"Lady Dior",
+    				"Removable Shoulder Strap",
+    				"Medium",
+    				"Handbags",
+    				"Crossbody"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:VIDEO:VIDEOC2IMa1710324169054:default:3::branch:Handbags:18",
+    			bindCta: null,
+    			bindProduct: {
+    				itemId: "M0565SDBRM900",
+    				title: "Medium Lady Dior Bag",
+    				tags: [
+    					"Women",
+    					"Black",
+    					"Handbags",
+    					"Hand",
+    					"Lady Dior",
+    					"Crossbody"
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0565SDBRM900:default:3::branch:Handbags:18",
+    				bindCta: {
+    					itemId: "CTAzgoPn1709005149328",
+    					title: "立即购买",
+    					tags: [
+    					],
+    					weight: null,
+    					traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:18",
+    					enTitle: "Shop now",
+    					icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    					link: null,
+    					linkTitle: null,
+    					linkType: null,
+    					menuCategoryId: "65966478d19caa37afe3603f"
+    				},
+    				homePage: [
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsnyiCm9oirbXLqmqY7231O8O2Yhb1710498970982.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fskwIRRKCtuw9cb9btuubt2D5bXfB1710498970676.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsqXFTCyhxspeYCD3uo4UiuN5vQ7w1710498970671.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs8rDRSKJmWUNI42MjrMWVlI0D9Fz1710498970729.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsca9Cjqo3WMJVU0OL0OjQo8xOoMx1710498972076.jpg",
+    					"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsjl1bxi56X0QrKwfvl8YocBVJ2N81710498971352.jpg"
+    				],
+    				collection: null,
+    				link: "https://www.dior.com/en_us/fashion/products/M0565SDBR_M900-medium-lady-dior-bag-black-patent-to-matte-gradient-cannage-lambskin?objectID=M0565SDBR_M900&query=M0565SDBRM900&queryID=14cc52b35774a9a42e78fd9ba199860e",
+    				linkTitle: null,
+    				linkType: "WEB",
+    				info: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless style demonstrates the House's exceptional savoir-faire. The black patent-to-matte gradient lambskin style is embellished with iconic Cannage topstitching, while the ultra-matte metal D.I.O.R. charms lend a modern touch. Featuring a thin, removable leather shoulder strap, the medium Lady Dior bag can be carried by hand or worn crossbody.",
+    				price: 7100,
+    				currency: "USD-$"
+    			},
+    			bindProducts: [
+    			],
+    			cover: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsuF6sqlC9LCBLTgxHwMRinXwB6bF1710324135846.png",
+    			url: "https://dior-sxp-cdn.chatlabs.net/prod/sound/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240313/fsFwNsGElWR2SXQ2tWwHkaiqMZN5H1710324095954.mp4",
+    			imgUrls: null,
+    			hashTags: [
+    				"Lady Dior",
+    				"Handbags"
+    			]
+    		},
+    		product: null,
+    		cta: null
+    	},
+    	{
+    		position: "19",
+    		isCollected: null,
+    		video: null,
+    		product: {
+    			itemId: "M0565OZEDM928",
+    			title: "Medium Lady Dior Bag",
+    			tags: [
+    				"Lady Dior",
+    				"Medium",
+    				"Handbags",
+    				"Crossbody"
+    			],
+    			weight: null,
+    			traceInfo: "VECTOReVssi1704360966770:PRODUCT:M0565OZEDM928:default:3::branch:Handbags:19",
+    			bindCta: {
+    				itemId: "CTAzgoPn1709005149328",
+    				title: "立即购买",
+    				tags: [
+    				],
+    				weight: null,
+    				traceInfo: "VECTOReVssi1704360966770:CTA:CTAzgoPn1709005149328:default:3::branch:Handbags:19",
+    				enTitle: "Shop now",
+    				icon: "https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240227/fsIkhOh3SihCkTDQ3oI41kwCsjq6A1709005134510.png",
+    				link: null,
+    				linkTitle: null,
+    				linkType: null,
+    				menuCategoryId: "65966478d19caa37afe3603f"
+    			},
+    			homePage: [
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsbVwOx4grEmqCNmvOnKpIS0vTPPc1710499656033.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsJrpY9R8uGenvzM7NnzI4lPMCF8g1710836215790.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsYQG9gipUNt6UbzFPXTwLTNgj5BF1710836214937.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240319/fsqPEXjWl7l3wPAxJIZbnnhZPXDCw1710836216838.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsNHlPmAsNYPsGDJ5w0G213wJkwFf1710499654946.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fs8dAObnEoAYe1V6pwJOGTs4vCBJO1710499655963.jpg",
+    				"https://dior-sxp-cdn.chatlabs.net/prod/img/edc1a0de-330e-40e4-bdf3-17d57d57c19b/sxp-portal/20240315/fsJpaBPC8OxQ4aYwxsMcqZpGtPWnq1710499655730.jpg"
+    			],
+    			collection: "Eté 2024",
+    			link: "https://www.dior.com/en_us/fashion/products/M0565OZED_M928",
+    			linkTitle: null,
+    			linkType: "WEB",
+    			info: "The Lady Dior bag embodies Dior's vision of elegance and beauty. Sleek and refined, the timeless white and navy blue calfskin style offers a new take on the iconic House motif with this season's signature Toile de Jouy Soleil, layering suns and crescent moons into a floral design representing the four seasons. Accented by pale gold-finish metal D.I.O.R. charms illuminating the silhouette and featuring a thin, removable leather shoulder strap, the medium Lady Dior bag can be carried by hand or wo",
+    			price: 6500,
+    			currency: "USD-$"
+    		},
+    		cta: null
+    	}
+    ];
+    var hashTag = "Handbags";
+    var previewData = {
+    	productUserId: productUserId,
+    	requestId: requestId,
+    	channel: channel,
+    	rtc: rtc,
+    	tag: tag,
+    	recList: recList,
+    	hashTag: hashTag
+    };
 
-    const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
-        const [isPauseVideo, setIsPauseVideo] = React.useState(false);
-        const videoRef = React.useRef(null);
-        const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
-        const videoStartTime = React.useRef(0);
-        const [isLoad, setIsLoad] = React.useState(false);
-        const { isActive } = useSwiperSlide();
-        React.useEffect(() => {
-            if (!videoRef.current)
-                return;
-            videoRef.current.muted = muted;
-        }, [muted]);
-        const handleVideoStart = React.useCallback(() => {
-            var _a, _b;
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-                return;
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
-        }, []);
-        const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-        const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            setIsPauseVideo(false);
-            const item = data[index];
-            if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-                const playType = '1';
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playVideo',
-                        eventDescription: 'User played the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        playType,
-                        startTime: videoCurrentTime,
-                        videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: item.position,
-                        contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                    }
-                });
-            }
-            if (!isLoad) {
-                setIsLoad(true);
+    const WaterfallFlowItem = (props) => {
+        const { rec, index, list, reportTagsView, textStyles, space } = props;
+        const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+        const [showVideo, setShowVideo] = React.useState(false);
+        const imgDom = React.useRef(null);
+        const videoDom = React.useRef(null);
+        const canvasRef = React.useRef(null);
+        const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
+        const src = React.useMemo(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
+                return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
             }
-        }, [bffEventReport, data, index, isLoad]);
-        const handleLoadedMetadata = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            const item = data[index];
-            if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-                const playType = '0';
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playVideo',
-                        eventDescription: 'User played the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        playType,
-                        startTime: videoCurrentTime,
-                        videoDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: item.position,
-                        contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                    }
-                });
+            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
+                setShowVideo(true);
+                return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
             }
-            setTimeout(() => {
-                var _a, _b;
-                if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-                    return;
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
-            }, 0);
-        }, [index, bffEventReport, data, isLoad]);
-        const handleClickVideo = React.useCallback((type) => () => {
-            var _a, _b, _c, _d, _e, _f;
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-                return;
-            if (!isLoad)
-                return;
-            const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
-            switch (type) {
-                case 'start':
-                    if (!isPause)
-                        return;
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
-                    setIsPauseVideo(false);
-                    break;
-                case 'pause':
-                    if (isPause)
-                        return;
-                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
-                    setIsPauseVideo(true);
-                    break;
-                default:
-                    if (isPause) {
-                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
-                    }
-                    else {
-                        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
-                    }
-                    setIsPauseVideo(!isPause);
-                    break;
+            else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
+                return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
             }
-        }, [data, index, isLoad]);
-        const onPause = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-            const item = data[index];
-            const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-            const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-                const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                    eventInfo: {
-                        eventSubject: 'playOverVideo',
-                        eventDescription: 'User finished playing the video',
-                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                        endTime: videoCurrentTime,
-                        videoDuration,
-                        playDuration,
-                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                        position: item.position,
-                        contentFormat: 'video',
-                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                    }
-                });
+            else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
+                return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
             }
-        }, [data, index, bffEventReport]);
-        React.useEffect(() => {
-            var _a, _b, _c, _d, _e, _f;
-            if (data.length <= 0)
-                return;
-            if (!videoRef.current)
-                return;
-            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-            setIsPauseVideo(false);
-            if (!isActive) {
-                if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
-                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-                return;
+            else {
+                return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
             }
-            if (!videoRef.current.src) {
-                const videoSrc = rec.video.url;
-                // if (videoSrc.includes('.m3u8')) {
-                //   if (Hls.isSupported()) {
-                //     const hls = new Hls();
-                //     hls.loadSource(videoSrc);
-                //     hls.attachMedia(videoRef.current);
-                //   } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
-                //     videoRef.current.src = videoSrc;
-                //   } else {
-                //     videoRef.current.src = videoSrc;
-                //   }
-                // } else {
-                //   videoRef.current.src = videoSrc;
-                // }
-                videoRef.current.src = videoSrc;
-                videoRef.current.setAttribute('x5-playsinline', 'true');
-                videoRef.current.setAttribute('webkit-playsinline', 'true');
+        }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
+        const title = React.useMemo(() => {
+            var _a, _b;
+            return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
+        }, [rec]);
+        const priceText = React.useMemo(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
+                return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _j !== void 0 ? _j : ''}`;
             }
             else {
-                if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
-                    return;
-                videoRef.current.play();
+                return null;
             }
-            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
-            (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
+        }, [rec]);
+        // useEffect(() => {
+        //   if (imgDom.current === null || src === '') {
+        //     return;
+        //   }
+        //   const img = new Image();
+        //   if (showVideo && firstFrameSrc) {
+        //     img.src = firstFrameSrc;
+        //   } else {
+        //     img.src = src;
+        //   }
+        //   // img.onload = () => {
+        //   //   setIsLoading(true);
+        //   // };
+        //   imgDom.current.src = img.src;
+        // }, [src, showVideo, firstFrameSrc]);
+        React.useEffect(() => {
+            const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        if (imgDom.current === null || src === '') {
+                            return;
+                        }
+                        if (showVideo && firstFrameSrc) {
+                            imgDom.current.src = firstFrameSrc;
+                        }
+                        else {
+                            imgDom.current.src = src;
+                        }
+                        observer.unobserve(imgDom.current);
+                    }
+                });
+            });
+            observer.observe(imgDom.current);
             return () => {
-                var _a, _b;
-                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
-                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
+                observer.disconnect();
             };
-        }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
-        /*
-        打开/关闭hashtag暂停/播放视频
-        */
+        }, [src, showVideo, firstFrameSrc]);
+        const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
+            const aspectRatio = videoWidth / videoHeight;
+            const targetHeight = targetWidth / aspectRatio;
+            return targetHeight;
+        };
         React.useEffect(() => {
-            var _a, _b, _c, _d;
-            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
-                return;
-            const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
-            if (!isActive)
+            const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
+            if (video === null || src === '' || !showVideo) {
                 return;
-            if (!isPause && openHashtag) {
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
-            }
-            else if (!openHashtag) {
-                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
             }
-        }, [openHashtag, isActive]);
-        React.useEffect(() => {
-            if (!isActive)
-                return;
-            const onShow = handleClickVideo('start');
-            const onHide = handleClickVideo('pause');
-            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
-            return () => {
-                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+            video.src = src;
+            video.currentTime = 1;
+            video.crossOrigin = 'anonymous';
+            video.onloadeddata = () => {
+                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+                if (!canvas)
+                    return;
+                const ctx = canvas.getContext('2d');
+                const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
+                const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
+                canvas.height = targetHeight;
+                canvas.width = targetWidth;
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                setFirstFrameSrc(canvas.toDataURL());
+                video.remove();
+                canvas.remove();
             };
-        }, [handleClickVideo, isActive]);
-        const renderPoster = React.useMemo(() => {
-            if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
-                return null;
+        }, [src, showVideo]);
+        const handleClickToDetail = () => {
+            reportTagsView();
+            setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
+            setTimeout(() => {
+                var _a;
+                (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
+                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+            }, 0);
+        };
+        return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
+            React.createElement("div", { className: 'list-content-listItem-picture' },
+                showVideo && (React.createElement("div", { style: { display: 'none' } },
+                    React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
+                    React.createElement("canvas", { ref: canvasRef }))),
+                React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
+            React.createElement("div", { className: 'list-content-listItem-info' },
+                React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
+                React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles.price, hidden: !priceText }, priceText))));
+    };
+    function WaterfallList(_a) {
+        var _b, _c, _d, _e, _f, _g, _h;
+        var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
+        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
+        const [list, setList] = React.useState();
+        const [data, setData] = React.useState();
+        const [isLoadingData, setIsLoadingData] = React.useState(false);
+        const containerRef = React.useRef(null);
+        const [isLoadMore, setIsLoadMore] = React.useState(false);
+        React.useCallback(() => {
+            if (isLoadMore)
+                return;
+            setIsLoadMore(true);
+            waterFallData &&
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                    hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                    'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                    'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
+                }).then((res) => {
+                    var _a;
+                    setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
+                    setIsLoadMore(false);
+                }));
+        }, [waterFallData, getRecommendVideos, list, isLoadMore]);
+        React.useEffect(() => {
+            var _a, _b;
+            setIsLoadingData(true);
+            waterFallData &&
+                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
+                    hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
+                    'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
+                    'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
+                    defaultSize: hashTagSize
+                }).then((res) => {
+                    var _a, _b;
+                    setData(res);
+                    setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                    setIsLoadingData(false);
+                }));
+            if (isOpenHashTag) {
+                const res = previewData;
+                setData(res);
+                setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
+                setIsLoadingData(false);
             }
-            return (React.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
-        }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+        }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
+        // useEffect(() => {
+        //   const container = containerRef?.current;
+        //   if (!container) return;
+        //   const handleScroll = () => {
+        //     const top = (container as any)?.scrollTop;
+        //     const clientHeight = (container as any)?.clientHeight;
+        //     const scrollHeight = (container as any)?.scrollHeight;
+        //     if (scrollHeight <= top + clientHeight && !isLoadingData) {
+        //       loadMoreData();
+        //     }
+        //   };
+        //   container?.addEventListener('scroll', handleScroll);
+        //   return () => {
+        //     container?.removeEventListener('scroll', handleScroll); // 在组件卸载时移除事件监听器
+        //   };
+        // }, [isLoadingData, containerRef, loadMoreData]);
+        const handleClickLink = () => {
+            var _a, _b;
+            if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
+                reportTagsView();
+                window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
+            }
+        };
+        return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+            React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
+            React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
+                    bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
+                } },
+                React.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
+                React.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
+                React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
+                    return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
+                })),
+                React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
+            React.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
+                React.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
+    }
+
+    var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-01-10 10:58:24
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-04-07 15:18:35
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
+     *
+     */
+    const WaterFall = (props) => {
+        var _a;
+        const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = useSxpDataSource();
+        React.useRef(null);
+        const modalEleRef = React.useRef(null);
+        const [viewTime, setViewTime] = React.useState();
         React.useEffect(() => {
-            const handleBeforeUnload = () => {
+            const parentNode = document.getElementById('sxp-render');
+            const node = document.getElementById('water-fall');
+            if (node) {
+                modalEleRef.current = node;
+            }
+            else {
+                modalEleRef.current = document.createElement('div');
+                modalEleRef.current.setAttribute('id', 'water-fall');
+                parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(modalEleRef.current);
+            }
+        }, []);
+        const handleClose = () => {
+            const isEq = lodash.isEqual(rtcList, cacheRtcList);
+            if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
+                setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
+            }
+            reportTagsView();
+            setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
+            setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
+            setTimeout(() => {
                 var _a, _b;
-                if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
-                    handleClickVideo('pause')();
+                if (!isEq) {
+                    (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(cacheActiveIndex, 0, false);
+                }
+                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
+            }, 0);
+        };
+        const [recData, setRecData] = React.useState();
+        React.useEffect(() => {
+            if (waterFallData) {
+                setRecData(waterFallData);
+            }
+        }, [waterFallData]);
+        const reportTagsView = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f;
+            const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
+            if (!rec)
+                return;
+            let fromKName = '';
+            if (isFromHashtag) {
+                fromKName = 'hashTagPage';
+            }
+            else if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+                fromKName = 'videoPage';
+            }
+            else if ((_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
+                fromKName = 'imagePage';
+            }
+            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                eventInfo: {
+                    relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                    position: rec === null || rec === void 0 ? void 0 : rec.position,
+                    contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
+                    traceInfo: JSON.stringify((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo),
+                    hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
+                    fromKName,
+                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
+                    timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
+                    eventSubject: 'clickTagsViewContents',
+                    eventDescription: 'User click tags view contents'
                 }
+            });
+        }, [recData, bffEventReport, viewTime, isFromHashtag]);
+        React.useEffect(() => {
+            if (openHashtag) {
+                setViewTime(new Date());
+            }
+        }, [openHashtag]);
+        React.useEffect(() => {
+            const initTime = () => {
+                setViewTime(new Date());
             };
-            window.addEventListener('beforeunload', handleBeforeUnload);
+            window.addEventListener('pageshow', initTime);
             return () => {
-                window.removeEventListener('beforeunload', handleBeforeUnload);
+                window.removeEventListener('pageshow', initTime);
             };
-        }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-        if (!rec.video) {
+        }, []);
+        if (!modalEleRef.current)
             return null;
-        }
-        return (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-                position: 'relative',
-                width: '100%',
-                height
+        return ReactDOM__namespace.createPortal(React.createElement("div", { className: 'waterfall', style: {
+                display: openHashtag ? 'block' : 'none'
             } },
-            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
-            renderPoster,
-            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+            React.createElement(Navbar$1, { icon: img$1, styles: { top: '32px' }, textStyle: (_a = props === null || props === void 0 ? void 0 : props.textStyles) === null || _a === void 0 ? void 0 : _a.hashTagTitle, onClose: handleClose }),
+            React.createElement(WaterfallList, Object.assign({ reportTagsView: reportTagsView }, props))), modalEleRef.current);
     };
-    var VideoWidget$1 = React.memo(VideoWidget);
+    var WaterFall$1 = React.memo(WaterFall);
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2023-12-27 19:02:59
+     * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-01-24 10:30:13
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ToggleButton\index.tsx
+     * @LastEditTime: 2024-04-07 15:42:10
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\index.tsx
      *
      */
-    const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
-        const [isTrue, setIsTure] = React.useState(defaultValue);
-        const handleClick = (e) => {
-            e.stopPropagation();
-            const result = !isTrue;
-            setIsTure(result);
-            onChange === null || onChange === void 0 ? void 0 : onChange(result);
-        };
-        return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
-            React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
+    const HashTag$1 = (props) => {
+        return React.createElement(WaterFall$1, Object.assign({}, props));
     };
-    var ToggleButton$1 = React.memo(ToggleButton);
+    var HashTagComponent = React.memo(HashTag$1);
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-01-15 19:03:09
+     * @Date: 2023-07-28 18:29:57
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-13 10:53:56
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
+     * @LastEditTime: 2024-04-07 16:22:28
+     * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
      *
      */
-    const FingerSwipeTip = ({ imageUrl }) => {
-        const [show, setShow] = React.useState(true);
-        useEditor();
-        React.useEffect(() => {
-            setTimeout(() => {
-                setShow(false);
-            }, 2000);
-        }, []);
-        const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
-        const animationCls = React.useMemo(() => {
-            return show ? 'pb-fadeIn' : 'pb-fadeOut';
-        }, [show]);
-        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
-            React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
-    };
-
-    const Picture = (props) => {
-        const { src, height, width } = props;
-        const imgDom = React.useRef(null);
-        const { sxpParameter } = useSxpDataSource();
-        return (React.createElement("div", { style: {
-                overflow: 'hidden',
-                height,
-                width: '100%',
-                position: 'relative'
-            } },
-            React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover'
-                } })));
-    };
-
-    /*
-     * @Author: lewinlu@chatlabs.com
-     * @Date: 2024-01-03 14:39:09
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-25 15:08:11
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
-     */
-    const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
-        const { isActive } = useSwiperSlide();
-        const { sxpParameter, openHashtag } = useSxpDataSource();
-        const [isLoad, setIsLoad] = React.useState(false);
-        React.useEffect(() => {
-            if (isLoad && isActive) {
-                if (openHashtag) {
-                    onReportViewImageEnd(rec);
-                }
-                else {
-                    onViewImageStartEvent(index);
+    const HashTag = createMaterial(HashTagComponent, {
+        displayName: '',
+        icon: '',
+        category: 'base',
+        type: 'HashTag',
+        related: {
+            settingRender,
+            bindableProps: []
+        },
+        defaulSetting: {
+            props: {
+                lineClamp: 1,
+                space: 40,
+                textStyles: {
+                    hashTagTitle: {
+                        fontSize: 16,
+                        color: '#000'
+                    },
+                    hashTagDesc: {
+                        fontSize: 12,
+                        textAlign: 'center',
+                        color: '#000'
+                    },
+                    title: {
+                        fontSize: 12,
+                        color: '#000'
+                    },
+                    price: {
+                        fontSize: 12,
+                        fontWeight: 'bold',
+                        color: '#000'
+                    }
+                },
+                buttonStyle: {
+                    backgroundColor: '#000',
+                    fontSize: 12,
+                    height: 52,
+                    fontWeight: 'bold',
+                    textAlign: 'center',
+                    color: '#fff',
+                    borderRadius: 25
                 }
             }
-            else {
-                setIsLoad(true);
-            }
-        }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-        if (!isActive) {
-            return React.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
-        }
-        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-            return (React.createElement(SwiperSlide, { key: url },
-                React.createElement(Picture, { src: url, width: width, height: height })));
-        })));
-    };
-    var PictureGroup$1 = React.memo(PictureGroup);
+        },
+        w: 100,
+        h: 40,
+        sort: 2
+    });
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-01-15 19:03:09
+     * @Date: 2023-07-25 14:56:49
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-25 10:42:07
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
+     * @LastEditTime: 2024-03-20 13:46:06
+     * @FilePath: \pb-sxp-ui\src\materials\index.ts
      *
      */
-    const Hashtag = ({ tags, itemId, itemType, index, rec }) => {
-        const [isShowMore, setIsShowMore] = React.useState(false);
-        const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
-        const handleClickTag = (data) => {
-            if (!waterFallData) {
-                setCacheActiveIndex === null || setCacheActiveIndex === void 0 ? void 0 : setCacheActiveIndex(index);
-            }
-            else {
-                setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(true);
-            }
-            if (itemType) {
-                setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
-                    hashTag: data,
-                    itemId,
-                    itemType,
-                    rec
+
+    var _materials_ = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Appoint: Appoint,
+        AppointForm: AppointForm,
+        Commodity: Commodity,
+        CommodityDetail: CommodityDetail,
+        CommodityDetailDiroNew: CommodityDetailDiroNew,
+        CommodityDiro: CommodityDiro,
+        CommodityDiroNew: CommodityDiroNew,
+        HashTag: HashTag,
+        Link: Link,
+        MultiCommodity: MultiCommodity,
+        MultiCommodityDiro: MultiCommodityDiro,
+        MultiCommodityDiroNew: MultiCommodityDiroNew,
+        Prompt: Prompt
+    });
+
+    const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+    const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+    const LikeButton = (_a) => {
+        var { active, activeIcon, unActicveIcon, recData } = _a, props = __rest(_a, ["active", "activeIcon", "unActicveIcon", "recData"]);
+        const { mutateLike, mutateUnlike, bffEventReport } = useSxpDataSource();
+        const [state, setState] = React.useState(active);
+        const likeIcon = useIconLink(defaultLikeIconPath);
+        const unlikeIcon = useIconLink(defaultUnLikeIconPath);
+        const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
+            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            if (state) {
+                // 先设置状态
+                setState(false);
+                const result = (_d = (yield (mutateUnlike === null || mutateUnlike === void 0 ? void 0 : mutateUnlike({ videoItemId: (_c = (_b = recData.video) === null || _b === void 0 ? void 0 : _b.itemId) !== null && _c !== void 0 ? _c : '' })))) !== null && _d !== void 0 ? _d : false;
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'favoriteContentCanceled',
+                        eventDescription: 'This content was unfavorite by the user',
+                        contentId: (_f = (_e = recData.video) === null || _e === void 0 ? void 0 : _e.itemId) !== null && _f !== void 0 ? _f : '',
+                        contentName: (_h = (_g = recData.video) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : '',
+                        contentTags: JSON.stringify((_k = (_j = recData.video) === null || _j === void 0 ? void 0 : _j.tags) !== null && _k !== void 0 ? _k : []),
+                        position: recData.position,
+                        contentFormat: ((_l = recData.video) === null || _l === void 0 ? void 0 : _l.url) ? 'video' : 'image',
+                        traceInfo: (_m = recData.video) === null || _m === void 0 ? void 0 : _m.traceInfo
+                    }
                 });
+                // 如果接口调用失败，则回滚状态
+                if (!result) {
+                    setState(true);
+                }
             }
             else {
-                setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
-                    hashTag: data,
-                    rec
+                setState(true);
+                const result = (_o = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _o !== void 0 ? _o : false;
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'favoriteContent',
+                        eventDescription: 'This content was favorite by the user',
+                        contentId: (_q = (_p = recData.video) === null || _p === void 0 ? void 0 : _p.itemId) !== null && _q !== void 0 ? _q : '',
+                        contentName: (_s = (_r = recData.video) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : '',
+                        contentTags: JSON.stringify((_u = (_t = recData.video) === null || _t === void 0 ? void 0 : _t.tags) !== null && _u !== void 0 ? _u : []),
+                        position: recData.position,
+                        contentFormat: ((_v = recData.video) === null || _v === void 0 ? void 0 : _v.url) ? 'video' : 'image',
+                        traceInfo: (_w = recData.video) === null || _w === void 0 ? void 0 : _w.traceInfo
+                    }
                 });
+                if (!result) {
+                    setState(false);
+                }
             }
-            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
-        };
-        React.useMemo(() => {
-            if (tags.length <= 6) {
-                return null;
-            }
-            return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
-        }, [isShowMore, tags]);
-        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
-            React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', onClick: () => handleClickTag(item) }, `#${item}`))))));
-    };
-    var Hashtag$1 = React.memo(Hashtag);
-
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-12-26 16:11:34
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-04 17:35:19
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Navbar.tsx
-     *
-     */
-    const Navbar = ({ icon, styles, onClose }) => {
-        const { waterFallData, setOpenHashtag } = useSxpDataSource();
-        return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
-            React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
-            React.createElement("div", { className: 'clc-sxp-nav-title' }, `#${waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag}`)));
+        }), 200);
+        return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
+            React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
     };
-    var Navbar$1 = React.memo(Navbar);
+    var LikeButton$1 = React.memo(LikeButton);
 
-    var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAbtJREFUeF7t2DFKxFAQxvHv6xTxCoKNiAuCna2X2NY7eAE9hYdwj2BjZ2ulYLW9pQcYDWyxBIK7ZN7MNyapk/D+v8zC20dM/OLE+zEDzBMwcYH5J1BpAMzsAMAJyU+vdZeZADN7AHAH4BjAC8kbD4QSAJv4+17wFcm3sQjyAGbWhXdff/takzwdG989Lw0wEN+te0ly9a8BIuJlJyAqXhIgMl4OIDpeCiAjXgYgK14CIDM+HSA7PhVgYHvrusnZZaOUshNUiU+ZAKX4cAC1+FAAxfgwANX4EADl+OYA6vFNASrENwOoEt8EoFK8O0C1eFcAMzsE8AXgqLcHdzvA3GVvv+89bv8FzOwcwEdvASuSy30XFXm/G0C3aDN7BXBdCcEb4ALAE4BFFQRXgM0UlEJwB6iG0ASgEkIzgCoITQEqIDQHUEcIAVBGCANQRQgFUEQIB1BDSAFQQkgDUEFIBVBASAfIRpAAyESQAchCkALIQJADiEaQBIhEkAWIQpAG+ANh8Xvk/j72CF0eYABhDeCS5PckALYQbgGcAXgm+Tg2vnu+xAR4hA69YwZoqVvh3fMEVPhKLdc4+Qn4AXwYBFBN2dYpAAAAAElFTkSuQmCC";
+    const SXP_EVENT_BUS = new EventEmitter();
+    var SXP_EVENT_TYPE;
+    (function (SXP_EVENT_TYPE) {
+        SXP_EVENT_TYPE["PAGE_DID_SHOW"] = "pageDidShow";
+        SXP_EVENT_TYPE["PAGE_DID_HIDE"] = "pageDidHide";
+    })(SXP_EVENT_TYPE || (SXP_EVENT_TYPE = {}));
 
-    function withBindDataSource(Component) {
-        // 处理函数事件中的数据源
-        return React.memo(function (props) {
-            const { $store } = useDataSource();
-            const handleDataSourceByEvent = (value) => {
-                let res = value;
-                const dataArr = value.match(/{{.*?}}/g);
-                if (dataArr === null || dataArr === void 0 ? void 0 : dataArr.length) {
-                    dataArr.forEach((item) => {
-                        item.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
-                            if (p) {
-                                const v = lodash.get($store, p);
-                                res = res.replace(item, v);
-                                return v;
-                            }
-                        });
-                    });
-                }
-                return res;
-            };
-            const clonedProps = React.useMemo(() => {
-                var _a, _b, _c;
-                const { bindDatas } = props, cloneProps = __rest(props, ["bindDatas"]);
-                (_a = bindDatas === null || bindDatas === void 0 ? void 0 : bindDatas.forEach) === null || _a === void 0 ? void 0 : _a.call(bindDatas, (d) => {
-                    if ((d === null || d === void 0 ? void 0 : d.propKey) && (d === null || d === void 0 ? void 0 : d.dataPath)) {
-                        const { propKey, dataPath } = d;
-                        dataPath.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
-                            var _a, _b;
-                            if (p) {
-                                const v = (_b = (_a = lodash.get($store, p)) !== null && _a !== void 0 ? _a : props[propKey]) !== null && _b !== void 0 ? _b : '';
-                                cloneProps[propKey] = v;
-                                return v;
-                            }
-                        });
+    const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+        const [isPauseVideo, setIsPauseVideo] = React.useState(false);
+        const videoRef = React.useRef(null);
+        const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
+        const videoStartTime = React.useRef(0);
+        const [isLoad, setIsLoad] = React.useState(false);
+        const { isActive } = useSwiperSlide();
+        React.useEffect(() => {
+            if (!videoRef.current)
+                return;
+            videoRef.current.muted = muted;
+        }, [muted]);
+        const handleVideoStart = React.useCallback(() => {
+            var _a, _b;
+            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+                return;
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+        }, []);
+        const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+        const handlePlaying = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            setIsPauseVideo(false);
+            const item = data[index];
+            if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
+                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+                const playType = '1';
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'playVideo',
+                        eventDescription: 'User played the video',
+                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                        playType,
+                        startTime: videoCurrentTime,
+                        videoDuration,
+                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        position: item.position,
+                        contentFormat: 'video',
+                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                     }
                 });
-                if (cloneProps) {
-                    cloneProps.eventMap = {};
-                    const eventObj = lodash.cloneDeep(cloneProps.event) || {};
-                    for (const key in eventObj) {
-                        if (Object.prototype.hasOwnProperty.call(eventObj, key)) {
-                            try {
-                                eventObj[key].value = handleDataSourceByEvent(eventObj[key].value);
-                                cloneProps.eventMap[key] = new Function(eventObj[key].value);
-                            }
-                            catch (error) { }
-                        }
-                    }
-                }
-                if ((_c = (_b = cloneProps === null || cloneProps === void 0 ? void 0 : cloneProps.event) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.linkType) {
-                    cloneProps.style.cursor = 'pointer';
-                }
-                return cloneProps;
-            }, [$store, props]);
-            return React.createElement(Component, Object.assign({}, clonedProps, clonedProps.eventMap));
-        });
-    }
-
-    /*
-     * @Author: binruan@chatlabs.com
-     * @Date: 2023-12-26 16:11:34
-     * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-04 14:25:27
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
-     *
-     */
-    const RenderCard = ({ rec, index, tempMap, resolver }) => {
-        const { schema } = useEditor();
-        const renderComp = React.useMemo(() => {
-            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;
-            if (!(rec === null || rec === void 0 ? void 0 : rec.video))
-                return null;
-            let cta = null;
-            if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
-                cta = '多商品CTA';
-            }
-            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
-                cta = '商品CTA';
-            }
-            else {
-                cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
-            }
-            const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-            if ((((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDiro' && !((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct)) ||
-                (((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'Commodity' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
-                (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'CommodityDiroNew' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
-                (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodity' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
-                (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiro' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length)) ||
-                (((_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type) === 'MultiCommodityDiroNew' && !((_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v.length))) {
-                return null;
             }
-            if (value && resolver) {
-                const Component = withBindDataSource(resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type]);
-                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign({}, (_x = value === null || value === void 0 ? void 0 : value.item) === null || _x === void 0 ? void 0 : _x.style), { zIndex: 50, marginLeft: '20px' }), textStyle: (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.textStyle, bindDatas: (_0 = (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.bindDatas) !== null && _0 !== void 0 ? _0 : [] }, (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.props, { event: ((_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec })));
-            }
-            else {
-                return null;
-            }
-        }, [rec, resolver, tempMap, schema]);
-        return React.createElement(React.Fragment, null, renderComp);
-    };
-    var RenderCard$1 = React.memo(RenderCard);
-
-    const WaterfallFlowItem = (props) => {
-        const { rec, index, list, reportTagsView } = props;
-        const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
-        const [showVideo, setShowVideo] = React.useState(false);
-        const imgDom = React.useRef(null);
-        const videoDom = React.useRef(null);
-        const canvasRef = React.useRef(null);
-        const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
-        const src = React.useMemo(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
-                return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
+            if (!isLoad) {
+                setIsLoad(true);
             }
-            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
-                setShowVideo(true);
-                return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
+        }, [bffEventReport, data, index, isLoad]);
+        const handleLoadedMetadata = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            const item = data[index];
+            if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+                videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
+                const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+                const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
+                const playType = '0';
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'playVideo',
+                        eventDescription: 'User played the video',
+                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                        playType,
+                        startTime: videoCurrentTime,
+                        videoDuration,
+                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        position: item.position,
+                        contentFormat: 'video',
+                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                    }
+                });
             }
-            else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
-                return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
+            setTimeout(() => {
+                var _a, _b;
+                if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+                    return;
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+            }, 0);
+        }, [index, bffEventReport, data, isLoad]);
+        const handleClickVideo = React.useCallback((type) => () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+                return;
+            if (!isLoad)
+                return;
+            const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
+            switch (type) {
+                case 'start':
+                    if (!isPause)
+                        return;
+                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
+                    setIsPauseVideo(false);
+                    break;
+                case 'pause':
+                    if (isPause)
+                        return;
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.pause();
+                    setIsPauseVideo(true);
+                    break;
+                default:
+                    if (isPause) {
+                        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
+                    }
+                    else {
+                        (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
+                    }
+                    setIsPauseVideo(!isPause);
+                    break;
             }
-            else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
-                return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
+        }, [data, index, isLoad]);
+        const onPause = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+            const item = data[index];
+            const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
+            const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
+            if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
+                const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
+                bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
+                    eventInfo: {
+                        eventSubject: 'playOverVideo',
+                        eventDescription: 'User finished playing the video',
+                        contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
+                        contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
+                        endTime: videoCurrentTime,
+                        videoDuration,
+                        playDuration,
+                        contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
+                        position: item.position,
+                        contentFormat: 'video',
+                        traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                    }
+                });
             }
-            else {
-                return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
+        }, [data, index, bffEventReport]);
+        React.useEffect(() => {
+            var _a, _b, _c, _d, _e, _f;
+            if (data.length <= 0)
+                return;
+            if (!videoRef.current)
+                return;
+            const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+            setIsPauseVideo(false);
+            if (!isActive) {
+                if (!isPause && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.readyState) >= 2)
+                    (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                return;
             }
-        }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
-        const title = React.useMemo(() => {
-            var _a, _b;
-            return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
-        }, [rec]);
-        const priceText = React.useMemo(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
-                return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _j !== void 0 ? _j : ''}`;
+            if (!videoRef.current.src) {
+                const videoSrc = rec.video.url;
+                // if (videoSrc.includes('.m3u8')) {
+                //   if (Hls.isSupported()) {
+                //     const hls = new Hls();
+                //     hls.loadSource(videoSrc);
+                //     hls.attachMedia(videoRef.current);
+                //   } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+                //     videoRef.current.src = videoSrc;
+                //   } else {
+                //     videoRef.current.src = videoSrc;
+                //   }
+                // } else {
+                //   videoRef.current.src = videoSrc;
+                // }
+                videoRef.current.src = videoSrc;
+                videoRef.current.setAttribute('x5-playsinline', 'true');
+                videoRef.current.setAttribute('webkit-playsinline', 'true');
             }
             else {
-                return null;
+                if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.readyState) < 2)
+                    return;
+                videoRef.current.play();
             }
-        }, [rec]);
-        // useEffect(() => {
-        //   if (imgDom.current === null || src === '') {
-        //     return;
-        //   }
-        //   const img = new Image();
-        //   if (showVideo && firstFrameSrc) {
-        //     img.src = firstFrameSrc;
-        //   } else {
-        //     img.src = src;
-        //   }
-        //   // img.onload = () => {
-        //   //   setIsLoading(true);
-        //   // };
-        //   imgDom.current.src = img.src;
-        // }, [src, showVideo, firstFrameSrc]);
-        React.useEffect(() => {
-            const observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        if (imgDom.current === null || src === '') {
-                            return;
-                        }
-                        if (showVideo && firstFrameSrc) {
-                            imgDom.current.src = firstFrameSrc;
-                        }
-                        else {
-                            imgDom.current.src = src;
-                        }
-                        observer.unobserve(imgDom.current);
-                    }
-                });
-            });
-            observer.observe(imgDom.current);
+            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('canplay', handleLoadedMetadata);
+            (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
             return () => {
-                observer.disconnect();
+                var _a, _b;
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
             };
-        }, [src, showVideo, firstFrameSrc]);
-        const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
-            const aspectRatio = videoWidth / videoHeight;
-            const targetHeight = targetWidth / aspectRatio;
-            return targetHeight;
-        };
+        }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
+        /*
+        打开/关闭hashtag暂停/播放视频
+        */
         React.useEffect(() => {
-            const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
-            if (video === null || src === '' || !showVideo) {
+            var _a, _b, _c, _d;
+            if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.readyState) < 2)
+                return;
+            const isPause = (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.paused;
+            if (!isActive)
                 return;
+            if (!isPause && openHashtag) {
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
             }
-            video.src = src;
-            video.currentTime = 1;
-            video.crossOrigin = 'anonymous';
-            video.onloadeddata = () => {
-                const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-                if (!canvas)
-                    return;
-                const ctx = canvas.getContext('2d');
-                const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
-                const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
-                canvas.height = targetHeight;
-                canvas.width = targetWidth;
-                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-                setFirstFrameSrc(canvas.toDataURL());
-                video.remove();
-                canvas.remove();
+            else if (!openHashtag) {
+                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+            }
+        }, [openHashtag, isActive]);
+        React.useEffect(() => {
+            if (!isActive)
+                return;
+            const onShow = handleClickVideo('start');
+            const onHide = handleClickVideo('pause');
+            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+            return () => {
+                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+                SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
             };
-        }, [src, showVideo]);
-        const handleClickToDetail = () => {
-            reportTagsView();
-            setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
-            setTimeout(() => {
-                var _a;
-                (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
-                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
-            }, 0);
+        }, [handleClickVideo, isActive]);
+        const renderPoster = React.useMemo(() => {
+            if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
+                return null;
+            }
+            return (React.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+        }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+        React.useEffect(() => {
+            const handleBeforeUnload = () => {
+                var _a, _b;
+                if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
+                    handleClickVideo('pause')();
+                }
+            };
+            window.addEventListener('beforeunload', handleBeforeUnload);
+            return () => {
+                window.removeEventListener('beforeunload', handleBeforeUnload);
+            };
+        }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+        if (!rec.video) {
+            return null;
+        }
+        return (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+                position: 'relative',
+                width: '100%',
+                height
+            } },
+            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
+            renderPoster,
+            React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+    };
+    var VideoWidget$1 = React.memo(VideoWidget);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-12-27 19:02:59
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-01-24 10:30:13
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\ToggleButton\index.tsx
+     *
+     */
+    const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
+        const [isTrue, setIsTure] = React.useState(defaultValue);
+        const handleClick = (e) => {
+            e.stopPropagation();
+            const result = !isTrue;
+            setIsTure(result);
+            onChange === null || onChange === void 0 ? void 0 : onChange(result);
         };
-        return (React.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail },
-            React.createElement("div", { className: 'list-content-listItem-picture' },
-                showVideo && (React.createElement("div", { style: { display: 'none' } },
-                    React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
-                    React.createElement("canvas", { ref: canvasRef }))),
-                React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
-            React.createElement("div", { className: 'list-content-listItem-info' },
-                React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}` }, title && title),
-                React.createElement("div", { className: 'list-content-listItem-info-price', hidden: !priceText }, priceText))));
+        return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
+            React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
     };
-    function WaterfallList({ reportTagsView }) {
-        var _a, _b, _c, _d, _e, _f;
-        const { waterFallData, getRecommendVideos, hashTagSize, loadingImage } = useSxpDataSource();
-        const [list, setList] = React.useState();
-        const [data, setData] = React.useState();
-        const [isLoadingData, setIsLoadingData] = React.useState(false);
-        const containerRef = React.useRef(null);
-        const [isLoadMore, setIsLoadMore] = React.useState(false);
-        React.useCallback(() => {
-            if (isLoadMore)
-                return;
-            setIsLoadMore(true);
-            waterFallData &&
-                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
-                    hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
-                    'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
-                    'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
-                }).then((res) => {
-                    var _a;
-                    setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
-                    setIsLoadMore(false);
-                }));
-        }, [waterFallData, getRecommendVideos, list, isLoadMore]);
+    var ToggleButton$1 = React.memo(ToggleButton);
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2024-01-15 19:03:09
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-03-13 10:53:56
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FingerSwipeTip\index.tsx
+     *
+     */
+    const FingerSwipeTip = ({ imageUrl }) => {
+        const [show, setShow] = React.useState(true);
+        useEditor();
         React.useEffect(() => {
-            setIsLoadingData(true);
-            waterFallData &&
-                (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
-                    hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
-                    'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
-                    'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
-                    defaultSize: hashTagSize
-                }).then((res) => {
-                    var _a, _b;
-                    setData(res);
-                    setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
-                    setIsLoadingData(false);
-                }));
-        }, [waterFallData, getRecommendVideos, hashTagSize]);
-        // useEffect(() => {
-        //   const container = containerRef?.current;
-        //   if (!container) return;
-        //   const handleScroll = () => {
-        //     const top = (container as any)?.scrollTop;
-        //     const clientHeight = (container as any)?.clientHeight;
-        //     const scrollHeight = (container as any)?.scrollHeight;
-        //     if (scrollHeight <= top + clientHeight && !isLoadingData) {
-        //       loadMoreData();
-        //     }
-        //   };
-        //   container?.addEventListener('scroll', handleScroll);
-        //   return () => {
-        //     container?.removeEventListener('scroll', handleScroll); // 在组件卸载时移除事件监听器
-        //   };
-        // }, [isLoadingData, containerRef, loadMoreData]);
-        const handleClickLink = () => {
-            var _a, _b;
-            if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
-                reportTagsView();
-                window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
-            }
-        };
-        return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-            React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
-            React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
-                    bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
-                } },
-                React.createElement("div", { className: 'list-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
-                React.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'list-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
-                React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                    return (React.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }));
-                })),
-                React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
-            React.createElement("div", { className: 'list-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
-                React.createElement("button", { className: 'list-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'))))));
-    }
+            setTimeout(() => {
+                setShow(false);
+            }, 2000);
+        }, []);
+        const FINGER_SWIPE_ICON = useIconLink('/pb_static/finger-swipe-tip.29dc3a48a3c746c906ea..png');
+        const animationCls = React.useMemo(() => {
+            return show ? 'pb-fadeIn' : 'pb-fadeOut';
+        }, [show]);
+        return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}` },
+            React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
+    };
+
+    const Picture = (props) => {
+        const { src, height, width } = props;
+        const imgDom = React.useRef(null);
+        const { sxpParameter } = useSxpDataSource();
+        return (React.createElement("div", { style: {
+                overflow: 'hidden',
+                height,
+                width: '100%',
+                position: 'relative'
+            } },
+            React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+                    height: '100%',
+                    width: '100%',
+                    objectFit: 'cover'
+                } })));
+    };
 
-    var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
+    /*
+     * @Author: lewinlu@chatlabs.com
+     * @Date: 2024-01-03 14:39:09
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-03-25 15:08:11
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\index.tsx
+     */
+    const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
+        const { isActive } = useSwiperSlide();
+        const { sxpParameter, openHashtag } = useSxpDataSource();
+        const [isLoad, setIsLoad] = React.useState(false);
+        React.useEffect(() => {
+            if (isLoad && isActive) {
+                if (openHashtag) {
+                    onReportViewImageEnd(rec);
+                }
+                else {
+                    onViewImageStartEvent(index);
+                }
+            }
+            else {
+                setIsLoad(true);
+            }
+        }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
+        if (!isActive) {
+            return React.createElement("img", { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: { width, height, objectFit: 'cover' } });
+        }
+        return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+            return (React.createElement(SwiperSlide, { key: url },
+                React.createElement(Picture, { src: url, width: width, height: height })));
+        })));
+    };
+    var PictureGroup$1 = React.memo(PictureGroup);
 
     /*
      * @Author: binruan@chatlabs.com
-     * @Date: 2024-01-10 10:58:24
+     * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-12 14:53:22
-     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
+     * @LastEditTime: 2024-04-03 14:51:17
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Hashtag\index.tsx
      *
      */
-    const WaterFall = () => {
-        const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport } = useSxpDataSource();
-        React.useRef(null);
-        const modalEleRef = React.useRef(null);
-        const [viewTime, setViewTime] = React.useState();
-        React.useEffect(() => {
-            const parentNode = document.getElementById('sxp-render');
-            const node = document.getElementById('water-fall');
-            if (node) {
-                modalEleRef.current = node;
+    const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
+        const [isShowMore, setIsShowMore] = React.useState(false);
+        const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
+        const handleClickTag = (data) => {
+            if (!waterFallData) {
+                setCacheActiveIndex === null || setCacheActiveIndex === void 0 ? void 0 : setCacheActiveIndex(index);
             }
             else {
-                modalEleRef.current = document.createElement('div');
-                modalEleRef.current.setAttribute('id', 'water-fall');
-                parentNode === null || parentNode === void 0 ? void 0 : parentNode.appendChild(modalEleRef.current);
+                setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(true);
             }
-        }, []);
-        const handleClose = () => {
-            const isEq = lodash.isEqual(rtcList, cacheRtcList);
-            if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
-                setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
+            if (itemType) {
+                setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
+                    hashTag: data,
+                    itemId,
+                    itemType,
+                    rec
+                });
             }
-            reportTagsView();
-            setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
-            setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
-            setTimeout(() => {
-                var _a, _b;
-                if (!isEq) {
-                    (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(cacheActiveIndex, 0, false);
-                }
-                setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
-            }, 0);
+            else {
+                setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData({
+                    hashTag: data,
+                    rec
+                });
+            }
+            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
         };
-        const [recData, setRecData] = React.useState();
-        React.useEffect(() => {
-            if (waterFallData) {
-                setRecData(waterFallData);
+        React.useMemo(() => {
+            if (tags.length <= 6) {
+                return null;
             }
-        }, [waterFallData]);
-        const reportTagsView = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f;
-            const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
-            if (!rec)
-                return;
-            let fromKName = '';
-            if (isFromHashtag) {
-                fromKName = 'hashTagPage';
+            return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
+        }, [isShowMore, tags]);
+        return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag' },
+            React.createElement(Scroll$1, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) }, `#${item}`))))));
+    };
+    var Hashtag$1 = React.memo(Hashtag);
+
+    var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAbtJREFUeF7t2DFKxFAQxvHv6xTxCoKNiAuCna2X2NY7eAE9hYdwj2BjZ2ulYLW9pQcYDWyxBIK7ZN7MNyapk/D+v8zC20dM/OLE+zEDzBMwcYH5J1BpAMzsAMAJyU+vdZeZADN7AHAH4BjAC8kbD4QSAJv4+17wFcm3sQjyAGbWhXdff/takzwdG989Lw0wEN+te0ly9a8BIuJlJyAqXhIgMl4OIDpeCiAjXgYgK14CIDM+HSA7PhVgYHvrusnZZaOUshNUiU+ZAKX4cAC1+FAAxfgwANX4EADl+OYA6vFNASrENwOoEt8EoFK8O0C1eFcAMzsE8AXgqLcHdzvA3GVvv+89bv8FzOwcwEdvASuSy30XFXm/G0C3aDN7BXBdCcEb4ALAE4BFFQRXgM0UlEJwB6iG0ASgEkIzgCoITQEqIDQHUEcIAVBGCANQRQgFUEQIB1BDSAFQQkgDUEFIBVBASAfIRpAAyESQAchCkALIQJADiEaQBIhEkAWIQpAG+ANh8Xvk/j72CF0eYABhDeCS5PckALYQbgGcAXgm+Tg2vnu+xAR4hA69YwZoqVvh3fMEVPhKLdc4+Qn4AXwYBFBN2dYpAAAAAElFTkSuQmCC";
+
+    function withBindDataSource(Component) {
+        // 处理函数事件中的数据源
+        return React.memo(function (props) {
+            const { $store } = useDataSource();
+            const handleDataSourceByEvent = (value) => {
+                let res = value;
+                const dataArr = value.match(/{{.*?}}/g);
+                if (dataArr === null || dataArr === void 0 ? void 0 : dataArr.length) {
+                    dataArr.forEach((item) => {
+                        item.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
+                            if (p) {
+                                const v = lodash.get($store, p);
+                                res = res.replace(item, v);
+                                return v;
+                            }
+                        });
+                    });
+                }
+                return res;
+            };
+            const clonedProps = React.useMemo(() => {
+                var _a, _b, _c;
+                const { bindDatas } = props, cloneProps = __rest(props, ["bindDatas"]);
+                (_a = bindDatas === null || bindDatas === void 0 ? void 0 : bindDatas.forEach) === null || _a === void 0 ? void 0 : _a.call(bindDatas, (d) => {
+                    if ((d === null || d === void 0 ? void 0 : d.propKey) && (d === null || d === void 0 ? void 0 : d.dataPath)) {
+                        const { propKey, dataPath } = d;
+                        dataPath.replace(/{{\s*([\w.]+)\s*}}/g, (match, p) => {
+                            var _a, _b;
+                            if (p) {
+                                const v = (_b = (_a = lodash.get($store, p)) !== null && _a !== void 0 ? _a : props[propKey]) !== null && _b !== void 0 ? _b : '';
+                                cloneProps[propKey] = v;
+                                return v;
+                            }
+                        });
+                    }
+                });
+                if (cloneProps) {
+                    cloneProps.eventMap = {};
+                    const eventObj = lodash.cloneDeep(cloneProps.event) || {};
+                    for (const key in eventObj) {
+                        if (Object.prototype.hasOwnProperty.call(eventObj, key)) {
+                            try {
+                                eventObj[key].value = handleDataSourceByEvent(eventObj[key].value);
+                                cloneProps.eventMap[key] = new Function(eventObj[key].value);
+                            }
+                            catch (error) { }
+                        }
+                    }
+                }
+                if ((_c = (_b = cloneProps === null || cloneProps === void 0 ? void 0 : cloneProps.event) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.linkType) {
+                    cloneProps.style.cursor = 'pointer';
+                }
+                return cloneProps;
+            }, [$store, props]);
+            return React.createElement(Component, Object.assign({}, clonedProps, clonedProps.eventMap));
+        });
+    }
+
+    /*
+     * @Author: binruan@chatlabs.com
+     * @Date: 2023-12-26 16:11:34
+     * @LastEditors: binruan@chatlabs.com
+     * @LastEditTime: 2024-03-04 14:25:27
+     * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
+     *
+     */
+    const RenderCard = ({ rec, index, tempMap, resolver }) => {
+        const { schema } = useEditor();
+        const renderComp = React.useMemo(() => {
+            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;
+            if (!(rec === null || rec === void 0 ? void 0 : rec.video))
+                return null;
+            let cta = null;
+            if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
+                cta = '多商品CTA';
             }
-            else if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-                fromKName = 'videoPage';
+            else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
+                cta = '商品CTA';
             }
-            else if ((_c = (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) === null || _c === void 0 ? void 0 : _c.length) {
-                fromKName = 'imagePage';
+            else {
+                cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
             }
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
-                    position: rec === null || rec === void 0 ? void 0 : rec.position,
-                    contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
-                    traceInfo: JSON.stringify((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo),
-                    hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
-                    fromKName,
-                    fromKPage: location === null || location === void 0 ? void 0 : location.href,
-                    timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
-                    eventSubject: 'clickTagsViewContents',
-                    eventDescription: 'User click tags view contents'
-                }
-            });
-        }, [recData, bffEventReport, viewTime, isFromHashtag]);
-        React.useEffect(() => {
-            if (openHashtag) {
-                setViewTime(new Date());
+            const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
+            if ((((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDiro' && !((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct)) ||
+                (((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'Commodity' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
+                (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'CommodityDiroNew' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
+                (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodity' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
+                (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiro' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length)) ||
+                (((_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type) === 'MultiCommodityDiroNew' && !((_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v.length))) {
+                return null;
             }
-        }, [openHashtag]);
-        React.useEffect(() => {
-            const initTime = () => {
-                setViewTime(new Date());
-            };
-            window.addEventListener('pageshow', initTime);
-            return () => {
-                window.removeEventListener('pageshow', initTime);
-            };
-        }, []);
-        if (!modalEleRef.current)
-            return null;
-        return ReactDOM__namespace.createPortal(React.createElement("div", { className: 'waterfall', style: {
-                display: openHashtag ? 'block' : 'none'
-            } },
-            React.createElement(Navbar$1, { icon: img, styles: { top: '32px' }, onClose: handleClose }),
-            React.createElement(WaterfallList, { reportTagsView: reportTagsView })), modalEleRef.current);
+            if (value && resolver) {
+                const Component = withBindDataSource(resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type]);
+                return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign({}, (_x = value === null || value === void 0 ? void 0 : value.item) === null || _x === void 0 ? void 0 : _x.style), { zIndex: 50, marginLeft: '20px' }), textStyle: (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.textStyle, bindDatas: (_0 = (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.bindDatas) !== null && _0 !== void 0 ? _0 : [] }, (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.props, { event: ((_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec })));
+            }
+            else {
+                return null;
+            }
+        }, [rec, resolver, tempMap, schema]);
+        return React.createElement(React.Fragment, null, renderComp);
     };
-    var WaterFall$1 = React.memo(WaterFall);
+    var RenderCard$1 = React.memo(RenderCard);
 
     const Nudge = ({ nudge }) => {
         return (React.createElement("div", { hidden: !(nudge === null || nudge === void 0 ? void 0 : nudge.isOpen), className: 'clc-sxp-bottom-nudge', style: {
@@ -10837,12 +12384,12 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-01-15 19:03:09
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-02 10:42:58
+     * @LastEditTime: 2024-04-07 17:06:06
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
      *
      */
-    const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema }) => {
-        var _a, _b, _c, _d;
+    const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle }) => {
+        var _a, _b, _c, _d, _e, _f, _g;
         const { schema } = useEditor();
         const [activeIndex, setActiveIndex] = React.useState(0);
         const viewImageStartTime = React.useRef(0);
@@ -11022,10 +12569,10 @@ Made in Italy` })));
                             React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
                         React.createElement("div", { className: 'clc-sxp-bottom-text' },
                             React.createElement(ExpandableText$1, { 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: descStyle })),
-                        React.createElement(Hashtag$1, { 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.url) ? 'VIDEO' : null, rec: rec }))));
+                        React.createElement(Hashtag$1, { 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.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
             }
             return null;
-        }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge]);
+        }, [descStyle, activeIndex, tempMap, resolver, tipText, nudge, hashTagStyle]);
         const renderLikeButton = React.useCallback((rec) => {
             var _a, _b;
             if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
@@ -11164,7 +12711,7 @@ Made in Italy` })));
         const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png');
         const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png');
         return (React.createElement("div", { id: 'sxp-render', className: 'clc-sxp-container' },
-            waterFallData && (React.createElement(Navbar$1, { icon: img$1, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
+            waterFallData && (React.createElement(Navbar$1, { icon: img, styles: { background: 'rgba(0,0,0,.3)', color: '#fff' }, onClose: () => {
                     setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(true);
                 } })),
             renderLogo,
@@ -11208,7 +12755,7 @@ Made in Italy` })));
                         zIndex: 999
                     }, defaultValue: isMuted, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon, onChange: setIsMuted }),
                 renderView),
-            React.createElement(WaterFall$1, null)));
+            React.createElement(WaterFall$1, Object.assign({}, (_g = (_f = (_e = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.item) === null || _g === void 0 ? void 0 : _g.props))));
     };
 
     /*
@@ -11315,13 +12862,14 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2023-12-26 10:38:53
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-03-14 15:13:36
+     * @LastEditTime: 2024-04-08 10:53:29
      * @FilePath: \pb-sxp-ui\src\core\context\EditorDataProvider.tsx
      *
      */
     const EditorDataContext = React.createContext({});
     const EditorDataProvider = ({ children, data }) => {
         var _a, _b, _c, _d, _e, _f;
+        const [openHashtag, setOpenHashtag] = React.useState(false);
         return (React.createElement(EditorDataContext.Provider, { value: {
                 sxpPrameter: {
                     bottomImage: (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.bottom_image,
@@ -11331,7 +12879,9 @@ Made in Italy` })));
                     hashTagSize: (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size,
                     loadingImage: (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.loading_image
                 },
-                appDomain: data === null || data === void 0 ? void 0 : data.appDomain
+                appDomain: data === null || data === void 0 ? void 0 : data.appDomain,
+                openHashtag,
+                setOpenHashtag
             } }, children));
     };
     function useEditorDataProvider() {