@fonixtree/magic-design 0.0.27 → 0.0.28

package/README.md

@@ -0,0 +1,311 @@
+# 设计器二期
+
+## 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 放在元组件里？

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/config-panels/CarouselConfig/index.js

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

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

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _lodash = require("lodash");
+
 var _Collapse = _interopRequireDefault(require("../../../../common/Collapse"));
 
 var _ImageConfig = _interopRequireDefault(require("../../../../meta-comp/config-panels/ImageConfig"));
@@ -49,6 +51,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);
+};
+
 var ImageTextSecondConfig =
 /** @class */
 function (_super) {
@@ -112,6 +130,25 @@ function (_super) {
       })));
     };
 
+    _this.resetHover = function () {
+      var panelProps = _this.props.panelProps;
+
+      if (panelProps.hover.open) {
+        var tempObj = {};
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.button, ['buttonBorder', 'buttonIcon', 'buttonText', 'content', 'open', 'text']));
+        panelProps.hover.button = __assign(__assign({}, panelProps.hover.button), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.secondButton, ['buttonBorder', 'buttonIcon', 'buttonText', 'content', 'open', 'text']));
+        panelProps.hover.secondButton = __assign(__assign({}, panelProps.hover.secondButton), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.image, ['content', 'open']));
+        panelProps.hover.image = __assign(__assign({}, panelProps.image.secondButton), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.text, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
+        panelProps.hover.text = __assign(__assign({}, panelProps.hover.text), tempObj);
+        tempObj = (0, _lodash.cloneDeep)((0, _lodash.pick)(panelProps.title, ['content', 'open', 'spacing', 'specialContent', 'text', 'underline', 'vertical']));
+        panelProps.hover.title = __assign(__assign({}, panelProps.hover.title), tempObj);
+        panelProps.hover.background = __assign(__assign({}, panelProps.hover.background), panelProps.background); // console.log(buttonTemp.buttonBorder == panelProps.button.buttonBorder);
+      }
+    };
+
     return _this;
   }
 
@@ -122,6 +159,7 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
       divider: "bold",
       headerSize: "large",
+      onRefresh: this.resetHover,
       source: [{
         key: 'imageTextSecondConfig1',
         name: 'Content',

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

@@ -60,11 +60,25 @@ function (_super) {
 
     var _a = this.props,
         data = _a.data,
-        type = _a.type;
+        type = _a.type,
+        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' ? 1276 : 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: "Padding"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "padding-wrap"
@@ -130,6 +144,7 @@ function (_super) {
 
   SpacingConfig.defaultProps = {
     type: 'default',
+    configWidth: false,
     data: {
       pc: {
         paddingTop: 10,

package/es/constants/index.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = void 0;
+exports.urlType = exports.respCodeMap = exports.quickMenuCode = exports.metaType = exports.metaInst = exports.metaInsType = exports.magicMode = exports.deviceTypeMap = exports.compInfoMap = exports.STORAGE_KEY = void 0;
+var STORAGE_KEY = {
+  LANGUAGE: 'magicLanuage'
+};
+exports.STORAGE_KEY = STORAGE_KEY;
 var urlType = {
   PRODUCT_DETAIL: 'proDetail',
   CATG_PROD_LIST: 'catg',

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

@@ -25,6 +25,8 @@ var _constants = require("../../../constants");
 
 var _mobx = require("../../../mobx");
 
+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; }
@@ -256,7 +258,7 @@ function PageCompList(_a) {
     onClick: onAdd,
     size: "large",
     type: "light"
-  }, "Add Component"), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _locale.i18n)('ADD_COMPONENT')), /*#__PURE__*/_react["default"].createElement("div", {
     className: "list mt16"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "inner-list"