文档整理

2024-11-30 02:48:55 +08:00 · 2019-07-15 23:42:22 +08:00 · 2019-07-15 23:42:22 +08:00 · 811571d1c7
commit 811571d1c7
parent 557e0e1f9f
39 changed files with 191 additions and 121 deletions
--- a/docs/getting_started.md
+++ b/docs/getting_started.md
@ -94,15 +94,69 @@ class MyComponent extends React.Component<any, any> {

  这样，内部所有组件都能拿到 `username` 这个变量的值。
 * `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。
-  * `session` 默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
-  * `fetcher` 用来实现 ajax 发送。
-  * `isCancel` 判断 ajax 异常是否为一个 cancel 请求。
-  * `notify` 用来实现消息提示。
-  * `alert` 用来实现警告提示。
-  * `confirm` 用来实现确认框。
-  * `copy` 用来实现，内容复制。
-  * `getModalContainer` 用来决定弹框容器。
-  * `loadRenderer` 可以通过它加载自定义组件。
-  * `affixOffsetTop` 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
-  * `affixOffsetBottom` 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
-  * `richTextToken` 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
+  * `session: string` 默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
+  * `fetcher: (config: fetcherConfig) => Promise<fetcherResult>` 用来实现 ajax 发送。
+
+    示例
+
+    ```js
+    fetcher: ({
+        url,
+        method,
+        data,
+        responseType,
+        config,
+        headers
+    }: any) => {
+        config = config || {};
+        config.withCredentials = true;
+        responseType && (config.responseType = responseType);
+
+        if (config.cancelExecutor) {
+            config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
+        }
+
+        config.headers = headers || {};
+
+        if (method !== 'post' && method !== 'put' && method !== 'patch') {
+            if (data) {
+                config.params = data;
+            }
+
+            return (axios as any)[method](url, config);
+        } else if (data && data instanceof FormData) {
+            // config.headers = config.headers || {};
+            // config.headers['Content-Type'] = 'multipart/form-data';
+        } else if (data
+            && typeof data !== 'string'
+            && !(data instanceof Blob)
+            && !(data instanceof ArrayBuffer)
+        ) {
+            data = JSON.stringify(data);
+            // config.headers = config.headers || {};
+            config.headers['Content-Type'] = 'application/json';
+        }
+
+        return (axios as any)[method](url, data, config);
+    }
+    ```
+  * `isCancel: (e:error) => boolean` 判断 ajax 异常是否为一个 cancel 请求。
+
+    示例
+
+    ```js
+    isCancel: (value: any) => (axios as any).isCancel(value)
+    ```
+  * `notify: (type:string, msg: string) => void` 用来实现消息提示。
+  * `alert: (msg:string) => void` 用来实现警告提示。
+  * `confirm: (msg:string) => boolean | Promise<boolean>` 用来实现确认框。
+  * `jumpTo: (to:string, action?: Action, ctx?: object) => void` 用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。
+  * `updateLocation: (location:any, replace?:boolean) => void` 地址替换，跟 jumpTo 类似。
+  * `isCurrentUrl: (link:string) => boolean` 判断目标地址是否为当前页面。
+  * `theme: 'default' | 'cxd'` 目前支持两种主题。 
+  * `copy: (contents:string, options?: {shutup: boolean}) => void` 用来实现，内容复制。
+  * `getModalContainer: () => HTMLElement` 用来决定弹框容器。
+  * `loadRenderer: (chema:any, path:string) => Promise<Function>` 可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
+  * `affixOffsetTop: number` 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
+  * `affixOffsetBottom: number` 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
+  * `richTextToken: string` 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。
--- a/docs/renderers.md
+++ b/docs/renderers.md
@ -2,11 +2,12 @@
 title: 渲染器手册
 ---

-amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
+amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。 

-## 集合
+开始之前，请您一定要先阅读[基本用法](./basic.md)。

 -   [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项
+-   [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
 -   [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
 -   [Form](./renderers/Form/Form.md): 表单渲染器
    -   [FormItem](./renderers/Form/FormItem.md): Form 中主要是由各种 FormItem 组成
@ -59,7 +60,6 @@ amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成
    -   [Editor](./renderers/Form/Editor.md): 编辑器
    -   [Static](./renderers/Static.md): 纯用来展现数据的
 -   [Wizard](./renderers/Wizard.md): 表单向导
-   [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出
 -   [Each](./renderers/Each.md): 基于现有变量循环输出渲染器
 -   [Plain](./renderers/Plain.md): 单纯的文字输出
 -   [Html](./renderers/Html.md): html, 当需要用到变量时，请用 Tpl 代替
--- a/docs/renderers/Definitions.md
+++ b/docs/renderers/Definitions.md
@ -1,39 +1,15 @@
 ## Definitions

-`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容
+`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。

-```schema:height="600"
+```schema:height="200"
 {
  "definitions": {
          "aa": {
              "type": "text",
              "name": "jack",
              "value": "ref value",
-              "remark": "通过<code>\\$ref</code>引入的组件"
-          },
-          "bb": {
-              "type": "combo",
-              "multiple": true,
-              "multiLine": true,
-              "remark": "<code>combo</code>中的子项引入自身，实现嵌套的效果",
-              "controls": [
-                  {
-                      "label": "combo 1",
-                      "type": "text",
-                      "name": "key"
-                  },
-                  {
-                      "label": "combo 2",
-                      "name": "value",
-                      "$ref": "aa",
-                      "remark": "<code>definitions</code> 中可以引用 <code>definitions</code> 中其他的属性"
-                  },
-                  {
-                      "name": "children",
-                      "label": "children",
-                      "$ref": "bb"
-                  }
-              ]
+              "labelRemark": "通过<code>\\$ref</code>引入的组件"
          }
      },
      "type": "page",
@ -45,51 +21,76 @@
              "actions": [],
              "controls": [
                  {
-                      "label": "text2",
-                      "$ref": "aa",
-                      "name": "ref1"
-                  },
-                  {
-                      "label": "combo",
-                      "$ref": "bb",
-                      "name": "ref2"
+                      "$ref": "aa"
                  }
              ]
-          },
+          }
+      ]
+}
+```
+
+`Definitions` 最大的作用其实是能够实现对数据格式的递归引用。来看这个栗子吧。
+
+```schema:height="600"
+{
+  "definitions": {
+          "options": {
+            "type": "combo",
+            "multiple": true,
+            "multiLine": true,
+            "name": "options",
+            "controls": [
+            {
+                "type": "group",
+                "controls": [
+                {
+                    "label": "名称",
+                    "name": "label",
+                    "type": "text",
+                    "required": true
+                },
+                {
+                    "label": "值",
+                    "name": "value",
+                    "type": "text",
+                    "required": true
+                }
+                ]
+            },
+            {
+                "label": "包含子选项",
+                "type": "switch",
+                "name": "hasChildren",
+                "mode": "inline",
+                "className": "block"
+            },
+            {
+                "$ref": "options",
+                "label": "子选项",
+                "name": "children",
+                "visibleOn": "this.hasOwnProperty('hasChildren') && this.hasChildren",
+                "addButtonText": "新增子选项"
+            }
+            ]
+        }
+      },
+      "type": "page",
+      "title": "引用",
+      "body": [
          {
              "type": "form",
              "api": "api/xxx",
              "actions": [],
              "controls": [
                  {
-                      "label": "select",
-                      "$ref": "aa",
-                      "name": "select",
-                      "type": "select",
-                      "value": 1,
-                      "options": [
-                          {
-                              "label": "Option A",
-                              "value": 1
-                          },
-                          {
-                              "label": "Option B",
-                              "value": 2
-                          }
-                      ],
-                      "remark": "原属性会覆盖引用中的属性"
+                      "$ref": "options",
+                      "label": "选项"
                  },
+
                  {
-                      "label": "radios",
-                      "$ref": "bb",
-                      "type": "radios",
-                      "name": "radios",
-                      "value": "Option A",
-                      "options": [
-                          "Option A",
-                          "Option B"
-                      ],
-                      "remark": "原属性会覆盖引用中的属性"
+                      "type": "static",
+                      "label": "当前值",
+                      "tpl": "<pre>${options|json}</pre>"
                  }
              ]
          }
--- a/docs/renderers/Form/Array.md
+++ b/docs/renderers/Form/Array.md
@ -13,7 +13,7 @@
 -   `addButtonText` 新增按钮文字，默认为 `"新增"`。
 -   `minLength` 限制最小长度。
 -   `maxLength` 限制最大长度。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="450" scope="form"
 [
--- a/docs/renderers/Form/Button-Group.md
+++ b/docs/renderers/Form/Button-Group.md
@ -74,7 +74,7 @@ button-group 有两种模式，除了能让按钮组合在一起，还能做类
 -   `clearable` 默认为 `true`, 表示可以取消选中。
 -   `size` 按钮大小，从小到大依次为`xs, sm, md, lg`
 -   `disabled` 是否禁用`options` 中选项
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form"
 [
--- a/docs/renderers/Form/Chained-Select.md
+++ b/docs/renderers/Form/Chained-Select.md
@ -12,7 +12,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/Checkbox.md
+++ b/docs/renderers/Form/Checkbox.md
@ -6,7 +6,7 @@
 -   `option` 选项说明
 -   `trueValue` 默认 `true`
 -   `falseValue` 默认 `false`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/Checkboxes.md
+++ b/docs/renderers/Form/Checkboxes.md
@ -11,7 +11,7 @@
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
 -   `columnsCount` 默认为 `1` 可以配置成一行显示多个。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="330" scope="form"
 [
--- a/docs/renderers/Form/City.md
+++ b/docs/renderers/Form/City.md
@ -6,7 +6,7 @@
 -   `allowDistrict` 默认 `true` 允许输入区域
 -   `allowCity`  默认 `true` 允许输入城市
 -   `extractValue`  默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form"
 [
--- a/docs/renderers/Form/Combo.md
+++ b/docs/renderers/Form/Combo.md
@ -27,7 +27,7 @@
 -   `typeSwitchable` 是否可切换条件，配合`conditions`使用
 -   `formClassName` 单组表单项的类名
 -   `noBorder` 单组表单项是否有边框
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="450" scope="form"
 [
--- a/docs/renderers/Form/Date-Range.md
+++ b/docs/renderers/Form/Date-Range.md
@ -7,7 +7,7 @@
 -   `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
 -   `minDate` 限制最小日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
 -   `maxDate` 限制最大日期，可用 `${xxx}` 取值，或者输入相对时间，或者时间戳。如：`${start}`、`+3days`、`+3days+2hours`或者 `${start|default:-2days}+3days`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form"
 [
--- a/docs/renderers/Form/Date.md
+++ b/docs/renderers/Form/Date.md
@ -15,7 +15,7 @@

    可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。

-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form"
 [
--- a/docs/renderers/Form/Datetime.md
+++ b/docs/renderers/Form/Datetime.md
@ -16,7 +16,7 @@

    可用单位： `min`、`hour`、`day`、`week`、`month`、`year`。所有单位支持复数形式。

-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form"
 [
--- a/docs/renderers/Form/Editor.md
+++ b/docs/renderers/Form/Editor.md
@ -4,7 +4,7 @@

 -   `type` 请设置成 `editor` 或者 `bat-editor`、`c-editor`、`coffeescript-editor`、`cpp-editor`、`csharp-editor`、`css-editor`、`dockerfile-editor`、`fsharp-editor`、`go-editor`、`handlebars-editor`、`html-editor`、`ini-editor`、`java-editor`、`javascript-editor`、`json-editor`、`less-editor`、`lua-editor`、`markdown-editor`、`msdax-editor`、`objective-c-editor`、`php-editor`、`plaintext-editor`、`postiats-editor`、`powershell-editor`、`pug-editor`、`python-editor`、`r-editor`、`razor-editor`、`ruby-editor`、`sb-editor`、`scss-editor`、`sol-editor`、`sql-editor`、`swift-editor`、`typescript-editor`、`vb-editor`、`xml-editor`、`yaml-editor`。
 -   `language` 默认为 `javascript` 当 `type` 为 `editor` 的时候有用。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="350" scope="form-item"
 {
@ -20,7 +20,7 @@
 -   `language` 默认为 `javascript` 当 `type` 为 `diff-editor` 的时候有用
 -   `diffValue` 设置左侧编辑器的值，支持`${xxx}`获取变量
 -   `disabled` 配置 **右侧编辑器** 是否可编辑，**左侧编辑器**始终不可编辑
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值

--- a/docs/renderers/Form/Email.md
+++ b/docs/renderers/Form/Email.md
@ -17,7 +17,7 @@ Email 输入框。
 -   `source` 通过 `options` 只能配置静态数据，如果设置了 `source` 则会从接口拉取，实现动态效果。
 -   `autoComplete` 跟 `source` 不同的是，每次用户输入都会去接口获取提示。
 -   `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/File.md
+++ b/docs/renderers/Form/File.md
@ -19,7 +19,7 @@
 -   `startChunkApi` 默认 `/api/upload/startChunk` 想自己存储时才需要关注。
 -   `chunkApi` 默认 `/api/upload/chunk` 想自己存储时才需要关注。
 -   `finishChunkApi` 默认 `/api/upload/finishChunk` 想自己存储时才需要关注。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form-item"
 {
--- a/docs/renderers/Form/Image.md
+++ b/docs/renderers/Form/Image.md
@ -25,7 +25,7 @@
    -   `minHeight` 限制图片最小高度。
    -   `maxWidth` 限制图片最大宽度。
    -   `maxHeight` 限制图片最大高度。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form-item"
 {
--- a/docs/renderers/Form/List.md
+++ b/docs/renderers/Form/List.md
@ -14,7 +14,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `delimiter` 默认为 `,`
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 单选

--- a/docs/renderers/Form/Matrix.md
+++ b/docs/renderers/Form/Matrix.md
@ -9,7 +9,7 @@
 -   `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
 -   `multiple` 多选，默认为 `true`
 -   `singleSelectMode` 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form-item"
 {
--- a/docs/renderers/Form/NestedSelect.md
+++ b/docs/renderers/Form/NestedSelect.md
@ -11,7 +11,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/Number.md
+++ b/docs/renderers/Form/Number.md
@ -7,7 +7,7 @@
 -   `max` 最大值，支持用`${xxx}`获取变量
 -   `step` 步长
 -   `precision` 精度
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/Password.md
+++ b/docs/renderers/Form/Password.md
@ -10,4 +10,4 @@
 -   `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
 -   `clearable` 在有值的时候是否显示一个删除图标在右侧。
 -   `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)
--- a/docs/renderers/Form/Picker.md
+++ b/docs/renderers/Form/Picker.md
@ -15,7 +15,7 @@
 -   `delimiter` 默认为 `,`
 -   `modalMode` 设置 `dialog` 或者 `drawer`，用来配置弹出方式。
 -   `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 [CRUD](../CRUD.md) 的配置。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/Radios.md
+++ b/docs/renderers/Form/Radios.md
@ -8,7 +8,7 @@
    -   `value` 值
 -   `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。
 -   `columnsCount` 默认为 `1` 可以配置成一行显示多个。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="330" scope="form"
 [
--- a/docs/renderers/Form/Range.md
+++ b/docs/renderers/Form/Range.md
@ -9,7 +9,7 @@
 -   `multiple` 支持选择范围，默认为`false`
 -   `joinValuse` 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效
 -   `delimiter` 默认为 `,`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="400" scope="form-item"
 {
--- a/docs/renderers/Form/Repeat.md
+++ b/docs/renderers/Form/Repeat.md
@ -5,7 +5,7 @@
 -   `type` 请设置成 `repeat`
 -   `options` 默认: `hourly,daily,weekly,monthly`， 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly`
 -   `placeholder` 默认为 `不重复`, 当不指定值时的说明。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/Rich-Text.md
+++ b/docs/renderers/Form/Rich-Text.md
@ -34,7 +34,7 @@
    ```

 -   `options` Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="350" scope="form-item"
 {
--- a/docs/renderers/Form/Select.md
+++ b/docs/renderers/Form/Select.md
@ -19,7 +19,7 @@
 -   `checkAll` 默认为 `false` 开启后支持全选
 -   `checkAllLabel` 默认为 `全选`, 全选的文字
 -   `defaultCheckAll` 是否默认全选，默认为`false`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 单选

--- a/docs/renderers/Form/SubForm.md
+++ b/docs/renderers/Form/SubForm.md
@ -13,7 +13,7 @@ formItem 还可以是子表单类型。
 -   `form` 字表单的配置
    `title` 标题
    `controls` 请参考 [Form](./Form.md) 中的配置说明。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="400" scope="form"
 [
--- a/docs/renderers/Form/Switch.md
+++ b/docs/renderers/Form/Switch.md
@ -6,7 +6,7 @@
 -   `option` 选项说明
 -   `trueValue` 默认 `true`
 -   `falseValue` 默认 `false`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/Table.md
+++ b/docs/renderers/Form/Table.md
@ -72,7 +72,7 @@
 | columns[x].quickEdit         | `boolean` 或者 `object` | -                | 配合 editable 为 true 一起使用           |
 | columns[x].quickEditOnUpdate | `boolean` 或者 `object` | -                | 可以用来区分新建模式和更新模式的编辑配置 |

-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)
 -   更多 Demo 详情请参考 [表格编辑](/amis/#/form/table)

 ```schema:height="250" scope="form-item"
--- a/docs/renderers/Form/Text.md
+++ b/docs/renderers/Form/Text.md
@ -22,7 +22,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `delimiter` 默认为 `,`
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/Textarea.md
+++ b/docs/renderers/Form/Textarea.md
@ -7,7 +7,7 @@
 -   `maxRows` 最大行数
 -   `hint` 当输入框获得焦点的时候显示，用来提示用户输入内容。
 -   `trimContents` 是否去除首尾空白。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Form/Time.md
+++ b/docs/renderers/Form/Time.md
@ -12,7 +12,7 @@
    -   `-2mins` 2 分钟前
    -   `+2days` 2 天后
    -   `-10week` 十周前
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="250" scope="form"
 [
--- a/docs/renderers/Form/Tree.md
+++ b/docs/renderers/Form/Tree.md
@ -17,7 +17,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/TreeSelect.md
+++ b/docs/renderers/Form/TreeSelect.md
@ -17,7 +17,7 @@
 -   多选模式：选中的多个选项的 `value` 会通过 `delimiter` 连接起来，否则直接将以数组的形式提交值。
 -   `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。
 -   `delimiter` 默认为 `,`
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="300" scope="form-item"
 {
--- a/docs/renderers/Form/Url.md
+++ b/docs/renderers/Form/Url.md
@ -17,7 +17,7 @@ URL 输入框。
 -   `source` 通过 `options` 只能配置静态数据，如果设置了 `source` 则会从接口拉取，实现动态效果。
 -   `autoComplete` 跟 `source` 不同的是，每次用户输入都会去接口获取提示。
 -   `multiple` 默认为 `false`, 设置成 `true` 表示可多选。
-   更多配置请参考 [FormItem](./FormItem.md)
+-   **还有更多通用配置请参考** [FormItem](./FormItem.md)

 ```schema:height="200" scope="form-item"
 {
--- a/docs/renderers/Page.md
+++ b/docs/renderers/Page.md
@ -1,6 +1,8 @@
 ## Page

-Json 配置最外层是一个 `Page` 渲染器。他主要包含标题，副标题，提示信息等设置，需要注意的是，他有三个容器区域分别是：内容区、边栏区和工具条区，在容器里面放不同的渲染器，就能配置出不同的页面来。
+页面渲染器，他主要包含标题，副标题，提示信息等设置，需要注意的是，他有三个容器区域分别是：内容区、边栏区和工具条区，在容器里面放不同的渲染器，就能配置出不同的页面来。
+
+可以配置 `initApi` 从远端拉取数据，拉取的数据可以在整个页面级别使用。

 ```schema:height="200"
 {
@ -9,8 +11,9 @@ Json 配置最外层是一个 `Page` 渲染器。他主要包含标题，副标
  "subTitle": "SubTitle",
  "remark": "Remark",
  "aside": "Aside",
-  "body": "Body",
-  "toolbar": "Toolbar"
+  "body": "时间: ${date | date}",
+  "toolbar": "Toolbar",
+  "initApi": "/api/mock2/service/data"
 }
 ```

--- a/docs/renderers/Tpl.md
+++ b/docs/renderers/Tpl.md
@ -49,7 +49,7 @@ tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodas
 }
 ```

-如果只想简单取下变量，可以用 `$xxx` 或者 `${xxx}`。同时如果不指定类型，默认就是 `tpl`, 所以以上示例可以简化为。
+如果只想简单取下变量，可以用 `$xxx` 或者 `${xxx}`。同时如果不指定渲染器类型，默认就是 `tpl`, 所以以上示例可以简化为。

 > 取值支持多级，如果层级比较深可以用 `.` 来分割如： `${xx.xxx.xx}`
 > 另外 `$&` 表示直接获取当前的 `data`。
@ -63,7 +63,9 @@ tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodas
 }
 ```

-通过 `$xxx` 取到的值，默认是不做任何处理，如果希望把 html 转义了的，请使用：`${xxx | html}`。
+`注意：$xxx 与 <%= data.xxx %> 这两种语法不能同时使用，只有一种有效，所以不要交叉使用。`
+
+通过 `$xxx` 取到的值，默认是会做 html 转义的，也就是说  `$xxx` 完全等价于 `${xxx | html}`, 如果你想什么都不做，那么请这么写 `${xxx | raw}`。

 从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？

@ -82,9 +84,7 @@ tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodas
 -   `join` 当值是 array 时，可以把内容连起来。\${xxx | join:,}
 -   `first` 获取数组的第一个成员。
 -   `last` 获取数组的最后一个成员。
-   `pick` 如果是对象则从当前值中再次查找值如： `${xxx|pick:yyy}` 等价于 `${xxx.yyy}`。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。
-   `ubb2html` 我想你应该不需要，贴吧定制的 ubb 格式。
-   `html2ubb` 我想你应该不需要，贴吧定制的 ubb 格式。
+-   `pick` 如果是对象则从当前值中再次查找值如： `${xxx|pick:yyy}` 等价于 `${xxx.yyy}`。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。如: `${xxx|pick:yyy}` 如果 xxx 的值为 `[{xxx: 1, yyy: 2}]` 经过处理后就是 `[{yyy: 2}]`。更复杂的用法： `${xxx|pick:a~xxx,b~yyy}` 经过处理就是 `[{a:1, b: 2}]`
 -   `split` 可以将字符传通过分隔符分离成数组，默认分隔符为 `,` 如： `${ids|split|last}` 即取一段用逗号分割的数值中的最后一个。
 -   `nth` 取数组中的第 n 个成员。如： `${ids|split|nth:1}`
 -   `str2date` 请参考 [date](./Date.md) 中日期默认值的设置格式。
@ -97,6 +97,18 @@ tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodas

 组合使用。

-   `${&|json|html}` 把当前可用的数据全部打印出来。\$& 取当前值，json 做 json stringify，然后 html 转义。
+-   `${&|json|html}` 把当前可用的数据全部打印出来。`$&` 取当前值，json 做 json stringify，然后 html 转义。
 -   `${rows:first|pick:id}` 把 rows 中的第一条数据中的 id 取到。
 -   `${rows|pick:id|join:,}`
+
+
+没有找到合适的？可以自定义 filter。如果是 AMIS 平台用户，可以将以下代码加入到自定义组件中，如果不是请想办法插入以下代码。
+
+
+```js
+import {registerFilter} from 'amis';
+
+registerFilter('my-filter', (input:string) => `${input}Boom`);
+```
+
+加入成功后就可以这样使用了 `${xxx | my-filter}`。 如果 `xxx` 的值是 `abc` 那么输出将会是 `abcBoom`。