pb-sxp-ui 1.0.45 → 1.0.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +111 -111
  3. package/dist/index.cjs +103 -54
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.css +16 -2
  6. package/dist/index.js +103 -54
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.min.cjs +3 -3
  9. package/dist/index.min.cjs.map +1 -1
  10. package/dist/index.min.js +3 -3
  11. package/dist/index.min.js.map +1 -1
  12. package/dist/pb-ui.js +103 -54
  13. package/dist/pb-ui.js.map +1 -1
  14. package/dist/pb-ui.min.js +3 -3
  15. package/dist/pb-ui.min.js.map +1 -1
  16. package/es/core/components/DiyPortalPreview/index.js +5 -3
  17. package/es/core/components/SxpPageCore/index.d.ts +1 -0
  18. package/es/core/components/SxpPageCore/index.js +2 -2
  19. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +8 -7
  20. package/es/core/components/SxpPageRender/VideoWidget/index.js +19 -18
  21. package/es/core/components/SxpPageRender/WaterFall/List.js +11 -9
  22. package/es/core/components/SxpPageRender/index.d.ts +3 -0
  23. package/es/core/components/SxpPageRender/index.js +3 -3
  24. package/es/materials/sxp/HashTag/index.d.ts +2 -0
  25. package/es/materials/sxp/HashTag/material.js +14 -0
  26. package/es/materials/sxp/HashTag/settingRender.js +28 -2
  27. package/es/materials/sxp/popup/CommodityDetail/index.js +4 -4
  28. package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  29. package/lib/core/components/DiyPortalPreview/index.js +5 -3
  30. package/lib/core/components/SxpPageCore/index.d.ts +1 -0
  31. package/lib/core/components/SxpPageCore/index.js +2 -2
  32. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +8 -7
  33. package/lib/core/components/SxpPageRender/VideoWidget/index.js +19 -18
  34. package/lib/core/components/SxpPageRender/WaterFall/List.js +11 -9
  35. package/lib/core/components/SxpPageRender/index.d.ts +3 -0
  36. package/lib/core/components/SxpPageRender/index.js +3 -3
  37. package/lib/materials/sxp/HashTag/index.d.ts +2 -0
  38. package/lib/materials/sxp/HashTag/material.js +14 -0
  39. package/lib/materials/sxp/HashTag/settingRender.js +28 -2
  40. package/lib/materials/sxp/popup/CommodityDetail/index.js +4 -4
  41. package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +1 -1
  42. package/package.json +115 -115
package/dist/index.css CHANGED
@@ -732,14 +732,26 @@
732
732
  font-weight: bold;
733
733
  }
734
734
  .list-bottom {
735
- padding: 20px;
736
735
  position: absolute;
737
736
  left: 0;
738
737
  right: 0;
739
738
  bottom: 0;
740
739
  background-color: #fff;
740
+ -webkit-box-sizing: content-box;
741
+ box-sizing: content-box;
742
+ width: 100%;
743
+ height: 92px;
744
+ }
745
+ .list-btn-wrap {
746
+ position: absolute;
747
+ left: 0;
748
+ right: 0;
749
+ bottom: 0;
750
+ padding: 20px;
751
+ -webkit-box-sizing: border-box;
752
+ box-sizing: border-box;
741
753
  }
