@fonixtree/magic-design 1.0.133 → 1.0.134

package/es/composite-comp/dito/components/GroupedCarousel/defaultJSON.js

@@ -306,6 +306,12 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     customize: {
       layout: 'layout1'
+    },
+    background: {
+      opacity: 100,
+      color: '#FFFFFF',
+      image: '',
+      bgType: 'color'
     }
   };
 };

package/es/composite-comp/dito/components/SearchDITO/pc/components/VideoItem/index.js

@@ -61,12 +61,12 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var Layout1 =
+var VideoItem =
 /** @class */
 function (_super) {
-  __extends(Layout1, _super);
+  __extends(VideoItem, _super);
 
-  function Layout1() {
+  function VideoItem() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
@@ -97,7 +97,7 @@ function (_super) {
     return _this;
   }
 
-  Layout1.prototype.render = function () {
+  VideoItem.prototype.render = function () {
     var _this = this;
 
     var _a, _b, _c, _d, _e;
@@ -138,9 +138,9 @@ function (_super) {
     })));
   };
 
-  Layout1.defaultProps = {};
-  return Layout1;
+  VideoItem.defaultProps = {};
+  return VideoItem;
 }(_react["default"].Component);
 
-var _default = Layout1;
+var _default = VideoItem;
 exports["default"] = _default;

package/es/composite-comp/dito/components/SearchDITO/pc/index.js

@@ -399,6 +399,20 @@ function (_super) {
       (0, _coreUtil.clickUrl)(jumpUrl);
     };
 
+    _this.getRealIndex = function (rawIndex, total) {
+      if (rawIndex === 0) return total - 1; // 第一个克隆页对应最后一个真实项
+
+      if (rawIndex === total + 1) return 0; // 最后一个克隆页对应第一个真实项
+
+      return rawIndex - 1; // 中间项索引-1得到真实索引
+    };
+
+    _this.afterChange = function (n) {
+      _this.setState({
+        carouseIndex: n
+      });
+    };
+
     return _this;
   }
 
@@ -537,15 +551,14 @@ function (_super) {
       key: JSON.stringify(data.groupSource),
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
-        return _this.setState({
-          carouseIndex: n
-        });
+        return _this.afterChange(n);
       },
       autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       className: "carousel-img",
-      dots: false
-    }, data.groupSource.map(function (m) {
+      dots: false,
+      infinite: false
+    }, data.groupSource.map(function (m, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: m.id
       }, m.image && m.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
@@ -553,7 +566,7 @@ function (_super) {
         data: m.image,
         imgCover: true,
         isBackground: true
-      }), m.video && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
+      }), m.video && i === carouseIndex && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
         data: m
       }));
     })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {

package/es/composite-comp/dito/components/SearchDITO/pc/index.less

@@ -1,6 +1,7 @@
 .m-search-dito-pc {
   position: relative;
   width: 100%;
+  background-color: #fff;
 
   .search-bar {
     display: block;
@@ -120,6 +121,10 @@
       display: flex;
       gap: 15px;
       align-items: center;
+
+      .icon-wrap {
+        cursor: pointer;
+      }
     }
   }
 

package/es/composite-comp/dito/components/SlideImage/defaultJSON.js

@@ -77,7 +77,7 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: groupId,
     type: 'SLIDE_IMAGE',
-    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
+    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
     spacing: {
       pc: {
         paddingTop: 0,

package/es/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less

@@ -1 +1,3 @@
-.slide-image-card-item-wrap {}
+.slide-image-card-item-wrap {
+  cursor: pointer;
+}

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _commonUtil = require("../../../../../../../utils/commonUtil");
+var _coreUtil = require("../../../../../../../utils/coreUtil");
 
 require("./index.less");
 
@@ -39,41 +39,18 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var Layout1 =
+var VideoItem =
 /** @class */
 function (_super) {
-  __extends(Layout1, _super);
+  __extends(VideoItem, _super);
 
-  function Layout1() {
+  function VideoItem() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
       playing: false
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
-    /** 视频ref映射 */
-
-    _this.videoRefMap = {};
-
-    _this.playOrPause = function (group) {
-      (0, _commonUtil.ensure)(function () {
-        if (_this.videoRefMap[group.id].playing) {
-          _this.videoRefMap[group.id].playing = false;
-
-          _this.videoRefMap[group.id].el.player.pause();
-        } else {
-          if (group.video.playPosition == 'Popup') {
-            _this.videoRefMap[group.id].el.fullPlay('pc');
-          } else {
-            _this.videoRefMap[group.id].playing = true;
-
-            _this.videoRefMap[group.id].el.player.play();
-          }
-        }
-
-        _this.setState({});
-      });
-    };
 
     _this.onMouseEnter = function () {
       _this.videoRef.current.play();
@@ -94,28 +71,36 @@ function (_super) {
     return _this;
   }
 
-  Layout1.prototype.render = function () {
+  VideoItem.prototype.render = function () {
     var _a, _b, _c, _d, _e;
 
     var data = this.props.data;
     var playing = this.state.playing;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "slide-image-video-wrap",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)(data.groupName.content.clickUrl.value);
+      },
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
     }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
-      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl
-    }), !playing && ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+      loop: true,
+      muted: true,
+      playsinline: true
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
+      type: "video/mp4"
+    })), !playing && ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
       className: "video-cover-img",
-      src: (_e = (_d = data.overilay) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.pcImgSrc,
-      alt: ""
+      src: (_e = (_d = data.overilay) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.pcImgSrc
     }));
   };
 
-  Layout1.defaultProps = {};
-  return Layout1;
+  VideoItem.defaultProps = {};
+  return VideoItem;
 }(_react["default"].Component);
 
-var _default = Layout1;
+var _default = VideoItem;
 exports["default"] = _default;

package/es/composite-comp/dito/config-panels/GroupedCarouselConfig/index.js

@@ -17,6 +17,8 @@ var _SpacingConfig = _interopRequireDefault(require("../../../common/config-pane
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
 
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
 var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _locale = require("../../../../locale");
@@ -91,6 +93,12 @@ function (_super) {
           isHideAlign: true,
           layoutSource: _layout.groupedCarouselLayout
         })
+      }, {
+        key: '5',
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: data.background
+        })
       }],
       type: "triangle"
     }));

package/es/core/Designer/index.js

@@ -529,9 +529,12 @@ function (_super) {
 
         case _constants.quickMenuCode.SAVE:
           /** 如果保存则重置为mobile，同一移动端截图 #10504010 */
-          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE);
+          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE); // onSave(handleParams);
+
 
-          onSave(handleParams);
+          onSave(__assign(__assign({}, handleParams), {
+            device: _constants.deviceTypeMap.PHONE
+          }));
           break;
 
         case _constants.quickMenuCode.MODE_PC:

package/lib/composite-comp/dito/components/GroupedCarousel/defaultJSON.js

@@ -306,6 +306,12 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     customize: {
       layout: 'layout1'
+    },
+    background: {
+      opacity: 100,
+      color: '#FFFFFF',
+      image: '',
+      bgType: 'color'
     }
   };
 };

package/lib/composite-comp/dito/components/SearchDITO/pc/components/VideoItem/index.js

@@ -61,12 +61,12 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var Layout1 =
+var VideoItem =
 /** @class */
 function (_super) {
-  __extends(Layout1, _super);
+  __extends(VideoItem, _super);
 
-  function Layout1() {
+  function VideoItem() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
@@ -97,7 +97,7 @@ function (_super) {
     return _this;
   }
 
-  Layout1.prototype.render = function () {
+  VideoItem.prototype.render = function () {
     var _this = this;
 
     var _a, _b, _c, _d, _e;
@@ -138,9 +138,9 @@ function (_super) {
     })));
   };
 
-  Layout1.defaultProps = {};
-  return Layout1;
+  VideoItem.defaultProps = {};
+  return VideoItem;
 }(_react["default"].Component);
 
-var _default = Layout1;
+var _default = VideoItem;
 exports["default"] = _default;

package/lib/composite-comp/dito/components/SearchDITO/pc/index.js

@@ -399,6 +399,20 @@ function (_super) {
       (0, _coreUtil.clickUrl)(jumpUrl);
     };
 
+    _this.getRealIndex = function (rawIndex, total) {
+      if (rawIndex === 0) return total - 1; // 第一个克隆页对应最后一个真实项
+
+      if (rawIndex === total + 1) return 0; // 最后一个克隆页对应第一个真实项
+
+      return rawIndex - 1; // 中间项索引-1得到真实索引
+    };
+
+    _this.afterChange = function (n) {
+      _this.setState({
+        carouseIndex: n
+      });
+    };
+
     return _this;
   }
 
