@fonixtree/magic-design 0.0.161 → 0.0.163

package/es/common/ColorPicker/index.less

@@ -1,5 +1,6 @@
 .m-color-picker-panel {
-  position: absolute;
+  position: fixed;
+  bottom: 5px;
   z-index: 999;
 
   .panel-bg {

package/es/common/ImageModal/index.js

@@ -427,46 +427,18 @@ function ImageModal(_a) {
         }
       });
     });
-  };
-
-  var getPreConfig = function getPreConfig() {
-    return __awaiter(_this, void 0, void 0, function () {
-      var wapUrl_1, error_1;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 2,, 3]);
-
-            return [4
-            /*yield*/
-            , (0, _commonUtil.commonFetch)("/designer/v1/" + window.magicDesign.MBaseUrl + "/pages/platforminfo")];
+  }; // const getPreConfig = async () => {
+  //   try {
+  //     const { wapUrl } = await commonFetch(`/designer/v1/${window.magicDesign.MBaseUrl}/pages/platforminfo`);
+  //     setWapUrl(wapUrl);
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // };
 
-          case 1:
-            wapUrl_1 = _a.sent().wapUrl;
-            setWapUrl(wapUrl_1);
-            return [3
-            /*break*/
-            , 3];
-
-          case 2:
-            error_1 = _a.sent();
-            console.error(error_1);
-            return [3
-            /*break*/
-            , 3];
-
-          case 3:
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    });
-  };
 
   (0, _react.useEffect)(function () {
-    getContentCatgs();
-    getPreConfig();
+    getContentCatgs(); // getPreConfig();
   }, []);
 
   var selectFolder = function selectFolder(id) {

package/es/common/Video/index.js

@@ -310,7 +310,32 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
-    _this.player = null;
+    _this.player = {
+      play: function play() {
+        if (_this.aliPlayer) {
+          _this.aliPlayer.play();
+        }
+
+        if (_this.ytPlayer) {
+          _this.ytPlayer.playVideo();
+        }
+      },
+      pause: function pause() {
+        if (_this.aliPlayer) {
+          _this.aliPlayer.play();
+        }
+
+        if (_this.ytPlayer) {
+          _this.ytPlayer.pauseVideo();
+        }
+      }
+    };
+    /** 阿里播放器 */
+
+    _this.aliPlayer = null;
+    /** YouTube播放器 */
+
+    _this.ytPlayer = null;
     /** 创建视频弹框显示 */
 
     _this.createVideoModal = function (videoId) {
@@ -352,7 +377,7 @@ function (_super) {
 
     _this.getInit = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var _a;
+        var videoId_1, _a;
 
         var _this = this;
 
@@ -372,23 +397,60 @@ function (_super) {
               _b.label = 2;
 
             case 2:
-              if (!this.props.opts.source) return [3
+              if (!!window.YT) return [3
               /*break*/
               , 4];
+              return [4
+              /*yield*/
+              , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
+
+            case 3:
+              _b.sent();
+
+              _b.label = 4;
+
+            case 4:
+              if (!this.props.opts.source) return [3
+              /*break*/
+              , 7];
+              if (!/youtu/.test(this.props.opts.source)) return [3
+              /*break*/
+              , 5];
+              videoId_1 = this.props.opts.source.split('youtu.be/')[1];
+              (0, _commonUtil.nextTick)(function () {
+                _this.ytPlayer = new YT.Player('video' + _this.props.videoId, {
+                  height: '100%',
+                  width: '100%',
+                  videoId: videoId_1,
+                  events: {
+                    onReady: function onReady() {
+                      console.log('onReady');
+                    },
+                    onStateChange: function onStateChange() {
+                      console.log('onStateChange');
+                    }
+                  }
+                });
+              }, 500, 10);
+              return [3
+              /*break*/
+              , 7];
+
+            case 5:
               _a = this;
               return [4
               /*yield*/
               , createVideo(this.props.videoId, this.props.opts)];
 
-            case 3:
-              _a.player = _b.sent();
-              this.player.on('ended', function () {
+            case 6:
+              _a.aliPlayer = _b.sent();
+              this.aliPlayer.on('ended', function () {
                 if (!_this.props.opts.loop) {// this.props.onEnd();
                 }
               });
-              _b.label = 4;
+              _b.label = 7;
 
-            case 4:
+            case 7:
               return [2
               /*return*/
               ];
@@ -397,13 +459,8 @@ function (_super) {
       });
     };
 
-    _this.fullPlay = function (type) {
-      // if (type == 'h5') {
-      //   this.player.fullscreenService.requestFullScreen();
-      // }
-      // if (type == 'pc') {
-      _this.createVideoModal(_this.props.videoId); // }
-
+    _this.fullPlay = function () {
+      _this.createVideoModal(_this.props.videoId);
     };
 
     return _this;
@@ -418,10 +475,10 @@ function (_super) {
         videoId = _a.videoId,
         opts = _a.opts,
         play = _a.play;
-    console.log('play: ', play);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-container"
     }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-wrap",
       id: 'video' + videoId
     }) : null, !play && /*#__PURE__*/_react["default"].createElement("div", {
       className: "cover-video"

package/es/common/Video/index.less

@@ -15,6 +15,11 @@
     top: 0;
     background-color: rgba(0, 0, 0, 0);
   }
+
+  .video-wrap {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .pc-video-modal-wrap {

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

@@ -7,10 +7,6 @@ exports.getDefaultJSON = exports.bannerGroupSourceJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _banner = _interopRequireDefault(require("./imgs/banner.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
   var groupId = (0, _uuid.v4)();
   return {
@@ -23,8 +19,8 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {

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

@@ -18,8 +18,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'h5Name',
-        pcName: 'pcName',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''

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

@@ -208,12 +208,13 @@ function (_super) {
         });
       }
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) + 12 + "px";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

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

@@ -85,11 +85,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2em;
+        height: 1em;
         border-radius: 100px;
         opacity: 1;
       }

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

@@ -205,12 +205,14 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) * 1.25 + 20 + "px";
+    var sliderWidth = "calc(100% - " + (data.setting.navigation.size + 20) * 2 + "px)";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -225,7 +227,11 @@ function (_super) {
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
-    }, settings), data.groupSource.map(function (item) {
+    }, settings, {
+      style: {
+        width: sliderWidth
+      }
+    }), data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "img-wrap"

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

@@ -18,7 +18,7 @@
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    // width: calc(100% - 72px);
     margin: 0 auto;
     line-height: 1;
 
@@ -101,11 +101,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1.25em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2.5em;
+        height: 1.25em;
         border-radius: 100px;
         opacity: 1;
       }

package/es/composite-comp/bol/components/Text/index.js

@@ -59,11 +59,6 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-// import './index.less';
-// less to css 在线地址 https://tool.oschina.net/less
-// css 压缩地址 https://www.runoob.com/csspack
-var style = '.m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:10px 20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
-
 var Text =
 /** @class */
 function (_super) {
@@ -80,6 +75,8 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
+    var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
+    var style = ".m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
       onClick: this.onComponentClick

package/es/composite-comp/bol/components/Text/index.less

@@ -1,7 +1,7 @@
 .m-text {
   display: flex;
   flex-direction: column;
-  
+
   .title-wrap {
     font-weight: 500;
     font-size: 20px;
@@ -17,7 +17,7 @@
     width: 100%;
 
     .group-wrap-container {
-      padding: 10px 20px;
+      padding: 16px 20px;
     }
 
     .group-wrap {

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

@@ -7,10 +7,6 @@ exports.videoGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _banner = _interopRequireDefault(require("./imgs/banner.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
   var groupId = (0, _uuid.v4)();
   return {
@@ -24,8 +20,8 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -141,8 +137,8 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {}

package/es/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/index.js

@@ -112,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, (0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {

package/es/core/Designer/ConfigPanel/index.js

@@ -217,7 +217,7 @@ function (_super) {
     };
 
     _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
       var selectedNode = _this.state.selectedNode;
 
@@ -237,6 +237,7 @@ function (_super) {
       }
 
       var groupName = '';
+      console.log('...', selectedNode.type, panelProps);
 
       switch (selectedNode.type) {
         case 'IMAGE_GALLERY':
@@ -250,11 +251,19 @@ function (_super) {
 
           break;
 
+        case 'CAROUSEL':
+          groupName = (0, _coreUtil.isPc)() ? (_g = (_f = panelProps.image) === null || _f === void 0 ? void 0 : _f.content) === null || _g === void 0 ? void 0 : _g.pcName : (_j = (_h = panelProps.image) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.h5Name;
+          break;
+
         case 'MOBILE_NAVIGATION':
         case 'PC_NAVIGATION':
           groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
+        case 'TEXT':
+          groupName = panelProps.content.title.text;
+          break;
+
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
           break;

package/es/core/Designer/PageCompList/index.js

@@ -15,6 +15,8 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _lodash = require("lodash");
+
 var _common = require("../../../common");
 
 var _coreUtil = require("../../../utils/coreUtil");
@@ -78,6 +80,15 @@ function PageCompList(_a) {
       setHoveredFloor = _e[1];
 
   var ref = (0, _react.useRef)();
+
+  var getActiveComponents = function getActiveComponents() {
+    var filter = components.filter(function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return filter;
+  };
+
+  var activeComponents = getActiveComponents();
   (0, _react.useEffect)(function () {
     setComponents(pageData || []);
   }, [pageData]);
@@ -109,7 +120,6 @@ function PageCompList(_a) {
   };
 
   var onDragEnter = function onDragEnter(e) {
-    console.log('drag enter');
     var hoverNodeId = e.currentTarget.dataset.nodeid;
 
     if (dragId === hoverNodeId) {
@@ -127,18 +137,36 @@ function PageCompList(_a) {
     }
   };
 
+  var getLastSameIndex = function getLastSameIndex(comps, index) {
+    var lastComps = comps.slice(0, index);
+    var newIndex = (0, _lodash.findLastIndex)(lastComps, function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return newIndex;
+  };
+
+  var getNextSameIndex = function getNextSameIndex(comps, index) {
+    var nextComps = comps.slice(index + 1);
+    var newIndex = (0, _lodash.findIndex)(nextComps, function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return newIndex + index + 1;
+  };
+
   var onMenuClick = function onMenuClick(activeComp, operType) {
     var newComponents = __spreadArrays(components);
 
     var index = newComponents.indexOf(activeComp);
 
     if (operType === operTypeMap.MOVE_UP) {
-      var temp = newComponents[index - 1];
-      newComponents[index - 1] = newComponents[index];
+      var newIndex = getLastSameIndex(newComponents, index);
+      var temp = newComponents[newIndex];
+      newComponents[newIndex] = newComponents[index];
       newComponents[index] = temp;
     } else if (operType === operTypeMap.MOVE_DOWN) {
-      var temp = newComponents[index + 1];
-      newComponents[index + 1] = newComponents[index];
+      var newIndex = getNextSameIndex(newComponents, index);
+      var temp = newComponents[newIndex];
+      newComponents[newIndex] = newComponents[index];
       newComponents[index] = temp;
     } else if (operType === operTypeMap.COPY) {
       var copyComponent = (0, _coreUtil.copyNode)(newComponents[index]);
@@ -193,7 +221,7 @@ function PageCompList(_a) {
     }, index !== 0 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",
       value: "1"
-    }, (0, _locale.i18n)('MOVE_UP')), index !== components.length - 1 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
+    }, (0, _locale.i18n)('MOVE_UP')), index !== activeComponents.length - 1 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",
       value: "2"
     }, (0, _locale.i18n)('MOVE_DOWN')), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
@@ -277,14 +305,6 @@ function PageCompList(_a) {
     })));
   };
 
-  var getActiveComponents = function getActiveComponents() {
-    var filter = components.filter(function (comp) {
-      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
-    });
-    return filter;
-  };
-
-  var activeComponents = getActiveComponents();
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "page-comp-wrap"
   }, /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -481,7 +481,8 @@ function (_super) {
       style = __assign(__assign({}, style), {
         textDecorationLine: data.underline.open ? 'underline' : 'none',
         textDecorationColor: data.underline.textDecorationColor,
-        textDecorationStyle: data.underline.textDecorationStyle
+        textDecorationStyle: data.underline.textDecorationStyle,
+        textUnderlineOffset: Math.ceil(style.fontSize * 0.2) + 'px'
       });
     }
 

package/es/utils/commonUtil.js

@@ -14,7 +14,7 @@ exports.dragSource = void 0;
 exports.ensure = ensure;
 exports.getColorRgba = void 0;
 exports.getPageDataMap = getPageDataMap;
-exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
+exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
 exports.pushGA = pushGA;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
@@ -474,4 +474,29 @@ function covertKey(data, func) {
   var newData = (0, _lodash.cloneDeep)(data);
   func(newData);
   return JSON.stringify(newData);
-}
+}
+
+var nextTick = function nextTick(func, interval, count) {
+  if (interval === void 0) {
+    interval = 100;
+  }
+
+  if (count === void 0) {
+    count = 5;
+  }
+
+  try {
+    func();
+  } catch (error) {
+    if (count == 0) {
+      console.error('nextTick 失败');
+      return;
+    }
+
+    setTimeout(function () {
+      nextTick(func, interval, count - 1);
+    }, interval);
+  }
+};
+
+exports.nextTick = nextTick;

package/lib/common/ColorPicker/index.less

@@ -1,5 +1,6 @@
 .m-color-picker-panel {
-  position: absolute;
+  position: fixed;
+  bottom: 5px;
   z-index: 999;
 
   .panel-bg {

package/lib/common/ImageModal/index.js

@@ -427,46 +427,18 @@ function ImageModal(_a) {
         }
       });
     });
-  };
-
-  var getPreConfig = function getPreConfig() {
-    return __awaiter(_this, void 0, void 0, function () {
-      var wapUrl_1, error_1;
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            _a.trys.push([0, 2,, 3]);
-
-            return [4
-            /*yield*/
-            , (0, _commonUtil.commonFetch)("/designer/v1/" + window.magicDesign.MBaseUrl + "/pages/platforminfo")];
+  }; // const getPreConfig = async () => {
+  //   try {
+  //     const { wapUrl } = await commonFetch(`/designer/v1/${window.magicDesign.MBaseUrl}/pages/platforminfo`);
+  //     setWapUrl(wapUrl);
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // };
 
-          case 1:
-            wapUrl_1 = _a.sent().wapUrl;
-            setWapUrl(wapUrl_1);
-            return [3
-            /*break*/
-            , 3];
-
-          case 2:
-            error_1 = _a.sent();
-            console.error(error_1);
-            return [3
-            /*break*/
-            , 3];
-
-          case 3:
-            return [2
-            /*return*/
-            ];
-        }
-      });
-    });
-  };
 
   (0, _react.useEffect)(function () {
-    getContentCatgs();
-    getPreConfig();
+    getContentCatgs(); // getPreConfig();
   }, []);
 
   var selectFolder = function selectFolder(id) {

package/lib/common/Video/index.js

@@ -310,7 +310,32 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {};
-    _this.player = null;
+    _this.player = {
+      play: function play() {
+        if (_this.aliPlayer) {
+          _this.aliPlayer.play();
+        }
+
+        if (_this.ytPlayer) {
+          _this.ytPlayer.playVideo();
+        }
+      },
+      pause: function pause() {
+        if (_this.aliPlayer) {
+          _this.aliPlayer.play();
+        }
+
+        if (_this.ytPlayer) {
+          _this.ytPlayer.pauseVideo();
+        }
+      }
+    };
+    /** 阿里播放器 */
+
+    _this.aliPlayer = null;
+    /** YouTube播放器 */
+
+    _this.ytPlayer = null;
     /** 创建视频弹框显示 */
 
     _this.createVideoModal = function (videoId) {
@@ -352,7 +377,7 @@ function (_super) {
 
     _this.getInit = function () {
       return __awaiter(_this, void 0, void 0, function () {
-        var _a;
+        var videoId_1, _a;
 
         var _this = this;
 
@@ -372,23 +397,60 @@ function (_super) {
               _b.label = 2;
 
             case 2:
-              if (!this.props.opts.source) return [3
+              if (!!window.YT) return [3
               /*break*/
               , 4];
+              return [4
+              /*yield*/
+              , Promise.all([(0, _commonUtil.importAsync)('https://www.youtube.com/iframe_api', 'js')])];
+
+            case 3:
+              _b.sent();
+
+              _b.label = 4;
+
+            case 4:
+              if (!this.props.opts.source) return [3
+              /*break*/
+              , 7];
+              if (!/youtu/.test(this.props.opts.source)) return [3
+              /*break*/
+              , 5];
+              videoId_1 = this.props.opts.source.split('youtu.be/')[1];
+              (0, _commonUtil.nextTick)(function () {
+                _this.ytPlayer = new YT.Player('video' + _this.props.videoId, {
+                  height: '100%',
+                  width: '100%',
+                  videoId: videoId_1,
+                  events: {
+                    onReady: function onReady() {
+                      console.log('onReady');
+                    },
+                    onStateChange: function onStateChange() {
+                      console.log('onStateChange');
+                    }
+                  }
+                });
+              }, 500, 10);
+              return [3
+              /*break*/
+              , 7];
+
+            case 5:
               _a = this;
               return [4
               /*yield*/
               , createVideo(this.props.videoId, this.props.opts)];
 
-            case 3:
-              _a.player = _b.sent();
-              this.player.on('ended', function () {
+            case 6:
+              _a.aliPlayer = _b.sent();
+              this.aliPlayer.on('ended', function () {
                 if (!_this.props.opts.loop) {// this.props.onEnd();
                 }
               });
-              _b.label = 4;
+              _b.label = 7;
 
-            case 4:
+            case 7:
               return [2
               /*return*/
               ];
@@ -397,13 +459,8 @@ function (_super) {
       });
     };
 
-    _this.fullPlay = function (type) {
-      // if (type == 'h5') {
-      //   this.player.fullscreenService.requestFullScreen();
-      // }
-      // if (type == 'pc') {
-      _this.createVideoModal(_this.props.videoId); // }
-
+    _this.fullPlay = function () {
+      _this.createVideoModal(_this.props.videoId);
     };
 
     return _this;
@@ -418,10 +475,10 @@ function (_super) {
         videoId = _a.videoId,
         opts = _a.opts,
         play = _a.play;
-    console.log('play: ', play);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "video-container"
     }, opts.source ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-wrap",
       id: 'video' + videoId
     }) : null, !play && /*#__PURE__*/_react["default"].createElement("div", {
       className: "cover-video"

package/lib/common/Video/index.less

@@ -15,6 +15,11 @@
     top: 0;
     background-color: rgba(0, 0, 0, 0);
   }
+
+  .video-wrap {
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .pc-video-modal-wrap {

package/lib/composite-comp/bol/components/Banner/defaultJSON.js

@@ -7,10 +7,6 @@ exports.getDefaultJSON = exports.bannerGroupSourceJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _banner = _interopRequireDefault(require("./imgs/banner.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
   var groupId = (0, _uuid.v4)();
   return {
@@ -23,8 +19,8 @@ var bannerGroupSourceJSON = function bannerGroupSourceJSON() {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {

package/lib/composite-comp/bol/components/Carousel/defaultJSON.js

@@ -18,8 +18,8 @@ var imagesGroupSourceJSON = function imagesGroupSourceJSON(compId) {
       open: true,
       type: 'IMAGE',
       content: {
-        h5Name: 'h5Name',
-        pcName: 'pcName',
+        h5Name: 'Image Name',
+        pcName: 'Image Name',
         h5ImgSrc: '',
         pcImgSrc: '',
         clickUrl: ''

package/lib/composite-comp/bol/components/Carousel/mobile/index.js

@@ -208,12 +208,13 @@ function (_super) {
         });
       }
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) + 12 + "px";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-mobile"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '20px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, /*#__PURE__*/_react["default"].createElement(_reactSlick["default"], _extends({
       ref: function ref(slider) {

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

@@ -85,11 +85,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2em;
+        height: 1em;
         border-radius: 100px;
         opacity: 1;
       }

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -205,12 +205,14 @@ function (_super) {
       fontSize: data.setting.navigation.size,
       color: data.setting.navigation.color
     };
+    var dotsSpace = Math.max(data.setting.dots.size, data.setting.dots.hoverSize) * 1.25 + 20 + "px";
+    var sliderWidth = "calc(100% - " + (data.setting.navigation.size + 20) * 2 + "px)";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-carousel-pc"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "content",
       style: {
-        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? '30px' : '0'
+        paddingBottom: data.setting.dots.open && data.groupSource.length / colNum > 1 ? dotsSpace : '0'
       }
     }, data.setting.navigation.open && /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       className: "carousel-icon-left",
@@ -225,7 +227,11 @@ function (_super) {
       ref: function ref(slider) {
         return _this.sliderRef = slider;
       }
-    }, settings), data.groupSource.map(function (item) {
+    }, settings, {
+      style: {
+        width: sliderWidth
+      }
+    }), data.groupSource.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         key: item.id,
         className: "img-wrap"

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

@@ -18,7 +18,7 @@
   }
 
   .slider-wrap {
-    width: calc(100% - 72px);
+    // width: calc(100% - 72px);
     margin: 0 auto;
     line-height: 1;
 
@@ -101,11 +101,16 @@
       border-radius: 50%;
       background: #FFF;
       cursor: inherit;
-      margin-right: 1.25em;
+      margin-right: 10px;
       transition: all .5s;
 
+      &:last-child {
+        margin-right: 0;
+      }
+
       &.active {
         width: 2.5em;
+        height: 1.25em;
         border-radius: 100px;
         opacity: 1;
       }

package/lib/composite-comp/bol/components/Text/index.js

@@ -59,11 +59,6 @@ var __decorate = void 0 && (void 0).__decorate || function (decorators, target,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 
-// import './index.less';
-// less to css 在线地址 https://tool.oschina.net/less
-// css 压缩地址 https://www.runoob.com/csspack
-var style = '.m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{padding:10px 20px;}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}';
-
 var Text =
 /** @class */
 function (_super) {
@@ -80,6 +75,8 @@ function (_super) {
         nodeData = _b.nodeData,
         mode = _b.mode,
         outputType = _b.outputType;
+    var groupWrapContainerStyle = window.magicDesign.device === 'pc' ? 'padding: 16px 20px;' : 'padding: 12px 20px;';
+    var style = ".m-text{display: flex;flex-direction: column;}.m-text .title-wrap{font-weight:500;font-size:20px;}.m-text .sub-title-text{font-size:15px;color:#b7b7b7;margin-top:10px;}.m-text .group-content-wrap{width:100%;}.m-text .group-content-wrap .group-wrap-container{" + groupWrapContainerStyle + "}.m-text .group-content-wrap .group-wrap{display:flex;flex-direction:column;width:100%;}.m-text .group-content-wrap .group-wrap .group-title{font-size:14px;}.m-text .group-content-wrap.col-1 .group-wrap{width:100%;}.m-text .group-content-wrap.col-2{display:grid;grid-template-columns:50% 50%;}.m-text .group-content-wrap.col-3{display:grid;grid-template-columns:33.3% 33.3% 33.3%;}.m-text .group-content-wrap.mobile{display:block;}";
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-text",
       onClick: this.onComponentClick

package/lib/composite-comp/bol/components/Text/index.less

@@ -1,7 +1,7 @@
 .m-text {
   display: flex;
   flex-direction: column;
-  
+
   .title-wrap {
     font-weight: 500;
     font-size: 20px;
@@ -17,7 +17,7 @@
     width: 100%;
 
     .group-wrap-container {
-      padding: 10px 20px;
+      padding: 16px 20px;
     }
 
     .group-wrap {

package/lib/composite-comp/bol/components/Video/defaultJSON.js

@@ -7,10 +7,6 @@ exports.videoGroupSourceJSON = exports.getDefaultJSON = void 0;
 
 var _uuid = require("uuid");
 
-var _banner = _interopRequireDefault(require("./imgs/banner.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
   var groupId = (0, _uuid.v4)();
   return {
@@ -24,8 +20,8 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {
@@ -141,8 +137,8 @@ var videoGroupSourceJSON = function videoGroupSourceJSON(parentId) {
       content: {
         h5Name: 'name2',
         pcName: 'name2',
-        h5ImgSrc: _banner["default"],
-        pcImgSrc: _banner["default"],
+        h5ImgSrc: '',
+        pcImgSrc: '',
         clickUrl: ''
       },
       hover: {}

package/lib/composite-comp/bol/config-panels/CarouselConfig/CarouselConfigImageGroup/index.js

@@ -112,7 +112,7 @@ function (_super) {
         src: ((0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc) || _defaultImg["default"]
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: "name"
-      }, (0, _coreUtil.isPc)() ? src.image.content.pcImgSrc : src.image.content.h5ImgSrc));
+      }, (0, _coreUtil.isPc)() ? src.image.content.pcName : src.image.content.h5Name));
     };
 
     return /*#__PURE__*/_react["default"].createElement("div", {

package/lib/core/Designer/ConfigPanel/index.js

@@ -217,7 +217,7 @@ function (_super) {
     };
 
     _this.getSecondConfigName = function () {
-      var _a, _b, _c, _d, _e;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
 
       var selectedNode = _this.state.selectedNode;
 
@@ -237,6 +237,7 @@ function (_super) {
       }
 
       var groupName = '';
+      console.log('...', selectedNode.type, panelProps);
 
       switch (selectedNode.type) {
         case 'IMAGE_GALLERY':
@@ -250,11 +251,19 @@ function (_super) {
 
           break;
 
+        case 'CAROUSEL':
+          groupName = (0, _coreUtil.isPc)() ? (_g = (_f = panelProps.image) === null || _f === void 0 ? void 0 : _f.content) === null || _g === void 0 ? void 0 : _g.pcName : (_j = (_h = panelProps.image) === null || _h === void 0 ? void 0 : _h.content) === null || _j === void 0 ? void 0 : _j.h5Name;
+          break;
+
         case 'MOBILE_NAVIGATION':
         case 'PC_NAVIGATION':
           groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
           break;
 
+        case 'TEXT':
+          groupName = panelProps.content.title.text;
+          break;
+
         case 'RECOMMEND':
           groupName = panelProps.groupName.text;
           break;

package/lib/core/Designer/PageCompList/index.js

@@ -15,6 +15,8 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _lodash = require("lodash");
+
 var _common = require("../../../common");
 
 var _coreUtil = require("../../../utils/coreUtil");
@@ -78,6 +80,15 @@ function PageCompList(_a) {
       setHoveredFloor = _e[1];
 
   var ref = (0, _react.useRef)();
+
+  var getActiveComponents = function getActiveComponents() {
+    var filter = components.filter(function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return filter;
+  };
+
+  var activeComponents = getActiveComponents();
   (0, _react.useEffect)(function () {
     setComponents(pageData || []);
   }, [pageData]);
@@ -109,7 +120,6 @@ function PageCompList(_a) {
   };
 
   var onDragEnter = function onDragEnter(e) {
-    console.log('drag enter');
     var hoverNodeId = e.currentTarget.dataset.nodeid;
 
     if (dragId === hoverNodeId) {
@@ -127,18 +137,36 @@ function PageCompList(_a) {
     }
   };
 
+  var getLastSameIndex = function getLastSameIndex(comps, index) {
+    var lastComps = comps.slice(0, index);
+    var newIndex = (0, _lodash.findLastIndex)(lastComps, function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return newIndex;
+  };
+
+  var getNextSameIndex = function getNextSameIndex(comps, index) {
+    var nextComps = comps.slice(index + 1);
+    var newIndex = (0, _lodash.findIndex)(nextComps, function (comp) {
+      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
+    });
+    return newIndex + index + 1;
+  };
+
   var onMenuClick = function onMenuClick(activeComp, operType) {
     var newComponents = __spreadArrays(components);
 
     var index = newComponents.indexOf(activeComp);
 
     if (operType === operTypeMap.MOVE_UP) {
-      var temp = newComponents[index - 1];
-      newComponents[index - 1] = newComponents[index];
+      var newIndex = getLastSameIndex(newComponents, index);
+      var temp = newComponents[newIndex];
+      newComponents[newIndex] = newComponents[index];
       newComponents[index] = temp;
     } else if (operType === operTypeMap.MOVE_DOWN) {
-      var temp = newComponents[index + 1];
-      newComponents[index + 1] = newComponents[index];
+      var newIndex = getNextSameIndex(newComponents, index);
+      var temp = newComponents[newIndex];
+      newComponents[newIndex] = newComponents[index];
       newComponents[index] = temp;
     } else if (operType === operTypeMap.COPY) {
       var copyComponent = (0, _coreUtil.copyNode)(newComponents[index]);
@@ -193,7 +221,7 @@ function PageCompList(_a) {
     }, index !== 0 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",
       value: "1"
-    }, (0, _locale.i18n)('MOVE_UP')), index !== components.length - 1 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
+    }, (0, _locale.i18n)('MOVE_UP')), index !== activeComponents.length - 1 && /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
       className: "menu_item",
       value: "2"
     }, (0, _locale.i18n)('MOVE_DOWN')), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
@@ -277,14 +305,6 @@ function PageCompList(_a) {
     })));
   };
 
-  var getActiveComponents = function getActiveComponents() {
-    var filter = components.filter(function (comp) {
-      return (0, _coreUtil.isActiveFloor)(comp.activeTerminal);
-    });
-    return filter;
-  };
-
-  var activeComponents = getActiveComponents();
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "page-comp-wrap"
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/meta-comp/components/Text/index.js

@@ -481,7 +481,8 @@ function (_super) {
       style = __assign(__assign({}, style), {
         textDecorationLine: data.underline.open ? 'underline' : 'none',
         textDecorationColor: data.underline.textDecorationColor,
-        textDecorationStyle: data.underline.textDecorationStyle
+        textDecorationStyle: data.underline.textDecorationStyle,
+        textUnderlineOffset: Math.ceil(style.fontSize * 0.2) + 'px'
       });
     }
 

package/lib/utils/commonUtil.js

@@ -14,7 +14,7 @@ exports.dragSource = void 0;
 exports.ensure = ensure;
 exports.getColorRgba = void 0;
 exports.getPageDataMap = getPageDataMap;
-exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
+exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
 exports.pushGA = pushGA;
 exports.shareFacebook = shareFacebook;
 exports.shareLinkedin = shareLinkedin;
@@ -474,4 +474,29 @@ function covertKey(data, func) {
   var newData = (0, _lodash.cloneDeep)(data);
   func(newData);
   return JSON.stringify(newData);
-}
+}
+
+var nextTick = function nextTick(func, interval, count) {
+  if (interval === void 0) {
+    interval = 100;
+  }
+
+  if (count === void 0) {
+    count = 5;
+  }
+
+  try {
+    func();
+  } catch (error) {
+    if (count == 0) {
+      console.error('nextTick 失败');
+      return;
+    }
+
+    setTimeout(function () {
+      nextTick(func, interval, count - 1);
+    }, interval);
+  }
+};
+
+exports.nextTick = nextTick;

package/package.json

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