@fonixtree/magic-design NPM

快捷指令使用

1、发布 -- npm run pub

2、新增国际化 -- npm run cl "Hello world"

3、更新iconfont -- npm run iconfont

设计器二期

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

antd macy mobx axios quill ramda lodash marked moment replace shortid react-ace spark-md5 interactjs mobx-react react-color react-slick @types/quill slick-carousel postcss-pxtorem react-router-dom immutability-helper

@everything-registry/sub-chunk-333

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

9 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

10 months ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago