@fonixtree/magic-design 0.0.60 → 0.0.62

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

@@ -622,7 +622,7 @@ function (_super) {
         scrollToRightDisabled = _a.scrollToRightDisabled;
     var bgStyle = this.getBackgroundStyle();
     var products = this.state["products" + tabIndex] || [];
-    var isDivide = groupSource.length <= 3;
+    var isDivide = groupSource.length <= 10;
     var layout = panelProps.customize.layout.pcLayout;
 
     var _seeAll = (0, _commonUtil.ensure)(function () {
@@ -716,6 +716,8 @@ function (_super) {
       className: (0, _classnames["default"])('scrollContainer', {
         pl_100: layout === 'layout3'
       })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "productList"
     }, products.map(function (item) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "productCard"
@@ -731,7 +733,7 @@ function (_super) {
         panelProps: panelProps.content,
         showProgress: false
       }));
-    }), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
+    })), _seeAll.open && products.length > 0 && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
       className: "btnSeeAll",
       data: _seeAll
     })), layout !== 'layout1' && /*#__PURE__*/_react["default"].createElement("div", {

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

@@ -25,7 +25,8 @@
     .tabTitle {
       display: flex;
       align-items: center;
-      padding: 0 24px;
+      // padding: 0 24px;
+      min-width: 100px;
       height: 100%;
       justify-content: center;
       white-space: nowrap;
@@ -87,18 +88,24 @@
   .scrollContainer {
     display: flex;
     flex-direction: row;
-    align-items: flex-start;
+    align-items: center;
     flex: 1;
     margin: 0;
     overflow-x: auto;
     padding-bottom: 15px;
 
-    &.pl_100 {
-      padding-left: 100px;
-    }
+    .productList {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
 
-    .productCard {
-      margin-right: 20px;
+      &.pl_100 {
+        padding-left: 100px;
+      }
+
+      .productCard {
+        margin-right: 20px;
+      }
     }
   }
 

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

@@ -25,6 +25,8 @@ var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _locale = require("../../../../locale");
 
+var _mobx = require("../../../../mobx");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -79,6 +81,10 @@ function (_super) {
       _this.selfRender();
     };
 
+    _this.getIsContentActive = function (content) {
+      return JSON.stringify(content).includes(_mobx.store.clickedMetaParent);
+    };
+
     return _this;
   }
 
@@ -100,7 +106,8 @@ function (_super) {
         name: (0, _locale.i18n)('CONTENT'),
         value: /*#__PURE__*/_react["default"].createElement(_RecommendConfigContent["default"], {
           panelProps: data.content
-        })
+        }),
+        active: this.getIsContentActive(data.content)
       }, {
         key: '3',
         name: (0, _locale.i18n)('SPACING'),

package/es/composite-comp/dito/second-config-panels/RecommendSecondConfig/AIRecommendation/index.js

@@ -215,17 +215,32 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      intelligentType: (0, _commonUtil.ensure)(function () {
-        return _this.props.value.intelligentType;
-      }, 'ALL'),
-      intelligentValue: (0, _commonUtil.ensure)(function () {
-        return _this.props.value.intelligentValue;
-      }, []),
+      intelligentType: 'ALL',
+      intelligentValue: [],
       categoryData: [],
       brandData: [],
       labelData: []
     };
 
+    _this.onChangeIntelligentType = function (type) {
+      return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+          this.setState({
+            intelligentType: type,
+            intelligentValue: []
+          });
+          this.getTypeData(type);
+          this.props.onChange({
+            intelligentType: type,
+            intelligentValue: []
+          });
+          return [2
+          /*return*/
+          ];
+        });
+      });
+    };
+
     _this.getTypeData = function (type) {
       return __awaiter(_this, void 0, void 0, function () {
         var res, res, res;
@@ -298,34 +313,29 @@ function (_super) {
       });
     };
 
-    _this.onChangeIntelligentType = function (type) {
-      return __awaiter(_this, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-          this.setState({
-            intelligentType: type,
-            intelligentValue: []
-          });
-          this.props.onChange({
-            intelligentType: type,
-            intelligentValue: []
-          });
-          this.getTypeData(type);
-          return [2
-          /*return*/
-          ];
-        });
-      });
-    };
-
     return _this;
   }
 
   AIRecommendation.prototype.componentDidMount = function () {
-    this.props.onChange({
-      intelligentType: this.state.intelligentType,
-      intelligentValue: this.state.intelligentValue
+    var _a = this.props.value,
+        intelligentType = _a.intelligentType,
+        intelligentValue = _a.intelligentValue;
+    this.getTypeData(intelligentType);
+    this.setState({
+      intelligentType: intelligentType,
+      intelligentValue: intelligentValue
+    });
+  };
+
+  AIRecommendation.prototype.componentWillReceiveProps = function (nextProps) {
+    var _a = nextProps.value,
+        intelligentType = _a.intelligentType,
+        intelligentValue = _a.intelligentValue;
+    this.getTypeData(intelligentType);
+    this.setState({
+      intelligentType: intelligentType,
+      intelligentValue: intelligentValue
     });
-    this.getTypeData(this.state.intelligentType);
   };
 
   AIRecommendation.prototype.render = function () {

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

@@ -17,8 +17,8 @@ function TerminalSelect(_a) {
   var value = _a.value,
       onChange = _a.onChange,
       terminalType = _a.terminalType;
-  var isActiveMobile = ['MOBILE', 'ALL'].includes(value);
-  var isActivePc = ['PC', 'ALL'].includes(value);
+  var isActiveMobile = !value || ['MOBILE', 'ALL'].includes(value);
+  var isActivePc = !value || ['PC', 'ALL'].includes(value);
 
   var onTerminalClick = function onTerminalClick(terminal) {
     // 至少选中一种终端
@@ -26,7 +26,7 @@ function TerminalSelect(_a) {
       return;
     }
 
-    if (value === 'ALL') {
+    if (!value || value === 'ALL') {
       if (terminal === 'PC') {
         onChange('MOBILE');
       } else {

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

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _mobx = require("../../../mobx");
-
 var _Button = _interopRequireDefault(require("../../../common/Button"));
 
 var _Iconfont = _interopRequireDefault(require("../../../common/Iconfont"));
@@ -82,13 +80,9 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.onBtnClick = function (event) {
-      var code = event.currentTarget.dataset.code;
-
-      if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
-        _mobx.store.setState({
-          clickedFloor: ''
-        });
-      }
+      var code = event.currentTarget.dataset.code; // if (code === quickMenuCode.SAVE || code === quickMenuCode.PUBLISH) {
+      //   store.setState({ clickedFloor: '' });
+      // }
 
       if (_this.props.device === _constants.deviceTypeMap.PC) {}
 

package/es/core/Designer/index.js

@@ -97,11 +97,13 @@ var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
   return r;
 };
 
+window.magicDesign = {
+  mode: 'designer',
+  device: _constants.deviceTypeMap.PHONE
+};
+
 var setDesignConfig = function setDesignConfig(data) {
-  window.magicDesign = __assign(__assign({
-    mode: 'designer',
-    device: _constants.deviceTypeMap.PHONE
-  }, data), {
+  window.magicDesign = __assign(__assign(__assign({}, window.magicDesign), data), {
     MBaseUrl: data.MBaseUrl || ''
   });
 };

package/es/decorator/metaDecorator.js

@@ -79,7 +79,8 @@ function metaDecorator(WrappedComponent) {
         event.preventDefault();
         event.stopPropagation();
         var parentId = (_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.parentId;
-        var metaId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.id;
+        var conentId = (_b = _this.props.data) === null || _b === void 0 ? void 0 : _b.contentId;
+        var metaId = (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id;
         var floorId = null; // group中的元组件
 
         if (parentId) {
@@ -90,9 +91,10 @@ function metaDecorator(WrappedComponent) {
         }
 
         _mobx.store.setState({
-          clickedMeta: (_c = _this.props.data) === null || _c === void 0 ? void 0 : _c.id,
+          clickedMeta: metaId,
           clickedGroup: parentId,
-          clickedFloor: floorId
+          clickedFloor: floorId,
+          clickedMetaParent: conentId
         });
       };
 

package/es/meta-comp/components/Button/index.less

@@ -4,7 +4,7 @@
   .btnContent {
     width: 100%;
     cursor: pointer;
-    display: inline-flex;
+    display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
@@ -15,6 +15,9 @@
 
     .item {
       width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     img {

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

@@ -12,6 +12,7 @@
     object-fit: contain;
     transition: all .2s linear;
     vertical-align: initial;
+    max-width: 100%;
   }
 
   &.backgroundImg {

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

@@ -439,6 +439,14 @@ function (_super) {
         textDecorationColor: data.underline.textDecorationColor,
         textDecorationStyle: data.underline.textDecorationStyle
       });
+    }
+
+    if (data === null || data === void 0 ? void 0 : data.spacing) {
+      if ((0, _coreUtil.isPc)()) {
+        style = __assign(__assign({}, style), data.spacing.pc);
+      } else {
+        style = __assign(__assign({}, style), data.spacing.mobile);
+      }
     } // const style: React.CSSProperties = {
     //   ...contentStyle(data.content),
     //   textDecorationLine: data?.underline.open ? 'underline' : 'none',

package/es/meta-comp/config-panels/ImageConfig/HotAreaConfig/index.js

@@ -53,12 +53,12 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var index =
+var HotAreaConfig =
 /** @class */
 function (_super) {
-  __extends(index, _super);
+  __extends(HotAreaConfig, _super);
 
-  function index() {
+  function HotAreaConfig() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
@@ -66,11 +66,14 @@ function (_super) {
     };
 
     _this.onCheckboxChange = function (e) {
-      var option = _this.props.option;
+      var _a = _this.props,
+          option = _a.option,
+          onChange = _a.onChange;
       console.log(e.target.checked);
-      option.openHotArea = e.target.checked;
+      option.clickUrl = '';
+      option.openHotArea = e.target.checked; // this.setState({});
 
-      _this.setState({});
+      onChange();
     };
 
     _this.onAddArea = function () {
@@ -100,7 +103,7 @@ function (_super) {
     return _this;
   }
 
-  index.prototype.render = function () {
+  HotAreaConfig.prototype.render = function () {
     var option = this.props.option;
     var visible = this.state.visible;
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -123,8 +126,8 @@ function (_super) {
     }));
   };
 
-  return index;
+  return HotAreaConfig;
 }(_react.Component);
 
-var _default = index;
+var _default = HotAreaConfig;
 exports["default"] = _default;

package/es/meta-comp/config-panels/ImageConfig/index.js

@@ -314,10 +314,14 @@ function (_super) {
       value: selectImg
     }), selectImg && /*#__PURE__*/_react["default"].createElement(_HotAreaConfig["default"], {
       imgUrl: selectImg,
+      onChange: function onChange() {
+        return _this.setState({});
+      },
       option: data.content
     }), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: "URL"
     }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+      disabled: data.content.openHotArea,
       onChange: function onChange(v) {
         data.content.clickUrl = v;
 

package/es/mobx/Store.js

@@ -14,7 +14,7 @@ var _storeUtil = require("../utils/storeUtil");
 var debug = require('debug')('worker:mobx');
 
 var CACHE_KEY = 'STORE';
-var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedFloor', 'textSelection', 'MPageData'];
+var whiteList = ['hoveredMeta', 'clickedMeta', 'clickedGroup', 'clickedMetaParent', 'clickedFloor', 'textSelection', 'MPageData'];
 
 var Store =
 /** @class */
@@ -26,7 +26,9 @@ function () {
 
     this.clickedMeta = ''; // 点击的元组件Id
 
-    this.clickedGroup = ''; // 点击的元组件组Id
+    this.clickedGroup = ''; // 点击的元组的上一层Id,即groupSourceId(元组件在Group中)
+
+    this.clickedMetaParent = ''; // 点击的元组的上一层Id(元组件不在Group中，Recommend组件)
 
     this.clickedFloor = ''; // 点击的楼层Id
 
@@ -42,6 +44,7 @@ function () {
       hoveredMeta: _mobx.observable,
       clickedMeta: _mobx.observable,
       clickedGroup: _mobx.observable,
+      clickedMetaParent: _mobx.observable,
       clickedFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
       setState: _mobx.action.bound

package/es/utils/coreUtil.js

@@ -35,7 +35,7 @@ var _this = void 0;
 
 /** 根据楼层设置的终端类型，判断是否展示该楼层 */
 var isActiveFloor = function isActiveFloor(activeTerminal) {
-  return activeTerminal === 'ALL' || activeTerminal === window.magicDesign.device.toUpperCase();
+  return !activeTerminal || activeTerminal === 'ALL' || activeTerminal === window.magicDesign.device.toUpperCase();
 };
 
 exports.isActiveFloor = isActiveFloor;

package/lib/assets/less/modal.less

@@ -1,19 +1,24 @@
 [magic_design] .ant-modal-wrap {
   display: flex;
   align-items: center;
+
   .ant-modal {
     width: 100%;
     top: 0 !important;
-    padding-bottom:  0px !important;
+    padding-bottom: 0px !important;
+
     .ant-modal-content {
       border-radius: 8px !important;
+
       .ant-modal-header {
         border-top-left-radius: 8px !important;
         border-top-right-radius: 8px !important;
       }
+
       .ant-modal-body {
         padding: 16px 16px 12px 16px !important;
+        max-height: 800px !important;
       }
     }
   }
-}
+}

package/lib/common/ButtonIconLayout/index.less

@@ -7,8 +7,10 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 94px;
-    height: 50px;
+    min-width: 94px;
+    min-height: 50px;
+    padding: 6px 10px;
+    box-sizing: border-box;
     background: #FFFFFF;
     border: 1px solid #D2D9E5;
     border-radius: 8px;

package/lib/common/Collapse/index.js

@@ -94,8 +94,19 @@ function (_super) {
         return;
       }
 
-      if (type === 'switch') {
-        debug('source', source);
+      var activeItem = source.find(function (src) {
+        return src.active;
+      });
+
+      if (activeItem) {
+        actives.push(activeItem.key);
+
+        _this.setState({
+          activeKey: actives
+        });
+
+        return;
+      } else if (type === 'switch') {
         var first = source.find(function (src) {
           var _a;
 
@@ -324,10 +335,12 @@ function (_super) {
     var _this = this;
 
     this.distroy = (0, _mobx.autorun)(function () {
-      if (_this.props.type === 'switch' && _mobx.store.clickedMeta) {
+      if (_mobx.store.clickedMeta && _this.props.type === 'switch') {
         _this.setState({
           activeKey: [_mobx.store.clickedMeta]
         });
+      } else if (_mobx.store.clickedMeta && _this.props.type === 'triangle') {
+        _this.initActive(_this.props);
       }
     });
   }; // componentWillReceiveProps(nextProps) {

package/lib/common/ImageModal/index.less

@@ -1,4 +1,8 @@
 .catg_tree_container {
+  .search_container {
+    margin-bottom: 15px;
+  }
+
   .ant-tree-title {
     max-width: 200px;
     overflow: hidden;
@@ -13,9 +17,10 @@
     display: flex;
     flex-wrap: wrap;
   }
+
   .ant-upload-list-item-thumbnail {
     img {
       object-fit: contain;
     }
   }
-}
+}

package/lib/common/UrlPicker/index.js

@@ -63,10 +63,13 @@ function (_super) {
     var visible = this.state.visible;
     var _a = this.props,
         value = _a.value,
-        _onChange = _a.onChange;
+        _onChange = _a.onChange,
+        disabled = _a.disabled;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "m-url-picker"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, disabled && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "disabled"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
       className: "input-url"
     }, /*#__PURE__*/_react["default"].createElement("input", {
       onChange: function onChange(e) {
@@ -112,6 +115,7 @@ function (_super) {
 
   UrlPicker.defaultProps = {
     value: '',
+    disabled: false,
     onChange: function onChange() {}
   };
   return UrlPicker;

package/lib/common/UrlPicker/index.less

@@ -1,5 +1,16 @@
 .m-url-picker {
-
+  position: relative;
+  .disabled {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: #D2D9E5;
+    z-index: 1;
+    opacity: 0.5;
+    border-radius: 8px;
+  }
   .input-url {
     width: 100%;
     height: 40px;

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

@@ -59,8 +59,7 @@ function (_super) {
 
     _this.state = {
       carouseIndex: 0,
-      hoverState: false,
-      clickedGroup: ''
+      hoverState: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.destroy = null;
@@ -120,12 +119,11 @@ function (_super) {
     var data = this.props.data;
     var _a = this.state,
         carouseIndex = _a.carouseIndex,
-        hoverState = _a.hoverState,
-        clickedGroup = _a.clickedGroup;
+        hoverState = _a.hoverState;
     var autoplay = data.setting.autoplay.open;
     /** 设计器模式下 如果选中特定group 自动播放关闭 */
 
-    if ((0, _coreUtil.isDesignMode)() && clickedGroup) {
+    if ((0, _coreUtil.isDesignMode)() && _mobx.store.clickedGroup) {
       autoplay = false;
     }
 

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

@@ -23,6 +23,8 @@ var _AlignSelector = require("../../../../../common/AlignSelector");
 
 var _common = require("../../../../../common");
 
+var _commonUtil = require("../../../../../utils/commonUtil");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var __extends = void 0 && (void 0).__extends || function () {
@@ -125,8 +127,7 @@ function (_super) {
       };
 
       if (item.background.bgType === 'color') {
-        bgStyle.opacity = item.background.opacity ? item.background.opacity / 100 : 1;
-        bgStyle.backgroundColor = item.background.color;
+        bgStyle.backgroundColor = (0, _commonUtil.getColorRgba)(item.background.color || '#fff', item.background.opacity / 100 || 1);
       } else {
         bgStyle.backgroundImage = "url(" + item.background.image + ")";
       }