docs(补充清楚文档):

.babelrc

@@ -14,6 +14,13 @@
       },
       "ant"
     ],
+    [
+      "import",
+      {
+        "libraryName": "@alifd/next",
+        "style": true
+      }
+    ],
     "transform-decorators-legacy"
   ]
 }

CHANGELOG.md

 # Change Log
 
+### 0.2.4
+- [!] 文档 Demo 展示效果优化
+- [+] Fusion 体系支持按需加载
+
 ### 0.2.3
 - [+] 新增 Proptypes to Json Schema 工具
 - [!] 解决 Fusion 下时间选择系列问题

README.md

@@ -17,19 +17,17 @@
 ## 了解 
 
 - <a href="https://alibaba.github.io/form-render/" target="_blank">文档官网</a>
-- <a href="https://alibaba.github.io/form-render/docs/demo/index.html" target="_blank">Demo 探索</a>
-- <a href="https://codesandbox.io/s/form-renderjichudemo-8k1l5?fontsize=14" target="_blank">Code Sandbox</a>
+- <a href="https://alibaba.github.io/form-render/docs/demo/index.html" target="_blank">Demo 探索</a> / <a href="https://codesandbox.io/s/form-renderjichudemo-8k1l5?fontsize=14" target="_blank">Code Sandbox</a>
+- <a href="https://alibaba.github.io/form-render/#/docs/used" target="_blank">常见场景</a>
 - <a href="https://alibaba.github.io/form-render/#/docs/proptypes" target="_blank">Proptypes to Json Schema</a>
-- <a href="/CHANGELOG.md" target="_blank">Changelog</a>
-
-<img src="https://gw.alipayobjects.com/mdn/feizhu_pla/afts/img/A*wyH4Rq-EqwQAAAAAAAAAAABkARQnAQ?raw=true" width="700"/>
 
 ## 优势
-
+ <img src="https://gw.alipayobjects.com/mdn/feizhu_pla/afts/img/A*wyH4Rq-EqwQAAAAAAAAAAABkARQnAQ?raw=true" width="700"/>
+ 
 - 支持 Ant Design 和 Fusion Design 主流的视觉主题
 - 使用 JSON Schema 标准协议描述表单配置，并搭配丰富类型且可扩展的组件
 - 支持 1 排 N、横纵排、支持对象无限嵌套、自定义正则校验、自定义样式组件、列表拖拽等特性
-- 已在飞猪、亚博科技、安全智能、淘宝、新零售行业工作台、人工智能实验室、天猫等多BU多场景使用，可支持复杂场景使用，可简单使用同时支持复杂场景使用
+- 已在淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室、安全智能部门等多 BU 多场景使用，可支持复杂场景使用，可简单使用同时支持复杂场景使用
 - 使用上有详细文档，维护上有专人支持
 
 ## 安装
