@fonixtree/magic-design 0.0.53 → 0.0.55

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

@@ -0,0 +1,121 @@
+.m-flash-deal-pc {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px 28px 16px;
+
+  .flash-deal-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        height: 18px;
+        margin-right: 10px;
+      }
+
+      .title {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 18px;
+        color: #2C2C2C;
+        margin-right: 10px;
+      }
+
+      .sub-title {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 18px;
+        color: #2C2C2C;
+        margin-right: 6px;
+        align-self: end;
+      }
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      .text {
+        font-family: 'Montserrat';
+        font-style: normal;
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 15px;
+        color: #0038A8;
+        margin-right: 5px;
+      }
+
+      .btn {
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .flash-deal-content {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+
+    .arrow-icon {
+      display: block;
+      width: 36px;
+      height: 36px;
+      line-height: 42px;
+      text-align: center;
+      background: #FFFFFF;
+      box-shadow: -1px -1px 4px rgba(45, 48, 64, 0.08), 1px 1px 4px rgba(45, 48, 64, 0.08);
+      border-radius: 100px;
+      cursor: pointer;
+
+      &.left {
+        margin-right: 30px;
+      }
+
+      &.right {
+        margin-left: 30px;
+      }
+    }
+  }
+
+  .flash-deal-list {
+    margin-top: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    flex: 1;
+
+    .loading-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 30px;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      margin: auto;
+    }
+
+    // 秒杀特有样式
+    .m-product-item-wrap {
+      width: 142px;
+      margin-right: 24px;
+
+      .product-name {
+        height: 36px;
+      }
+    }
+  }
+}

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