@@ -537,15 +551,14 @@ function (_super) {
       key: JSON.stringify(data.groupSource),
       ref: this.carouselRef,
       afterChange: function afterChange(n) {
-        return _this.setState({
-          carouseIndex: n
-        });
+        return _this.afterChange(n);
       },
       autoplay: autoplay,
       autoplaySpeed: data.setting.autoplay.interval * 1000,
       className: "carousel-img",
-      dots: false
-    }, data.groupSource.map(function (m) {
+      dots: false,
+      infinite: false
+    }, data.groupSource.map(function (m, i) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: m.id
       }, m.image && m.image.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
@@ -553,7 +566,7 @@ function (_super) {
         data: m.image,
         imgCover: true,
         isBackground: true
-      }), m.video && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
+      }), m.video && i === carouseIndex && /*#__PURE__*/_react["default"].createElement(_VideoItem["default"], {
         data: m
       }));
     })), data.setting.dots.open && /*#__PURE__*/_react["default"].createElement("div", {

package/lib/composite-comp/dito/components/SearchDITO/pc/index.less

@@ -1,6 +1,7 @@
 .m-search-dito-pc {
   position: relative;
   width: 100%;
+  background-color: #fff;
 
   .search-bar {
     display: block;
@@ -120,6 +121,10 @@
       display: flex;
       gap: 15px;
       align-items: center;
+
+      .icon-wrap {
+        cursor: pointer;
+      }
     }
   }
 

package/lib/composite-comp/dito/components/SlideImage/defaultJSON.js

@@ -77,7 +77,7 @@ var getDefaultJSON = function getDefaultJSON() {
   return {
     id: groupId,
     type: 'SLIDE_IMAGE',
-    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
+    groupSource: [groupSourceJSON(groupId), groupSourceJSON(groupId), groupSourceJSON(groupId)],
     spacing: {
       pc: {
         paddingTop: 0,

package/lib/composite-comp/dito/components/SlideImage/pc/components/CardItem/index.less

@@ -1 +1,3 @@
-.slide-image-card-item-wrap {}
+.slide-image-card-item-wrap {
+  cursor: pointer;
+}

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _commonUtil = require("../../../../../../../utils/commonUtil");
+var _coreUtil = require("../../../../../../../utils/coreUtil");
 
 require("./index.less");
 
@@ -39,41 +39,18 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var Layout1 =
+var VideoItem =
 /** @class */
 function (_super) {
-  __extends(Layout1, _super);
+  __extends(VideoItem, _super);
 
-  function Layout1() {
+  function VideoItem() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
       playing: false
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
-    /** 视频ref映射 */
-
-    _this.videoRefMap = {};
-
-    _this.playOrPause = function (group) {
-      (0, _commonUtil.ensure)(function () {
-        if (_this.videoRefMap[group.id].playing) {
-          _this.videoRefMap[group.id].playing = false;
-
-          _this.videoRefMap[group.id].el.player.pause();
-        } else {
-          if (group.video.playPosition == 'Popup') {
-            _this.videoRefMap[group.id].el.fullPlay('pc');
-          } else {
-            _this.videoRefMap[group.id].playing = true;
-
-            _this.videoRefMap[group.id].el.player.play();
-          }
-        }
-
-        _this.setState({});
-      });
-    };
 
     _this.onMouseEnter = function () {
       _this.videoRef.current.play();
@@ -94,28 +71,36 @@ function (_super) {
     return _this;
   }
 
-  Layout1.prototype.render = function () {
+  VideoItem.prototype.render = function () {
     var _a, _b, _c, _d, _e;
 
     var data = this.props.data;
     var playing = this.state.playing;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "slide-image-video-wrap",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)(data.groupName.content.clickUrl.value);
+      },
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
     }, ((_a = data.video) === null || _a === void 0 ? void 0 : _a.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
-      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl
-    }), !playing && ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+      loop: true,
+      muted: true,
+      playsinline: true
+    }, /*#__PURE__*/_react["default"].createElement("source", {
+      src: (_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl,
+      type: "video/mp4"
+    })), !playing && ((_c = data.overilay) === null || _c === void 0 ? void 0 : _c.open) && /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
       className: "video-cover-img",
-      src: (_e = (_d = data.overilay) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.pcImgSrc,
-      alt: ""
+      src: (_e = (_d = data.overilay) === null || _d === void 0 ? void 0 : _d.content) === null || _e === void 0 ? void 0 : _e.pcImgSrc
     }));
   };
 
-  Layout1.defaultProps = {};
-  return Layout1;
+  VideoItem.defaultProps = {};
+  return VideoItem;
 }(_react["default"].Component);
 
-var _default = Layout1;
+var _default = VideoItem;
 exports["default"] = _default;

package/lib/composite-comp/dito/config-panels/GroupedCarouselConfig/index.js

@@ -17,6 +17,8 @@ var _SpacingConfig = _interopRequireDefault(require("../../../common/config-pane
 
 var _CustomizeConfig = _interopRequireDefault(require("../../../common/config-panels/CustomizeConfig"));
 
+var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
+
 var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _locale = require("../../../../locale");
@@ -91,6 +93,12 @@ function (_super) {
           isHideAlign: true,
           layoutSource: _layout.groupedCarouselLayout
         })
+      }, {
+        key: '5',
+        name: (0, _locale.i18n)('BACKGROUND'),
+        value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
+          data: data.background
+        })
       }],
       type: "triangle"
     }));

package/lib/core/Designer/index.js

@@ -529,9 +529,12 @@ function (_super) {
 
         case _constants.quickMenuCode.SAVE:
           /** 如果保存则重置为mobile，同一移动端截图 #10504010 */
-          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE);
+          _this.onSwitchDevice(_constants.deviceTypeMap.PHONE); // onSave(handleParams);
+
 
-          onSave(handleParams);
+          onSave(__assign(__assign({}, handleParams), {
+            device: _constants.deviceTypeMap.PHONE
+          }));
           break;
 
         case _constants.quickMenuCode.MODE_PC:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.133",
+  "version": "1.0.134",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",