@fonixtree/magic-design 0.0.72 → 0.0.73

package/README.md

@@ -0,0 +1,320 @@
+# 快捷指令使用
+
+## 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
+
+元组件报文格式：
+
+```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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.0.72",
+  "version": "0.0.73",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -34,6 +34,91 @@
     "replace": "^1.2.1",
     "slick-carousel": "^1.8.1"
   },
+  "devDependencies": {
+    "react-dom": "^16.11.0",
+    "react": "^16.11.0",
+    "gulp": "4.0.2",
+    "gulp-less": "5.0.0",
+    "gulp-postcss": "9.0.1",
+    "gulp-rename": "2.0.0",
+    "postcss-less": "6.0.0",
+    "@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"
+  },
   "peerDependencies": {
     "react-dom": ">=16.11.0",
     "react": ">=16.11.0"