@@ -41,43 +39,34 @@ npm i form-render -S
 ## 快速使用
 
 ```react
-import React from 'react';
+import React from "react";
+import ReactDOM from "react-dom";
+// 使用 Ant Design 体系
+import FormRender from "form-render/lib/antd";
 
-// ant design 是这样使用(使用3.x版本)
-import FormRender from 'form-render/lib/antd';
+// 使用 Fusion Design 体系
+// import "@alifd/next/dist/next.min.css";
+// import FormRender from "form-render/lib/fusion";
 
-// fusion 这样使用(使用开源版本)
-//import FormRender from 'form-render/lib/fusion';
-
-// propsSchema 是配置 FormRender 的必备参数，使用标准的 JSON Schema 来描述表单结构
+// propsSchema 使用标准的 JSON Schema 来描述表单结构
 const propSchema = {
-  type: 'object',
+  type: "object",
   properties: {
-    stringDemo: {
-      title: '字符串',
-      description: '英文或数字组合',
-      type: 'string',
-      pattern: '^[A-Za-z0-9]+$'
-    },
     dateDemo: {
-      title: '时间',
-      format: 'dateTime',
-      type: 'string'
-    },
-  },
-  required: [
-    'stringDemo'
-  ]
+      title: "时间",
+      type: "string"
+    }
+  }
 };
 
-//通过uiSchema可以增强 FormRender 展示的丰富性，比如说日历视图
+// uiSchema 可以增强展示类型的丰富性，如时间组件
 const uiSchema = {
   dateDemo: {
-    'ui:widget': 'date'
+    "ui:widget": "date"
   }
 };
 
-class Playground extends React.Component {
+class App extends React.Component {
   constructor() {
     super();
     this.state = {
@@ -90,18 +79,17 @@ class Playground extends React.Component {
     this.setState({
       formData: value
     });
-  }
+  };
 
   // 数据格式校验回调
   onValidate = list => {
     console.log(list);
-  }
+  };
 
   render() {
     const { formData } = this.state;
     return (
       <FormRender
-        name="表单配置"
         propsSchema={propSchema}
         uiSchema={uiSchema}
         formData={formData}
@@ -111,7 +99,9 @@ class Playground extends React.Component {
     );
   }
 }
-ReactDOM.render(<Playground />, mountNode);
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<App />, rootElement);
 ```
 
 ### API
@@ -157,7 +147,7 @@ FormRender 底层引擎用原生 JS 来实现，通过解析 JSON Schema 配置
 
 ## 支持
 
-- 在你的公司或个人项目中使用 FormRender
+- 在公司或个人项目中使用 FormRender，关注 <a href="/CHANGELOG.md" target="_blank">Changelog</a>
 - 如果你觉得 FormRender 还不错，可以通过 Star 来表示你的喜欢
 - 加入钉钉聊天群帮忙解答使用问题
 

docs/_sidebar.md

@@ -9,6 +9,7 @@
   - [表达式依赖决定显示表单](docs/depend)
   - [高度改写基础表单元素](docs/field-ui)
 - **也许需要**
+  - [使用场景](docs/used)
   - [Proptypes to Json Schema](docs/proptypes)
   - [为什么造轮子](docs/why)
   - [常见问题](docs/question)

docs/used.md

+# 使用场景
+
+##### 1. 规范化表单视图的快速生成：写好对应的参数配置，快速生成一个标准表单，省去了使用类 Ant Design 表单的麻烦地方
+   <img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547684-OCOmqe.png" width="400"/>
+
+##### 2.可视化配置界面生成：并可以从代码层面 <a href="https://alibaba.github.io/form-render/#/docs/proptypes" target="_blank">自动生成</a> JSON Schema，来完成整体流程的打通
+   
+   <img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573546822-GWwTVd.png" width="700"/>
+
+##### 3.服务能力配置界面生成：常用于后台字段系统中，接口同学通过吐 JSON Schema 字段给前端界面，渲染出他所想要的界面以及获取用户的输入进行提交给后端，可以起到无需发布就可无缝扩展各种类型的作用
+   
+   <img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547420-S9s1eC.png" width="700"/>
+
+##### 4.作为配置输入和搭建系统配合使用：FormRender 在正常展示的情况下，可以很简单的进行和原主题的适配使用
+
+   <img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573547974-EWh3OI.png" width="700"/>
+   
+   <img src="https://qpluspicture.oss-cn-beijing.aliyuncs.com/ts-upload/1573548385-IFEy6t.png" width="700"/>

package.json

 {
   "name": "form-render",
-  "version": "0.2.3",
-  "description": "通过标准 JSON Schema 生成可视化 From 表单，常用于搭建表单库快速配置，支持 Ant Design 和  Fusion 体系、一排N、横纵排、无限嵌套、自定义正则校验、自定义样式组件等能力",
+  "version": "0.2.4",
+  "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "repository": {
     "type": "git",
     "url": "git@github.com:alibaba/form-render.git"
@@ -12,7 +12,7 @@
     "React",
     "Json Schema",
     "Ant Design",
-    "Fusion"
+    "Fusion Design"
   ],
   "contributors": [
     {