742
- .list-bottom-btn {
754
+ .list-btn {
743
755
  height: 52px;
744
756
  width: 100%;
745
757
  background: #000000;
@@ -750,6 +762,8 @@
750
762
  color: #fff;
751
763
  border: none;
752
764
  cursor: pointer;
765
+ -webkit-box-sizing: border-box;
766
+ box-sizing: border-box;
753
767
  }
754
768
 
755
769
  /**
package/dist/index.js CHANGED
@@ -8394,10 +8394,10 @@ const CommodityDetail$1 = (_a) => {
8394
8394
  React.createElement("div", { className: 'pb-commondity-content-title', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.title, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.title) }, (_b = product === null || product === void 0 ? void 0 : product.title) !== null && _b !== void 0 ? _b : 'Pendant in Yellow Gold with Diamonds, Medium'),
8395
8395
  React.createElement("div", { className: 'pb-commondity-content-price', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price, hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price) }, priceText),
8396
8396
  React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
8397
- React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
8398
- bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
8399
- collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
8400
- necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
8397
+ React.createElement(ExpandableText$1, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), isPost: isPost, text: (_c = product === null || product === void 0 ? void 0 : product.info) !== null && _c !== void 0 ? _c : `The design inspiration of Tiffany Lock series comes from the power of connection and inclusiveness, and the
8398
+ bold and avant-garde visual design interprets the emotional bond connecting my heart. The Tiffany Lock
8399
+ collection is unisex and is inspired by the padlock pattern found in the Tiffany Antique Collection. This
8400
+ necklace features a stylish and eye-catching oval clasp chain decorated with a lock pattern. Crafted from
8401
8401
  18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
8402
8402
  };
8403
8403
  const renderBtn = () => {
@@ -8848,7 +8848,7 @@ const CommodityDetailDiroNew$1 = (_a) => {
8848
8848
  const productInfoText = ({ isPost }) => {
8849
8849
  return (React.createElement("div", { hidden: !!product && (!(product === null || product === void 0 ? void 0 : product.info) || (product === null || product === void 0 ? void 0 : product.info) === '') },
8850
8850
  React.createElement(ExpandableText$1, { isPost: isPost, onClick: () => setShowModal(true), className: 'pb-commondityDiroNew-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (product === null || product === void 0 ? void 0 : product.info) ||
8851
- `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. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
8851
+ `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. The leather handles can be adjusted using the small notches in order to be able to carry the large bag by hand or wear it over the shoulder. CD Lock and strap closures D.I.O.R. charms Removable interior pouch Adjustable leather handles Dust bag included
8852
8852
  Made in Italy` })));
8853
8853
  };
8854
8854
  return (React.createElement("div", { className: 'pb-commondityDiroNew' },
@@ -10062,7 +10062,7 @@ var _a, _b;
10062
10062
  * @Author: binruan@chatlabs.com
10063
10063
  * @Date: 2024-04-07 14:07:12
10064
10064
  * @LastEditors: binruan@chatlabs.com
10065
- * @LastEditTime: 2024-04-12 17:39:45
10065
+ * @LastEditTime: 2024-04-29 19:55:53
10066
10066
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\settingRender.tsx
10067
10067
  *
10068
10068
  */
@@ -10102,6 +10102,10 @@ var settingRender = [
10102
10102
  label: 'hashtag描述',
10103
10103
  value: 'hashTagDesc'
10104
10104
  },
10105
+ {
10106
+ label: 'hashtag描述超链',
10107
+ value: 'hashTagLink'
10108
+ },
10105
10109
  {
10106
10110
  label: '标题',
10107
10111
  value: 'title'
@@ -10185,8 +10189,8 @@ var settingRender = [
10185
10189
  ]
10186
10190
  },
10187
10191
  {
10188
- type: 'TextMargin',
10189
- name: ['props', 'buttonStyle']
10192
+ type: 'TextPadding',
10193
+ name: ['props', 'buttonBgStyle']
10190
10194
  },
10191
10195
  {
10192
10196
  type: 'Group',
@@ -10219,6 +10223,28 @@ var settingRender = [
10219
10223
  name: ['props', 'buttonStyle']
10220
10224
  }
10221
10225
  ]
10226
+ },
10227
+ {
10228
+ title: '按钮背景样式',
10229
+ child: [
10230
+ {
10231
+ type: 'Color',
10232
+ label: '背景色',
10233
+ name: ['props', 'buttonBgStyle', 'backgroundColor'],
10234
+ initialValue: '#fff'
10235
+ },
10236
+ {
10237
+ type: 'Group',
10238
+ label: '尺寸',
10239
+ child: [
10240
+ {
10241
+ type: 'Number',
10242
+ name: ['props', 'buttonBgStyle', 'height'],
10243
+ addonAfter: 'H'
10244
+ }
10245
+ ]
10246
+ }
10247
+ ]
10222
10248
  }
10223
10249
  ];
10224
10250
 
@@ -11650,7 +11676,7 @@ const WaterfallFlowItem = (props) => {
11650
11676
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
11651
11677
  };
11652
11678
  function WaterfallList(_a) {
11653
- var _b, _c, _d, _e, _f, _g, _h;
11679
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k;
11654
11680
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
11655
11681
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
11656
11682
  const [list, setList] = useState();
@@ -11720,17 +11746,23 @@ function WaterfallList(_a) {
11720
11746
  };
11721
11747
  return (React.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
11722
11748
  React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
11723
- React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
11724
- bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
11725
- } },
11726
- 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),
11727
- 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'),
11749
+ React.createElement("div", { className: 'list-scroll', ref: containerRef },
11750
+ 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),
11751
+ 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'),
11728
11752
  React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
11729
11753
  return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
11730
11754
  })),
11731
- React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
11732
- 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) },
11733
- 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'))))));
11755
+ React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
11756
+ React.createElement("div", {
11757
+ // hidden={!data?.tag?.link}
11758
+ style: {
11759
+ 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
11760
+ } })),
11761
+ React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
11762
+ React.createElement("div", {
11763
+ // hidden={!data?.tag?.link}
11764
+ className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
11765
+ 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'))))));
11734
11766
  }
11735
11767
 
11736
11768
  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);
