diff --git a/__tests__/renderers/Carousel.test.tsx b/__tests__/renderers/Carousel.test.tsx
index 2d3c9e07..67d8bbc9 100644
--- a/__tests__/renderers/Carousel.test.tsx
+++ b/__tests__/renderers/Carousel.test.tsx
@@ -1,44 +1,48 @@
-import React = require('react');
-import {render, fireEvent} from 'react-testing-library';
-import '../../src/themes/default';
-import {
-    render as amisRender
-} from '../../src/index';
-import { makeEnv } from '../helper';
+import React = require("react");
+import { render, fireEvent } from "react-testing-library";
+import "../../src/themes/default";
+import { render as amisRender } from "../../src/index";
+import { makeEnv } from "../helper";
 
-test('Renderer:carousel', async () => {
-    const {
-        container
-    } = render(amisRender({
-        type: 'carousel',
-        controlsTheme: 'light',
-        width: '500',
-        height: '300',
+test("Renderer:carousel", async () => {
+  const { container } = render(
+    amisRender(
+      {
+        type: "carousel",
+        controlsTheme: "light",
+        width: "500",
+        height: "300",
         options: [
-            {
-                image: 'https://video-react.js.org/assets/poster.png',
-                title: '标题',
-                titleClassName: 'block',
-                description: '描述',
-                descriptionClassName: 'block'
-            },
-            {
-                html: '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
-            },
-            {
-                image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
-            }
+          {
+            image:
+              "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
+            title: "标题",
+            titleClassName: "block",
+            description: "描述",
+            descriptionClassName: "block"
+          },
+          {
+            html:
+              '<div style="width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;">carousel data</div>'
+          },
+          {
+            image:
+              "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
+          }
         ],
-        className: 'show'
-    }, {}, makeEnv({
-    })));
+        className: "show"
+      },
+      {},
+      makeEnv({})
+    )
+  );
 
-    const image = document.querySelector('div.a-Carousel-item');
-    fireEvent.mouseEnter(image as HTMLDivElement);
-    const leftArrow = document.querySelector('div.a-Carousel-leftArrow')
-    fireEvent.click(leftArrow as HTMLDivElement);
-    const rightArrow = document.querySelector('div.a-Carousel-rightArrow')
-    fireEvent.click(rightArrow as HTMLDivElement);
+  const image = document.querySelector("div.a-Carousel-item");
+  fireEvent.mouseEnter(image as HTMLDivElement);
+  const leftArrow = document.querySelector("div.a-Carousel-leftArrow");
+  fireEvent.click(leftArrow as HTMLDivElement);
+  const rightArrow = document.querySelector("div.a-Carousel-rightArrow");
+  fireEvent.click(rightArrow as HTMLDivElement);
 
-    expect(container).toMatchSnapshot();
-});
\ No newline at end of file
+  expect(container).toMatchSnapshot();
+});
diff --git a/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap b/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
index 51812068..fa9a4846 100644
--- a/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
+++ b/__tests__/renderers/__snapshots__/Carousel.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Renderer:carousel 1`] = `
         
           <div
             class="image "
-            style="background-image: url(https://video-react.js.org/assets/poster.png); background-size: contain; background-repeat: no-repeat; background-position: center center;"
+            style="background-image: url(https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png); background-size: contain; background-repeat: no-repeat; background-position: center center;"
           />
           
         
diff --git a/docs/renderers/Carousel.md b/docs/renderers/Carousel.md
index 785d433e..75f042c6 100644
--- a/docs/renderers/Carousel.md
+++ b/docs/renderers/Carousel.md
@@ -2,26 +2,26 @@
 
 轮播图
 
--   `type` 请设置成 `carousel`
--   `className` 外层 Dom 的类名
--   `options` 轮播面板数据，默认`[]`，支持以下模式
-    -   图片
-        -  `image` 图片链接
-        -  `imageClassName` 图片类名
-        -  `title` 图片标题
-        -  `titleClassName` 图片标题类名
-        -  `description` 图片描述
-        -  `descriptionClassName` 图片描述类名
-    -   `html` HTML 自定义，同[Tpl](./Tpl.md)一致
--   `itemSchema` 自定义`schema`来展示数据
--   `auto` 是否自动轮播，默认`true`
--   `interval` 切换动画间隔，默认`5s`
--   `duration` 切换动画时长，默认`0.5s`
--   `width` 宽度，默认`auto`
--   `height` 高度，默认`200px`
--   `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
--   `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
--   `animation` 切换动画效果，默认`fade`，另有`slide`模式
+- `type` 请设置成 `carousel`
+- `className` 外层 Dom 的类名
+- `options` 轮播面板数据，默认`[]`，支持以下模式
+  - 图片
+    - `image` 图片链接
+    - `imageClassName` 图片类名
+    - `title` 图片标题
+    - `titleClassName` 图片标题类名
+    - `description` 图片描述
+    - `descriptionClassName` 图片描述类名
+  - `html` HTML 自定义，同[Tpl](./Tpl.md)一致
+- `itemSchema` 自定义`schema`来展示数据
+- `auto` 是否自动轮播，默认`true`
+- `interval` 切换动画间隔，默认`5s`
+- `duration` 切换动画时长，默认`0.5s`
+- `width` 宽度，默认`auto`
+- `height` 高度，默认`200px`
+- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
+- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
+- `animation` 切换动画效果，默认`fade`，另有`slide`模式
 
 ```schema:height="350" scope="body"
 {
@@ -31,7 +31,7 @@
     "animation": "slide",
     "options": [
         {
-            "image": "https://video-react.js.org/assets/poster.png"
+            "image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
         },
         {
             "html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
diff --git a/docs/renderers/Video.md b/docs/renderers/Video.md
index a5f069a2..8746d9b5 100644
--- a/docs/renderers/Video.md
+++ b/docs/renderers/Video.md
@@ -3,7 +3,7 @@
 视频播放器。
 
 | 属性名    | 类型      | 默认值    | 说明                               |
-|-----------|-----------|-----------|------------------------------------|
+| --------- | --------- | --------- | ---------------------------------- |
 | type      | `string`  | `"video"` | 指定为 video 渲染器                |
 | className | `string`  |           | 外层 Dom 的类名                    |
 | src       | `string`  |           | 视频地址                           |
@@ -17,7 +17,7 @@
 {
     "type": "video",
     "autoPlay": false,
-    "src": "raw:https://media.w3.org/2010/05/sintel/trailer_hd.mp4",
-    "poster": "raw:https://video-react.js.org/assets/poster.png"
+    "src": "raw:https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
+    "poster": "raw:https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
 }
 ```
