@fonixtree/magic-design 0.0.33 → 0.0.35

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

@@ -54,7 +54,7 @@ var maxWidth = {
 };
 var maxHeight = {
   normal1: 60,
-  normal2: '100%',
+  normal2: 375,
   normal3: 107,
   outsideM: 60,
   centerM: 60

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

@@ -62,7 +62,8 @@ 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", {
@@ -106,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"
@@ -128,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,
@@ -145,7 +146,8 @@ function (_super) {
   };
 
   SpacingConfig.defaultProps = {
-    type: 'default',
+    configPaddingLR: false,
+    configCompSpace: true,
     configWidth: false,
     data: {
       pc: {

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

@@ -66,8 +66,8 @@ var langBook = {
     color: '#00AC5A',
     backColor: '#DFF3EA'
   },
-  Spain: {
-    text: 'Spain',
+  Spanish: {
+    text: 'Spanish',
     color: '#00AC50',
     backColor: '#DFF3E0'
   }
@@ -104,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", {
@@ -111,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",
@@ -120,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

@@ -100,10 +100,16 @@ function (_super) {
       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',

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

@@ -54,7 +54,7 @@ var maxWidth = {
 };
 var maxHeight = {
   normal1: 60,
-  normal2: '100%',
+  normal2: 375,
   normal3: 107,
   outsideM: 60,
   centerM: 60

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

@@ -62,7 +62,8 @@ 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", {
@@ -106,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"
@@ -128,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,
@@ -145,7 +146,8 @@ function (_super) {
   };
 
   SpacingConfig.defaultProps = {
-    type: 'default',
+    configPaddingLR: false,
+    configCompSpace: true,
     configWidth: false,
     data: {
       pc: {

package/lib/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/lib/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/lib/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/lib/core/Designer/QuickMenuBar/index.js

@@ -66,8 +66,8 @@ var langBook = {
     color: '#00AC5A',
     backColor: '#DFF3EA'
   },
-  Spain: {
-    text: 'Spain',
+  Spanish: {
+    text: 'Spanish',
     color: '#00AC50',
     backColor: '#DFF3E0'
   }
@@ -104,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", {
@@ -111,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",
@@ -120,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/lib/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/lib/meta-comp/components/Image/index.js

@@ -100,10 +100,16 @@ function (_super) {
       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/lib/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/lib/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',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -11,6 +11,7 @@
     "start": "node scripts/start.js",
     "cl": "node ./bin/createLocale.js create",
     "pub": "sh ./bin/publish.sh",
+    "gulp": "npx gulp -f ./config/gulp.js",
     "build": "node scripts/build.js",
     "iconfont": "node ./bin/iconfont.js update",
     "export": "rm -rf dist && npx rollup --config ./config/rollup.config.js",
@@ -35,84 +36,6 @@
     "replace": "^1.2.1",
     "slick-carousel": "^1.8.1"
   },
-  "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@svgr/webpack": "^5.5.0",
-    "@types/axios": "^0.14.0",
-    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.36",
-    "@types/react": "^18.0.9",
-    "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^18.0.5",
-    "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "add": "^2.0.6",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-named-asset-import": "^0.3.8",
-    "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
-    "browserslist": "^4.18.1",
-    "camelcase": "^6.2.1",
-    "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "child_process": "^1.0.2",
-    "classnames": "^2.3.1",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
-    "dotenv": "^10.0.0",
-    "dotenv-expand": "^5.1.0",
-    "eslint": "7",
-    "eslint-config-next": "^12.1.6",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-webpack-plugin": "^3.1.1",
-    "extract-zip": "^2.0.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "html-webpack-plugin": "^5.5.0",
-    "http-proxy-middleware": "^2.0.6",
-    "identity-obj-proxy": "^3.0.0",
-    "less": "3.13.1",
-    "less-loader": "^11.0.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "mv": "^2.1.1",
-    "ora": "^4.1.1",
-    "postcss": "^8.4.4",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-loader": "^6.2.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.0.1",
-    "postcss-px-to-viewport": "^1.1.1",
-    "postcss-selector-namespace": "^3.0.1",
-    "prompts": "^2.4.2",
-    "rc-tools": "^9.6.1-alpha.1",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0",
-    "resolve-url-loader": "^4.0.0",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-styles": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.32.1",
-    "sass-loader": "^12.3.0",
-    "semver": "^7.3.5",
-    "source-map-loader": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.0.2",
-    "terser-webpack-plugin": "^5.2.5",
-    "typescript": "^4.7.2",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "workbox-webpack-plugin": "^6.4.1"
-  },
   "files": [
     "es",
     "lib",

package/README.md

@@ -1,311 +0,0 @@
-# 设计器二期
-
-## 1、基本概念
-
-### 1.1、元组件：构成复合组件的最小单位
-
-Text、Image、Button、Divider、Video 等
-
-### 1.2、复合组件：由若干个元组件构成的一个大组件
-
-Text、Banner、Image Gallery、Image and Text、Carousel、Reward、Newsletter 等
-
-### 1.3、业务公共组件：项目中复用的公共组件
-
-所有的公共组件需要开放 value 和 onChange Api（除 Button、Iconfont）
-
-Button、Iconfont、AlignSelecter、Collapse、ColorPicker、ImagePicker、LayoutSelecter、Slider、UrlPicker
-
-## 2、元组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、IMAGE、BUTTON、DIVIDER、VIDEO
-
-元组件报文格式：
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  style:{
-  	fontFamily:'xxx', //字体
-  	...css  //属性名称尽量使用标准css名称
-	},
-	hoverStyle:{
-
-  }
-}
-```
-
-动态设置 hover 效果
-
-onMouseEnter={e => { e.target.style.color = 'red'; }}
-
-onMouseLeave={e => { e.target.style.color = 'white'; }}
-
-文本可编辑
-
-contenteditable="true"
-
-### 2.2 、元组件报文
-
-#### Text
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'TYPE', //元组件类型
-  content:'this is text',
-  style:{
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    width: '200px',
-    ...css
-	}
-}
-```
-
-#### Image
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'IMAGE', //元组件类型
-  name:'123.png',
-  src:'../image.png', //图片地址
-  url:'www.baidu.com', //图片跳转地址
-  style:{
-    width: '200px',
-    ...css
-	},
-	hoverStyle:{     //hover 类型为new时保存src，类型为enlarge时保存scale
-    scale: '2',
-    src:'../image1.png',
-  }
-}
-```
-
-#### Button
-
-```json
-{
-  id:'xxxx' //元组件key
-  type: 'BUTTON', //元组件类型
-  name:'Submit',
-  url: 'www.baidu.com',
-  style:{
-  	buttonIconSrc:'../img.png',
- 	  buttonIconPlace: 'left',
-  	color:'#FEFEFE',
-  	border: '1px solid red',
-  	borderRadius:'10px',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-	},
-	hoverStyle {
-    color:'#FEFEFE',
-  	border: '1px solid red',
-    fontFamily:'xxx', //字体
-    fontSize: '14px',
-    ...css
-  }
-}
-```
-
-## 2、复合组件
-
-### 2.1
-
-元组件类型：
-
-TEXT、BANNER、IMAGE_GALLERT、IMAGE_TEXT、CAROUSEL、REWARD、NEWSLETTER
-
-复合组件报文格式：
-
-```json
-{
-  id:'xxxx' //复合组件key
-  type: 'TYPE', //复合组件类型
-  setting:{     //开关类型的配置及属性配置放在这里
-  	autoplays: 3, //3秒轮播
-	},
-	groupSource:[],  //元组件集合组数据放在这里
-	metas:{
-    title:{
-      open:false,
-      type:'IMAGE'
-      ...metaCompJson
-    },
-    subTitle:{
-      open:false,
-        type:'IMAGE'
-        ...metaCompJson
-    }
-  },
-	customize:{
-    layout:'',
-    background:{
-
-    }
-  }
-}
-```
-
-#### Text
-
-```js
-{
-	id: 'xxxx', //复合组件key
-  type: 'TEXT', //复合组件类型
-  setting:{
-    layout:'left', // 模块布局 left/center/right ，每一个layout可能都是一个不同的组件
-    title:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-    subtitle:{
-      type:'TEXT'
-       ...metaCompJson
-    },
-  },
-  source:[
-    {                   //此处可以抽出业务组件
-      title:{
-        type:'TEXT'
-       ...metaCompJson
-      },
-      content:{
-        type:'TEXT'
-       ...metaCompJson
-      }
-    }
-  ],
-  style:{
-  	align:'left',  //文本布局 left/center/right
-  	backgroundColor: 'red',
-  	backgroundImage:'../image.png'
-	}
-}
-```
-
-#### Banner
-
-modifySetting
-
-```json
-{
-  "comositeId": "1111",
-
-  "value": {
-    "autoplays": 4
-  }
-}
-```
-
-```json
-{
-	id: 'xxxx',
-	type: 'BANNER',
-	setting:{
-    open:false
-  	autoplays: 3, //3秒轮播
-    arrows:{      // 滚动箭头
-    	open:false,
-    	color:'red',
-    	size:'',
-    	hoverSize:'',
-      hoverColor:'green',
-  	},
-    dots:{       //面板指示点
-      open:false,
-      color: 'red',
-      size:'',
-      hoverSize:''
-      hoverColor:'green',
-    },
-	},
-  groupSource:[
-    {                     //此处可以作为一个业务组件
-      id:'xxxxx',
-      image:{
-        open:false,
-        type:'IMAGE'
-        ...metaCompJson
-      },
-      title:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      content:{
-        open:false,
-        type:'TEXT',
-        ...metaCompJson
-      },
-      button:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      secondaryButton:{
-        type:'BUTTON',
-        ...metaCompJson
-      },
-      layout:'center',
-      align:'left',
-      //文本布局 left/center/right
-    }
-  ]
-}
-```
-
-#### Image Gallery
-
-```json
-
-```
-
-#### Image and Text
-
-```json
-{
-  id:'xxxx'
-  type: 'IMAGE_TEXT',
-  setting:{
-  	layout:'left',
-  	title:{},
-		subtitle:{},
-		button:{},
-		secondaryButton:{}
-	},
-	source:[
-
-  ],
-  style:{
-    align:'left',
-    backgroundColor:'red',
-    backgroundImage:'./img.png'
-  }
-}
-```
-
-疑问：
-
-Text 元组件
-
-文字链接配置好之后，怎么删除
-
-链接配置的规则，按单词还是字符
-
-image 元组件
-
-属性控制进度条和输入框是否要限制最大最小值
-
-button 元组件
-
-是否需要 icon 的 hover 效果
-
-banner 中的 text Align 放在元组件里？