11841
11873
  * @Author: binruan@chatlabs.com
11842
11874
  * @Date: 2024-01-15 19:03:09
11843
11875
  * @LastEditors: binruan@chatlabs.com
11844
- * @LastEditTime: 2024-04-07 15:42:10
11876
+ * @LastEditTime: 2024-04-29 19:08:34
11845
11877
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\index.tsx
11846
11878
  *
11847
11879
  */
@@ -11854,7 +11886,7 @@ var HashTagComponent = memo(HashTag$1);
11854
11886
  * @Author: binruan@chatlabs.com
11855
11887
  * @Date: 2023-07-28 18:29:57
11856
11888
  * @LastEditors: binruan@chatlabs.com
11857
- * @LastEditTime: 2024-04-07 16:22:28
11889
+ * @LastEditTime: 2024-04-30 10:13:13
11858
11890
  * @FilePath: \pb-sxp-ui\src\materials\sxp\HashTag\material.tsx
11859
11891
  *
11860
11892
  */
@@ -11881,6 +11913,12 @@ const HashTag = createMaterial(HashTagComponent, {
11881
11913
  textAlign: 'center',
11882
11914
  color: '#000'
11883
11915
  },
11916
+ hashTagLink: {
11917
+ textAlign: 'center',
11918
+ color: '#757575',
11919
+ fontSize: 12,
11920
+ textDecoration: 'underline'
11921
+ },
11884
11922
  title: {
11885
11923
  fontSize: 12,
11886
11924
  color: '#000'
@@ -11899,6 +11937,14 @@ const HashTag = createMaterial(HashTagComponent, {
11899
11937
  textAlign: 'center',
11900
11938
  color: '#fff',
11901
11939
  borderRadius: 25
11940
+ },
11941
+ buttonBgStyle: {
11942
+ backgroundColor: '#fff',
11943
+ height: 52,
11944
+ paddingTop: 20,
11945
+ paddingLeft: 20,
11946
+ paddingRight: 20,
11947
+ paddingBottom: 20
11902
11948
  }
11903
11949
  }
11904
11950
  },
@@ -12130,11 +12176,25 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
12130
12176
  var _a;
12131
12177
  return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
12132
12178
  }, [firstFrameSrc, rec]);
12179
+ const blurStyle = useMemo(() => {
12180
+ return blur
12181
+ ? {
12182
+ filter: 'blur(10px)',
12183
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
12184
+ }
12185
+ : {};
12186
+ }, [blur]);
12187
+ const isBgColor = useMemo(() => {
12188
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
12189
+ }, [videoPostConfig]);
12190
+ const bgStyle = useMemo(() => {
12191
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
12192
+ }, [videoPostConfig, isBgColor]);
12133
12193
  const handLoadeddata = useCallback(() => {
12134
12194
  var _a;
12135
- if (!videoRef)
12195
+ if (!videoRef || isBgColor)
12136
12196
  return;
12137
- const videoDomRef = document.getElementById(`${videoId}_html5_api`);
12197
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
12138
12198
  if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
12139
12199
  return;
12140
12200
  const setFrameImg = () => {
@@ -12152,7 +12212,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
12152
12212
  setTimeout(() => {
12153
12213
  setFrameImg();
12154
12214
  }, 500);
12155
- }, [videoRef]);
12215
+ }, [videoRef, isBgColor, rec]);
12156
12216
  useEffect(() => {
12157
12217
  if (!isActive || !videoRef)
12158
12218
  return;
@@ -12239,24 +12299,11 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
12239
12299
  window.removeEventListener('beforeunload', handleBeforeUnload);
12240
12300
  };
12241
12301
  }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
12242
- const blurStyle = useMemo(() => {
12243
- return blur
12244
- ? {
12245
- filter: 'blur(10px)',
12246
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
12247
- }
12248
- : {};
12249
- }, [blur]);
12250
12302
  if (!rec.video) {
12251
12303
  return null;
12252
12304
  }
12253
- return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
12254
- position: 'relative',
12255
- width: '100%',
12256
- height,
12257
- overflow: 'hidden'
12258
- } },
12259
- React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
12305
+ 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) },
12306
+ !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
12260
12307
  React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
