一款所见即所得的H5编辑器
1
简洁方便
任何人只需傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
2
插拔式体验
产品以GPL协议开源, 授权后可植入任何系统，并支持二次开发
3
持续迭代，无限可能
目前正在持续迭代中，后续可根据需求开发功能更强大的可视化系统
-
-
-
diff --git a/doc-dist/zh/guide/building.html b/doc-dist/zh/guide/building.html
deleted file mode 100644
index e34b00a..0000000
--- a/doc-dist/zh/guide/building.html
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
-
-
正在建设中...
# DSL设计
DSL层主要约定了Dooring组件的数据协议，包括组件的可编辑属性、编辑类型、初始值等，之所以定义一致的协议层，主要是方便后期的组件扩展，配置后移，有助于不同后端语言开发和数据存储，接下来我们看看header组件的schema。
1.editData 可编辑的属性类型DSL
2.config 可编辑组件的默认属性
const Header: IHeaderSchema = {
- editData: [
- {
- key: 'bgColor',
- name: '背景色',
- type: 'Color',
- },
- {
- key: 'height',
- name: '高度',
- type: 'Number',
- },
- {
- key: 'logo',
- name: 'logo',
- type: 'Upload',
- isCrop: true,
- cropRate: 1000 / 618,
- },
- {
- key: 'logoText',
- name: 'logo文字',
- type: 'Text',
- },
- {
- key: 'color',
- name: '文字颜色',
- type: 'Color',
- },
- {
- key: 'fontSize',
- name: '文字大小',
- type: 'Number',
- }
- ],
- config: {
- bgColor: 'rgba(245,245,245,1)',
- logo: [
- {
- uid: '001',
- name: 'image.png',
- status: 'done',
- url: `${serverUrl}/uploads/3_1740be8a482.png`,
- },
- ],
- logoText: '页头Header',
- fontSize: 20,
- color: 'rgba(47,84,235,1)',
- height: 50
- },
-};
-由以上代码可知，我们可以在editData属性中给组件添加可编辑的属性，比如背景图，然后再component中接受属性从而设置样式。
在config属性中，我们可以设置组件默认属性值，和editData中每一项的key一一对应。
# 组件结构
dooring的组件设计包含以下3个部分组件：
1、component 组件主体
2、schema 组件的DSL，结构协议层
3、template 定义了组件的类型、外观、从属关系，后期考虑纳入schema
接下来我会介绍一个基本的组件主体设计，以为template设计，在下一章会具体介绍schema部分。
# 组件设计
我们这里拿基本的header组件来举例，如下是header组件的代码：
interface HeaderPropTypes extends IHeaderConfig {
- isTpl: boolean;
-}
-
-const Header = memo((props: HeaderPropTypes) => {
- const { bgColor, logo, logoText, fontSize, color } = props;
- return props.isTpl ? (
- <div>
- < img style={{width: '100%'}} src={logos} alt="" />
- </div>
- ) : (
- <header className={styles.header} style={{ backgroundColor: bgColor }}>
- <div className={styles.logo}>
- < img src={logo && logo[0].url} alt={logoText} />
- </div>
- <div className={styles.title} style={{ fontSize, color }}>
- {logoText}
- </div>
- </header>
- );
-});
-我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。
# template设计
const template = {
- type: 'Header',
- h: 28,
- displayName: '页头组件'
-};
-export default template;
-以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。
# 组件动态加载
目前H5-Dooring的组件都是通过动态加载的方式引入，好处是我们在页面中只会加载我们需要的组件，不需要的组件不会被加载，这样可以提高页面加载的速度，这样做也会出现一些问题，比如一个长页面，配置了很多组件，那么一个页面加载过程可以会触发多次请求，目前还没有遇到性能问题，但后续会逐渐优化这个问题。
# umi3提供的dynamic
目前组件的动态加载我们采用的umi的dynamic方案，基于它我们上层封装了一个组件动态加载器，原理如下：
具体代码可以参考Dooring的Github地址：https://github.com/MrXujiang/h5-Dooring (opens new window)
H5-Dooring后端部分主要使用 Nodejs 开发, 为了满足更多定制化需求和服务的可移植性, 特意编写了API接口文档,
-方便大家使用不同的后端语言实现服务接入.
- 注意: 接口统一前缀为
/api/v0
# 用户相关
# 登录
用户登录接口
POST/vip/check
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| n | true | string | 用户名 |
| co | true | string | 密码 |
返回示例
{
- "result": {
- "n": "test",
- "od": [],
- "h5": [
- {
- "t": "23242ED",
- "n": "测试页面"
- }
- ],
- "rp": "AAAAA",
- "maxage": 300000
- }
-}
-# 注销登录
注销接口
POST/vip/checkout
返回示例
{
- "result": null,
- "msg": "退出成功"
-}
-# 权限控制
不同用户级别所访问的页面权限不同, 这块可结合服务端已有代码设计属于自己的权限字段, 地址为server/src/router
# 用户列表
获取用户列表接口
GET/vip/all
获取用户列表需要账号满足以下条件:
- 已登录
- 为超级管理员
返回示例
[
- {
- "id": "",
- "n": "test",
- "co": "123456",
- "od": [],
- "h5": [
- {
- "t": "23242ED",
- "n": "测试页面"
- }
- ],
- "wx": "Mr_xuxiaoxi",
- "rp": "AAAAA"
- }
-]
-# 添加用户
添加用户接口
POST/vip/add
先决条件:
- 用户已登陆
- 为超级管理员
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| nickname | true | string | 用户名 |
| wx | true | string | 微信号 |
| co | true | string | 密码 |
注: co是由笔者写的加密算法实现, 不需要手动填写, 详情见dooirng后台管理/用户管理页面.
返回示例
{
- "id": "3422EF",
- "n": "test",
- "wx": "Mr_xuxiaoxi",
- "co": "123456",
- "od": [],
- "h5": [],
- "tpl": [],
- "rp": "AAAAA",
- "h5Num": 10,
- "tplNum": 3
-}
-# 修改用户信息
修改用户接口
POST/vip/edit
先决条件:
- 用户已登陆
- 为超级管理员
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| id | false | string | 用户ID |
| nickname | false | string | 用户名 |
| co | false | string | 登录码 |
| wx | false | string | 微信号 |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "修改成功",
-}
-# 删除用户
删除用户接口
DELETE/vip/del
先决条件:
- 用户已登陆
- 为超级管理员
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| id | true | string | 用户ID |
| wx | true | string | 微信号 |
| n | true | string | 用户名 |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "删除成功",
-}
-# H5页面管理
# 获取H5数据
GET/visible/h5/get
先决条件:
- 用户已登陆
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid | true | string | H5唯一id |
返回示例
{
- "pageConfig": {
-
- },
- "tpl": [
- {
- "id": "879742",
- "item": {
- "type": "Carousel",
- "config": {
- "direction": "left",
- "swipeable": false,
- "autoPlay": false,
- "imgList": [
- {
- "id": "1",
- "title": "趣谈小课1",
- "desc": "致力于打造优质小课程",
- "link": "xxxxx",
- "imgUrl": [
- {
- "uid": "001",
- "name": "image.png",
- "status": "done",
- "url": "http://io.nainor.com/uploads/1_1740bd7c3dc.png"
- }
- ]
- },
- {
- "id": "2",
- "title": "趣谈小课1",
- "desc": "致力于打造优质小课程",
- "link": "xxxxx",
- "imgUrl": [
- {
- "uid": "001",
- "name": "image.png",
- "status": "done",
- "url": "http://io.nainor.com/uploads/2_1740bd8d525.png"
- }
- ]
- }
- ],
- "tplImg": "http://io.nainor.com/uploads/carousal_17442e1420f.png"
- },
- "h": 82,
- "editableEl": [
- {
- "key": "direction",
- "name": "方向",
- "type": "Radio",
- "range": [
- {
- "key": "down",
- "text": "从上到下"
- },
- {
- "key": "left",
- "text": "从左到右"
- }
- ]
- },
- {
- "key": "swipeable",
- "name": "是否可拖拽",
- "type": "Switch"
- },
- {
- "key": "autoPlay",
- "name": "是否自动播放",
- "type": "Switch"
- },
- {
- "key": "imgList",
- "name": "图片列表",
- "type": "DataList"
- }
- ],
- "category": "base"
- },
- "point": {
- "i": "x-0",
- "x": 0,
- "y": 13,
- "w": 24,
- "h": 82,
- "isBounded": true
- },
- "status": "inToCanvas"
- },
- {
- "id": "481194",
- "item": {
- "type": "Form",
- "config": {
- "title": "表单定制组件",
- "fontSize": 18,
- "titColor": "rgba(60,60,60,1)",
- "titWeight": "400",
- "bgColor": "rgba(255,255,255,1)",
- "btnColor": "rgba(20,54,226,100)",
- "btnTextColor": "rgba(255,255,255,1)",
- "api": "",
- "formControls": [
- {
- "id": "1",
- "type": "Text",
- "label": "姓名",
- "placeholder": "请输入姓名"
- },
- {
- "id": "2",
- "type": "Number",
- "label": "年龄",
- "placeholder": " 请输入年龄"
- },
- {
- "id": "4",
- "type": "MySelect",
- "label": "爱好",
- "options": [
- {
- "label": "选项一",
- "value": "1"
- },
- {
- "label": "选项二",
- "value": "2"
- },
- {
- "label": "选项三",
- "value": "3"
- }
- ]
- }
- ]
- },
- "h": 172,
- "category": "base"
- },
- "point": {
- "i": "x-1",
- "x": 0,
- "y": 98,
- "w": 24,
- "h": 172,
- "isBounded": true
- },
- "status": "inToCanvas"
- }
- ]
-}
-# 保存H5数据
POST/visible/h5/save
先决条件:
- 用户已登陆
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| pageConfig | false | object | H5页面配置数据 |
| tpl | true | object | H5页面组件配置数据 |
| tid | true | string | H5页面唯一id |
参数示例
{
- "pageConfig": {
- "bgColor":"rgba(151,25,25,1)",
- "title":"医院宣传页"
- },
- "tpl": [],
- "tid": "EF123D3"
-}
-返回示例
{
- "state": 200,
- "result": {
- "tid": "EF123D3"
- },
- "msg": "保存成功"
-}
-# 删除H5数据
DELETE/visible/h5/del
先决条件:
- 用户已登陆
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid | true | string | H5页面唯一id |
返回示例
{
- "state": 200,
- "result": [
- {
- "tid": "EF123D3",
- "name": "test页面"
- },
- {
- "tid": "EF123D6",
- "name": "test2页面"
- }
- ],
- "msg": "删除成功"
-}
-# H5表单数据管理
# 保存表单数据
POST/vip/h5/form/post
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid(query) | true | string | H5页面唯一id |
| formData(body) | true | array | H5页面表单数据 |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "表单提交成功"
-}
-# 批量导入表单数据
POST/vip/h5/form/import
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid(query) | true | string | H5页面唯一id |
| formData(body) | true | array | H5页面表单数据集合 |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "批量导入成功"
-}
-# 删除表单数据
DELETE/vip/h5/form/del
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid | true | string | H5页面唯一id |
| ID | true | string | 表单专属id |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "删除成功"
-}
-# 模版管理
# 获取模版库
GET/visible/tpls/free
返回示例
{
- "state": 200,
- "result": [
- {
- "img": "http://xxx/uploads/tpl_175adabd8dd.jpg",
- "name": "合作模版",
- "tid": "B73349B6"
- }
- ]
-}
-# 保存模版
POST/visible/tpl/save
先决条件:
- 用户已登陆
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| name | true | string | H5模版名称 |
| cate | true | string | H5模版分类 |
| img | false | string | H5模版封面图 |
| tpl | true | array | H5模版数据 |
| pageConfig | false | object | H5模版全局配置 |
返回示例
{
- "state": 200,
- "result": {
- "tid": "B73349B6"
- },
- "msg": "保存成功"
-}
-# 删除模版
DELETE/visible/tpl/del
先决条件:
- 用户已登陆
| 参数名 | 是否必选 | 类型 | 说明 |
|---|---|---|---|
| tid | true | string | H5模版id |
返回示例
{
- "state": 200,
- "result": null,
- "msg": "删除成功"
-}
-# 文件上传
# 数据统计
# 数据大盘接口
# 页面埋点
- ← - - 接入第三方oss -
私有化部署需要获取4个核心项目包, 包括
- H5编辑器(h5_plus)
- H5基座(h5)
- Dooring管理后台(Dooring-Admin)
- 服务端项目(Server)
获取以上四个核心源码工程需要满足商业授权协议, 具体可联系徐小夕 (opens new window)
# 部署架构图
部署流程如下:
- 下载4个源码工程, 安装依赖(npm install 或 yarn)
- 打包3个前端工程至
server的static目录下 - 在
server下本地运行yarn start或npm start启动服务端进行本地测试 - 打包服务端代码,
yarn build生成dist目录, 建议使用pm2做nodejs服务的负载均衡, 运行pm2 start dist/index.js启动生产环境代码
也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用docker进行容器化部署.
- ← - - 截图功能 - - 支持https - - → -
目前H5-Dooring全面支持https部署, 具体方式方案如下.
# 前端工程
我们需要在前端工程中的src/pages/document.ejs中的head中添加如下代码:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
-目的是强制将页面中HTTP请求转换为HTTPS.
# 服务器工程
# 1. 申请SSL证书
# 2. 生成 server.csr+server.key
# 3. 通过证书链生成.pem文件
# 在server中的src/index.js按如下方式修改
// 忽略部分无影响代码
-import https from 'https';
-
-// 你的ssl存放路径, 建议直接放在server目录下
-const filePath = path.join(__dirname, '../ssl')
-
-// 启动逻辑
-async function start() {
- // https配置
- const httpsOptions = {
- key: fs.readFileSync(path.join(filePath, '3536084__doctopia.com.cn.key')), //ssl文件路径
- cert: fs.readFileSync(path.join(filePath, '3536084__doctopia.com.cn.pem')) //ssl文件路径
- };
-
- // https服务
- const server = https.createServer(httpsOptions, app.callback());
-
- const io = require('socket.io')(server);
-
- // 忽略其他无影响代码
-
- // https默认443, 这里我们可以走公共配置
- server.listen(443, () => {
- console.log(`服务器地址:${config.staticPath}`)
- });
-}
-
-start()
-- ← - - 私有化部署 - - 接入第三方oss - - → -
H5-Dooring全面支持第三方对象存储服务, 我们以七牛云对象存储为例.
# 前端上传文件到oss
首先我们需要在第三方对象储存服务中配置对应的服务和域名. 其次安装对应的sdk, 如七牛云sdk:
import * as qiniu from 'qiniu-js';
-其次我们修改h5_plus工程的Upload组件, 详细地址为src/core/FormComponents/Upload.
修改内容如下:
const fileName = file.name
-const suffix = '自定义文件后缀'
-const putExtra = {
- fname: fileName,
- params: {}
-}
-const uid = +new Date() + uuid(16, 8) + suffix
-// 使用七牛云上传api, 前提是提前在前端拿到对应的ticket, 可以通过请求的方式获取
-const observe = qiniu.upload(file, uid, this.state.qnToken.ticket, putExtra, {})
-observe.subscribe(() => {}, null, (res) => {
- // 拼接路径
- const url = `${this.state.qnToken.domain}/${res.key}`;
- // 存库
- const fileList = [{ uid, name: fileName, status: 'done', url }];
- this.setState({
- curImgUrl: url,
- fileList
- })
- this.props.onChange && this.props.onChange(fileList)
-})
-其他oss服务类似, 如果不清楚如何配置, 可以在H5-Dooring官网 (opens new window)中找到我们.
- ← - - 支持https - - API接口文档 - - → -
src
-├─ assets
-│ ├─ header.png
-│ ├─ form.png
-│ ├─ footer.png
-│ ├─ icon.png
-│ ├─ picture.png
-├─ components
-│ ├─ BackTop
-│ │ └─ index.js
-│ ├─ BasicShop
-│ │ ├─ BasicComponents
-│ │ │ ├─ Card
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Carousel
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Footer
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Form
-│ │ │ │ ├─ BaseForm.tsx
-│ │ │ │ ├─ BasePopoverForm.tsx
-│ │ │ │ ├─ baseForm.less
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Header
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Icon
-│ │ │ │ ├─ icon.ts
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Image
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ LongText
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Nav
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Notice
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Qrcode
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ RichText
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Text
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ WhiteTpl
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ XButton
-│ │ │ │ ├─ Modal.tsx
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ schema.ts
-│ │ │ └─ template.ts
-│ │ ├─ MediaComponents
-│ │ │ ├─ Audio
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Calendar
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Map
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Video
-│ │ │ │ ├─ index.css
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ schema.ts
-│ │ │ └─ template.ts
-│ │ ├─ ShopComponents
-│ │ │ ├─ CardLabel
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Coupons
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ List
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Tab
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ ZhuanLan
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ schema.ts
-│ │ │ └─ template.ts
-│ │ ├─ VisualComponents
-│ │ │ ├─ Area
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Chart
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Funnel
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Line
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Pie
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ Radar
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ WordCloud
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ XProgress
-│ │ │ │ ├─ index.less
-│ │ │ │ ├─ index.tsx
-│ │ │ │ ├─ schema.ts
-│ │ │ │ └─ template.ts
-│ │ │ ├─ schema.ts
-│ │ │ └─ template.ts
-│ │ ├─ common.ts
-│ │ └─ schema.ts
-│ ├─ Calibration
-│ │ ├─ index.less
-│ │ └─ index.tsx
-│ ├─ ErrorBundaries
-│ │ └─ index.tsx
-│ ├─ LoadingCp
-│ │ └─ index.tsx
-│ ├─ ModalTpl
-│ │ ├─ cate.js
-│ │ ├─ index.js
-│ │ └─ index.less
-│ └─ Zan
-│ ├─ index.less
-│ └─ index.tsx
-├─ core
-│ ├─ FormComponents
-│ │ ├─ CardPicker
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ Color
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ DataList
-│ │ │ ├─ editorModal.tsx
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ FormItems
-│ │ │ ├─ EditorModal.tsx
-│ │ │ ├─ FormItems.tsx
-│ │ │ ├─ formItems.less
-│ │ │ └─ index.tsx
-│ │ ├─ InteractionData
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ MutiText
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ Pos
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ Table
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ Upload
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ ├─ XEditor
-│ │ │ ├─ index.less
-│ │ │ └─ index.tsx
-│ │ └─ types.ts
-│ ├─ DynamicEngine.tsx
-│ ├─ FormRender.tsx
-│ ├─ ViewRender.tsx
-│ └─ viewRender.less
-├─ layouts
-│ ├─ __tests__
-│ │ └─ index.test.js
-│ ├─ index.less
-│ └─ index.tsx
-├─ pages
-│ ├─ __tests__
-│ │ └─ index.test.js
-│ ├─ editor
-│ │ ├─ components
-│ │ │ ├─ AvatorGroup
-│ │ │ │ └─ index.tsx
-│ │ │ ├─ CanvasControl
-│ │ │ │ ├─ index.less
-│ │ │ │ └─ index.tsx
-│ │ │ └─ Header
-│ │ │ ├─ index.js
-│ │ │ └─ index.less
-│ │ ├─ models
-│ │ │ └─ editorModal.js
-│ │ ├─ services
-│ │ │ └─ editorService.js
-│ │ ├─ Container.js
-│ │ ├─ SourceBox.tsx
-│ │ ├─ TargetBox.js
-│ │ ├─ index.js
-│ │ ├─ index.less
-│ │ └─ preview.tsx
-│ ├─ help
-│ │ ├─ index.less
-│ │ └─ index.tsx
-│ ├─ home
-│ │ ├─ index.less
-│ │ └─ index.tsx
-│ ├─ ide
-│ │ ├─ _draft.tsx
-│ │ ├─ index.less
-│ │ └─ index.tsx
-│ ├─ login
-│ │ ├─ index.less
-│ │ └─ index.tsx
-│ ├─ document.ejs
-│ └─ mobileTip.js
-├─ utils
-│ ├─ req.ts
-│ └─ tool.ts
-├─ app.tsx
-└─ global.css
-
-
- ← - - 保存json - - 真机预览 - - → -
# 撤销/重做
撤销重做我们主要使用了redux-undo这个库，配合Dva使用，具体使用方法参考如下操作：
import { createLogger } from 'redux-logger';
-import { message } from 'antd';
-import undoable, { StateWithHistory } from 'redux-undo';
-import { Reducer, AnyAction } from 'redux';
-
-export const dva = {
- config: {
- onAction: createLogger(),
- onError(e: Error) {
- message.error(e.message, 3);
- },
- onReducer: (reducer: Reducer<any, AnyAction>) => {
- let undoReducer = undoable(reducer);
- return function(state: StateWithHistory<any>, action: AnyAction) {
- let newState = undoReducer(state, action);
- let router = newState.present.router ? newState.present.router : newState.present.routing;
- return { ...newState, router: router };
- };
- },
- },
-};
-以上我们就实现了全局配置redux-undo，在撤销重做按钮中我们就可以触发对应的方法来实现撤销重做的功能，其次我们还使用了redux-logger来实现redux的日志输出。
# 保存json
我们配置好H5页面之后，如果希望其他人观看，我们可以保存页面并发送链接。但是如果有多人协作的需求，比如一个H5页面可能由多个人完成，这个时候该怎么实现呢？基于已有的方案，我们可以采用socket实现多人协同编辑，但是成本比较大，所有这里我们提供了保存json的功能。
我们可以将配置好的页面导出为json，发送给另一个人，这样另一个人通过导入该json文件可以实时看到当前的页面，这里还是依靠我们的页面渲染引擎viewEngine。实现思路也很简单，可以在github[https://github.com/MrXujiang/h5-Dooring (opens new window)]上参考体验。
# 模板库实现思路
我们目前开放了模板库功能，一方面我们会定期配置行业模板，另一个方面Dooring还支持用户自己配置模板，可以一键保存到云端供用户使用。我们也可以将模板变成自己的页面共享给其他人。实现方式本质上是保存用户的配置信息，上传到服务器中做存储，在后台提供了管理模板的模块，可以修改，删除模板。如下图所示：
# 模板前台展示：
# 模板后台展示：
- ← - - 动态加载 - - 保存json - - → -
H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。
# 功能特点
🎉 可扩展， Dooring 实现了较为完整的业务闭环，并使其模块化，编辑器内部功能接口也全部可以对接不同服务端语言，实现了标准化接口。此外还支持自定义组件，二次开发，设计模板等能力，以满足功能和跨领域的分层需求。
📦 开箱即用， Dooring 内置了表单渲染器、页面渲染器、动态加载内核等，仅需一套源码即可上手开发。并且还提供针对 React 的定制插件，内涵丰富的功能，可满足日常 80%的页面制作需求。
🚀 大量自研， 包含整个编辑器架构、组件设计、文档、请求库封装，后台管理系统等，满足日常项目的周边需求。
🚄 与时俱进， 在满足需求的同时，我们也不会停止对新技术的探索。比如更多营销组件、业务功能，后台管理可视化，PC 页面编辑器，数据大屏定制等等。
# 为什么选择 Dooring
目前github已超过 3000+star，上线 2 个月累计 500+用户使用，解决完善了 100+问题，后续会持续迭代，更新，自研优秀，先进的 lowcode/nocode 解决方案。
- doring如何工作 - - → -
注：灰色部分还未实现，正在更新中...
# 快速上手
# 环境准备
首先得有 node，并确保 node 版本是 10.13 或以上，（mac/win 下推荐使用 n 来管理 node 版本）
$ node-v
-v10.13.0
-注：推荐使用 yarn 管理 npm 依赖
# 源码工程
| h5_plus(编辑器项目) | admin(管理后台) | Server(服务端项目) |
|---|
本地拿到源码工程之后先安装对应依赖，在对应工程目录里执行 yarn 命令，等待依赖安装完成。
# 本地运行
1.首先本地启动 server，在 src 目录的 index.js 中修改跨域白名单，改为本地的 ip+端口，如http://192.167.0.3:8000
2.其次本地启动 h5_plus,启动完毕在浏览器打开对应的启动地址即可查看，如下：
- ← - - doring如何工作 - - 目录结构 - - → -
- 
{{
- data.heroText || $title || "Hello"
- }}
+ 
{{ data.heroText || $title || "Hello" }}
+
+H5-Dooring 仍在持续迭代, 如果有任何问题, 可以点击 [立即反馈](http://h5.dooring.cn/h5?tid=86C45FAE)。
+
+## 问题汇总
+
+#### 1. 本地部署后, win系统下如何启动server?
+
+win下启动server, 需要将server/package.json的启动脚本修改为如下:
+
+``` js
+"scripts": {
+ "start": "set NODE_ENV=development&& nodemon -w src --exec \"babel-node src\"",
+ // ... 其他不变
+ },
+```
+
+#### 2. 添加自定义组件, 需要改哪些文件?
+
+dooring支持根据企业自身业务添加自定义组件, 目前2.0版本添加自定义组件只需要在 `editor/src/components/BasicShop` 对应的组件分类下添加组件即可, 最后在 `editor/src/components/BasicShop/template.ts`下对应位置添加组件描述即可生效. 同时, 为了保证发布后的H5页面保持最新, 需要在部署发布代码前在H5工程中对应的位置也同步一份组件代码. 后续会对这一流程做一定的优化.
+
+#### 3. 本地如何调试对应的项目?
+
+授权后, 本地安装项目依赖, 在调试编辑器(editor)项目或后台管理项目(admin)前, 需要先启动服务器工程(server), 在
+`server/index.js` 代码中添加 editor / admin 项目的启动 `ip`, 这样就能跨域请求了, 同时需要修改 editor / admin 项目中 `utils/tools.ts` 下的api地址, 开发环境改为本地 `server` 项目的 `ip`.
+
+
+如果在部署中遇到其他问题, 欢迎加我微信交流: `Mr_xuxiaoxi`
diff --git a/doc/zh/guide/README.md b/doc/zh/guide/README.md
index 52d177b..3c30c26 100644
--- a/doc/zh/guide/README.md
+++ b/doc/zh/guide/README.md
@@ -1,4 +1,4 @@
-
+
H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。
@@ -6,12 +6,12 @@ H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解
🎉 **可扩展，** Dooring 实现了较为完整的业务闭环，并使其模块化，编辑器内部功能接口也全部可以对接不同服务端语言，实现了标准化接口。此外还支持自定义组件，二次开发，设计模板等能力，以满足功能和跨领域的分层需求。
-📦 **开箱即用，** Dooring 内置了**表单渲染器、页面渲染器、动态加载内核**等，仅需一套源码即可上手开发。并且还提供针对 React 的定制插件，内涵丰富的功能，可满足日常 80%的页面制作需求。
+📦 **开箱即用，** Dooring 内置了**表单渲染器、页面渲染器、动态加载内核**等，仅需一套源码即可上手开发。并且还提供针对 React 的定制插件，内涵丰富的功能，可满足日常 30%-60%的页面制作需求。
🚀 **大量自研，** 包含整个编辑器架构、组件设计、文档、请求库封装，后台管理系统等，满足日常项目的周边需求。
-🚄 **与时俱进，** 在满足需求的同时，我们也不会停止对新技术的探索。比如更多**营销组件、业务功能，后台管理可视化，PC 页面编辑器，数据大屏定制**等等。
+🚄 **与时俱进，** 在满足需求的同时，我们也不会停止对新技术的探索。比如更多**营销组件, 可视化组件, 功能组件**等等。
## 为什么选择 Dooring
-目前**github**已超过 3000+star，上线 2 个月累计 500+用户使用，解决完善了 100+问题，后续会持续迭代，更新，自研优秀，先进的 lowcode/nocode 解决方案。
+目前**github开源版**已超过 5200+star，上线 2 个月累计 1300+用户使用，解决完善了 100+问题，后续会持续迭代，更新，自研优秀，先进的 lowcode/nocode 解决方案。
diff --git a/doc/zh/guide/componentDev/componentStructure.md b/doc/zh/guide/componentDev/componentStructure.md
index d273357..b9b2c73 100644
--- a/doc/zh/guide/componentDev/componentStructure.md
+++ b/doc/zh/guide/componentDev/componentStructure.md
@@ -59,3 +59,121 @@ export default template;
```
以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。
+
+
+## schema设计
+
+开发一个自定义组件需要包含3部分, `Component`, `Schema` 和 `Template`. 接下来我们看一下 `Header` 组件的 `Schema`.
+
+``` js
+import {
+ IColorConfigType,
+ INumberConfigType,
+ ITextConfigType,
+ IUploadConfigType,
+ TColorDefaultType,
+ TNumberDefaultType,
+ TTextDefaultType,
+ TUploadDefaultType,
+} from '@/components/FormComponents/types';
+import { baseConfig, baseDefault, ICommonBaseType } from '../../common';
+
+export type THeaderEditData = Array<
+ IColorConfigType | INumberConfigType | IUploadConfigType | ITextConfigType
+>;
+export interface IHeaderConfig extends ICommonBaseType {
+ bgColor: TColorDefaultType;
+ logo: TUploadDefaultType;
+ logoText: TTextDefaultType;
+ fontSize: TNumberDefaultType;
+ color: TColorDefaultType;
+ height: TNumberDefaultType;
+}
+
+export interface IHeaderSchema {
+ editData: THeaderEditData;
+ config: IHeaderConfig;
+}
+
+const Header: IHeaderSchema = {
+ editData: [
+ ...baseConfig,
+ {
+ key: 'bgColor',
+ name: '背景色',
+ type: 'Color',
+ },
+ {
+ key: 'height',
+ name: '高度',
+ type: 'Number',
+ },
+ {
+ key: 'logo',
+ name: 'logo',
+ type: 'Upload',
+ isCrop: true,
+ cropRate: 1000 / 618,
+ },
+ {
+ key: 'logoText',
+ name: 'logo文字',
+ type: 'Text',
+ },
+ {
+ key: 'color',
+ name: '文字颜色',
+ type: 'Color',
+ },
+ {
+ key: 'fontSize',
+ name: '文字大小',
+ type: 'Number',
+ },
+ ],
+ config: {
+ bgColor: 'rgba(0,0,0,1)',
+ logo: [
+ {
+ uid: '001',
+ name: 'image.png',
+ status: 'done',
+ url: 'http://49.234.61.19/uploads/3_1740be8a482.png',
+ },
+ ],
+ logoText: '页头Header',
+ fontSize: 20,
+ color: 'rgba(255,255,255,1)',
+ height: 50,
+ ...baseDefault,
+ },
+};
+
+export default Header;
+```
+
+`editData`表示组件的可编辑属性, 我们可以自定义哪些组件可编辑. `config`为组件接收的属性, 和`editData`数组项中的`key`一一对应.
+
+
+### 组件编辑区属性类型
+
+`Dooring`组件编辑面板有如下对应编辑类型:
+
+- Upload 上传组件
+- Text 文本框
+- RichText 富文本
+- TextArea 多行文本
+- Number 数字输入框
+- DataList 列表编辑器
+- FileList 文件列表编辑器
+- InteractionData 交互设置
+- Color 颜色面板
+- MutiText 多文本
+- Select 选择下拉框
+- Radio 单选框
+- Switch 开关切换
+- CardPicker 卡片面板
+- Table 表格编辑器
+- Pos 坐标编辑器
+- FormItems 表单设计器
+
diff --git a/doc/zh/guide/componentShop/cpManage.md b/doc/zh/guide/componentShop/cpManage.md
new file mode 100644
index 0000000..0e07490
--- /dev/null
+++ b/doc/zh/guide/componentShop/cpManage.md
@@ -0,0 +1,16 @@
+
+# 组件审核
+
+组件审批主要由网站管理人员来操作，当用户组件提交成功之后，客户端会通过消息信令通知管理员，管理员收到消息后会审核组件。那么整个过程也很简单，我们可以使用 websocket 来实现消息双向通信，完整流程如下：
+
+
+
+通过以上的实现方式客户端和服务端就可以随时进行通信了。接下来我们看看审批的效果：
+
+
+
+
diff --git a/doc/zh/guide/componentShop/intro.md b/doc/zh/guide/componentShop/intro.md
new file mode 100644
index 0000000..7f7a93d
--- /dev/null
+++ b/doc/zh/guide/componentShop/intro.md
@@ -0,0 +1,25 @@
+
+## 组件商店基本介绍
+
+对于可视化搭建平台而言，其中一个核心的环节就是组件资产。用户在设计搭建页面时会消费各种各样的组件，但是对于不同的用户而言，组件的需求往往是不一样的，大部分的 lowcode 或者 nocode 平台都不能很好的解决用户这些定制化的组件需求，所以为了解决这一问题，组件商店就孕育而生。
+
+
+
+## 组件商店工作流设计
+
+我们要想实现完整的组件商店工作流，需要满足以下几点：
+
+- 组件线上编辑(上传)模块
+- 组件审核模块
+- 组件更新/发布模块
+- 组件管理(上架/下架/删除/下载)
+
+有了以上4块的支持，基本的组件商店就可以 work 了。具体流程如下：
+
+
+
+
diff --git a/doc/zh/guide/componentShop/uploadCp.md b/doc/zh/guide/componentShop/uploadCp.md
new file mode 100644
index 0000000..db6dd3d
--- /dev/null
+++ b/doc/zh/guide/componentShop/uploadCp.md
@@ -0,0 +1,19 @@
+
+# 上传组件
+
+当“ 生产者 ”编写好组件代码之后，需要对组件自身进行定义。因为可视化平台组件物料很依赖平台的组件开发协议，我们需要按照平台的规范去上传规范的自定义组件，这样平台才能更好的理解应用组件，保持用户认知的一致性。
+组件描述信息笔者这里设计了如下字段：
+
+- 组件名称 (中文)
+- 组件名 (英文，方便存库)
+- 组件分类 (基础，可视化，营销，媒体等)
+- 组件默认大小 (宽高)
+- 组件图标 (方便用户认知，查找)
+
+
+
+
diff --git a/doc/zh/guide/deployDev/api.md b/doc/zh/guide/deployDev/api.md
index fd66194..b03c711 100644
--- a/doc/zh/guide/deployDev/api.md
+++ b/doc/zh/guide/deployDev/api.md
@@ -11,7 +11,7 @@
## 用户相关
-### 登录
+### 用户登录
用户登录接口
- `POST` /vip/check
@@ -119,6 +119,47 @@
}
```
+### 生成登录码
+
+生成登录码接口
+- `GET` /vip/gcode
+
+先决条件:
+- 用户已登陆
+- 为超级管理员
+
+
+注: 生成登录码是由笔者写的`加密算法`实现, 不需要手动实现, 如果有自定义需求, 可以自行二次开发实现.
+
+返回示例
+``` json
+{
+ "co": "1x2fgggteee3456_zdd4",
+}
+```
+
+`说明:` 为了保护用户信息安全, 返回的登录码是加密后的密文, 会调用笔者写的`xib.xip`方法进行加密, 如果想看到原始密码, 需要调用`xib.uxip`进行解密.
+
+### 获取用户真实密码
+
+获取用户真实密码接口
+- `GET` /vip/gcode/get
+
+先决条件:
+- 用户已登陆
+- 为超级管理员
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| co | true | string | 加密后的密码 |
+
+返回示例
+``` json
+{
+ "co": "12345678",
+}
+```
+
### 修改用户信息
修改用户接口
@@ -521,8 +562,230 @@
## 文件上传
+- `POST` /files/upload/free
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| File | true | File | 文件对象 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": {
+ "filename": "H5-Dooring",
+ "url": "http://h5.dooring.cn/uploads/1_17ac208480d.png",
+ "size": 261972
+ },
+ "msg": "文件上传成功"
+}
+```
+
## 数据统计
### 数据大盘接口
-### 页面埋点
\ No newline at end of file
+- `GET` /vip/dashboard
+
+先决条件:
+- 用户已登陆
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": {
+ "userNums": 1300,
+ "pageNums": 808,
+ "tplNums": 86,
+ "views": 60235,
+ "userList": []
+ }
+}
+```
+
+## 组件商店
+
+### 组件上传
+
+- `POST` /visible/cp/save
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| react | true | string | react字符串 |
+| css | true | string | css字符串 |
+| schema | true | string | schema字符串 |
+| form | true | object | 表单对象 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": null,
+ "msg": "提交成功, 请等待审核..."
+}
+```
+
+### 获取组件上传列表
+
+- `GET` /visible/cp/list
+
+先决条件:
+- 用户已登陆
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": [
+ {
+ "cpName":"test",
+ "cpField":"test",
+ "cate":"base",
+ "width":3,
+ "height":6,
+ "icon":"http://196.345.0.345:3000/uploads/1_17a8a4eaedf.png",
+ "ispass":3
+ },
+ {
+ "cpName":"test2",
+ "cpField":"test2",
+ "cate":"media",
+ "width":4,
+ "height":20,
+ "icon":"http://196.345.0.345:3000/uploads/1_17a8a4eaedf.png",
+ "ispass":1
+ }
+ ],
+}
+```
+
+### 获取组件详情
+
+- `GET` /visible/cp/get
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| cate | true | string | 组件分类 |
+| cpField | true | string | 组件英文名字段 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": {
+ "react": "react代码",
+ "css": "css/less代码",
+ "schema": "schema的js/ts代码"
+ }
+}
+```
+
+### 更新组件审批状态
+
+- `POST` /visible/cp/update
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| cate | true | string | 组件分类 |
+| cpField | true | string | 组件英文名字段 |
+| ispass | true | number | 组件审核状态, 0 待处理 1 审核中 2 审核通过 3 审核不通过 |
+
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": null,
+ "msg": "审批成功"
+}
+```
+
+### 删除组件
+
+- `DELETE` /visible/cp/del
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| cate | true | string | 组件分类 |
+| cpField | true | string | 组件英文名字段 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": null,
+ "msg": "删除成功"
+}
+```
+
+### 下载组件源码
+
+- `POST` /visible/cp/download
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| cate | true | string | 组件分类 |
+| cpField | true | string | 组件英文名字段 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": "组件压缩包地址"
+}
+```
+
+## 数据源管理
+
+### 获取用户数据源
+
+- `GET` /vip/sourcedata/get
+
+先决条件:
+- 用户已登陆
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": [],
+}
+```
+
+### 保存用户数据源
+
+- `POST` /vip/sourcedata/save
+
+先决条件:
+- 用户已登陆
+
+| 参数名 | 是否必选 | 类型 | 说明 |
+| ------------- |:-------------:|:-----:| -------------:|
+| sourcedata | true | array | 用户数据源集合 |
+
+返回示例
+``` json
+{
+ "state": 200,
+ "result": []
+}
+```
diff --git a/doc/zh/guide/deployDev/deploy.md b/doc/zh/guide/deployDev/deploy.md
index 5b9248b..b375f26 100644
--- a/doc/zh/guide/deployDev/deploy.md
+++ b/doc/zh/guide/deployDev/deploy.md
@@ -11,7 +11,7 @@
- Dooring管理后台(Dooring-Admin)
- 服务端项目(Server)
-获取以上四个核心源码工程需要满足商业授权协议, 具体可联系[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg)
+获取以上四个核心源码工程需要满足商业授权协议, 具体可联系作者[徐小夕](http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg)
### 部署架构图
diff --git a/doc/zh/guide/deployDev/deploy_v6.md b/doc/zh/guide/deployDev/deploy_v6.md
new file mode 100644
index 0000000..a5222b6
--- /dev/null
+++ b/doc/zh/guide/deployDev/deploy_v6.md
@@ -0,0 +1,46 @@
+
+
+私有化部署需要获取3个核心项目包, 包括
+- 可视化大屏编辑器(v6.dooring/)
+- v6管理后台(v6.dooring/manage)
+- 服务端项目(v6.dooring/server)
+
+获取以上三个核心源码工程需要满足商业授权协议, 具体可参考[商业授权方案](http://h5.dooring.cn/h5_plus/price)
+
+### 部署架构图
+
+
+
+部署流程如下:
+
+1. 下载3个源码工程, 安装依赖(npm install 或 yarn)
+2. 打包2个前端工程至`server`的static目录下
+3. 在`server`下本地运行 `yarn start` 或 `npm start` 启动服务端进行本地测试
+4. 打包服务端代码, `yarn build` 生成 `dist` 目录, 建议使用 `pm2` 做`nodejs`服务的负载均衡, 运行 `pm2 start dist/index.js`启动生产环境代码
+
+也可以将以上步骤集成到gitlab等CI, CD服务中, 进行自动化打包发布, 或者采用`docker`进行容器化部署.
+
+### 步骤3.4详细流程
+
+#### 1. 安装项目环境
+
+服务器需提前安装node和pm2, 将本项目上传至服务器指定的目录(如/www/activity), 进入项目目录, 执行:
+```
+npm install
+```
+
+#### 2. 修改项目域名
+
+进入`./src/config/index.js`, 修改`staticPath`变量为当前服务器域名/ip, 如`http://xxx.com`或`http://xxx.com:8080`(如非80端口)
+
+#### 3. 编译项目
+
+执行`npm run build`编译项目, 生成`dist`目录
+
+#### 4. 运行项目
+在项目根目录执行 `pm2 start dist/index.js`启动项目
diff --git a/doc/zh/guide/deployDev/dir.md b/doc/zh/guide/deployDev/dir.md
new file mode 100644
index 0000000..4413de2
--- /dev/null
+++ b/doc/zh/guide/deployDev/dir.md
@@ -0,0 +1,21 @@
+
+
+服务端主要是我们的`server`工程, 数据主要存放在`server/public`下, 具体数据指代含义我们接下来会详细介绍.
+- bed 存放图片库中的分类图片, 私有化部署的用户可以直接在此处扩充图片(更好的建议是直接存到第三方图床)
+- h5 用户保存的h5数据文件, 一个页面对应一个json文件
+- h5_tpl 平台保存的模版数据文件夹
+ - xxx.json 模版页面文件
+ - tpls.json 模版库中的模版列表数据, 可以手动清空
+- h5_vip 会员数据目录
+ - form 会员制作的含表单页面的表单收集数据
+ - view.json 用户浏览量数据
+ - vip.json 会员列表数据
+ - vipCard.json 会员订单数据(暂时无用, 可删除)
+- image.json 图片库, 主要用来渲染页面的图片库数据
+- city.json 省市3级联动数据, 为表单组件提供数据支持
+
diff --git a/doc/zh/guide/deployDev/form.md b/doc/zh/guide/deployDev/form.md
new file mode 100644
index 0000000..fbccc59
--- /dev/null
+++ b/doc/zh/guide/deployDev/form.md
@@ -0,0 +1,41 @@
+
+
+### 获取Form组件的值数据
+
+Form表单组件在`editor`目录下`src/components/BasicShop/BasicComponents`位置.
+
+Form组件是`Dooring`的核心组件之一, 内部的值通过Form组件内部收集, 当然我们也可以暴露出来让其他交互或者组件消费(需要一定的二次开发), 关键代码如下:
+
+``` js
+req.post(`/vip/h5/form/post${location.search}`, {...fields, ...formData}).then(res => {
+ if(type === 'link') {
+ // 解析参数
+ let isPre = content.indexOf('?') < 0;
+ let query = {dr: Date.now(), from: urlParmas.tid};
+ try {
+ query = params ? {...JSON.parse(params), ...query} : query;
+ }catch(err) {
+ console.log(err)
+ }
+
+ // 跳转
+ if(content.indexOf('http') > -1) {
+ window.location.href = content + urlencode(query, isPre);
+ return
+ }
+
+ history.push(`/m?tid=${content}&${urlencode(query)}`);
+ }else if(type === 'modal') {
+ setVisible(true);
+ }else if(type === 'code') {
+ eval(content);
+ }
+})
+```
+
+数据收集提交的核心代码在Form组件的第56-149行, 也就是`submit`方法. 表单组件收集到的数据统一存放在代码中的`formData`字段, 所以要想在其他地方获取用户表单填写的值, 我们只需要手动将`formData`传递出去, 或者挂载到全局(如window对象, localStorage, indexedDB等).
\ No newline at end of file
diff --git a/doc/zh/guide/deployDev/log.md b/doc/zh/guide/deployDev/log.md
new file mode 100644
index 0000000..b1a7601
--- /dev/null
+++ b/doc/zh/guide/deployDev/log.md
@@ -0,0 +1,96 @@
+
+
+### 更新日志
+
+#### 2.01
+
+1. 优化编辑器加载性能
+2. iframe容器组件添加边框等属性
+3. 富文本组件添加背景色配置
+4. 修复真机预览时空数据还能显示二维码bug
+5. 优化页面高度适配问题, 添加高度适配器
+6. 优化组件交互时空链接点击出现message bug
+7. 更新dooring文档
+
+#### 2.0
+
+1. 完善数据源功能
+2. 轮播图/图片列表/List/文字跑马灯/横向滚动组件数据源对接完毕
+3. 组件库支持搜索功能
+4. 组件列表支持分页, 提高渲染性能
+5. 赞助墙交互优化
+6. 界面局部优化
+
+#### 1.99
+
+1. 添加数据源功能
+2. 视频组件支持封面图
+3. 优化页面DSL结构, 降低了jsonSchema体积30%-50%
+4. 官网优化
+5. 管理后台替换logo, 部分文案信息
+6. 添加图片列表组件
+7. 轮播图支持一键绑定数据源
+
+
+#### 1.98
+
+1. 编辑器功能区添加更多折叠下拉框, 优化头部界面
+2. 添加数据源入口和界面
+3. 模版库优化, 剔除无用模版, 累计60+模版
+4. 入口页添加赞助墙
+5. 升级视频组件, 支持弹幕, 截屏, 模式设置等功能
+6. 文件上传路径兼容window服务器本地化部署
+
+#### 1.96
+
+1. 修复首页推荐项目外链地址和站内文案
+2. 替换Dooring网站logo
+3. 优化ios8以下访问H5时可能出现的页面卡顿问题
+4. 图片上传组件添加svg, gif图片格式支持
+5. 后台管理系统添加一键跳编辑器按钮
+6. 服务端编辑侧路由加固
+7. 文件上传组件添加自定义上传文档，支持七牛云，腾讯云，阿里oss等第三方图床方式
+
+#### 1.95
+
+1. dooring文档添加更新日志模块
+2. dooring增报错监控函数, 提供一键清空缓存按钮和自动重载功能
+3. 新增电商商品H5模版
+4. 页面配置增加背景模式和背景重复
+5. 表单添加字段名配置项
+
+#### 1.94
+
+1. 转盘组件支持转盘交互功能(跳转链接/打开弹窗/自定义代码)
+2. 添加网站拦截, 防止页面误关导致页面无法保存
+3. 优化页面控制条组件样式
+4. 按钮组件添加组件动画
+5. 图片组件添加组件动画
+6. 媒体组件icon优化
+7. 全局错误监控组件添加一键清除缓存功能
+
+#### 1.93
+
+1. 上线源码下载功能
+2. 服务端支持下载源码服务和下载次数限制
+3. 界面部分文案优化
+4. 出码基座优化
+5. 抽奖组件支持抽奖后自定义交互(弹窗/链接/自定义代码)
+
+#### 1.92
+
+1. 修复背景图预览适配问题
+2. 转盘组件支持中奖后自定义交互/弹窗/自定义代码
+3. 界面局部调整
+4. 后台管理表单数据支持多键查询
+5. 可视化大屏柱状图组件支持实时数据请求
+
+
+
+
+
diff --git a/doc/zh/guide/deployDev/oss.md b/doc/zh/guide/deployDev/oss.md
index 1e9e284..96ce6be 100644
--- a/doc/zh/guide/deployDev/oss.md
+++ b/doc/zh/guide/deployDev/oss.md
@@ -43,3 +43,76 @@ observe.subscribe(() => {}, null, (res) => {
其他oss服务类似, 如果不清楚如何配置, 可以在[H5-Dooring官网](http://h5.dooring.cn/)中找到我们.
+### 如何接入任何第三方上传服务
+
+首先我们的上传组件`Upload`使用内部的服务接口来实现上传功能, 所以需要给组件的`action`赋值, 如下:
+
+``` jsx
+
+
+源码下载之后是完整的React项目源代码, 开发人员可以直接根据自己的业务需求来二次编写代码来满足不同的业务需求.
+
+在拿到源码之后, 我们需要进入项目, 使用npm或者yarn安装项目依赖, 如下:
+
+``` bash
+npm install
+// 或者
+yarn
+```
+
+之后我们就可以本地运行项目了:
+
+``` bash
+npm start
+// 或者
+yarn start
+```
+
+因为源码工程采用`umi3.0`搭建, 所以代码配置可以参考`umi3.0`规范, 比如路由配置, `history`模式, 打包路径等, 二次开发完成之后, 我们可以执行:
+``` bash
+npm run build
+// 或者
+yarn build
+```
+将项目打包成html, 以便部署到任何服务器中.
\ No newline at end of file
diff --git a/doc/zh/guide/introduced.md b/doc/zh/guide/introduced.md
index f7934c1..8539594 100644
--- a/doc/zh/guide/introduced.md
+++ b/doc/zh/guide/introduced.md
@@ -1,3 +1,3 @@
-注：灰色部分还未实现，正在更新中...
+注：灰色部分不包括在实现范围内，可以参考商业授权版源码二次开发.
diff --git a/doc/zh/guide/product.md b/doc/zh/guide/product.md
new file mode 100644
index 0000000..0affad2
--- /dev/null
+++ b/doc/zh/guide/product.md
@@ -0,0 +1,177 @@
+
+
+H5-Dooring 是一款功能强大，高可扩展的 H5 可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的 H5 落地页最佳实践。
+
+## 背景介绍
+
+**LowCode** 平台这两年在国内热度很高, 也有很多公司在着手设计能支撑更多业务场景的低代码平台, 但是国内发展仍然处于起步阶段, 还有非常多的问题需要处理。就我本人服务过的多家上市公司, 中后台业务非常复杂, 但是通用性非常高, 业务逻辑和展现形态有很多复用性, 为了解决复用性低和研发效能低的问题, **规则引擎** 孕育而生, 当然这只是 **Lowcode/nocode** 的一个过渡方案, 但已经能为企业提高20%以上的研发效率。
+
+当然很多企业早已看到这样的机会, 也研发出了非常优秀的 **LowCode** 产品, 但是由于国内企业业务的复杂性, 很多 **LowCode** 产品都存在一定的局限, 所以各大中小企业也开始研究可视化搭建相关的产品, 可谓“百花齐放”。
+
+[**H5-Dooring**](http://h5.dooring.cn/h5_plus) 正是为了解决企业内部可视化搭建需求的解决方案, 它更多的是提供一套可视化搭建解决方案, 以源码的方式交付企业, 使得企业能从此方案中受益, 二次开发适合自身业务需求的搭建平台。当然随着 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 的不断更新和完善, 部分企业甚至不需要二次开发就能直接使用 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) , 我们也提供部署服务, 来快速帮企业做项目部署。目前已完成了常用的功能:
+
+- 微信/QQ分享(支持配置微信分享文案, 自定义分享图标)
+- https服务支持解决方案
+- oss解决方案(已跑通七牛云上传服务)
+- 国际化方案
+
+同时由于 **H5-Dooring** 的核心在编辑器前端, 也是其最大价值所在, 我们服务层主要提供基础的数据支持服务(用户管理, H5页面管理, 模版管理, 基本页面统计等), 企业也可以轻松接入自己的服务后台,如 **java, php, go, python** 等。所以不用担心整合内部系统之后的数据问题, 同时我建议有二次开发需求的企业需要具备一定的技术能力, 比如**React, Nodejs** 等的开发经验。
+
+## H5编辑器介绍
+接下来和大家详细介绍一下 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 编辑器的功能模块。
+
+
+
+### 1.入口页面
+
+入口页面主要是我们在编辑器前台管理用户页面的一个入口, 我们可以创建H5页面, 在线编程等, 同时也能基于已有的精选模版来快速的创建页面:
+
+
+
+### 2.编辑器页面
+
+编辑器页面的内容比较多, 也是最为重要的部分。我们可以从几个部分来介绍:
+
+- 组件区
+- 画布区
+- 顶部功能区
+- 属性编辑面板
+- 数据源
+- 快捷键
+- 国际化
+
+#### 2.1 组件区
+
+
+
+组件主要包括 基础组件, 图表组件, 媒体组件, 商品组件, 功能组件, 当然企业也可以基于自身业务划分不同的分类, 并进行组件的二次开发。我们只需要从左侧拖拽组件到画布, 即可使用该组件。
+
+同时 [**H5-Dooring**](http://h5.dooring.cn/h5_plus) 还提供了组件定制的能力, 让用户选择自己常用的组件, 这样用户可以更高效的搭建页面:
+
+
+
+由上图所示, 用户只需要选择或者取消选择, 可以决定组件是否在编辑器页面显示, 如果后期用户想恢复设置, 也可以在该页面恢复。
+
+#### 2.2 画布区
+
+画布区可以动态调整画布大小来试试预览不同尺寸的样式, 也可以移动画布, 缩放画布来快捷的操作页面:
+
+
+
+#### 2.3 顶部功能区
+
+顶部功能区包括的功能有:
+
+- 模版库
+- 保存
+- 下载源码
+- 导出json
+- 导入json
+- 预览
+- 真机预览
+- 撤销/重做
+- 删除
+- 截图
+- 页面设置
+
+大家可以亲自体验一下。
+
+#### 2.4 属性编辑面板
+
+
+
+属性编辑面板可以对组件的外观, 逻辑, 交互进行配置, 比较简单但大部分满足业务搭建需求, 企业技术人员也可以增量式地添加更多属性配置。
+
+#### 2.5 数据源
+
+数据源主要为瓶平台用户提供一种高效的数据接入机制, 不同页面或者统同一页面的不同组件可以共享数据:
+
+
+
+更详细的数据源介绍可以参考我的文章 [Dooring可视化搭建平台数据源设计剖析](https://mp.weixin.qq.com/s?__biz=MzU2Mzk1NzkwOA==&mid=2247487877&idx=2&sn=770ff16d69d3e7ac2bbcd78e97ab8f32&chksm=fc53087ecb2481685451a50e892fa889781788ca16a4ce689ec7f7fff1ae99c91ac8b82a160d&token=1373546109&lang=zh_CN#rd)
+
+#### 2.6 快捷键
+
+快捷键主要分为画布内组件的快捷键(复制, 删除)和全局的快捷键, 如下图所示:
+
+
+
+#### 2.7 国际化
+
+国际化目前已支持, 我们只需要在入口页面切换即可:
+
+
+
+
+### 3.预览页面
+
+用户可以点击顶部功能区的预览按钮一键预览:
+
+
+
+也可以在预览页面, 打开控制台调整为谷歌的仿真预览模式:
+
+
+
+### 4.真机预览
+
+
+
+### 5.登录页面
+
+
+
+
+## Dooring后台管理介绍
+
+**Dooring后台管理** 主要是为 **H5-Dooring** 提供数据支撑, 比如增删查改等操作, 同时随着用户需求的不断增加, **Dooring后台管理** 目前已实现了非常多的功能, 比如说表单数据收集, 表单数据分析, 导出数据, 基本的页面数据监控等, 接下来我就来带大家介绍一下。
+
+
+
+我们可以从上图的编辑器界面右上角头像下拉框中进入后台管理系统。
+
+### 1.后台主页
+
+后台主页主要是对编辑器页面提供基本的访问量统计, 同时对用户数, 模版数, 页面数进行统计, 企业可以根据自身需求二次开发更多数据统计方案。
+
+
+
+### 2.用户管理
+
+用户管理主要是对网站用户进行管理(注册, 修改, 删除, 查看等), 当然只有超级管理员能看到, 目前我们做了简单的权限管理: 超级管理员, 普通用户. 普通用户可以管理自己的页面, 查看页面数据分析等,超级管理员可以使用所有功能, 比如管理用户, 生成注册链接, 模版管理, 页面管理等, 同时可以审核页面, 一键删除其他用户产生的不符合规定的页面。
+
+
+
+
+### 3.页面管理
+
+页面管理主要是对用户搭建的H5页面进行管理, 我们可以查看页面的链接, 页面访问量, 编辑页面标题, 删除页面等,如果这个页面包含表单, 我们还能一键查看表单数据的收集情况,并一键进行数据分析。
+
+
+
+
+#### 3.1表单页面数据分析
+
+表单数据分析主要针对有表单的页面, 我们可以一键统计表单数据, 并生成分析报告, 如下图:
+
+
+
+同时我们可以将数据导出为 `excel`, 或者将数据导入, 一键生成数据分析报告, 当然更多分析维度开发者也可以二次开发。
+
+### 4.模版管理
+
+超级管理员可以对用户产生的模版进行预览, 审核, 删除, 保证线上用户使用的模版都是精美可用的:
+
+
+
+### 5.精选模版管理
+
+精选模版主要是用来管理 **H5-Dooring** 入口页面中的模版, 我们可以把精美的行业模版上传到精选模版中, 让用户更高效的搭建页面:
+
+
+
+## Dooring后台服务介绍
+
+后台服务主要采用的 koa + nodejs, 同时还使用了微信 `sdk`, 轻松帮我们实现微信相关的功能, 接口遵循 `restful` 规范, 并且提供了接口文档, 企业可以轻松基于此使用自己的后端语言来接入, 比如 java, python, go, php等。
+
+
diff --git a/doc/zh/guide/startedQuickly.md b/doc/zh/guide/startedQuickly.md
index e602de5..8fa31a1 100644
--- a/doc/zh/guide/startedQuickly.md
+++ b/doc/zh/guide/startedQuickly.md
@@ -1,5 +1,10 @@
# 快速上手
+## 从零搭建一个H5表单页面
+
+
+
+
## 环境准备
首先得有 node，并确保 node 版本是 `10.13` 或以上，（mac/win 下推荐使用 n 来管理 node 版本）
@@ -26,3 +31,9 @@ v10.13.0
2.其次本地启动 h5_plus,启动完毕在浏览器打开对应的启动地址即可查看，如下：
+
+## 项目路径说明
+
+- `/h5_plus` H5编辑器项目
+- `/iH5` Dooring后台管理系统
+- `/doc` Dooring文档
diff --git a/logo.ff7fc6bb.png b/logo.ff7fc6bb.png
new file mode 100644
index 0000000..bf5d90c
Binary files /dev/null and b/logo.ff7fc6bb.png differ
diff --git a/package.json b/package.json
index 7dd3bb9..def1e23 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
"url": "https://github.com/MrXujiang/h5-Dooring/issues"
},
"dependencies": {
+ "@alex_xu/react-slider-vertify": "^1.1.7",
"@ant-design/icons": "^4.2.1",
"@antv/f2": "^3.7.7",
"@uiw/react-baidu-map": "^1.17.3",
diff --git a/readme.md b/readme.md
index 9fdc313..2571ea8 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,7 @@
-> 让H5制作像搭积木一样简单!
+> Make H5 as easy as building blocks!
- 
+
Welcome to H5-Dooring 👋
@@ -14,191 +14,106 @@
-### ✨ [Demo](http://h5.dooring.cn/h5_plus)
+| home🏠 | demo✨ | doc📦 | tutorial | wiki |
+| ----------- | ----------- | ----------- | ----------- | ----------- |
+| [website](http://h5.dooring.cn) | [Demo](http://h5.dooring.cn/h5_plus) | [Document](http://h5.dooring.cn/doc) | [视频&Video](https://www.zhihu.com/zvideo/1406394315950653440) | [wiki](https://github.com/MrXujiang/h5-Dooring/wiki)
-### 📦 doc(文档) [H5-Dooring Document](http://h5.dooring.cn/doc)
+English | [简体中文](./zh.md)
-### [视频教程 | Video tutorial](https://www.zhihu.com/zvideo/1326300284608417792)
+Related products:
-
-
-
-相关产品: [V6.Dooring | 大屏可视化编辑器](https://github.com/MrXujiang/v6.dooring.public)
+- [V6.Dooring | Large screen visual editor](https://github.com/MrXujiang/v6.dooring.public)
+- [dooring-electron-lowcode | Dooring desktop software](https://github.com/MrXujiang/dooring-electron-lowcode)
+- [Lowcode community](http://lowcode.dooring.cn)
## Author
-👤 **徐小夕**
+👤 **alex_xu**
* Website: http://h5.dooring.cn
* Github: [@MrXujiang](https://github.com/MrXujiang)
-## 声明
-
-专有软件及代码，未获得授权的情况下，禁止对该仓库代码进行反编译、分发等行为，否则将承担相应的法律后果。
-
-## 🤝 Contributing
+## 🤝 Contributing and support
Contributions, issues and feature requests are welcome!
-
-
-前面的渲染器原理已经介绍了, 这里就不一一介绍了,感兴趣的可以交流讨论.
-
-### 实现在线下载功能 | Enable online download
-在线下载这块我们需要用到一个开源库: **file-saver**, 专门解决前端下载文件困难的窘境. 具体使用举例:
-``` js
-var FileSaver = require('file-saver');
-var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
-FileSaver.saveAs(blob, "hello world.txt");
-```
-以上代码可以实现将传入的数据下载为txt文件, 如果是Blob, 是不是还能在线下载图片, html呢? 答案是肯定的, 所以我们的下载任务采用该方案来实现.
-
-### 后端部分 | The back-end section
-后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 所以这里大致提几个点, 大家可以用完全不同的技术来实现后台服务, 比如说**PHP**, **Java**, **Python**或者**Egg**. 笔者这里采用的是**koa**. 主要实现功能如下:
-* 保存模板 | Save the template
-* 真机预览的数据源存储 | The data source store for the real machine preview
-* 用户相关功能 | User-related features
-* H5图床和静态文件托管 | H5 map bed and static file hosting
-
-具体代码可以参考笔者的另一篇全栈开发文章
-
-[基于nodeJS从0到1实现一个CMS全栈项目](https://juejin.im/post/6844903952761225230)
-
-模式基本一致.
-
-## wiki(参考文档)
-* [H5可视化编辑器(H5 Dooring)介绍](https://github.com/MrXujiang/h5-Dooring/wiki/H5%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8(H5-Dooring)%E4%BB%8B%E7%BB%8D)
-* [Form Editor(动态表单设计器)](https://github.com/MrXujiang/h5-Dooring/wiki/Form-Editor(%E5%8A%A8%E6%80%81%E8%A1%A8%E5%8D%95%E8%AE%BE%E8%AE%A1%E5%99%A8))
-* [基于f2实现移动端可视化编辑器(dooring升级版)](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%9F%BA%E4%BA%8Ef2%E5%AE%9E%E7%8E%B0%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8(dooring%E5%8D%87%E7%BA%A7%E7%89%88))
-* [实现H5可视化编辑器的实时预览和真机扫码预览功能](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%AE%9E%E7%8E%B0H5%E5%8F%AF%E8%A7%86%E5%8C%96%E7%BC%96%E8%BE%91%E5%99%A8%E7%9A%84%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%9C%9F%E6%9C%BA%E6%89%AB%E7%A0%81%E9%A2%84%E8%A7%88%E5%8A%9F%E8%83%BD)
-* [基于H5 Dooring场景下的图片 文件上传方案指南](https://github.com/MrXujiang/h5-Dooring/wiki/%E5%9F%BA%E4%BA%8EH5-Dooring%E5%9C%BA%E6%99%AF%E4%B8%8B%E7%9A%84%E5%9B%BE%E7%89%87-%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E6%96%B9%E6%A1%88%E6%8C%87%E5%8D%97)
-
-## 已完成功能 | The functionality is complete
-1. 组件库拖拽和显示 | Component library drag and display
-2. 组件库动态编辑 | Component library dynamic editing
-3. H5页面预览功能 | H5 page preview feature
-4. 保存H5页面配置文件 | Save the H5 page profile
-5. 保存为模版 | Save as a template
-6. 移动端跨端适配 | Mobile cross-end fit
-7. 媒体组件 | The media component
-8. 在线下载网站代码功能 | Download the website code feature online
-9. 添加typescript支持 | Add typescript support
-10. 表单设计器/自定义表单组件 | Form designer/custom form components
-11. 可视化组件Chart实现 | Visual component Chart implementation
-12. 在线编程模块(Mini Web IDE) | Online programming module
-13. 新增图表组件 面积图，折线图， 饼图 | Added chart component area chart, line chart, pie chart
-14. 添加图片库,支持用户在线选择图片素材 | Add a picture library to allow users to select picture footage online
-15. 升级图片组件为图文组件 | Upgrade the picture component to the picture component
-16. 添加模版库 | Add a template library
-17. 添加可视化组件(基于g2)如折线图, 饼图, 面积图等 | Add visualization components (based on g2) such as line charts, pie charts, area charts, etc
-18. form组件文本框字段修改 | The form component text box field is modified
-19. 清空按钮添加确认框 | Empty the button to add a confirmation box
-20. 表单组件中添加展示型文本,用来对字段说明 | Add presentation text to the form component to describe the field
-21. 支持组件复制, 右键删除 | Support for component replication, right-click deletion
-
-## 正在完成功能 | The functionality is being completed
-* 丰富组件库组件 Enrich component library components
-* 添加配置交互功能 Add configuration interaction
-* 组件细分和代码优化 Component segmentation and code optimization
-* 单元测试 Unit tests
-
-## Install(安装)
-1. 下载代码 | Download the code
+## Install
+1. Download the code
```sh
git clone https://github.com/MrXujiang/h5-Dooring.git
```
-2. 进入项目目录 | Go to the project catalog
+2. Go to the project catalog
```sh
cd ./h5-Dooring
```
-3. 安装依赖包 | Install the dependency package
+3. Install the dependency package
```sh
yarn install
or
@@ -207,7 +122,7 @@ cnpm install
## Usage
-本地启动应用 | Launch the app locally
+Launch the app locally
```sh
yarn start
or
@@ -216,11 +131,11 @@ cnpm run start
## How to run the downloaded code ?
- 1. 可以将压缩包解压直接放到服务器根目录, 访问根目录地址即可
- 2. `vscode`安装Live Server插件, 将下载的压缩包解压成文件夹, 用`vscode`打开, 点击Live Server即可, 注意要删除启动路径的`index.html`, 改成`/`
+ 1. The compression package can be unzipped directly to the server root, and access to the root address is sufficient
+ 2. 'vscode' installs the Live Server plug-in, unzips the downloaded compression package into a folder, opens with 'vscode', clicks on Live Server, and notes that to remove the 'index .html' of the startup path, change it to '/'
-如发现本地启动后组件拖拽遇到奇怪的报错, 是应为第三方组件在开发环境的bug, 可以采用一下方式解决:
+If you find that the local boot component drag and drop encountered strange errors, is the third-party component in the development environment bug, you can take a step to solve:
> If you find that the local start-up component drag encountered strange errors, is a bug that should be a third-party component in the development environment, can be resolved in a way:
```sh
@@ -228,32 +143,34 @@ yarn dev
or
cnpm run dev
```
-前提是先安装http-server模块.
+The premise is to install the http-server module first.
+
+## Browsers support
+
+ Modern browsers does not support IE browser
+
+| [
](https://godban.github.io/browsers-support-badges/)IEdge | [
](https://godban.github.io/browsers-support-badges/)Firefox | [
](https://godban.github.io/browsers-support-badges/)Chrome | [
](https://godban.github.io/browsers-support-badges/)Safari |
+| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| Edge | last 2 versions | last 2 versions | last 2 versions |
## Partner project
+
+* [mitu-editor - 轻量级且强大的图片编辑器](https://github.com/H5-Dooring/mitu-editor)
* [powerNice - 一款轻量级文档管理编辑器](http://h5.dooring.cn/powernice/views)
* [rc-drag - 基于react的轻量级拖拽缩放组件](https://github.com/MrXujiang/rc-drag)
* [Luckysheet - 强大的在线excel编辑器](https://github.com/mengshukeji/Luckysheet)
* [Blink - 一款自定义的生成故障艺术动画的组件库](https://github.com/MrXujiang/blink)
* [frontend-developer-roadmap | 一个能提高开发者工作效率的前端js库汇总](https://github.com/MrXujiang/frontend-developer-roadmap)
* [lucky-canvas 抽奖插件 | 一个支持H5, 微信小程序, React的抽奖插件](https://github.com/LuckDraw/lucky-canvas)
+* [vue-admin-box | 免费并且开源的中后台管理系统模板](https://github.com/cmdparkour/vue-admin-box)
+* [基于antd开箱即用的后台管理模版ant-simple-pro](https://github.com/lgf196/ant-simple-pro)
-## 更新日志 | Update the log
-1. 添加在线编程模块（在执行代码前先启动node服务 npm run server）
-2. 添加客服机器人模块[chatbot-antd](https://www.npmjs.com/package/chatbot-antd)
-3. 添加数据可视化模块
-4. 添加表单定制模块
+## Sponsored
+Open source is not easy, with your sponsorship, we will do better
+
-## 持续升级 | Continuous upgrades
-正在升级1.5版本，敬请期待...
+## Technical feedback and communication
+wechat：beautifulFront
-## 赞助 | Sponsored
-开源不易, 有了您的赞助, 我们会做的更好~
-
-
-
-## 技术反馈和交流群 | Technical feedback and communication
-微信：beautifulFront
-
-
+
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..bf5d90c
Binary files /dev/null and b/src/assets/logo.png differ
diff --git a/src/components/FormComponents/types.ts b/src/components/FormComponents/types.ts
index 7dc2b40..92b3abf 100644
--- a/src/components/FormComponents/types.ts
+++ b/src/components/FormComponents/types.ts
@@ -43,7 +43,7 @@ export interface IDataListConfigType {
key: string;
name: string;
type: 'DataList';
- cropRate: number;
+ cropRate?: number;
}
export type TDataListDefaultTypeItem = {
@@ -51,8 +51,9 @@ export type TDataListDefaultTypeItem = {
title: string;
desc: string;
link: string;
- type?: number;
imgUrl: TUploadDefaultType;
+ type?: number;
+ price?: string;
};
export type TDataListDefaultType = Array
+ 