@fonixtree/magic-design 0.0.124 → 0.0.126

package/es/common/Video/components/index.less

@@ -0,0 +1,62 @@
+.player-hidden {
+  display: none !important;
+}
+
+.rate-components {
+  float: right;
+  color: #fff;
+  height: 35px;
+  position: relative;
+  box-sizing: border-box;
+  margin-top: 5px;
+}
+
+.current-rate {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  width: 70px;
+  cursor: pointer;
+}
+
+.rate-list {
+  position: absolute;
+  bottom: 46px;
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    text-align: center;
+    width: 70px;
+    line-height: 30px;
+    background-color: rgba(0, 0, 0, .6);
+    cursor: pointer;
+
+    &.current {
+      color: #00c1de;
+    }
+
+    &+li {
+      border-top: 1px solid rgba(78, 78, 78, 0.3);
+    }
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .5);
+    }
+
+    ;
+  }
+}
+
+@media(max-width: 768px) {
+  .current-rate {
+    width: 40px;
+  }
+
+  .rate-list li {
+    width: 43px;
+  }
+}

package/es/common/Video/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _components = _interopRequireDefault(require("./components"));
+
 var _commonUtil = require("../../utils/commonUtil");
 
 require("./index.less");
@@ -234,6 +236,11 @@ var createVideo = function createVideo(domId, opts) {
         align: 'tl',
         x: 15,
         y: 12
+      }, {
+        name: 'timeDisplay',
+        align: 'tl',
+        x: 10,
+        y: 7
       }, {
         name: 'volume',
         align: 'tr',
@@ -271,7 +278,10 @@ var createVideo = function createVideo(domId, opts) {
       controlBarVisibility: 'hover',
       useH5Prism: true,
       skinLayout: skinLayout
-    }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _window$Aliplayer), function (player) {
+    }, _defineProperty(_window$Aliplayer, "autoplay", opts.autoplay), _defineProperty(_window$Aliplayer, "rePlay", opts.loop), _defineProperty(_window$Aliplayer, "components", [{
+      name: 'RateComponent',
+      type: _components["default"]
+    }]), _window$Aliplayer), function (player) {
       if (!opts.videoSound) {
         player.setVolume(0);
       }
@@ -331,6 +341,8 @@ function (_super) {
       return __awaiter(_this, void 0, void 0, function () {
         var _a;
 
+        var _this = this;
+
         return __generator(this, function (_b) {
           switch (_b.label) {
             case 0:
@@ -347,6 +359,9 @@ function (_super) {
               _b.label = 2;
 
             case 2:
+              if (!this.props.opts.source) return [3
+              /*break*/
+              , 4];
               _a = this;
               return [4
               /*yield*/
@@ -354,6 +369,14 @@ function (_super) {
 
             case 3:
               _a.player = _b.sent();
+              this.player.on('pause', function () {
+                if (!_this.props.opts.loop) {
+                  _this.props.onPause();
+                }
+              });
+              _b.label = 4;
+
+            case 4:
               return [2
               /*return*/
               ];
@@ -363,13 +386,12 @@ function (_super) {
     };
 
     _this.fullPlay = function (type) {
-      if (type == 'h5') {
-        _this.player.fullscreenService.requestFullScreen();
-      }
+      // if (type == 'h5') {
+      //   this.player.fullscreenService.requestFullScreen();
+      // }
+      // if (type == 'pc') {
+      _this.createVideoModal(_this.props.videoId); // }
 
-      if (type == 'pc') {
-        _this.createVideoModal(_this.props.videoId);
-      }
     };
 
     return _this;
@@ -380,12 +402,14 @@ function (_super) {
   };
 
   AComponent.prototype.render = function () {
-    var videoId = this.props.videoId;
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    var _a = this.props,
+        videoId = _a.videoId,
+        opts = _a.opts;
+    return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-container"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
       id: 'video' + videoId
-    })));
+    }) : null);
   };
 
   AComponent.defaultProps = {

package/es/common/Video/index.less

@@ -35,9 +35,10 @@
   }
 
   .content-wrap {
-    width: 900px;
+    width: 1100px;
+    max-width: 90%;
     height: 600px;
-    padding: 10px;
+    // padding: 10px;
     background: rgb(255 255 255);
     border-radius: 5px;
     z-index: 1001;

package/es/composite-comp/bol/components/Button/defaultJSON.js

@@ -40,8 +40,18 @@ var buttonGroupSourceJSON = function buttonGroupSourceJSON() {
         layout: 'right'
       },
       spacing: {
-        pc: {},
-        mobile: {}
+        pc: {
+          paddingTop: 10,
+          paddingBottom: 10,
+          paddingLeft: 26,
+          paddingRight: 26
+        },
+        mobile: {
+          paddingTop: 10,
+          paddingBottom: 10,
+          paddingLeft: 26,
+          paddingRight: 26
+        }
       },
       text: 'Button',
       hover: null

package/es/composite-comp/bol/components/Carousel/mobile/index.less

@@ -13,13 +13,16 @@
     line-height: 1;
 
     .slick-list {
-      padding-top: 100px;
-      margin-top: -100px;
-      padding-bottom: 100px;
-      margin-bottom: -100px;
-
       margin-left: -11px;
       margin-right: -11px;
+      padding: 0;
+
+      &:hover {
+        padding-top: 100px;
+        margin-top: -100px;
+        padding-bottom: 100px;
+        margin-bottom: -100px;
+      }
 
       .slick-track {
         display: flex;

package/es/composite-comp/bol/components/Carousel/pc/index.less

@@ -23,10 +23,15 @@
     line-height: 1;
 
     .slick-list {
-      padding-top: 100px;
-      margin-top: -100px;
-      padding-bottom: 100px;
-      margin-bottom: -100px;
+      padding: 0;
+      margin: 0;
+
+      &:hover {
+        padding-top: 100px;
+        margin-top: -100px;
+        padding-bottom: 100px;
+        margin-bottom: -100px;
+      }
 
       .slick-track {
         display: flex;

package/es/composite-comp/bol/components/Video/components/ShareBtn/index.less

@@ -4,6 +4,7 @@
   position: relative;
   flex-shrink: 0;
   z-index: 9;
+  margin-left: auto;
 
   &.pc {
     position: absolute;

package/es/composite-comp/bol/components/Video/components/VideoTag/index.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _components = require("../../../../../../meta-comp/components");
 
 var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
@@ -100,9 +102,11 @@ function (_super) {
       className: "title-text"
     }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       data: data.title
-    })), data.text.open && /*#__PURE__*/_react["default"].createElement("div", {
-      className: "text-text"
-    }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('text-text', {
+        position: !data.text.open
+      })
+    }, data.text.open && /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
       data: data.text
     }), !noShare && /*#__PURE__*/_react["default"].createElement(_index["default"], {
       data: share

package/es/composite-comp/bol/components/Video/components/VideoTag/index.less

@@ -33,6 +33,7 @@
     display: flex;
     flex-direction: column;
     padding: 0 16px;
+    width: 100%;
 
     .tag-wrap {
       display: flex;
@@ -58,17 +59,22 @@
       display: flex;
       flex-direction: column;
 
-      .text-text{
+      .text-text {
         display: flex;
         align-items: center;
+        width: 100%;
 
-      
+        &.position {
+          position: absolute;
+          right: 10px;
+          top: -40px;
+        }
       }
     }
   }
 
-  .left-wrap{
-    &+.right-wrap{
+  .left-wrap {
+    &+.right-wrap {
       padding-left: 0;
     }
   }

package/es/composite-comp/bol/components/Video/mobile/Layout1/index.js

@@ -130,6 +130,11 @@ function (_super) {
             _this.setState({});
           }
         },
+        onPause: function onPause() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
           cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl

package/es/composite-comp/bol/components/Video/mobile/Layout2/index.js

@@ -13,6 +13,8 @@ var _playCircle = _interopRequireDefault(require("../../imgs/play-circle.png"));
 
 var _commonUtil = require("../../../../../../utils/commonUtil");
 
+var _coreUtil = require("../../../../../../utils/coreUtil");
+
 require("./index.less");
 
 var _VideoTag = _interopRequireDefault(require("../../components/VideoTag"));
@@ -163,8 +165,13 @@ function (_super) {
             _this.setState({});
           }
         },
+        onPause: function onPause() {
+          _this.videoRefMap[group.id].playing = false;
+
+          _this.setState({});
+        },
         opts: __assign(__assign({}, group.video), {
-          cover: getVideoCover(group),
+          cover: (0, _coreUtil.getVideoCover)(group),
           source: group.video.sourceUrl
         }),
         videoId: group.id

package/es/composite-comp/bol/config-panels/VideoConfig/VideoConfigGroup/index.js

@@ -95,6 +95,14 @@ function (_super) {
       _this.setState({});
     };
 
+    _this.renderCard = function (src, index) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "card_wrap"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "name"
+      }, "Video", index + 1));
+    };
+
     return _this;
   }
 
@@ -106,6 +114,7 @@ function (_super) {
       className: "node_list"
     }, /*#__PURE__*/_react["default"].createElement(_GroupList["default"], {
       onClickItem: this.onClickItem,
+      renderCard: this.renderCard,
       reRender: this.reRender,
       source: source
     })), /*#__PURE__*/_react["default"].createElement("div", {

package/es/composite-comp/dito/components/Recommend/mobile/index.less

@@ -26,7 +26,7 @@
       display: flex;
       align-items: center;
       text-align: center;
-      padding: 0 24px;
+      padding: 0 16px;
       width: fit-content;
       height: 100%;
       justify-content: center;
@@ -34,8 +34,8 @@
       flex-direction: column;
 
       img {
-        height: 16px;
-        width: 16px;
+        height: 20px;
+        width: 20px;
         margin-bottom: 2px;
       }
     }

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

@@ -648,7 +648,7 @@ function (_super) {
         scrollToRightDisabled = _a.scrollToRightDisabled,
         contentWidth = _a.contentWidth;
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 10;
+    var isDivide = false;
     var layout = panelProps.customize.layout.pcLayout;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {

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

@@ -26,8 +26,8 @@
       display: flex;
       align-items: center;
       text-align: center;
-      // padding: 0 24px;
-      min-width: 100px;
+      padding: 0 24px;
+      width: fit-content;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -35,8 +35,8 @@
       cursor: pointer;
 
       img {
-        height: 16px;
-        width: 16px;
+        height: 24px;
+        width: 24px;
         margin-bottom: 2px;
       }
     }

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

@@ -17,9 +17,11 @@
     .search-input-wrap {
       border: 1px solid #2F54EB;
       border-radius: 6px;
+      overflow: hidden;
       height: 40px;
       display: flex;
       flex: 1;
+
       .search-input {
         border: none;
         height: 38px;
@@ -29,6 +31,7 @@
         font-weight: 400;
         font-size: 14px;
       }
+
       .search-icon {
         cursor: pointer;
         height: 100%;
@@ -52,6 +55,7 @@
       align-items: center;
       cursor: pointer;
       border: 1px solid #2F54EB;
+
       .shopping-txt {
         margin-left: 6px;
       }

package/es/core/Designer/index.js

@@ -108,6 +108,7 @@ window.magicDesign = {
 
 var setDesignConfig = function setDesignConfig(data) {
   window.magicDesign = __assign(__assign(__assign({}, window.magicDesign), data), {
+    compWidth: Number(data.compWidth),
     compSpacing: Number(data.compSpacing),
     MBaseUrl: data.MBaseUrl || ''
   });

package/es/core/Renderer/index.js

@@ -58,8 +58,10 @@ var setDesignConfig = function setDesignConfig(props) {
 
 
 var Renderer = function Renderer(props) {
-  var pageData = props.pageData;
+  var pageData = props.pageData; // console.log('pageData: ', pageData);
+
   setDesignConfig(props);
+  window.magicDesignPageData = pageData;
   var pageBackground = window.magicDesign.pageBackground; // 根据楼层展示设备进行过滤
 
   var filterCompFloor = function filterCompFloor() {
@@ -88,7 +90,8 @@ var Renderer = function Renderer(props) {
     className: "render_wrap",
     magic_design: "",
     style: {
-      background: pageBackground
+      background: pageBackground,
+      overflow: 'aotu'
     }
   }, filterCompFloor().map(function (nodeData) {
     var Clazz = _componentTypes.componentMap[nodeData.type];

package/es/decorator/compositeDecorator.js

@@ -115,7 +115,7 @@ function compositeDecorator(WrappedComponent) {
         var wrapStyle = {
           border: 'none',
           position: 'relative',
-          zIndex: '1',
+          zIndex: '0',
           margin: '0 auto'
         }; // 复合组件内边距
 
@@ -179,15 +179,16 @@ function compositeDecorator(WrappedComponent) {
       };
 
       _this.getWrapStyle = function () {
-        var mode = window.magicDesign.mode;
-        var nodeData = _this.props.nodeData;
+        var mode = window.magicDesign.mode; // const { nodeData } = this.props;
+
         var style = {
           position: 'relative',
           zIndex: '1'
-        };
-        var clickedFloor = _this.state.clickedFloor; // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
+        }; // const { clickedFloor } = this.state;
+        // banner 和 recommend 在选中状态需要加padding,让选中的外边框展示出来
+        // if (mode === 'designer' && clickedFloor === nodeData.id && ['BANNER', 'RECOMMEND'].includes(nodeData.type)) {
 
-        if (mode === 'designer' && clickedFloor === nodeData.id && ['BANNER', 'RECOMMEND'].includes(nodeData.type)) {
+        if (mode === 'designer') {
           style.padding = '2px';
         }
 

package/es/meta-comp/components/Image/index.js

@@ -90,6 +90,7 @@ function (_super) {
       if (data.hover.open && data.hover.backgroundType === 'enlarge' && (hoverState || hoverImgSrc)) {
         // return { transform: `scale(${data.hover.magnification})` };
         obj.transform = "scale(" + data.hover.magnification + ")";
+        obj.zIndex = '1';
       }
 
       if (maxHeight) {

package/es/utils/commonUtil.js

@@ -11,7 +11,10 @@ exports.convertImageUrl = convertImageUrl;
 exports.copy2ClipBoard = copy2ClipBoard;
 exports.dragSource = void 0;
 exports.ensure = ensure;
-exports.navigateTo = exports.importAsync = exports.getUrlParams = exports.getColorRgba = void 0;
+exports.getColorRgba = void 0;
+exports.getPageDataMap = getPageDataMap;
+exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
+exports.pushGA = pushGA;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
 exports.shareTwitter = shareTwitter;
@@ -23,6 +26,22 @@ var _qs = _interopRequireDefault(require("qs"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
 /**
  * 安全获取数据
  * @param {function} func 获取函数
@@ -311,9 +330,9 @@ function asyncDataURLtoImage(dataUrl) {
   });
 }
 
-var importAsync = function importAsync(fileUrl) {
+var importAsync = function importAsync(fileUrl, type) {
   return new Promise(function (resolve, reject) {
-    if (/js$/.test(fileUrl)) {
+    if (/\.js/.test(fileUrl) || type == 'js') {
       var domNode = document.createElement('script');
       domNode.src = fileUrl;
       domNode.addEventListener('load', resolve);
@@ -321,7 +340,7 @@ var importAsync = function importAsync(fileUrl) {
       document.body.appendChild(domNode);
     }
 
-    if (/css$/.test(fileUrl)) {
+    if (/\.css/.test(fileUrl) || type == 'css') {
       var domNode = document.createElement('link');
       domNode.rel = 'stylesheet';
       domNode.type = 'text/css';
@@ -391,4 +410,57 @@ function copy2ClipBoard(text) {
   document.getElementById('cp_hgz_input').select();
   document.execCommand('copy');
   document.getElementById('cp_hgz_input').remove();
+}
+
+function getPageDataMap() {
+  var elelmentMap = {};
+  window.magicDesignPageData.childNodes.forEach(function (item) {
+    Object.keys(item).forEach(function (key) {
+      var obj = item[key];
+
+      if (key === 'groupSource') {
+        obj.forEach(function (group) {
+          Object.keys(group).forEach(function (groupKey) {
+            var groupObj = group[groupKey];
+          });
+        });
+      } else {
+        if (obj.id) {
+          elelmentMap[obj.id] = {
+            tempName: '设计器',
+            pageId: window.magicDesignPageData.id,
+            moduleName: obj.type,
+            moduleId: obj.id,
+            groupName: '组名称',
+            groupId: '组id',
+            elementName: '元素名称',
+            elementId: '元素id'
+          };
+        }
+      }
+    });
+  });
+}
+/** GA上报 */
+
+
+function pushGA(data) {
+  // setInterval(() => {
+  var random = ~~(Math.random() * 10);
+  window.gtag('event', 'designer_click', __assign({
+    pageName: '页面名称' + random,
+    moduleName: '模块名称' + random,
+    moduleId: '模块id' + random,
+    groupName: '组名称' + random,
+    groupId: '组id' + random,
+    elementName: '元素名称' + random,
+    elementId: '元素id' + random,
+    pageId: '页面id' + random,
+    pageId_moduleId: 'pageId_moduleId' + random,
+    pageId_moduleId_groupId: 'pageId_moduleId_groupId' + random,
+    pageId_moduleId_groupId_elementId: 'pageId_moduleId_groupId_elementId' + random,
+    pageName_moduleName: 'pageName_moduleName' + random,
+    pageName_moduleName_groupName: 'pageName_moduleName_groupName' + random,
+    pageName_moduleName_groupName_elementNam: 'pageName_moduleName_groupName_elementNam' + random
+  }, data)); // }, 1000);
 }

package/lib/common/GroupList/index.js

@@ -148,7 +148,7 @@ function (_super) {
     var dragId = this.state.dragId;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "group_list"
-    }, source.length > 0 && source.map(function (src) {
+    }, source.length > 0 && source.map(function (src, index) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: "card" + src.id,
         className: "group_item",
@@ -176,7 +176,7 @@ function (_super) {
         type: "icon-drag"
       }), /*#__PURE__*/_react["default"].createElement("span", {
         className: "middle_info ml8"
-      }, renderCard(src) || 'image name')), /*#__PURE__*/_react["default"].createElement("div", {
+      }, renderCard(src, index) || 'image name')), /*#__PURE__*/_react["default"].createElement("div", {
         className: "right"
       }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
         className: "icon_copy",

package/lib/common/ImageModal/index.js

@@ -462,7 +462,7 @@ function ImageModal(_a) {
   };
 
   var onUpload = function onUpload(data) {
-    return fetch('/operation/v1/upload/contents', {
+    return fetch(window.magicDesign.MBaseUrl + "/upload/contents", {
       method: 'POST',
       body: data,
       headers: headers