diff --git a/readme.md b/readme.md
index 005e092..1d31dd8 100644
--- a/readme.md
+++ b/readme.md
@@ -46,168 +46,7 @@ Give a ⭐️ if this project helped you!
* **@koa/router** 基于koa2的服务端路由中间件
* **ramda** 优秀的函数式js工具库
-## 需求分析
-在思考需求分析之前我们先来看看**Dooring**的使用演示：
-
-由上面的gif图我们可以分析出，可视化编辑器主要有以下几部分组成：
-* 可拖拽的组件库 draggable components
-* 盛放组件的画布 canvas
-* 组件编辑器 FormEditor
-* 头部工具栏 toolBar
-
-可拖拽组件我们可以用社区比较火的**react-dnd**，**react-draggable**来实现，由于我们的画布是可拖拽可放大缩小的，所以这里需要对画布赋能，具体实现可参考下文。
-
-其次就是H5编辑器部分，这部分是核心功能，后面我们会详细分析。还有就是预览，生成预览链接，保存**json**文件， 保存模版这些功能本质上是对我们**json**文件的操作，可是目前可视化搭建技术的常用手段之一。先来看看这些功能的演示：
-
-
-## 基础准备
-我们的**h5页面可视化编辑器**采用**umi**来作为脚手架工具.
-> **umi**是可扩展的企业级前端应用框架,以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求.
-
-这样我们不会关注繁琐的工程配置细节, 可以直接在项目中使用 **antd** 和 **less** 这些方案, 并且集成了目前比较流行的**css module**, 可以方便我们在项目里对**css**进行模块化开发. umi创建项目的具体使用流程如下:
-``` js
-// 创建并进入工程目录
-mkdir dooring && cd dooring
-// 创建umi应用
-yarn create @umijs/umi-app
-// 安装依赖
-yarn // 或者使用npm install
-```
-简单的三步走策略就能轻松搭建我们的项目工程, 是不是省去了很多麻烦? (在使用这些方式之前我们首先确保自己本地的**node** 版本是 10.13 或以上)
-
-在项目创建完之后我们还需要安装可视化方面必备的第三方组件, 笔者调研社区精选组件之后采用了一下方案:
-* **react-dnd** react拖拽组件
-* **react-color** react颜色选择组件,用于H5编辑器的编辑颜色部分
-* **react-draggable** 用于组件或者画布的拖拽移动
-* **react.qrcode** 基于react的二维码生成组件, 能以react组件的方式生成二维码
-
-以上组件在运行项目前大家可以自行安装.
-
-## 介绍
-在最好项目开发准备之后,我们就来开始设计我们的h5页面可视化编辑器－**Dooring**.
-
-### H5编辑器实现
-H5可视化编辑器主要需要4个部分,在文章开头也分析过, 这里用图来巩固一下:
-
-以上是最基本也是最核心的功能展示模型,接下来我们会一一将其拆解并逐个实现.
-#### 实现原理
-我们都知道, 目前比较流行的页面可视化搭建方案可以有如下几种:
-* 在线编辑代码实现
-* 在线编辑json实现
-* 无代码化拖拽实现(底层基于json配置文件)
-
-笔者做了一下优缺点对比图,如下:
-
-| 方案 | 定制化程度 | 缺点 |
-| :--------- | :--: | -----------: |
-| 在线编辑代码 | 最高 | 使用成本高,对非技术人员不友好,效率低 |
-| 在线编辑json | 较高 | 需要熟悉json,有一定使用成本, 对非技术人员不友好,效率一般 |
-| 无代码化拖拽实现 | 高 | 使用成本低, 操作基本无门槛,效率较高 |
-
-由以上分析来看, 为了开发一个低门槛, 对任何人适用的可视化编辑器, 笔者将采用第三种方案来实现, 目前市面上已有的产品也有很多, 比如说易企秀, 兔展, 百度H5等等. **实现原理其实还是基于json, 我们通过可视化的手段将自己配置的 页面转化为json数据,最后在基于json渲染器来动态生成H5站点**.
-
-
-#### 数据结构设计
-为了提供组件的自定义能力,我们需要定义一套高可用的数据结构, 这样才能实现因组件需求变更而带来的维护性优势.
-
-在开始设计数据结构之前我们先来拆解一下模块:
-
-不同的组件都对应不同的"编辑区域".我们需要设计一套统一的标准的配置来约定它, 这样对于表单编辑器的设计也非常有利, 具体拆解如下:
-
-
-经过以上分析之后, 笔者设计了类似下面的数据结构:
-``` js
-"Text": {
- "editData": [
- {
- "key": "text",
- "name": "文字",
- "type": "Text"
- },
- {
- "key": "color",
- "name": "标题颜色",
- "type": "Color"
- },
- {
- "key": "fontSize",
- "name": "字体大小",
- "type": "Number"
- },
- {
- "key": "align",
- "name": "对齐方式",
- "type": "Select",
- "range": [
- {
- "key": "left",
- "text": "左对齐"
- },
- {
- "key": "center",
- "text": "居中对齐"
- },
- {
- "key": "right",
- "text": "右对齐"
- }
- ]
- },
- {
- "key": "lineHeight",
- "name": "行高",
- "type": "Number"
- }
- ],
- "config": {
- "text": "我是文本",
- "color": "rgba(60,60,60,1)",
- "fontSize": 18,
- "align": "center",
- "lineHeight": 2
- }
-}
-```
-通过这种标准化结构设计之后,我们可以很方便的实现我们所需要的编辑页面的功能, 并且后期扩展非常方便, 只需要往editData添加配置即可. 至于动态表单编辑器的实现,方案有很多, 笔者之前也写过相关的文章, 这里就不详细介绍了.
-
-[基于react搭建一个通用的表单管理配置平台（vue同）](https://juejin.im/post/6844904137390292999)
-
-#### 组件库设计
-组件库设计考虑的一个重要的问题就是体积和渲染问题, 一旦组件库变的越来越多, 那意味着页面加载会非常慢,所以我们需要实现异步加载组件和代码分割的能力, umi提供了这样的功能,我们可以基于它提供的api去实现自己的额按需组件.
-``` js
-import { dynamic } from 'umi';
-
-export default dynamic({
- loader: async function() {
- // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
- const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ './HugeA');
- return HugeA;
- },
-});
-```
-通过以上的方式来定义包裹我们的每一个组件, 这样就能实现按需加载了, 但是最好的建议是不需要每个组件都按需加载和拆包,对于**标题**, **通知栏**,**页头**,**页脚**这些组件, 我们完全可以把它放在一个组里,这样不但对不会影响加载速度, 还能减少一定的http请求.
-
-笔者这里简单举一个组件实现的例子，方便大家理解：
-``` js
-const Header = memo((props) => {
- const {
- bgColor,
- logo,
- logoText,
- fontSize,
- color
- } = props
- return
-
-
-
{ logoText }
-
-})
-```
-上面的Header组件的props属性完全是由我们之前设计的json结构来定义的，在用户编辑的过程中将收据收集并传给Header组件。最后一步是将这些组件动态传给**dynamic**组件， 这块在上文也介绍过了，大家可以根据自己的实现来做动态化渲染。
-
-### 实现预览功能
+### 预览功能
预览功能这块比较简单, 我们只需要将用户生成的json数据丢进H5渲染器中即可, 这里我们需要做一个渲染页面单独用来预览组件. 先来看看几个预览效果:
@@ -222,7 +61,7 @@ FileSaver.saveAs(blob, "hello world.txt");
```
以上代码可以实现将传入的数据下载为txt文件, 如果是Blob, 是不是还能在线下载图片, html呢? 答案是肯定的, 所以我们的下载任务采用该方案来实现.
-### 后端部分实现
+### 后端部分
后端部分由于涉及的知识点比较多, 不是本文考虑的重点, 所以这里大致提几个点, 大家可以用完全不同的技术来实现后台服务, 比如说**PHP**, **Java**, **Python**或者**Egg**. 笔者这里采用的是**koa**. 主要实现功能如下:
* 保存模板
* 真机原理的数据源存储
@@ -235,6 +74,10 @@ FileSaver.saveAs(blob, "hello world.txt");
模式基本一致.
+## 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))
+
## 已完成功能
* 1. 组件库拖拽和显示
* 2. 组件库动态编辑
@@ -246,10 +89,12 @@ FileSaver.saveAs(blob, "hello world.txt");
* 8. 在线下载网站代码功能
* 9. 添加typescript支持
* 10. 表单设计器/自定义表单组件
+* 11. 可视化组件Chart实现
+* 12. 在线编程模块(Mini Web IDE)
## 正在完成功能
-* 添加模版库模块
-* 丰富组件库组件，添加可视化组件
+* 升级模版库
+* 丰富组件库组件，添加可视化组件如折线图, 饼图, 面积图等
* 添加配置交互功能
* 组件细分和代码优化
* 单元测试