@fonixtree/magic-design 0.0.31 → 0.0.34

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

@@ -73,11 +73,11 @@ var MOBILE_IMG_SIZE = [{
   w: 282,
   h: 212
 }, {
-  w: 125,
+  w: 135,
   h: 102
 }, {
-  w: 82,
-  h: 64.5
+  w: 86,
+  h: 65
 }, {
   w: 60,
   h: 45
@@ -168,6 +168,8 @@ function (_super) {
       };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -199,7 +201,7 @@ function (_super) {
         key: item.id,
         className: "img-wrap"
       }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image"
+        className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         isBackground: true,

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

@@ -1,23 +1,21 @@
 .m-carousel-mobile {
   display: flex;
   position: relative;
-
-  .carousel-icon-left {
-    float: left;
-    margin-left: 15px;
-  }
-
-  .carousel-icon-right {
-    float: right;
-    margin-right: 15px;
-  }
+  margin: 0 auto;
 
   .slider-wrap {
-    width: calc(100% - 90px);
+    width: 100%;
     padding: 30px 0;
     margin: 0 auto;
 
     .img-wrap {
+      .img {
+        width: fit-content;
+        height: fit-content;
+        display: block;
+        margin: 0 auto;
+      }
+
       .title {
         display: flex;
         justify-content: center;

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

@@ -56,23 +56,29 @@ var __extends = void 0 && (void 0).__extends || function () {
 }();
 
 var PC_IMG_SIZE = [{
-  w: 1072,
-  h: 662
+  minW: 806,
+  maxW: 1072,
+  maxH: 662
 }, {
-  w: 500,
-  h: 393
+  minW: 390,
+  maxW: 524,
+  maxH: 393
 }, {
-  w: 330,
-  h: 256
+  minW: 258,
+  maxW: 341,
+  maxH: 256
 }, {
-  w: 240,
-  h: 188
+  minW: 184,
+  maxW: 251,
+  maxH: 188
 }, {
-  w: 190,
-  h: 147
+  minW: 142,
+  maxW: 195,
+  maxH: 147
 }, {
-  w: 121,
-  h: 121
+  minW: 124,
+  maxW: 168,
+  maxH: 126
 }];
 
 var CarouselPc =
@@ -147,6 +153,8 @@ function (_super) {
       };
     }
 
+    var spacing = data.spacing[window.magicDesign.device];
+    if (spacing.contentWidth) bgStyle.width = spacing.contentWidth;
     var settings = {
       className: 'slider-wrap',
       arrows: false,
@@ -187,12 +195,13 @@ function (_super) {
         key: item.id,
         className: "img-wrap"
       }, item.image.open && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "image"
+        className: "img"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
         data: item.image,
         isBackground: true,
-        maxHeight: PC_IMG_SIZE[colNum - 1].h,
-        maxWidth: PC_IMG_SIZE[colNum - 1].w
+        maxHeight: PC_IMG_SIZE[colNum - 1].maxH,
+        maxWidth: PC_IMG_SIZE[colNum - 1].maxW,
+        minWidth: PC_IMG_SIZE[colNum - 1].minW
       })), showText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {

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

@@ -1,6 +1,7 @@
 .m-carousel-pc {
   display: flex;
   position: relative;
+  margin: 0 auto;
 
   .carousel-icon-left {
     float: left;
@@ -18,6 +19,13 @@
     margin: 0 auto;
 
     .img-wrap {
+      .img {
+        width: fit-content;
+        height: fit-content;
+        display: block;
+        margin: 0 auto;
+      }
+
       .title {
         display: flex;
         justify-content: center;

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

@@ -45,9 +45,16 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var maxWidthAndHeight = {
+var maxWidth = {
   normal1: 60,
   normal2: '100%',
+  normal3: '100%',
+  outsideM: 60,
+  centerM: 60
+};
+var maxHeight = {
+  normal1: 60,
+  normal2: 375,
   normal3: 107,
   outsideM: 60,
   centerM: 60
@@ -135,8 +142,8 @@ function (_super) {
         className: "card-image",
         data: source.image,
         limitWidthHeight: true,
-        maxHeight: maxWidthAndHeight[data.customize.layout.h5Layout],
-        maxWidth: maxWidthAndHeight[data.customize.layout.h5Layout],
+        maxHeight: maxHeight[data.customize.layout.h5Layout],
+        maxWidth: maxWidth[data.customize.layout.h5Layout],
         scale: 0.5
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: "card-content-wrap"

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

@@ -46,6 +46,7 @@ function CarouselConfig(props) {
       key: '3',
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+        configWidth: true,
         data: data.spacing
       })
     }, {

package/es/composite-comp/common/components/ProductItem/index.js

@@ -110,7 +110,7 @@ function (_super) {
     }
 
     var oldPrice = data.marketPrice !== null ? (0, _currencyUtil.formatCurrencyWithSymbol)(data.marketPrice) : null;
-    var discount = data.discountPercent || 0;
+    var discount = Number(data.discountPercent) || 0;
     var salePercent = Number(data.salePercent) / 100 || 0;
     return /*#__PURE__*/_react["default"].createElement("div", _extends({
       className: "m-product-item-wrap",

package/es/composite-comp/common/config-panels/SpacingConfig/index.js

@@ -62,11 +62,26 @@ function (_super) {
 
     var _a = this.props,
         data = _a.data,
-        type = _a.type;
+        configPaddingLR = _a.configPaddingLR,
+        configCompSpace = _a.configCompSpace,
+        configWidth = _a.configWidth;
     var obj = data[window.magicDesign.device];
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "spacing-config-container"
-    }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+    }, configWidth && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: "Width"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      maxVal: window.magicDesign.device === 'pc' ? 1240 : 375,
+      minVal: window.magicDesign.device === 'pc' ? 1010 : 348,
+      onChange: function onChange(value) {
+        obj.contentWidth = value.count;
+
+        _this.selfRender();
+      },
+      value: {
+        count: obj.contentWidth
+      }
+    })), /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('PADDING')
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-wrap"
@@ -92,7 +107,7 @@ function (_super) {
         _this.selfRender();
       },
       value: obj.paddingBottom
-    })), type == 'button' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    })), configPaddingLR && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-item"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       type: "icon-padding-left"
@@ -114,7 +129,7 @@ function (_super) {
         _this.selfRender();
       },
       value: obj.paddingRight
-    }))))), type != 'button' && /*#__PURE__*/_react["default"].createElement(_common.Field, {
+    }))))), configCompSpace && /*#__PURE__*/_react["default"].createElement(_common.Field, {
       title: (0, _locale.i18n)('COMPONENT_SPACING')
     }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
       maxVal: 100,
@@ -131,7 +146,9 @@ function (_super) {
   };
 
   SpacingConfig.defaultProps = {
-    type: 'default',
+    configPaddingLR: false,
+    configCompSpace: true,
+    configWidth: false,
     data: {
       pc: {
         paddingTop: 10,

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

@@ -11,7 +11,9 @@ var _RecommendConfigGroup = _interopRequireDefault(require("./RecommendConfigGro
 
 var _RecommendConfigContent = _interopRequireDefault(require("./RecommendConfigContent"));
 
-var _layout = _interopRequireDefault(require("./imgs/layout1.png"));
+var _layout = require("../../../../constants/layout");
+
+var _SpacingConfig = _interopRequireDefault(require("../../../common/config-panels/SpacingConfig"));
 
 var _BackgroundConfig = _interopRequireDefault(require("../../../common/config-panels/BackgroundConfig"));
 
@@ -42,18 +44,22 @@ function FlashDealConfig(props) {
       })
     }, {
       key: '3',
+      name: (0, _locale.i18n)('SPACING'),
+      value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
+        configCompSpace: true,
+        configPaddingLR: true,
+        data: data.spacing
+      })
+    }, {
+      key: '4',
       name: (0, _locale.i18n)('CUSTOMIZE'),
       value: /*#__PURE__*/_react["default"].createElement(_CustomizeConfig["default"], {
         data: data.customize,
         isHideAlign: true,
-        layoutSource: [{
-          id: 'layout1',
-          name: 'left',
-          image: _layout["default"]
-        }]
+        layoutSource: _layout.recommendLayout
       })
     }, {
-      key: '4',
+      key: '5',
       name: (0, _locale.i18n)('BACKGROUND'),
       value: /*#__PURE__*/_react["default"].createElement(_BackgroundConfig["default"], {
         data: data.background

package/es/constants/layout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchLayout = exports.newsletterLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = void 0;
+exports.searchLayout = exports.recommendLayout = exports.newsletterLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = void 0;
 
 var _dividerLayout = _interopRequireDefault(require("../assets/images/layout-icon/dividerLayout.svg"));
 
@@ -37,6 +37,16 @@ var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout
 
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
+var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
+
+var _layoutRecommend2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-2.png"));
+
+var _layoutRecommend3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-3.png"));
+
+var _layoutRecommend4 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-4.png"));
+
+var _layoutRecommend5 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-5.png"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 // import p3 from '../assets/images/layout-icon/layout-imagetext-p3.png';
@@ -117,4 +127,26 @@ var newsletterLayout = [{
   name: 'layout1',
   image: _newsletter["default"]
 }];
-exports.newsletterLayout = newsletterLayout;
+exports.newsletterLayout = newsletterLayout;
+var recommendLayout = [{
+  id: 'layout1',
+  name: 'layout1',
+  image: _layoutRecommend["default"]
+}, {
+  id: 'layout2',
+  name: 'layout2',
+  image: _layoutRecommend2["default"]
+}, {
+  id: 'layout3',
+  name: 'layout3',
+  image: _layoutRecommend3["default"]
+}, {
+  id: 'layout4',
+  name: 'layout4',
+  image: _layoutRecommend4["default"]
+}, {
+  id: 'layout5',
+  name: 'layout5',
+  image: _layoutRecommend5["default"]
+}];
+exports.recommendLayout = recommendLayout;

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

@@ -1,14 +1,17 @@
 .page-comp-wrap {
   z-index: 100;
   background-color: #FFF;
-  width:354px;
+  width: 354px;
   flex-shrink: 0;
+
   .page-comp-head {
     height: 81px;
     box-shadow: inset 0px -1px 0px #EDF0F4;
   }
+
   .page-comp-list {
     padding: 24px;
+
     .title {
       font-family: 'Open Sans';
       font-style: normal;
@@ -16,7 +19,11 @@
       font-size: 26px;
       line-height: 36px;
       color: #232F46;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
+
     .list {
       .inner-list {
         margin-right: -21px;
@@ -26,16 +33,21 @@
         height: calc(100vh - 260px);
         background: #F5F6F7;
         border-radius: 8px;
-        
-        &::-webkit-scrollbar { //滚动条的宽度
+
+        &::-webkit-scrollbar {
+          //滚动条的宽度
           width: 8px;
         }
-        &::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色
+
+        &::-webkit-scrollbar-track-piece {
+          //滚动条凹槽的颜色
           background-color: #fff;
         }
-        &::-webkit-scrollbar-thumb {//滚动条的设置
-          background-color:#C1C9D7;
-          background-clip:padding-box;
+
+        &::-webkit-scrollbar-thumb {
+          //滚动条的设置
+          background-color: #C1C9D7;
+          background-clip: padding-box;
           border-radius: 100px;
         }
       }
@@ -44,7 +56,7 @@
 }
 
 
-.card-wrap{
+.card-wrap {
   display: flex;
   justify-content: space-between;
   cursor: move;
@@ -52,16 +64,20 @@
   line-height: 64px;
   padding: 0 20px;
   color: #232F46;
+
   .left {
     width: 100%;
     display: flex;
     align-items: center;
+
     .comp-icon {
       display: block;
     }
+
     .drag-icon {
       display: none;
     }
+
     .card-title {
       font-size: 16px;
       line-height: 24px;
@@ -71,44 +87,53 @@
       font-style: normal;
     }
   }
+
   .more-btn {
     display: none;
     cursor: pointer;
   }
+
   &:hover {
     background: #E9F0FF;
     color: #2F54EB;
+
     .left {
       font-family: 'Open Sans';
       font-style: normal;
-      font-weight:600;
+      font-weight: 600;
       font-size: 16px;
       line-height: 24px;
+
       .comp-icon {
         display: none;
       }
+
       .drag-icon {
         display: block;
       }
+
       .card-title {
         font-weight: 600;
       }
     }
+
     .more-btn {
       display: block;
     }
   }
 }
 
-.active{
+.active {
   background: #E9F0FF;
   color: #2F54EB;
+
   .left {
     .card-title {
       font-weight: 600;
     }
   }
+
   .more-btn {
     display: block;
   }
-}
+}

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

@@ -11,6 +11,8 @@ 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"));
@@ -64,8 +66,8 @@ var langBook = {
     color: '#00AC5A',
     backColor: '#DFF3EA'
   },
-  Spain: {
-    text: 'Spain',
+  Spanish: {
+    text: 'Spanish',
     color: '#00AC50',
     backColor: '#DFF3E0'
   }
@@ -82,6 +84,12 @@ function (_super) {
     _this.onBtnClick = function (event) {
       var code = event.currentTarget.dataset.code;
 
+      if (code === _constants.quickMenuCode.SAVE || code === _constants.quickMenuCode.PUBLISH) {
+        _mobx.store.setState({
+          clickedFloor: ''
+        });
+      }
+
       if (_this.props.device === _constants.deviceTypeMap.PC) {}
 
       _this.props.onBtnClick(code);
@@ -96,6 +104,7 @@ function (_super) {
         undoDisable = _a.undoDisable,
         redoDisable = _a.redoDisable,
         language = _a.language;
+    var languageTemp = langBook[language] || {};
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "quick_menu_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -103,8 +112,8 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "language",
       style: {
-        color: langBook[language].color,
-        background: langBook[language].backColor
+        color: languageTemp.color,
+        background: languageTemp.backColor
       }
     }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
       size: "20px",
@@ -112,7 +121,7 @@ function (_super) {
         marginRight: '8px'
       },
       type: "icon-language"
-    }), langBook[language].text)), /*#__PURE__*/_react["default"].createElement("div", {
+    }), languageTemp.text)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "menu_center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_group"

package/es/locale/index.js

@@ -9,13 +9,16 @@ var _en = _interopRequireDefault(require("./en/en.json"));
 
 var _id = _interopRequireDefault(require("./id/id.json"));
 
+var _es = _interopRequireDefault(require("./es/es.json"));
+
 var _mobx = require("../mobx");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var localeMap = {
   en: _en["default"],
-  id: _id["default"]
+  id: _id["default"],
+  es: _es["default"]
 };
 /** 国际化 */
 

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

@@ -74,6 +74,7 @@ function (_super) {
           hoverState = _a.hoverState,
           maxHeight = _a.maxHeight,
           maxWidth = _a.maxWidth,
+          minWidth = _a.minWidth,
           limitWidthHeight = _a.limitWidthHeight,
           scale = _a.scale;
       var hoverImgSrc = _this.state.hoverImgSrc;
@@ -92,13 +93,23 @@ function (_super) {
         obj.maxWidth = maxWidth;
       }
 
+      if (minWidth) {
+        obj.minWidth = minWidth;
+      }
+
       if (limitWidthHeight) {
         if ((0, _coreUtil.isPc)()) {
           if (data.content.pcImgWidth) obj.width = data.content.pcImgWidth * scale;
-          if (data.content.pcImgHeight) obj.height = data.content.pcImgHeight * scale;
+
+          if (data.content.pcImgWidth > data.content.pcImgHeight) {
+            obj.height = 'auto';
+          } else if (data.content.pcImgHeight) obj.height = data.content.pcImgHeight * scale;
         } else {
-          if (data.content.h5ImgWidth) obj.width = data.content.h5ImgWidth * scale;
-          if (data.content.h5ImgHeight) obj.height = data.content.h5ImgHeight * scale;
+          if (data.content.h5ImgWidth) obj.width = data.content.h5ImgWidth * scale; // if (data.content.h5ImgHeight) obj.height = data.content.h5ImgHeight * scale;
+
+          if (data.content.h5ImgWidth > data.content.h5ImgHeight) {
+            obj.height = 'auto';
+          } else if (data.content.h5ImgHeight) obj.height = data.content.h5ImgHeight * scale;
         }
       }
 

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

@@ -300,8 +300,9 @@ function (_super) {
       key: '5',
       name: (0, _locale.i18n)('SPACING'),
       value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
-        data: data.spacing,
-        type: "button"
+        configCompSpace: false,
+        configPaddingLR: true,
+        data: data.spacing
       })
     }];
 

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

@@ -289,8 +289,9 @@ function (_super) {
         key: '2',
         name: (0, _locale.i18n)('SPACING'),
         value: /*#__PURE__*/_react["default"].createElement(_SpacingConfig["default"], {
-          data: data.spacing,
-          type: "button"
+          configCompSpace: false,
+          configPaddingLR: true,
+          data: data.spacing
         })
       }, {
         key: '3',