@@ -39,7 +39,7 @@ var MobileNavGroupSourceJSON = function MobileNavGroupSourceJSON() {
       specialContent: [],
       text: 'name',
       content: {
-        sizeType: 'Headline 1',
+        sizeType: 'Customize font styles',
         fontFamily: 'Open Sans',
         fontWeight: 600,
         fontSize: 12,
@@ -66,12 +66,12 @@ var getDefaultJSON = function getDefaultJSON() {
       pc: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 10,
         paddingBottom: 10,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

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

@@ -268,14 +268,14 @@ var getDefaultJSON = function getDefaultJSON() {
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing * 1.5
       },
       mobile: {
         paddingTop: 0,
         paddingBottom: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        marginBottom: 0
+        marginBottom: window.magicDesign.compSpacing
       }
     },
     customize: {

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

@@ -17,8 +17,6 @@ var _coreUtil = require("../../../../utils/coreUtil");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
-var _businessUtil = require("../../../../utils/businessUtil");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,10 +72,7 @@ function (_super) {
 
   Recommend.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var wrapStyle = (0, _businessUtil.computeStyle)(nodeData, window.magicDesign.device);
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      style: wrapStyle
-    }, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       panelProps: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       panelProps: nodeData

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

@@ -700,7 +700,7 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false
@@ -726,7 +726,7 @@ function (_super) {
         imgHeight: imgHeight,
         imgWidth: imgWidth,
         onItemClick: function onItemClick() {
-          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId + "?productId=" + (item.sppProductId || item.productId || ''));
+          return (0, _coreUtil.clickUrl)("/product/detail/" + item.offerId);
         },
         panelProps: panelProps.content,
         showProgress: false

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

@@ -48,7 +48,7 @@ function FlashDealConfig(props) {
         isHideAlign: true,
         layoutSource: [{
           id: 'layout1',
-          name: 'left',
+          name: 'layout1',
           image: _layout["default"]
         }]
       })

package/es/core/Designer/index.js

@@ -335,8 +335,6 @@ function (_super) {
 
           break;
       }
-
-      console.log(JSON.stringify(handleParams.pageData));
     };
 
     _this.renderHeader = function () {

package/es/decorator/compositeDecorator.js

@@ -41,6 +41,22 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
+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);
+};
+
 function compositeDecorator(WrappedComponent) {
   var Wrapper =
   /** @class */
@@ -74,26 +90,43 @@ function compositeDecorator(WrappedComponent) {
       };
 
       _this.getStyle = function () {
-        var style = {
+        var wrapStyle = {
           border: 'none'
-        }; // 处理复合组件的选中状态
-
-        if (window.magicDesign.mode === 'designer') {
+        };
+        var _a = window.magicDesign,
+            device = _a.device,
+            mode = _a.mode;
+        var nodeData = _this.props.nodeData;
+        var spacing = nodeData.spacing,
+            background = nodeData.background; // 处理复合组件的选中状态
+
+        if (mode === 'designer') {
           // style.border = '1px solid transparent';
-          style.border = 'none';
+          wrapStyle.border = 'none';
 
-          if (_this.props.nodeData.id === _this.state.clickedFloor) {
-            style.border = '1px dashed red';
+          if (nodeData.id === _this.state.clickedFloor) {
+            wrapStyle.border = '1px dashed red';
           }
-        } // 处理复合组件的下边距
+        } // 边距
+
 
+        if (spacing && spacing[device]) {
+          wrapStyle = __assign(__assign({}, wrapStyle), spacing[device]);
+        } // 背景
 
-        if (Wrapper.type !== 'DIVIDER') {
-          var rate = window.magicDesign.device === 'pc' ? 1.5 : 1;
-          style.marginBottom = Number(window.magicDesign.compSpacing) * rate + "px";
+
+        if (background) {
+          if (background.bgType === 'color') {
+            wrapStyle.backgroundColor = background.color;
+            wrapStyle.opacity = background.opacity ? background.opacity : 1;
+          } else {
+            wrapStyle.backgroundImage = "url(" + background.image + ")";
+            wrapStyle.backgroundPosition = 'center';
+            wrapStyle.backgroundSize = 'cover';
+          }
         }
 
-        return style;
+        return wrapStyle;
       };
 
       return _this;

package/es/locale/en/en.json

@@ -1,4 +1,7 @@
 {
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

package/es/locale/es/es.json

@@ -1,4 +1,7 @@
 {
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Guardar",

package/es/locale/id/id.json

@@ -1,4 +1,7 @@
 {
+  "ADD_CLICKABLE_AREA": "Add Clickable Area",
+  "ADD_AREA": "Add Area",
+  "CLICKABLE_AREA": "Clickable Area",
   "NAVIGATION_NAME": "Navigation Name",
   "ADD_NAVIGATION": "Add Navigation",
   "SAVE": "Save",

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

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.less");
 
-var _businessUtil = require("../../../utils/businessUtil");
-
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _decorator = require("../../../decorator");
@@ -152,7 +150,6 @@ function (_super) {
       suppressContentEditableWarning: true
     }, data.text);
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('m-meta-button', className),
       onClick: function onClick() {
@@ -168,7 +165,7 @@ function (_super) {
           hover: false
         });
       },
-      style: __assign(__assign({}, style), wrapStyle)
+      style: __assign({}, style)
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('btnContent', {
         horizontal: iconLayout === 'left' || iconLayout === 'right'

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

@@ -14,7 +14,7 @@
 
     img {
       height: 20px;
-      margin-right: 5px;
+      margin: 0 5px;
     }
   }
 }

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

@@ -65,9 +65,11 @@ function (_super) {
   function Image() {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
+    _this.imgRef = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
       // 当仅作为一个图片时，鼠标移上去，hover状态
-      hoverImgSrc: false
+      hoverImgSrc: false,
+      scale: 1
     };
 
     _this.getStyle = function () {
@@ -146,6 +148,8 @@ function (_super) {
   }
 
   Image.prototype.render = function () {
+    var _this = this;
+
     var _a, _b;
 
     var _c = this.props,
@@ -176,12 +180,36 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+      ref: this.imgRef,
+      onLoad: function onLoad() {
+        var scale = _this.imgRef.current.clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
       onMouseEnter: this.mouseEnterImg,
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: this.getStyle()
-    }));
+    }), data.content.areas && data.content.areas.length > 0 && data.content.areas.map(function (v, i) {
+      var aStyle = {
+        position: 'absolute',
+        top: parseInt(v.y * _this.state.scale),
+        left: parseInt(v.x * _this.state.scale),
+        width: parseInt(v.width * _this.state.scale),
+        height: parseInt(v.height * _this.state.scale)
+      };
+      return /*#__PURE__*/_react["default"].createElement("a", {
+        key: i,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          (0, _coreUtil.clickUrl)(v.inputVal);
+        },
+        style: aStyle
+      });
+    })));
   };
 
   Image.defaultProps = {

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

@@ -1,4 +1,5 @@
 .m-meta-image {
+  position: relative;
   width: 100%;
   height: 100%;
   display: flex;

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

@@ -17,8 +17,6 @@ var _Iconfont = require("../../../common/Iconfont");
 
 var _decorator = require("../../../decorator");
 
-var _businessUtil = require("../../../utils/businessUtil");
-
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _mobx = require("../../../mobx");
@@ -438,7 +436,6 @@ function (_super) {
       textDecorationStyle: data.underline.textDecorationStyle
     });
 
-    var wrapStyle = (0, _businessUtil.computeStyle)(data, window.magicDesign.device);
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.textRef,
       className: (0, _classnames["default"])('m-meta-text', className),
@@ -461,7 +458,7 @@ function (_super) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      style: __assign(__assign({}, style), wrapStyle),
+      style: __assign({}, style),
       suppressContentEditableWarning: true
     });
   };

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