12261
12308
  React.createElement("div", { style: {
12262
12309
  position: 'absolute',
@@ -12331,7 +12378,7 @@ const FingerSwipeTip = ({ imageUrl }) => {
12331
12378
  * @Author: binruan@chatlabs.com
12332
12379
  * @Date: 2024-03-20 10:27:31
12333
12380
  * @LastEditors: binruan@chatlabs.com
12334
- * @LastEditTime: 2024-04-26 14:33:25
12381
+ * @LastEditTime: 2024-04-29 18:57:05
12335
12382
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
12336
12383
  *
12337
12384
  */
@@ -12354,13 +12401,14 @@ const Picture = (props) => {
12354
12401
  }
12355
12402
  : {};
12356
12403
  }, [blur]);
12357
- return (React.createElement("div", { style: {
12358
- overflow: 'hidden',
12359
- height,
12360
- width: '100%',
12361
- position: 'relative'
12362
- } },
12363
- React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
12404
+ const isBgColor = useMemo(() => {
12405
+ return (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgWay) === '1';
12406
+ }, [imgUrlsPostConfig]);
12407
+ const bgStyle = useMemo(() => {
12408
+ return isBgColor && (imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor) ? { backgroundColor: imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.bgColor } : {};
12409
+ }, [imgUrlsPostConfig, isBgColor]);
12410
+ return (React.createElement("div", { style: Object.assign({ overflow: 'hidden', height, width: '100%', position: 'relative' }, bgStyle) },
12411
+ !isBgColor && (React.createElement(FormatImage$1, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
12364
12412
  blur && (React.createElement(FormatImage$1, { src: src, style: {
12365
12413
  width: '100%',
12366
12414
  height: '100%',
@@ -12629,7 +12677,7 @@ var Tagbar$1 = memo(Tagbar);
12629
12677
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
12630
12678
  *
12631
12679
  */
12632
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [] }) => {
12680
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
12633
12681
  var _a, _b, _c, _d, _e, _f, _g;
12634
12682
  const { schema } = useEditor();
12635
12683
  const [activeIndex, setActiveIndex] = useState(0);
@@ -12685,7 +12733,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
12685
12733
  if (!firstRef.current && !videoRef) {
12686
12734
  firstRef.current = true;
12687
12735
  const player = TCPlayer('player-container-id', {
12688
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license', // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl
12736
+ licenseUrl, // license 地址,参考准备工作部分,在视立方控制台申请 license 后可获得 licenseUrl
12689
12737
  controls: false,
12690
12738
  autoplay: false,
12691
12739
  loop: false,
@@ -12698,7 +12746,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
12698
12746
  setVideoRef(player);
12699
12747
  });
12700
12748
  }
12701
- }, [videoRef]);
12749
+ }, [videoRef, licenseUrl]);
12702
12750
  useEffect(() => {
12703
12751
  if (!isInit)
12704
12752
  handleH5EnterLink();
@@ -13431,15 +13479,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
13431
13479
  renderBottom(rec, index),
13432
13480
  renderLikeButton(rec, index)));
13433
13481
  };
13434
- return (React.createElement("div", { style: {
13482
+ return (React.createElement("div", { className: css({
13435
13483
  width: '100%',
13436
13484
  height: containerHeight,
13437
13485
  display: 'flex',
13438
13486
  boxSizing: 'border-box',
13439
13487
  gap: 16,
13440
13488
  pointerEvents: 'none',
13441
- userSelect: 'none'
13442
- } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
13489
+ userSelect: 'none',
13490
+ transform: 'scale(0.7) translateX(-22%) translateY(-140px)'
13491
+ }) }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
13443
13492
  return renderView(rec, index);
13444
13493
  })));
13445
13494
  };
@@ -13514,7 +13563,7 @@ const Popup = () => {
13514
13563
  * @Author: binruan@chatlabs.com
13515
13564
  * @Date: 2024-01-15 19:03:09
13516
13565
  * @LastEditors: binruan@chatlabs.com
13517
- * @LastEditTime: 2024-03-25 17:24:59
13566
+ * @LastEditTime: 2024-04-30 11:06:08
13518
13567
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
13519
13568
  *
13520
13569
  */
@@ -13530,7 +13579,7 @@ const RESOLVER = {};
13530
13579
  Object.values(_materials_).forEach((v) => {
13531
13580
  RESOLVER[v.extend.type] = v;
13532
13581
  });
13533
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain }) => {
13582
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl }) => {
13534
13583
  var _a, _b, _c, _d, _e, _f;
13535
13584
  const utmVal = useMemo(() => {
13536
13585
  var _a;
@@ -13541,7 +13590,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
13541
13590
  React.createElement(SxpDataSourceProvider$1, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
13542
13591
  var _a;
13543
13592
  return (React.createElement(React.Fragment, null,
13544
- React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
13593
+ React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
13545
13594
  React.createElement(Popup, null)));
13546
13595
  } })));
13547
13596
  };