diff --git a/examples/components/CRUD/Grid.jsx b/examples/components/CRUD/Grid.jsx
index 9804da0c..22a6468a 100644
--- a/examples/components/CRUD/Grid.jsx
+++ b/examples/components/CRUD/Grid.jsx
@@ -1,219 +1,219 @@
 export default {
-  $schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
-  title: '增删改查示例',
-  remark: 'bla bla bla',
+  $schema: "https://houtai.baidu.com/v2/schemas/page.json#",
+  title: "增删改查示例",
+  remark: "bla bla bla",
   body: {
-    type: 'crud',
-    api: '/api/sample',
+    type: "crud",
+    api: "/api/sample",
     // api: "/api/mock2/crud/table?waitSeconds=100000",
-    mode: 'cards',
+    mode: "cards",
     defaultParams: {
       perPage: 12
     },
     // fixAlignment: true,
     // masonryLayout: true,
     filter: {
-      title: '条件搜索',
-      submitText: '',
+      title: "条件搜索",
+      submitText: "",
       controls: [
         {
-          type: 'text',
-          name: 'keywords',
-          placeholder: '通过关键字搜索',
+          type: "text",
+          name: "keywords",
+          placeholder: "通过关键字搜索",
           addOn: {
-            label: '搜索',
-            type: 'submit'
+            label: "搜索",
+            type: "submit"
           }
         },
         {
-          type: 'plain',
-          text: '这只是个示例, 目前搜索对查询结果无效.'
+          type: "plain",
+          text: "这只是个示例, 目前搜索对查询结果无效."
         }
       ]
     },
     bulkActions: [
       {
-        label: '批量删除',
-        actionType: 'ajax',
-        api: 'delete:/api/sample/${ids|raw}',
-        confirmText: '确定要批量删除?'
+        label: "批量删除",
+        actionType: "ajax",
+        api: "delete:/api/sample/${ids|raw}",
+        confirmText: "确定要批量删除?"
       },
       {
-        label: '批量修改',
-        actionType: 'dialog',
+        label: "批量修改",
+        actionType: "dialog",
         dialog: {
-          title: '批量编辑',
-          name: 'sample-bulk-edit',
+          title: "批量编辑",
+          name: "sample-bulk-edit",
           body: {
-            type: 'form',
-            api: '/api/sample/bulkUpdate2',
+            type: "form",
+            api: "/api/sample/bulkUpdate2",
             controls: [
               {
-                type: 'hidden',
-                name: 'ids'
+                type: "hidden",
+                name: "ids"
               },
               {
-                type: 'text',
-                name: 'engine',
-                label: 'Engine'
+                type: "text",
+                name: "engine",
+                label: "Engine"
               }
             ]
           }
         }
       }
     ],
-    quickSaveApi: '/api/sample/bulkUpdate',
-    quickSaveItemApi: '/api/sample/$id',
+    quickSaveApi: "/api/sample/bulkUpdate",
+    quickSaveItemApi: "/api/sample/$id",
     draggable: true,
     card: {
       header: {
-        title: '$engine',
-        subTitle: '$platform',
-        subTitlePlaceholder: '暂无说明',
+        title: "$engine",
+        subTitle: "$platform",
+        subTitlePlaceholder: "暂无说明",
         avatar:
-          '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
-        avatarClassName: 'pull-left thumb b-3x m-r'
+          '<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',
+        avatarClassName: "pull-left thumb b-3x m-r"
       },
       actions: [
         {
-          type: 'button',
-          label: '查看',
-          actionType: 'dialog',
+          type: "button",
+          label: "查看",
+          actionType: "dialog",
           dialog: {
-            title: '查看',
+            title: "查看",
             body: {
-              type: 'form',
+              type: "form",
               controls: [
                 {
-                  type: 'static',
-                  name: 'engine',
-                  label: 'Engine'
+                  type: "static",
+                  name: "engine",
+                  label: "Engine"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'static',
-                  name: 'browser',
-                  label: 'Browser'
+                  type: "static",
+                  name: "browser",
+                  label: "Browser"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'static',
-                  name: 'platform',
-                  label: 'Platform(s)'
+                  type: "static",
+                  name: "platform",
+                  label: "Platform(s)"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'static',
-                  name: 'version',
-                  label: 'Engine version'
+                  type: "static",
+                  name: "version",
+                  label: "Engine version"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'static',
-                  name: 'grade',
-                  label: 'CSS grade'
+                  type: "static",
+                  name: "grade",
+                  label: "CSS grade"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'html',
+                  type: "html",
                   html:
-                    '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                    "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                 }
               ]
             }
           }
         },
         {
-          type: 'button',
-          label: '编辑',
-          actionType: 'dialog',
+          type: "button",
+          label: "编辑",
+          actionType: "dialog",
           dialog: {
-            title: '编辑',
+            title: "编辑",
             body: {
-              type: 'form',
-              name: 'sample-edit-form',
-              api: '/api/sample/$id',
+              type: "form",
+              name: "sample-edit-form",
+              api: "/api/sample/$id",
               controls: [
                 {
-                  type: 'text',
-                  name: 'engine',
-                  label: 'Engine',
+                  type: "text",
+                  name: "engine",
+                  label: "Engine",
                   required: true
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'text',
-                  name: 'browser',
-                  label: 'Browser',
+                  type: "text",
+                  name: "browser",
+                  label: "Browser",
                   required: true
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'text',
-                  name: 'platform',
-                  label: 'Platform(s)',
+                  type: "text",
+                  name: "platform",
+                  label: "Platform(s)",
                   required: true
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'text',
-                  name: 'version',
-                  label: 'Engine version'
+                  type: "text",
+                  name: "version",
+                  label: "Engine version"
                 },
                 {
-                  type: 'divider'
+                  type: "divider"
                 },
                 {
-                  type: 'text',
-                  name: 'grade',
-                  label: 'CSS grade'
+                  type: "text",
+                  name: "grade",
+                  label: "CSS grade"
                 }
               ]
             }
           }
         },
         {
-          type: 'button',
-          label: '删除',
-          actionType: 'ajax',
-          confirmText: '您确认要删除?',
-          api: 'delete:/api/sample/$id'
+          type: "button",
+          label: "删除",
+          actionType: "ajax",
+          confirmText: "您确认要删除?",
+          api: "delete:/api/sample/$id"
         }
       ],
       body: [
         {
-          name: 'engine',
-          label: 'engine',
+          name: "engine",
+          label: "engine",
           sortable: true,
           quickEdit: true
         },
         {
-          name: 'browser',
-          label: 'Browser'
+          name: "browser",
+          label: "Browser"
         },
         {
-          name: 'platform',
-          label: 'Platform'
+          name: "platform",
+          label: "Platform"
         },
         {
-          name: 'version',
-          label: 'version'
+          name: "version",
+          label: "version"
         }
       ]
     }
diff --git a/examples/components/Carousel.jsx b/examples/components/Carousel.jsx
index 574ff075..b7122178 100644
--- a/examples/components/Carousel.jsx
+++ b/examples/components/Carousel.jsx
@@ -1,11 +1,11 @@
 export default {
-  type: 'page',
-  title: '轮播图',
+  type: "page",
+  title: "轮播图",
   data: {
     carousel0: [
-      'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg',
-      'https://video-react.js.org/assets/poster.png',
-      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
+      "https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg",
+      "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png",
+      "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
     ],
     carousel1: [
       {
@@ -14,28 +14,29 @@ export default {
       },
       {
         image:
-          'https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg'
+          "https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg"
       },
       {
         image:
-          'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
+          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
       }
     ]
   },
   body: [
     {
-      type: 'grid',
+      type: "grid",
       columns: [
         {
-          type: 'panel',
-          title: '直接页面配置',
+          type: "panel",
+          title: "直接页面配置",
           body: {
-            type: 'carousel',
-            controlsTheme: 'light',
-            height: '300',
+            type: "carousel",
+            controlsTheme: "light",
+            height: "300",
             options: [
               {
-                image: 'https://video-react.js.org/assets/poster.png'
+                image:
+                  "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
               },
               {
                 html:
@@ -43,21 +44,21 @@ export default {
               },
               {
                 image:
-                  'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
+                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
               }
             ]
           }
         },
         {
-          type: 'panel',
-          title: '使用itemSchema配置',
+          type: "panel",
+          title: "使用itemSchema配置",
           body: {
-            type: 'carousel',
-            name: 'carousel0',
-            controlsTheme: 'dark',
-            height: '300',
+            type: "carousel",
+            name: "carousel0",
+            controlsTheme: "dark",
+            height: "300",
             itemSchema: {
-              type: 'tpl',
+              type: "tpl",
               tpl:
                 '<div style="height: 100%; background-image: url(<%=data.item%>); background-position: center center; background-size: cover;"></div>'
             }
@@ -66,20 +67,20 @@ export default {
       ]
     },
     {
-      type: 'grid',
+      type: "grid",
       columns: [
         {
-          type: 'form',
-          title: '表单内展示',
+          type: "form",
+          title: "表单内展示",
           sm: 6,
           controls: [
             {
-              type: 'carousel',
-              controlsTheme: 'dark',
-              name: 'carousel1',
-              label: 'carousel',
-              animation: 'slide',
-              height: '300'
+              type: "carousel",
+              controlsTheme: "dark",
+              name: "carousel1",
+              label: "carousel",
+              animation: "slide",
+              height: "300"
             }
           ]
         }
diff --git a/examples/components/Form/Picker.jsx b/examples/components/Form/Picker.jsx
index 38d03f93..e08aa1be 100644
--- a/examples/components/Form/Picker.jsx
+++ b/examples/components/Form/Picker.jsx
@@ -1,286 +1,286 @@
 export default {
-  $schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
-  title: '表格编辑',
+  $schema: "https://houtai.baidu.com/v2/schemas/page.json#",
+  title: "表格编辑",
   body: {
-    type: 'form',
-    mode: 'horizontal',
-    api: '/api/mock2/form/saveForm?waitSeconds=2',
+    type: "form",
+    mode: "horizontal",
+    api: "/api/mock2/form/saveForm?waitSeconds=2",
     actions: [
       {
-        type: 'submit',
-        label: '提交',
+        type: "submit",
+        label: "提交",
         primary: true
       }
     ],
     controls: [
-      '<p>常规模式</p>',
+      "<p>常规模式</p>",
       {
-        type: 'divider'
+        type: "divider"
       },
       {
-        type: 'picker',
-        name: 'type',
-        label: '单选',
+        type: "picker",
+        name: "type",
+        label: "单选",
         value: 1,
         inline: true,
         options: [
           {
-            label: '选项1',
+            label: "选项1",
             value: 1
           },
           {
-            label: '选项2',
+            label: "选项2",
             value: 2
           },
           {
-            label: '选项3',
+            label: "选项3",
             value: 3
           },
           {
-            label: '选项4',
+            label: "选项4",
             value: 4
           }
         ]
       },
 
       {
-        type: 'picker',
-        name: 'type2',
-        label: '多选',
+        type: "picker",
+        name: "type2",
+        label: "多选",
         multiple: true,
         options: [
           {
-            label: '选项1',
+            label: "选项1",
             value: 1
           },
           {
-            label: '选项2',
+            label: "选项2",
             value: 2
           },
           {
-            label: '选项3',
+            label: "选项3",
             value: 3
           },
           {
-            label: '选项4',
+            label: "选项4",
             value: 4
           }
         ]
       },
 
       {
-        type: 'divider'
+        type: "divider"
       },
 
-      '<p>Table 渲染类型</p>',
+      "<p>Table 渲染类型</p>",
       {
-        type: 'divider'
+        type: "divider"
       },
 
       {
-        type: 'picker',
-        name: 'type3',
+        type: "picker",
+        name: "type3",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '单选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4',
+        valueField: "id",
+        labelField: "engine",
+        label: "单选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4",
         pickerSchema: {
-          mode: 'table',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "table",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
           },
           columns: [
             {
-              name: 'engine',
-              label: 'Rendering engine',
+              name: "engine",
+              label: "Rendering engine",
               sortable: true,
               searchable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'browser',
-              label: 'Browser',
+              name: "browser",
+              label: "Browser",
               sortable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'platform',
-              label: 'Platform(s)',
+              name: "platform",
+              label: "Platform(s)",
               sortable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'version',
-              label: 'Engine version',
+              name: "version",
+              label: "Engine version",
               quickEdit: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'grade',
-              label: 'CSS grade',
+              name: "grade",
+              label: "CSS grade",
               quickEdit: {
-                mode: 'inline',
-                type: 'select',
-                options: ['A', 'B', 'C', 'D', 'X'],
+                mode: "inline",
+                type: "select",
+                options: ["A", "B", "C", "D", "X"],
                 saveImmediately: true
               },
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              type: 'operation',
-              label: '操作',
+              type: "operation",
+              label: "操作",
               width: 100,
               buttons: [
                 {
-                  type: 'button',
-                  icon: 'fa fa-eye',
-                  actionType: 'dialog',
+                  type: "button",
+                  icon: "fa fa-eye",
+                  actionType: "dialog",
                   dialog: {
-                    title: '查看',
+                    title: "查看",
                     body: {
-                      type: 'form',
+                      type: "form",
                       controls: [
                         {
-                          type: 'static',
-                          name: 'engine',
-                          label: 'Engine'
+                          type: "static",
+                          name: "engine",
+                          label: "Engine"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'browser',
-                          label: 'Browser'
+                          type: "static",
+                          name: "browser",
+                          label: "Browser"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'platform',
-                          label: 'Platform(s)'
+                          type: "static",
+                          name: "platform",
+                          label: "Platform(s)"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'version',
-                          label: 'Engine version'
+                          type: "static",
+                          name: "version",
+                          label: "Engine version"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'grade',
-                          label: 'CSS grade'
+                          type: "static",
+                          name: "grade",
+                          label: "CSS grade"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'html',
+                          type: "html",
                           html:
-                            '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                            "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                         }
                       ]
                     }
                   }
                 },
                 {
-                  type: 'button',
-                  icon: 'fa fa-pencil',
-                  actionType: 'dialog',
+                  type: "button",
+                  icon: "fa fa-pencil",
+                  actionType: "dialog",
                   dialog: {
-                    position: 'left',
-                    size: 'lg',
-                    title: '编辑',
+                    position: "left",
+                    size: "lg",
+                    title: "编辑",
                     body: {
-                      type: 'form',
-                      name: 'sample-edit-form',
-                      api: '/api/sample/$id',
+                      type: "form",
+                      name: "sample-edit-form",
+                      api: "/api/sample/$id",
                       controls: [
                         {
-                          type: 'text',
-                          name: 'engine',
-                          label: 'Engine',
+                          type: "text",
+                          name: "engine",
+                          label: "Engine",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'browser',
-                          label: 'Browser',
+                          type: "text",
+                          name: "browser",
+                          label: "Browser",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'platform',
-                          label: 'Platform(s)',
+                          type: "text",
+                          name: "platform",
+                          label: "Platform(s)",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'version',
-                          label: 'Engine version'
+                          type: "text",
+                          name: "version",
+                          label: "Engine version"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'select',
-                          name: 'grade',
-                          label: 'CSS grade',
-                          options: ['A', 'B', 'C', 'D', 'X']
+                          type: "select",
+                          name: "grade",
+                          label: "CSS grade",
+                          options: ["A", "B", "C", "D", "X"]
                         }
                       ]
                     }
                   }
                 },
                 {
-                  type: 'button',
-                  icon: 'fa fa-times text-danger',
-                  actionType: 'ajax',
-                  confirmText: '您确认要删除?',
-                  api: 'delete:/api/sample/$id'
+                  type: "button",
+                  icon: "fa fa-times text-danger",
+                  actionType: "ajax",
+                  confirmText: "您确认要删除?",
+                  api: "delete:/api/sample/$id"
                 }
               ],
               toggled: true
@@ -290,210 +290,210 @@ export default {
       },
 
       {
-        type: 'picker',
-        name: 'type4',
+        type: "picker",
+        name: "type4",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '多选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4,5',
+        valueField: "id",
+        labelField: "engine",
+        label: "多选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4,5",
         multiple: true,
         pickerSchema: {
-          mode: 'table',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "table",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
           },
           columns: [
             {
-              name: 'engine',
-              label: 'Rendering engine',
+              name: "engine",
+              label: "Rendering engine",
               sortable: true,
               searchable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'browser',
-              label: 'Browser',
+              name: "browser",
+              label: "Browser",
               sortable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'platform',
-              label: 'Platform(s)',
+              name: "platform",
+              label: "Platform(s)",
               sortable: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'version',
-              label: 'Engine version',
+              name: "version",
+              label: "Engine version",
               quickEdit: true,
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              name: 'grade',
-              label: 'CSS grade',
+              name: "grade",
+              label: "CSS grade",
               quickEdit: {
-                mode: 'inline',
-                type: 'select',
-                options: ['A', 'B', 'C', 'D', 'X'],
+                mode: "inline",
+                type: "select",
+                options: ["A", "B", "C", "D", "X"],
                 saveImmediately: true
               },
-              type: 'text',
+              type: "text",
               toggled: true
             },
             {
-              type: 'operation',
-              label: '操作',
+              type: "operation",
+              label: "操作",
               width: 100,
               buttons: [
                 {
-                  type: 'button',
-                  icon: 'fa fa-eye',
-                  actionType: 'dialog',
+                  type: "button",
+                  icon: "fa fa-eye",
+                  actionType: "dialog",
                   dialog: {
-                    title: '查看',
+                    title: "查看",
                     body: {
-                      type: 'form',
+                      type: "form",
                       controls: [
                         {
-                          type: 'static',
-                          name: 'engine',
-                          label: 'Engine'
+                          type: "static",
+                          name: "engine",
+                          label: "Engine"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'browser',
-                          label: 'Browser'
+                          type: "static",
+                          name: "browser",
+                          label: "Browser"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'platform',
-                          label: 'Platform(s)'
+                          type: "static",
+                          name: "platform",
+                          label: "Platform(s)"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'version',
-                          label: 'Engine version'
+                          type: "static",
+                          name: "version",
+                          label: "Engine version"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'static',
-                          name: 'grade',
-                          label: 'CSS grade'
+                          type: "static",
+                          name: "grade",
+                          label: "CSS grade"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'html',
+                          type: "html",
                           html:
-                            '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                            "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                         }
                       ]
                     }
                   }
                 },
                 {
-                  type: 'button',
-                  icon: 'fa fa-pencil',
-                  actionType: 'dialog',
+                  type: "button",
+                  icon: "fa fa-pencil",
+                  actionType: "dialog",
                   dialog: {
-                    position: 'left',
-                    size: 'lg',
-                    title: '编辑',
+                    position: "left",
+                    size: "lg",
+                    title: "编辑",
                     body: {
-                      type: 'form',
-                      name: 'sample-edit-form',
-                      api: '/api/sample/$id',
+                      type: "form",
+                      name: "sample-edit-form",
+                      api: "/api/sample/$id",
                       controls: [
                         {
-                          type: 'text',
-                          name: 'engine',
-                          label: 'Engine',
+                          type: "text",
+                          name: "engine",
+                          label: "Engine",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'browser',
-                          label: 'Browser',
+                          type: "text",
+                          name: "browser",
+                          label: "Browser",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'platform',
-                          label: 'Platform(s)',
+                          type: "text",
+                          name: "platform",
+                          label: "Platform(s)",
                           required: true
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'text',
-                          name: 'version',
-                          label: 'Engine version'
+                          type: "text",
+                          name: "version",
+                          label: "Engine version"
                         },
                         {
-                          type: 'divider'
+                          type: "divider"
                         },
                         {
-                          type: 'select',
-                          name: 'grade',
-                          label: 'CSS grade',
-                          options: ['A', 'B', 'C', 'D', 'X']
+                          type: "select",
+                          name: "grade",
+                          label: "CSS grade",
+                          options: ["A", "B", "C", "D", "X"]
                         }
                       ]
                     }
                   }
                 },
                 {
-                  type: 'button',
-                  icon: 'fa fa-times text-danger',
-                  actionType: 'ajax',
-                  confirmText: '您确认要删除?',
-                  api: 'delete:/api/sample/$id'
+                  type: "button",
+                  icon: "fa fa-times text-danger",
+                  actionType: "ajax",
+                  confirmText: "您确认要删除?",
+                  api: "delete:/api/sample/$id"
                 }
               ],
               toggled: true
@@ -503,45 +503,45 @@ export default {
       },
 
       {
-        type: 'divider'
+        type: "divider"
       },
 
-      '<p>List 渲染类型</p>',
+      "<p>List 渲染类型</p>",
       {
-        type: 'divider'
+        type: "divider"
       },
 
       {
-        type: 'picker',
-        name: 'type5',
+        type: "picker",
+        name: "type5",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '单选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4',
+        valueField: "id",
+        labelField: "engine",
+        label: "单选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4",
         pickerSchema: {
-          mode: 'list',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "list",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
@@ -549,187 +549,187 @@ export default {
           listItem: {
             actions: [
               {
-                type: 'button',
-                icon: 'fa fa-eye',
-                actionType: 'dialog',
+                type: "button",
+                icon: "fa fa-eye",
+                actionType: "dialog",
                 dialog: {
-                  title: '查看',
+                  title: "查看",
                   body: {
-                    type: 'form',
+                    type: "form",
                     controls: [
                       {
-                        type: 'static',
-                        name: 'engine',
-                        label: 'Engine'
+                        type: "static",
+                        name: "engine",
+                        label: "Engine"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'browser',
-                        label: 'Browser'
+                        type: "static",
+                        name: "browser",
+                        label: "Browser"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'platform',
-                        label: 'Platform(s)'
+                        type: "static",
+                        name: "platform",
+                        label: "Platform(s)"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "static",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "static",
+                        name: "grade",
+                        label: "CSS grade"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'html',
+                        type: "html",
                         html:
-                          '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                          "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                icon: 'fa fa-pencil',
-                actionType: 'dialog',
+                type: "button",
+                icon: "fa fa-pencil",
+                actionType: "dialog",
                 dialog: {
-                  title: '编辑',
+                  title: "编辑",
                   body: {
-                    type: 'form',
-                    name: 'sample-edit-form',
-                    api: '/api/sample/$id',
+                    type: "form",
+                    name: "sample-edit-form",
+                    api: "/api/sample/$id",
                     controls: [
                       {
-                        type: 'text',
-                        name: 'engine',
-                        label: 'Engine',
+                        type: "text",
+                        name: "engine",
+                        label: "Engine",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'browser',
-                        label: 'Browser',
+                        type: "text",
+                        name: "browser",
+                        label: "Browser",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'platform',
-                        label: 'Platform(s)',
+                        type: "text",
+                        name: "platform",
+                        label: "Platform(s)",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "text",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "text",
+                        name: "grade",
+                        label: "CSS grade"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                icon: 'fa fa-times text-danger',
-                actionType: 'ajax',
-                confirmText: '您确认要删除?',
-                api: 'delete:/api/sample/$id'
+                type: "button",
+                icon: "fa fa-times text-danger",
+                actionType: "ajax",
+                confirmText: "您确认要删除?",
+                api: "delete:/api/sample/$id"
               }
             ],
             body: [
               {
-                name: 'engine',
-                label: 'Rendering engine',
+                name: "engine",
+                label: "Rendering engine",
                 sortable: true,
                 quickEdit: true,
-                labelClassName: 'w-sm'
+                labelClassName: "w-sm"
               },
               [
                 {
-                  name: 'browser',
-                  label: 'Browser',
-                  labelClassName: 'w-sm'
+                  name: "browser",
+                  label: "Browser",
+                  labelClassName: "w-sm"
                 },
                 {
-                  name: 'platform',
-                  label: 'Platform(s)',
-                  labelClassName: 'w-sm'
+                  name: "platform",
+                  label: "Platform(s)",
+                  labelClassName: "w-sm"
                 }
               ],
               {
-                name: 'version',
-                label: 'Engine version',
-                labelClassName: 'w-sm'
+                name: "version",
+                label: "Engine version",
+                labelClassName: "w-sm"
               }
             ]
           }
         }
       },
       {
-        type: 'picker',
-        name: 'type6',
+        type: "picker",
+        name: "type6",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '多选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4,5',
+        valueField: "id",
+        labelField: "engine",
+        label: "多选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4,5",
         multiple: true,
         pickerSchema: {
-          mode: 'list',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "list",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
@@ -737,150 +737,150 @@ export default {
           listItem: {
             actions: [
               {
-                type: 'button',
-                icon: 'fa fa-eye',
-                actionType: 'dialog',
+                type: "button",
+                icon: "fa fa-eye",
+                actionType: "dialog",
                 dialog: {
-                  title: '查看',
+                  title: "查看",
                   body: {
-                    type: 'form',
+                    type: "form",
                     controls: [
                       {
-                        type: 'static',
-                        name: 'engine',
-                        label: 'Engine'
+                        type: "static",
+                        name: "engine",
+                        label: "Engine"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'browser',
-                        label: 'Browser'
+                        type: "static",
+                        name: "browser",
+                        label: "Browser"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'platform',
-                        label: 'Platform(s)'
+                        type: "static",
+                        name: "platform",
+                        label: "Platform(s)"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "static",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "static",
+                        name: "grade",
+                        label: "CSS grade"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'html',
+                        type: "html",
                         html:
-                          '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                          "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                icon: 'fa fa-pencil',
-                actionType: 'dialog',
+                type: "button",
+                icon: "fa fa-pencil",
+                actionType: "dialog",
                 dialog: {
-                  title: '编辑',
+                  title: "编辑",
                   body: {
-                    type: 'form',
-                    name: 'sample-edit-form',
-                    api: '/api/sample/$id',
+                    type: "form",
+                    name: "sample-edit-form",
+                    api: "/api/sample/$id",
                     controls: [
                       {
-                        type: 'text',
-                        name: 'engine',
-                        label: 'Engine',
+                        type: "text",
+                        name: "engine",
+                        label: "Engine",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'browser',
-                        label: 'Browser',
+                        type: "text",
+                        name: "browser",
+                        label: "Browser",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'platform',
-                        label: 'Platform(s)',
+                        type: "text",
+                        name: "platform",
+                        label: "Platform(s)",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "text",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "text",
+                        name: "grade",
+                        label: "CSS grade"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                icon: 'fa fa-times text-danger',
-                actionType: 'ajax',
-                confirmText: '您确认要删除?',
-                api: 'delete:/api/sample/$id'
+                type: "button",
+                icon: "fa fa-times text-danger",
+                actionType: "ajax",
+                confirmText: "您确认要删除?",
+                api: "delete:/api/sample/$id"
               }
             ],
             body: [
               {
-                name: 'engine',
-                label: 'Rendering engine',
+                name: "engine",
+                label: "Rendering engine",
                 sortable: true,
                 quickEdit: true,
-                labelClassName: 'w-sm'
+                labelClassName: "w-sm"
               },
               [
                 {
-                  name: 'browser',
-                  label: 'Browser',
-                  labelClassName: 'w-sm'
+                  name: "browser",
+                  label: "Browser",
+                  labelClassName: "w-sm"
                 },
                 {
-                  name: 'platform',
-                  label: 'Platform(s)',
-                  labelClassName: 'w-sm'
+                  name: "platform",
+                  label: "Platform(s)",
+                  labelClassName: "w-sm"
                 }
               ],
               {
-                name: 'version',
-                label: 'Engine version',
-                labelClassName: 'w-sm'
+                name: "version",
+                label: "Engine version",
+                labelClassName: "w-sm"
               }
             ]
           }
@@ -888,198 +888,198 @@ export default {
       },
 
       {
-        type: 'divider'
+        type: "divider"
       },
 
-      '<p>Cards 渲染类型</p>',
+      "<p>Cards 渲染类型</p>",
       {
-        type: 'divider'
+        type: "divider"
       },
 
       {
-        type: 'picker',
-        name: 'type7',
+        type: "picker",
+        name: "type7",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '单选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4',
+        valueField: "id",
+        labelField: "engine",
+        label: "单选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4",
         pickerSchema: {
-          mode: 'cards',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "cards",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
           },
           card: {
             header: {
-              title: '$engine',
-              subTitle: '$platform',
-              subTitlePlaceholder: '暂无说明',
+              title: "$engine",
+              subTitle: "$platform",
+              subTitlePlaceholder: "暂无说明",
               avatar:
-                '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
-              avatarClassName: 'pull-left thumb b-3x m-r'
+                '<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',
+              avatarClassName: "pull-left thumb b-3x m-r"
             },
             actions: [
               {
-                type: 'button',
-                label: '查看',
-                actionType: 'dialog',
+                type: "button",
+                label: "查看",
+                actionType: "dialog",
                 dialog: {
-                  title: '查看',
+                  title: "查看",
                   body: {
-                    type: 'form',
+                    type: "form",
                     controls: [
                       {
-                        type: 'static',
-                        name: 'engine',
-                        label: 'Engine'
+                        type: "static",
+                        name: "engine",
+                        label: "Engine"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'browser',
-                        label: 'Browser'
+                        type: "static",
+                        name: "browser",
+                        label: "Browser"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'platform',
-                        label: 'Platform(s)'
+                        type: "static",
+                        name: "platform",
+                        label: "Platform(s)"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "static",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "static",
+                        name: "grade",
+                        label: "CSS grade"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'html',
+                        type: "html",
                         html:
-                          '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                          "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                label: '编辑',
-                actionType: 'dialog',
+                type: "button",
+                label: "编辑",
+                actionType: "dialog",
                 dialog: {
-                  title: '编辑',
+                  title: "编辑",
                   body: {
-                    type: 'form',
-                    name: 'sample-edit-form',
-                    api: '/api/sample/$id',
+                    type: "form",
+                    name: "sample-edit-form",
+                    api: "/api/sample/$id",
                     controls: [
                       {
-                        type: 'text',
-                        name: 'engine',
-                        label: 'Engine',
+                        type: "text",
+                        name: "engine",
+                        label: "Engine",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'browser',
-                        label: 'Browser',
+                        type: "text",
+                        name: "browser",
+                        label: "Browser",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'platform',
-                        label: 'Platform(s)',
+                        type: "text",
+                        name: "platform",
+                        label: "Platform(s)",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "text",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "text",
+                        name: "grade",
+                        label: "CSS grade"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                label: '删除',
-                actionType: 'ajax',
-                confirmText: '您确认要删除?',
-                api: 'delete:/api/sample/$id'
+                type: "button",
+                label: "删除",
+                actionType: "ajax",
+                confirmText: "您确认要删除?",
+                api: "delete:/api/sample/$id"
               }
             ],
             body: [
               {
-                name: 'engine',
-                label: 'engine',
+                name: "engine",
+                label: "engine",
                 sortable: true,
                 quickEdit: true
               },
               {
-                name: 'browser',
-                label: 'Browser'
+                name: "browser",
+                label: "Browser"
               },
               {
-                name: 'platform',
-                label: 'Platform'
+                name: "platform",
+                label: "Platform"
               },
               {
-                name: 'version',
-                label: 'version'
+                name: "version",
+                label: "version"
               }
             ]
           }
@@ -1087,190 +1087,190 @@ export default {
       },
 
       {
-        type: 'picker',
-        name: 'type8',
+        type: "picker",
+        name: "type8",
         joinValues: true,
-        valueField: 'id',
-        labelField: 'engine',
-        label: '多选',
-        source: '/api/sample',
-        size: 'lg',
-        value: '4,5',
+        valueField: "id",
+        labelField: "engine",
+        label: "多选",
+        source: "/api/sample",
+        size: "lg",
+        value: "4,5",
         multiple: true,
         pickerSchema: {
-          mode: 'cards',
-          name: 'thelist',
-          quickSaveApi: '/api/sample/bulkUpdate',
-          quickSaveItemApi: '/api/sample/$id',
+          mode: "cards",
+          name: "thelist",
+          quickSaveApi: "/api/sample/bulkUpdate",
+          quickSaveItemApi: "/api/sample/$id",
           draggable: true,
           headerToolbar: {
             wrapWithPanel: false,
-            type: 'form',
-            className: 'text-right',
-            target: 'thelist',
-            mode: 'inline',
+            type: "form",
+            className: "text-right",
+            target: "thelist",
+            mode: "inline",
             controls: [
               {
-                type: 'text',
-                name: 'keywords',
+                type: "text",
+                name: "keywords",
                 addOn: {
-                  type: 'submit',
-                  label: '搜索',
-                  level: 'primary',
-                  icon: 'fa fa-search pull-left'
+                  type: "submit",
+                  label: "搜索",
+                  level: "primary",
+                  icon: "fa fa-search pull-left"
                 }
               }
             ]
           },
           card: {
             header: {
-              title: '$engine',
-              subTitle: '$platform',
-              subTitlePlaceholder: '暂无说明',
+              title: "$engine",
+              subTitle: "$platform",
+              subTitlePlaceholder: "暂无说明",
               avatar:
-                '<%= data.avatar || "http://bos.nj.bpc.baidu.com/showx/146bc2ce1b30f3824838f4208ad2663c" %>',
-              avatarClassName: 'pull-left thumb b-3x m-r'
+                '<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',
+              avatarClassName: "pull-left thumb b-3x m-r"
             },
             actions: [
               {
-                type: 'button',
-                label: '查看',
-                actionType: 'dialog',
+                type: "button",
+                label: "查看",
+                actionType: "dialog",
                 dialog: {
-                  title: '查看',
+                  title: "查看",
                   body: {
-                    type: 'form',
+                    type: "form",
                     controls: [
                       {
-                        type: 'static',
-                        name: 'engine',
-                        label: 'Engine'
+                        type: "static",
+                        name: "engine",
+                        label: "Engine"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'browser',
-                        label: 'Browser'
+                        type: "static",
+                        name: "browser",
+                        label: "Browser"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'platform',
-                        label: 'Platform(s)'
+                        type: "static",
+                        name: "platform",
+                        label: "Platform(s)"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "static",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'static',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "static",
+                        name: "grade",
+                        label: "CSS grade"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'html',
+                        type: "html",
                         html:
-                          '<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>'
+                          "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                label: '编辑',
-                actionType: 'dialog',
+                type: "button",
+                label: "编辑",
+                actionType: "dialog",
                 dialog: {
-                  title: '编辑',
+                  title: "编辑",
                   body: {
-                    type: 'form',
-                    name: 'sample-edit-form',
-                    api: '/api/sample/$id',
+                    type: "form",
+                    name: "sample-edit-form",
+                    api: "/api/sample/$id",
                     controls: [
                       {
-                        type: 'text',
-                        name: 'engine',
-                        label: 'Engine',
+                        type: "text",
+                        name: "engine",
+                        label: "Engine",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'browser',
-                        label: 'Browser',
+                        type: "text",
+                        name: "browser",
+                        label: "Browser",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'platform',
-                        label: 'Platform(s)',
+                        type: "text",
+                        name: "platform",
+                        label: "Platform(s)",
                         required: true
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'version',
-                        label: 'Engine version'
+                        type: "text",
+                        name: "version",
+                        label: "Engine version"
                       },
                       {
-                        type: 'divider'
+                        type: "divider"
                       },
                       {
-                        type: 'text',
-                        name: 'grade',
-                        label: 'CSS grade'
+                        type: "text",
+                        name: "grade",
+                        label: "CSS grade"
                       }
                     ]
                   }
                 }
               },
               {
-                type: 'button',
-                label: '删除',
-                actionType: 'ajax',
-                confirmText: '您确认要删除?',
-                api: 'delete:/api/sample/$id'
+                type: "button",
+                label: "删除",
+                actionType: "ajax",
+                confirmText: "您确认要删除?",
+                api: "delete:/api/sample/$id"
               }
             ],
             body: [
               {
-                name: 'engine',
-                label: 'engine',
+                name: "engine",
+                label: "engine",
                 sortable: true,
                 quickEdit: true
               },
               {
-                name: 'browser',
-                label: 'Browser'
+                name: "browser",
+                label: "Browser"
               },
               {
-                name: 'platform',
-                label: 'Platform'
+                name: "platform",
+                label: "Platform"
               },
               {
-                name: 'version',
-                label: 'version'
+                name: "version",
+                label: "version"
               }
             ]
           }
diff --git a/examples/components/Video.jsx b/examples/components/Video.jsx
index 0330d44a..123d1c2a 100644
--- a/examples/components/Video.jsx
+++ b/examples/components/Video.jsx
@@ -1,14 +1,16 @@
 export default {
-  $schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
-  title: '视频播放器',
+  $schema: "https://houtai.baidu.com/v2/schemas/page.json#",
+  title: "视频播放器",
   body: [
     '<p class="text-danger">另外还支持直播流， flv 和 hls 格式</p>',
     {
-      type: 'video',
+      type: "video",
       autoPlay: false,
       rates: [1.0, 1.5, 2.0],
-      src: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4',
-      poster: 'https://video-react.js.org/assets/poster.png'
+      src:
+        "https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",
+      poster:
+        "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
     }
   ]
 };
diff --git a/mock/crud/list.js b/mock/crud/list.js
index d6551266..43054176 100644
--- a/mock/crud/list.js
+++ b/mock/crud/list.js
@@ -1,58 +1,68 @@
-const faker = require('faker');
+const faker = require("faker");
 
 function repeat(fn, times = 10) {
-    let arr = [];
-    while (times--) {
-        arr.push(fn());
-    }
+  let arr = [];
+  while (times--) {
+    arr.push(fn());
+  }
 
-    return arr;
+  return arr;
 }
 
 module.exports = function(req, res) {
-    res.json({
-        status: 0,
-        msg: '',
-        data: repeat(() => ({
-                id: '{{random.number}}',
-                text: '{{address.city}}',
-                progress: Math.round(Math.random() * 100),
-                type: Math.round(Math.random() * 5),
-                boolean: Math.random() > 0.5 ? true : false,
-                // boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)],
-                list: repeat(() => ({
-                    title: '{{name.title}}',
-                    description: '{{lorem.words}}'
-                }), Math.round(Math.random() * 10)),
-                audio: 'https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac',
-                carousel: [
-                    {
-                        image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg'
-                    },
-                    {
-                        html: '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
-                    },
-                    {
-                        image: 'https://video-react.js.org/assets/poster.png'
-                    }
-                ],
-                date: Math.round(Date.now() / 1000),
-                // image: '{{image.imageUrl}}',
-                image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg',
-            }), parseInt(req.query.perPage, 10) || 10)
-            .map(item => {
-                try {
-                    const str = JSON.stringify(item);
-                    item = JSON.parse(faker.fake(str));
-                } catch (e) {
-                    // continue regardless of error
-                }
+  res.json({
+    status: 0,
+    msg: "",
+    data: repeat(
+      () => ({
+        id: "{{random.number}}",
+        text: "{{address.city}}",
+        progress: Math.round(Math.random() * 100),
+        type: Math.round(Math.random() * 5),
+        boolean: Math.random() > 0.5 ? true : false,
+        // boolean: ['pending', 'success', 'fail', 'queue', 'schedule'][Math.floor(Math.random()*5)],
+        list: repeat(
+          () => ({
+            title: "{{name.title}}",
+            description: "{{lorem.words}}"
+          }),
+          Math.round(Math.random() * 10)
+        ),
+        audio:
+          "https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac",
+        carousel: [
+          {
+            image:
+              "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
+          },
+          {
+            html:
+              '<div style="width: 100%; height: 200px; background: #e3e3e3; text-align: center; line-height: 200px;">carousel data in crud</div>'
+          },
+          {
+            image:
+              "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
+          }
+        ],
+        date: Math.round(Date.now() / 1000),
+        // image: '{{image.imageUrl}}',
+        image:
+          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
+      }),
+      parseInt(req.query.perPage, 10) || 10
+    ).map(item => {
+      try {
+        const str = JSON.stringify(item);
+        item = JSON.parse(faker.fake(str));
+      } catch (e) {
+        // continue regardless of error
+      }
 
-                item.json = {
-                    id: 1,
-                    text: 'text'
-                };
-                return item;
-            })
+      item.json = {
+        id: 1,
+        text: "text"
+      };
+      return item;
     })
-}
\ No newline at end of file
+  });
+};
diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index 46d18652..401f637f 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -4,6 +4,9 @@
   border-radius: $Card-borderRadius;
   margin-bottom: $gap-base;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 
   &-title {
     color: $text--loud-color;
@@ -14,10 +17,19 @@
   }
 
   &-subTitle {
-    white-space: nowrap;
+    // white-space: nowrap;
+    max-height: $fontSizeBase * $lineHeightBase * 2;
     overflow: hidden;
     text-overflow: ellipsis;
     color: $text--muted-color;
+
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+  }
+
+  &-title + &-subTitle {
+    margin-top: $gap-xs;
   }
 
   &-checkBtn {
@@ -41,6 +53,7 @@
   &-heading {
     overflow: hidden;
     padding: $gap-sm $gap-base;
+    flex: 1 0 auto;
   }
 
   &-avtar {
@@ -74,6 +87,7 @@
 
   &-body {
     padding: $gap-base;
+    flex: 1 0 auto;
   }
 
   &-heading + &-body {
@@ -91,6 +105,8 @@
     flex-basis: 0;
     flex-grow: 1;
     width: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   &-fieldLabel {
diff --git a/scss/components/_cards.scss b/scss/components/_cards.scss
index 05a2a16a..22a1ca7c 100644
--- a/scss/components/_cards.scss
+++ b/scss/components/_cards.scss
@@ -78,6 +78,10 @@
     border-radius: $Card-borderRadius;
   }
 
+  &-body > div {
+    display: flex;
+  }
+
   &--masonry {
     display: block;
 
diff --git a/scss/components/_list.scss b/scss/components/_list.scss
index 48c9cd23..b17deea4 100644
--- a/scss/components/_list.scss
+++ b/scss/components/_list.scss
@@ -135,6 +135,9 @@
     flex-basis: 0;
     flex-grow: 1;
     max-width: 100%;
+    width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &-fieldLabel {