@fonixtree/magic-design 0.0.12 → 0.0.17

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/dist/_virtual/index5.js

@@ -0,0 +1,5 @@
+import { __require as requireReactIs } from '../my_node_modules/react-is/index.js';
+
+var reactIsExports = requireReactIs();
+
+export { reactIsExports as default };