pb-sxp-ui 1.0.44 → 1.0.46

package/dist/index.css

@@ -732,14 +732,26 @@
   font-weight: bold;
 }
 .list-bottom {
-  padding: 20px;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #fff;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  width: 100%;
+  height: 92px;
 }
-.list-bottom-btn {
+.list-btn-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 20px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.list-btn {
   height: 52px;
   width: 100%;
   background: #000000;
@@ -750,6 +762,8 @@
   color: #fff;
   border: none;
   cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 /**
@@ -1293,20 +1307,28 @@ button.swiper-pagination-bullet {
   overflow-x: auto;
   padding: 0 12px;
   text-align: center;
+  height: 45px;
 }
 .clc-sxp-tagbar-list {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
+  padding: 0;
+  margin: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-flex-wrap: nowrap;
       -ms-flex-wrap: nowrap;
           flex-wrap: nowrap;
   height: 100%;
+  list-style: none;
 }
 .clc-sxp-tagbar-list-item {
   cursor: pointer;

package/dist/index.js

@@ -10062,7 +10062,7 @@ var _a, _b;
  * @Author: binruan@chatlabs.com
  * @Date: 2024-04-07 14:07:12
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-12 17:39:45
+ * @LastEditTime: 2024-04-29 19:55:53
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
  *
  */
@@ -10102,6 +10102,10 @@ var settingRender = [
                                 label: 'hashtag描述',
                                 value: 'hashTagDesc'
                             },
+                            {
+                                label: 'hashtag描述超链',
+                                value: 'hashTagLink'
+                            },
                             {
                                 label: '标题',
                                 value: 'title'
@@ -10185,8 +10189,8 @@ var settingRender = [
                 ]
             },
             {
-                type: 'TextMargin',
-                name: ['props', 'buttonStyle']
+                type: 'TextPadding',
+                name: ['props', 'buttonBgStyle']
             },
             {
                 type: 'Group',
@@ -10219,6 +10223,28 @@ var settingRender = [
                 name: ['props', 'buttonStyle']
             }
         ]
+    },
+    {
+        title: '按钮背景样式',
+        child: [
+            {
+                type: 'Color',
+                label: '背景色',
+                name: ['props', 'buttonBgStyle', 'backgroundColor'],
+                initialValue: '#fff'
+            },
+            {
+                type: 'Group',
+                label: '尺寸',
+                child: [
+                    {
+                        type: 'Number',
+                        name: ['props', 'buttonBgStyle', 'height'],
+                        addonAfter: 'H'
+                    }
+                ]
+            }
+        ]
     }
 ];
 
@@ -11650,7 +11676,7 @@ const WaterfallFlowItem = (props) => {
             React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
 };
 function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
     const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
     const [list, setList] = useState();
@@ -11720,17 +11746,23 @@ function WaterfallList(_a) {
     };
     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-scroll', ref: containerRef },
+            React.createElement("div", { className: 'list-info', style: (_b = props === null || props === void 0 ? void 0 : props.textStyles) === null || _b === void 0 ? void 0 : _b.hashTagDesc }, (_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.info),
+            React.createElement("div", { hidden: !((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.link), className: 'list-collection', onClick: handleClickLink, style: Object.assign(Object.assign({}, (_e = props === null || props === void 0 ? void 0 : props.textStyles) === null || _e === void 0 ? void 0 : _e.hashTagLink), { 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'))))));
+            React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
+            React.createElement("div", { 
+                // hidden={!data?.tag?.link}
+                style: {
+                    height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
+                } })),
+        React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
+        React.createElement("div", { 
+            // hidden={!data?.tag?.link}
+            className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
+            React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
 }
 
 var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
@@ -11841,7 +11873,7 @@ var WaterFall$1 = memo(WaterFall);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-07 15:42:10
+ * @LastEditTime: 2024-04-29 19:08:34
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\index.tsx
  *
  */
@@ -11854,7 +11886,7 @@ var HashTagComponent = memo(HashTag$1);
  * @Author: binruan@chatlabs.com
  * @Date: 2023-07-28 18:29:57
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-07 16:22:28
+ * @LastEditTime: 2024-04-30 10:13:13
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
  *
  */
@@ -11881,6 +11913,12 @@ const HashTag = createMaterial(HashTagComponent, {
                     textAlign: 'center',
                     color: '#000'
                 },
+                hashTagLink: {
+                    textAlign: 'center',
+                    color: '#757575',
+                    fontSize: 12,
+                    textDecoration: 'underline'
+                },
                 title: {
                     fontSize: 12,
                     color: '#000'
@@ -11899,6 +11937,14 @@ const HashTag = createMaterial(HashTagComponent, {
                 textAlign: 'center',
                 color: '#fff',
                 borderRadius: 25
+            },
+            buttonBgStyle: {
+                backgroundColor: '#fff',
+                height: 52,
+                paddingTop: 20,
+                paddingLeft: 20,
+                paddingRight: 20,
+                paddingBottom: 20
             }
         }
     },
@@ -12130,11 +12176,25 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         var _a;
         return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
     }, [firstFrameSrc, rec]);
+    const blurStyle = useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    const isBgColor = useMemo(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
+    }, [videoPostConfig]);
+    const bgStyle = useMemo(() => {
+        return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
+    }, [videoPostConfig, isBgColor]);
     const handLoadeddata = useCallback(() => {
         var _a;
-        if (!videoRef)
+        if (!videoRef || isBgColor)
             return;
-        const videoDomRef = document.getElementById(`${videoId}_html5_api`);
+        const videoDomRef = document.getElementById('player-container-id_html5_api');
         if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
             return;
         const setFrameImg = () => {
@@ -12152,7 +12212,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         setTimeout(() => {
             setFrameImg();
         }, 500);
-    }, [videoRef]);
+    }, [videoRef, isBgColor, rec]);
     useEffect(() => {
         if (!isActive || !videoRef)
             return;
@@ -12239,24 +12299,11 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
     }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-    const blurStyle = useMemo(() => {
-        return blur
-            ? {
-                filter: 'blur(10px)',
-                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
-            }
-            : {};
-    }, [blur]);
     if (!rec.video) {
         return null;
     }
-    return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-            position: 'relative',
-            width: '100%',
-            height,
-            overflow: 'hidden'
-        } },
-        React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
+    return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
+        !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
         React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
         React.createElement("div", { style: {
                 position: 'absolute',
@@ -12331,7 +12378,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
  * @Author: binruan@chatlabs.com
  * @Date: 2024-03-20 10:27:31
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-26 14:33:25
+ * @LastEditTime: 2024-04-29 18:57:05
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
  *
  */
@@ -12354,13 +12401,14 @@ const Picture = (props) => {
             }
             : {};
     }, [blur]);
-    return (React.createElement("div", { style: {
-            overflow: 'hidden',
-            height,
-            width: '100%',
-            position: 'relative'
-        } },
-        React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
+    const isBgColor = useMemo(() => {
+        return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgWay) === '1';
+    }, [imgUrlsPostConfig]);
+    const bgStyle = useMemo(() => {
+        return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
+    }, [imgUrlsPostConfig, isBgColor]);
+    return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
+        !isBgColor && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
         blur && (React.createElement(FormatImage$1, { src: src, style: {
                 width: '100%',
                 height: '100%',
@@ -12614,7 +12662,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
     };
     if (tagList.length <= 0)
         return null;
-    return (React.createElement("div", { className: 'clc-sxp-tagbar', style: { height: 45 } },
+    return (React.createElement("div", { className: 'clc-sxp-tagbar' },
         React.createElement("ul", { className: 'clc-sxp-tagbar-list', style: { margin: 'auto', gap: 24 } }, realTagList.map((tag) => {
             return (React.createElement("li", { className: `clc-sxp-tagbar-list-item ${tag === selectTag ? 'clc-sxp-tagbar-list-item-active' : ''}`, key: tag, onClick: handleSelectTag(tag) }, tag));
         }))));
@@ -12625,7 +12673,7 @@ var Tagbar$1 = memo(Tagbar);
  * @Author: binruan@chatlabs.com
  * @Date: 2024-01-15 19:03:09
  * @LastEditors: binruan@chatlabs.com
- * @LastEditTime: 2024-04-29 16:33:53
+ * @LastEditTime: 2024-04-29 16:55:16
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
  *
  */