@@ -157,7 +157,7 @@ function (_super) {
         return /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
           value: sizeType.key
         }, sizeType.key);
-      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), data.sizeType == 'Customize font styles' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_FAMILY')
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
         onChange: function onChange(v) {
@@ -191,7 +191,7 @@ function (_super) {
         value: {
           count: data[fontSizeKey]
         }
-      })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: ""
       }, /*#__PURE__*/_react["default"].createElement(_common.FontStyles, {
         onChange: function onChange(value) {

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

@@ -0,0 +1,164 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _common = require("../../../../common");
+
+require("./index.less");
+
+var _locale = require("../../../../locale");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+var AreaConfigModal =
+/** @class */
+function (_super) {
+  __extends(AreaConfigModal, _super);
+
+  function AreaConfigModal() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      drawCoordinates: _this.props.value || []
+    };
+
+    _this.setCoordinate = function (coordinate, index, coordinates) {
+      _this.setState({
+        drawCoordinates: coordinates
+      });
+    };
+
+    _this.addArea = function () {
+      var drawCoordinates = _this.state.drawCoordinates;
+
+      var newCoordinates = __spreadArrays(drawCoordinates, [{
+        height: 50,
+        id: "Hyp_dBIiD" + drawCoordinates.length,
+        inputVal: '',
+        width: 100,
+        x: 54 + drawCoordinates.length * 10,
+        y: 38 + drawCoordinates.length * 10
+      }]);
+
+      _this.setState({
+        drawCoordinates: newCoordinates
+      });
+    };
+
+    _this.onOkClick = function () {
+      var onOk = _this.props.onOk;
+      var drawCoordinates = _this.state.drawCoordinates;
+      onOk(drawCoordinates);
+    };
+
+    return _this;
+  }
+
+  AreaConfigModal.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.props,
+        visible = _a.visible,
+        onCancel = _a.onCancel;
+    var drawCoordinates = this.state.drawCoordinates;
+    return /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
+      centered: true,
+      draggable: false,
+      onCancel: onCancel,
+      onOk: this.onOkClick,
+      title: "clickable Area",
+      visible: visible,
+      width: "auto"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "body_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_common.ImgArea, {
+      coordinates: drawCoordinates,
+      onChange: this.setCoordinate,
+      onDelete: this.setCoordinate,
+      onSave: this.setCoordinate,
+      src: this.props.imgUrl,
+      width: "100%"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "area_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btn_wrap",
+      onClick: this.addArea
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      size: 20,
+      type: "icon-add"
+    }), /*#__PURE__*/_react["default"].createElement("span", null, (0, _locale.i18n)('ADD_CLICKABLE_AREA'))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "list_wrap"
+    }, drawCoordinates.map(function (v, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "add_item"
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "title"
+      }, "Clickable Area ", i + 1), /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        onChange: function onChange(data) {
+          v.inputVal = data;
+
+          _this.setState({
+            drawCoordinates: __spreadArrays(drawCoordinates)
+          });
+        },
+        value: v.inputVal
+      }));
+    })))));
+  };
+
+  return AreaConfigModal;
+}(_react.Component);
+
+var _default = AreaConfigModal;
+exports["default"] = _default;

package/es/meta-comp/config-panels/ImageConfig/AreaConfigModal/index.less

@@ -0,0 +1,26 @@
+
+.body_wrap {
+  display: flex;
+
+  .area_config_wrap {
+    margin-left: 23px;
+    width: 259px;
+    max-height: 480px;
+    padding-right: 10px;
+    .list_wrap {
+      height: calc(100% - 30px);
+      overflow: auto;
+      .add_item {
+        margin-top: 18px;
+      }
+    }
+
+    .btn_wrap {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      color: #2F54EB;
+      margin-top: 10px;
+    }
+  }
+}