@cylon-x/magic-design v0.0.4

设计器二期

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

元组件报文格式：

{
  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

{
  id:'xxxx' //元组件key
  type: 'TYPE', //元组件类型
  content:'this is text',
  style:{
    fontFamily:'xxx', //字体
    fontSize: '14px',
    width: '200px',
    ...css
	}
}

Image

{
  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

{
  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

复合组件报文格式：

{
  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

{
	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

{
  "comositeId": "1111",

  "value": {
    "autoplays": 4
  }
}

{
	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

Image and Text

{
  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 放在元组件里？