通过 amis 渲染页面
- {renderAmis({ - // schema - // 这里是 amis 的 Json 配置。 - type: 'page', - title: '简单页面', - body: '内容' - }, { - // props - }, { - // env - // 这些是 amis 需要的一些接口实现 - // 可以参考本项目里面的 Demo 部分代码。 + render() { + return ( +通过 amis 渲染页面
+ {renderAmis( + { + // schema + // 这里是 amis 的 Json 配置。 + type: 'page', + title: '简单页面', + body: '内容' + }, + { + // props + }, + { + // env + // 这些是 amis 需要的一些接口实现 + // 可以参考后面的参数介绍。 - updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace,还是push?*/) => { - // 用来更新地址栏 - }, + updateLocation: ( + location: string /*目标地址*/, + replace: boolean /*是replace,还是push?*/ + ) => { + // 用来更新地址栏 + }, - jumpTo: (location:string/*目标地址*/) => { - // 页面跳转, actionType: link、url 都会进来。 - }, + jumpTo: (location: string /*目标地址*/) => { + // 页面跳转, actionType: link、url 都会进来。 + }, - fetcher: ({ - url, - method, - data, - config - }:{ - url:string/*目标地址*/, - method:'get' | 'post' | 'put' | 'delete'/*发送方式*/, - data: object | void/*数据*/, - config: object/*其他配置*/ - }) => { - // 用来发送 Ajax 请求,建议使用 axios - }, - notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => { - // 用来提示用户 - }, - alert: (content:string/*提示信息*/) => { - // 另外一种提示,可以直接用系统框 - }, - confirm: (content:string/*提示信息*/) => { - // 确认框。 - } - });} -图表渲染器,采用 echarts 渲染,配置格式跟 echarts 相同,echarts 配置文档
\n通过配置"config": {}
,可以配置echarts
配置
可以通过配置"clickAction": {}
,来指定图表节点的点击行为,支持 amis 的行为。
\n\n\n点击下面坐标中的节点查看效果!
\n
配置api
,来远程拉取图标配置
属性名 | \n类型 | \n默认值 | \n说明 | \n|
---|---|---|---|---|
type | \nstring | \n"chart" | \n指定为 chart 渲染器 | \n|
className | \nstring | \n\n | 外层 Dom 的类名 | \n|
body | \nSchemaNode | \n\n | 内容容器 | \n|
api | \napi | \n\n | 配置项接口地址 | \n|
initFetch | \nboolean | \n\n | 组件初始化时,是否请求接口 | \n|
interval | \nnumber | \n\n | 刷新时间(最低 3000) | \n|
config | \n`object | \nstring` | \n\n | 设置 eschars 的配置项,当为string 的时候可以设置 function 等配置项 | \n
style | \nobject | \n\n | 设置根元素的 style | \n|
width | \nstring | \n\n | 设置根元素的宽度 | \n|
height | \nstring | \n\n | 设置根元素的高度 | \n|
replaceChartOption | \nboolean | \nfalse | \n每次更新是完全覆盖配置项还是追加? | \n
图表渲染器,采用 echarts 渲染,配置格式跟 echarts 相同,echarts 配置文档
\n通过配置"config": {}
,可以配置echarts
配置
可以通过配置"clickAction": {}
,来指定图表节点的点击行为,支持 amis 的行为。
\n\n\n点击下面坐标中的节点查看效果!
\n
配置api
,来远程拉取图标配置
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"chart" | \n指定为 chart 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
body | \nSchemaNode | \n\n | 内容容器 | \n
api | \napi | \n\n | 配置项接口地址 | \n
source | \n数据映射 | \n\n | 通过数据映射获取数据链中变量值作为配置 | \n
initFetch | \nboolean | \n\n | 组件初始化时,是否请求接口 | \n
interval | \nnumber | \n\n | 刷新时间(最低 3000) | \n
config | \nobject 或 string | \n\n | 设置 eschars 的配置项,当为string 的时候可以设置 function 等配置项 | \n
style | \nobject | \n\n | 设置根元素的 style | \n
width | \nstring | \n\n | 设置根元素的宽度 | \n
height | \nstring | \n\n | 设置根元素的高度 | \n
replaceChartOption | \nboolean | \nfalse | \n每次更新是完全覆盖配置项还是追加? | \n
表单项 是组成一个表单的基本单位,它具有的一些特性会帮助我们更好地实现表单操作。
\n\n\n所有派生自
\nFormItem
的组件,都具有FormItem
的特性。
最基本的表单项配置像这样:
\n\nname
: 必填属性,标识表单数据域中,当前表单项值的key
type
: 必填属性,标识表单项类型label
: 标识表单项的标签\n\n所有表单项都只可以配置在
\nform
组件中,即form
的controls
属性中。
通过配置"inline": true
,标识当前表单项使用内联模式。
可以配置size
,来调整表单项的尺寸,支持'xs' | 'sm' | 'md' | 'lg' | 'full'
,如下:
\n\n不同组件的
\nsize
效果可能会有所不同,具体请参考对应的组件文档。
设置label
属性来配置表单项标签。
当表单为水平布局时,左边即便是不设置label
为了保持对齐也会留空,如果想要去掉空白,请设置成false
。
通过配置"disabled": true
来禁用表单项
你也通过表达式配置disabledOn
,来实现在某个条件下禁用当前表单项.
通过配置"hidden": true
或者"visible": false
来禁用表单项
上例中的text2
被隐藏了。
你也通过表达式配置hiddenOn
,来实现在某个条件下禁用当前表单项.
\n\n\n
visible
和hidden
,visibleOn
和hiddenOn
除了判断逻辑相反以外,没有任何区别
表单项值,即表单项通过用户交互发生变化后,更新表单数据域中同name
变量值.
如上例,更改姓名表单项值,可以改变表单数据域中name
变量的值。
通过配置value
属性,可以设置表单项的默认值。
value
不支持数据映射,也就是说不可以直接配置类似于这样的语法:${xxx}
,如果想要映射当前数据域中的某个变量,那么设置该表单项name
为该变量名就行,如下:
上例中我们表单数据域中有变量"text": "hello world!"
,然后我们设置表达项"name": "text"
,这样就可以自动映射值了。
通过配置"required": true
来标识该表单项为必填。
你也通过表达式配置requiredOn
,来实现在某个条件下使当前表单项必填。
可以配置validations
属性,指定校验当前表单项值的格式
可以通过对象形式配置
\n\n同样也可以配置多个格式校验
\n\n也可以配置字符串形式来指定,如下例,输入不合法的值,点击提交会报错并显示报错信息
\n\n也可以指定多个格式校验,中间用逗号
分隔。
如果需要配置参数,例如显示最大值或最小值,则在格式标识符后:
和参数
amis 会有默认的报错信息,如果你想自定义校验信息,配置validationErrors
属性
如果需要获取当前格式校验配置的参数,可以使用$1
默认校验是当进行行为操作时,对表单项进行校验,如果你想每次表单项的值发生变化的时候就校验,请配置"validateOnChange": false
isEmptyString
必须是空白字符。注意! 该格式校验是值,校验空白字符,而不是当前表单项是否为空,想校验是否为空,请配置 必填校验isEmail
必须是 Email。isUrl
必须是 Url。isNumeric
必须是 数值。isAlpha
必须是 字母。isAlphanumeric
必须是 字母或者数字。isInt
必须是 整形。isFloat
必须是 浮点形。isLength:length
是否长度正好等于设定值。minLength:length
最小长度。maxLength:length
最大长度。maximum:number
最大值。minimum:number
最小值。equals:xxx
当前值必须完全等于 xxx。equalsField:xxx
当前值必须与 xxx 变量值一致。isJson
是否是合法的 Json 字符串。notEmptyString
要求输入内容不是空白。isUrlPath
是 url 路径。matchRegexp:/foo/
必须命中某个正则。matchRegexp1:/foo/
必须命中某个正则。matchRegexp2:/foo/
必须命中某个正则。matchRegexp3:/foo/
必须命中某个正则。matchRegexp4:/foo/
必须命中某个正则。也可以通过接口返回错误信息,实现服务端校验
\n\n点击提交,api 接口返回中,需要在 errors 变量中,返回某个表单项的报错信息,key
值为该表单项的name
值。
如上,接口返回的格式如下,提交后,test2
表达项会显示报错信息
{\n \"status\": 422, // 返回非0状态码\n \"msg\": \"\",\n \"errors\": {\n \"test2\": \"服务器端说,这个有错误。\"\n },\n \"data\": null\n}\n
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 指定表单项类型 | \n
className | \nstring | \n\n | 表单最外层类名 | \n
inputClassName | \nstring | \n\n | 表单控制器类名 | \n
labelClassName | \nstring | \n\n | label 的类名 | \n
name | \nstring | \n\n | 字段名,指定该表单项提交时的 key | \n
label | \n模板 或 false | \n\n | 表单项标签 | \n
description | \n模板 | \n\n | 表单项描述 | \n
placeholder | \nstring | \n\n | 表单项描述 | \n
inline | \nboolean | \n\n | 是否为 内联 模式 | \n
submitOnChange | \nboolean | \n\n | 是否该表单项值发生变化时就提交当前表单。 | \n
disabled | \nboolean | \n\n | 当前表单项是否是禁用状态 | \n
disabledOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visible | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visibleOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
required | \nboolean | \n\n | 是否为必填。 | \n
requiredOn | \n表达式 | \n\n | 过表达式来配置当前表单项是否为必填。 | \n
validations | \n表达式 | \n\n | 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。 | \n
表单项 是组成一个表单的基本单位,它具有的一些特性会帮助我们更好地实现表单操作。
\n\n\n所有派生自
\nFormItem
的组件,都具有FormItem
的特性。
最基本的表单项配置像这样:
\n\nname
: 必填属性,标识表单数据域中,当前表单项值的key
type
: 必填属性,标识表单项类型label
: 标识表单项的标签\n\n所有表单项都只可以配置在
\nform
组件中,即form
的controls
属性中。
通过配置"inline": true
,标识当前表单项使用内联模式。
可以配置size
,来调整表单项的尺寸,支持'xs' | 'sm' | 'md' | 'lg' | 'full'
,如下:
\n\n不同组件的
\nsize
效果可能会有所不同,具体请参考对应的组件文档。
设置label
属性来配置表单项标签。
当表单为水平布局时,左边即便是不设置label
为了保持对齐也会留空,如果想要去掉空白,请设置成false
。
通过配置"disabled": true
来禁用表单项
你也通过表达式配置disabledOn
,来实现在某个条件下禁用当前表单项.
通过配置"hidden": true
或者"visible": false
来禁用表单项
上例中的text2
被隐藏了。
你也通过表达式配置hiddenOn
,来实现在某个条件下禁用当前表单项.
\n\n\n
visible
和hidden
,visibleOn
和hiddenOn
除了判断逻辑相反以外,没有任何区别
表单项值,即表单项通过用户交互发生变化后,更新表单数据域中同name
变量值.
如上例,更改姓名表单项值,可以改变表单数据域中name
变量的值。
也支持链式配置 name
属性,例如:aaa.bbb
观察上例,这样更改表单项值,会改变数据域中person.name
的值
{\n \"person\": {\n \"name\": \"xxx\"\n }\n}\n
\n通过配置value
属性,可以设置表单项的默认值。
value
不支持数据映射,也就是说不可以直接配置类似于这样的语法:${xxx}
,如果想要映射当前数据域中的某个变量,那么设置该表单项name
为该变量名就行,如下:
上例中我们表单数据域中有变量"text": "hello world!"
,然后我们设置表达项"name": "text"
,这样就可以自动映射值了。
通过配置"required": true
来标识该表单项为必填。
你也通过表达式配置requiredOn
,来实现在某个条件下使当前表单项必填。
可以配置validations
属性,指定校验当前表单项值的格式
可以通过对象形式配置
\n\n同样也可以配置多个格式校验
\n\n也可以配置字符串形式来指定,如下例,输入不合法的值,点击提交会报错并显示报错信息
\n\n也可以指定多个格式校验,中间用逗号
分隔。
如果需要配置参数,例如显示最大值或最小值,则在格式标识符后:
和参数
amis 会有默认的报错信息,如果你想自定义校验信息,配置validationErrors
属性
如果需要获取当前格式校验配置的参数,可以使用$1
默认校验是当进行行为操作时,对表单项进行校验,如果你想每次表单项的值发生变化的时候就校验,请配置"validateOnChange": false
isEmptyString
必须是空白字符。注意! 该格式校验是值,校验空白字符,而不是当前表单项是否为空,想校验是否为空,请配置 必填校验isEmail
必须是 Email。isUrl
必须是 Url。isNumeric
必须是 数值。isAlpha
必须是 字母。isAlphanumeric
必须是 字母或者数字。isInt
必须是 整形。isFloat
必须是 浮点形。isLength:length
是否长度正好等于设定值。minLength:length
最小长度。maxLength:length
最大长度。maximum:number
最大值。minimum:number
最小值。equals:xxx
当前值必须完全等于 xxx。equalsField:xxx
当前值必须与 xxx 变量值一致。isJson
是否是合法的 Json 字符串。notEmptyString
要求输入内容不是空白。isUrlPath
是 url 路径。matchRegexp:/foo/
必须命中某个正则。matchRegexp1:/foo/
必须命中某个正则。matchRegexp2:/foo/
必须命中某个正则。matchRegexp3:/foo/
必须命中某个正则。matchRegexp4:/foo/
必须命中某个正则。也可以通过接口返回错误信息,实现服务端校验
\n\n点击提交,api 接口返回中,需要在 errors 变量中,返回某个表单项的报错信息,key
值为该表单项的name
值。
如上,接口返回的格式如下,提交后,test2
表达项会显示报错信息
{\n \"status\": 422, // 返回非0状态码\n \"msg\": \"\",\n \"errors\": {\n \"test2\": \"服务器端说,这个有错误。\"\n },\n \"data\": null\n}\n
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 指定表单项类型 | \n
className | \nstring | \n\n | 表单最外层类名 | \n
inputClassName | \nstring | \n\n | 表单控制器类名 | \n
labelClassName | \nstring | \n\n | label 的类名 | \n
name | \nstring | \n\n | 字段名,指定该表单项提交时的 key | \n
label | \n模板 或 false | \n\n | 表单项标签 | \n
description | \n模板 | \n\n | 表单项描述 | \n
placeholder | \nstring | \n\n | 表单项描述 | \n
inline | \nboolean | \n\n | 是否为 内联 模式 | \n
submitOnChange | \nboolean | \n\n | 是否该表单项值发生变化时就提交当前表单。 | \n
disabled | \nboolean | \n\n | 当前表单项是否是禁用状态 | \n
disabledOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visible | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visibleOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
required | \nboolean | \n\n | 是否为必填。 | \n
requiredOn | \n表达式 | \n\n | 过表达式来配置当前表单项是否为必填。 | \n
validations | \n表达式 | \n\n | 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。 | \n
表单项,默认都是一行显示一个,Group 组件用于在一行展示多个表单项
\n可以给group
组件设置mode
调整展示模式,用法同 Form 展示
下面group
我们配置了"mode": "horizontal"
,观察显示情况
当表单在水平模式下时,如果group
内表单项设置"label": false
,会导致布局错乱,如下
这时可以给group
配置label
属性,保持和其他表单项布局统一
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | CSS 类名 | \n
label | \nstring | \n\n | group 的标签 | \n
controls | \nArray<表单项> | \n\n | 表单项集合 | \n
mode | \nstring | \n\n | 展示默认,同 Form 中的模式 | \n
gap | \nstring | \n\n | 表单项之间的间距,可选: | \n
direction | \nstring | \n"horizontal" | \n可以配置水平展示还是垂直展示。对应的配置项分别是:vertical 、horizontal | \n
表单项,默认都是一行显示一个,Group 组件用于在一行展示多个表单项
\n可以给group
组件设置mode
调整展示模式,用法同 Form 展示
下面group
我们配置了"mode": "horizontal"
,观察显示情况
当表单在水平模式下时,如果group
内表单项设置"label": false
,会导致布局错乱,如下
这时可以给group
配置label
属性,保持和其他表单项布局统一
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | CSS 类名 | \n
label | \nstring | \n\n | group 的标签 | \n
controls | \nArray<表单项> | \n\n | 表单项集合 | \n
mode | \nstring | \n\n | 展示默认,同 Form 中的模式 | \n
gap | \nstring | \n\n | 表单项之间的间距,可选:xs 、sm 、normal | \n
direction | \nstring | \n"horizontal" | \n可以配置水平展示还是垂直展示。对应的配置项分别是:vertical 、horizontal | \n
npm i amis\n
目前支持三种主题:default(默认主题)
、cxd(云舍)
和dark(暗黑)
html 中引入:
\n<link href=\"./node_modules/amis/lib/themes/default.css\" />\n<!-- 或 <link href=\"./node_modules/amis/lib/themes/cxd.css\" /> -->\n<!-- 或 <link href=\"./node_modules/amis/lib/themes/dark.css\" /> -->\n
js 中引入:
\nimport './node_modules/amis/lib/themes/default.css';\n// 或 import './node_modules/amis/lib/themes/cxd.css';\n// 或 import './node_modules/amis/lib/themes/dark.css';\n
\n\n\n上面只是示例,请根据自己的项目结构调整引用路径
\n
renderAmis(\n {\n type: 'page',\n title: '简单页面',\n body: '内容'\n },\n {},\n {\n // env...\n theme: 'default' // cxd 或 dark\n }\n);\n
\n可以在 React Component 这么使用(TypeScript)。
\nimport * as React from 'react';\nimport {render as renderAmis} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 amis 渲染页面</p>\n {renderAmis(\n {\n // schema\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n },\n {\n // props\n },\n {\n // env\n // 这些是 amis 需要的一些接口实现\n // 可以参考后面的参数介绍。\n\n updateLocation: (\n location: string /*目标地址*/,\n replace: boolean /*是replace,还是push?*/\n ) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location: string /*目标地址*/) => {\n // 页面跳转, actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }: {\n url: string /*目标地址*/;\n method: 'get' | 'post' | 'put' | 'delete' /*发送方式*/;\n data: object | void /*数据*/;\n config: object /*其他配置*/;\n }) => {\n // 用来发送 Ajax 请求,建议使用 axios\n },\n notify: (\n type: 'error' | 'success' /**/,\n msg: string /*提示内容*/\n ) => {\n // 用来提示用户\n },\n alert: (content: string /*提示信息*/) => {\n // 另外一种提示,可以直接用系统框\n },\n confirm: (content: string /*提示信息*/) => {\n // 确认框。\n }\n }\n )}\n </div>\n );\n }\n}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往 配置与组件 了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() =>\n renderAmis(schema, {\n data: {\n username: 'amis'\n }\n });\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (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 渲染器。SDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式不支持 自定义组件,只能使用 amis 内置的组件。
\nJSSDK 的代码从以下地址获取:
\n\n然后在页面中插入下面的代码就能渲染出来了:
\n(function () {\n var amis = amisRequire('amis/embed');\n amis.embed(\n '#container',\n {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n },\n {\n // props 一般不用传。\n },\n {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n }\n );\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n另外,sdk 代码也伴随 npm 一起发布了,不使用 CDN 版本,直接替换成 npm 包里面的 amis/sdk.js
和 amis/sdk.css
即可。
完整示例:
\n<!DOCTYPE html>\n<html lang=\"zh\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>AMIS Demo</title>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1\"\n />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" />\n <link rel=\"stylesheet\" href=\"amis/sdk.css\" />\n <style>\n html,\n body,\n .app-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n }\n </style>\n </head>\n <body>\n <div id=\"root\" class=\"app-wrapper\"></div>\n <script src=\"amis/sdk.js\"></script>\n <script type=\"text/javascript\">\n (function () {\n var amis = amisRequire('amis/embed');\n amis.embed('#root', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'hello world'\n });\n })();\n </script>\n </body>\n</html>\n
\n",
+ "toc": {
+ "label": "目录",
+ "type": "toc",
+ "children": [
+ {
+ "label": "npm",
+ "fragment": "npm",
+ "fullPath": "#npm",
+ "level": 2,
+ "children": [
+ {
+ "label": "安装",
+ "fragment": "%E5%AE%89%E8%A3%85",
+ "fullPath": "#%E5%AE%89%E8%A3%85",
+ "level": 3
+ },
+ {
+ "label": "主题样式",
+ "fragment": "%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F",
+ "fullPath": "#%E4%B8%BB%E9%A2%98%E6%A0%B7%E5%BC%8F",
+ "level": 3
+ },
+ {
+ "label": "使用",
+ "fragment": "%E4%BD%BF%E7%94%A8",
+ "fullPath": "#%E4%BD%BF%E7%94%A8",
+ "level": 3
+ }
+ ]
+ },
+ {
+ "label": "SDK",
+ "fragment": "sdk",
+ "fullPath": "#sdk",
+ "level": 2
+ }
+ ],
+ "level": 0
+ }
+ };
+
+});
diff --git a/gh-pages/docs/start/getting-started_904df92.js b/gh-pages/docs/start/getting-started_904df92.js
deleted file mode 100644
index f14da76b7..000000000
--- a/gh-pages/docs/start/getting-started_904df92.js
+++ /dev/null
@@ -1,42 +0,0 @@
-amis.define('docs/start/getting-started.md', function(require, exports, module, define) {
-
- module.exports = {
- "title": "快速开始",
- "description": null,
- "html": "npm i amis\n
可以在 React Component 这么使用(TypeScript)。
\nimport * as React from 'react';\nimport {\n render as renderAmis\n} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 amis 渲染页面</p>\n {renderAmis({\n // schema\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n }, {\n // props\n }, {\n // env\n // 这些是 amis 需要的一些接口实现\n // 可以参考本项目里面的 Demo 部分代码。\n\n updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace,还是push?*/) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location:string/*目标地址*/) => {\n // 页面跳转, actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }:{\n url:string/*目标地址*/,\n method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,\n data: object | void/*数据*/,\n config: object/*其他配置*/\n }) => {\n // 用来发送 Ajax 请求,建议使用 axios\n },\n notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {\n // 用来提示用户\n },\n alert: (content:string/*提示信息*/) => {\n // 另外一种提示,可以直接用系统框\n },\n confirm: (content:string/*提示信息*/) => {\n // 确认框。\n }\n });}\n </div>\n );\n }\n}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往基本用法了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() =>\n renderAmis(schema, {\n data: {\n username: 'amis'\n }\n });\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (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 渲染器。SDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式不支持 自定义组件,只能使用 amis 内置的组件。
\nJSSDK 的代码从以下地址获取:
\n\n然后在页面中插入下面的代码就能渲染出来了:
\n(function () {\n var amis = amisRequire('amis/embed');\n amis.embed(\n '#container',\n {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n },\n {\n // props 一般不用传。\n },\n {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n }\n );\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n另外,sdk 代码也伴随 npm 一起发布了,不使用 CDN 版本,直接替换成 npm 包里面的 amis/sdk.js
和 amis/sdk.css
即可。
完整示例:
\n<!DOCTYPE html>\n<html lang=\"zh\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>AMIS Demo</title>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1\"\n />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" />\n <link rel=\"stylesheet\" href=\"amis/sdk.css\" />\n <style>\n html,\n body,\n .app-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n }\n </style>\n </head>\n <body>\n <div id=\"root\" class=\"app-wrapper\"></div>\n <script src=\"amis/sdk.js\"></script>\n <script type=\"text/javascript\">\n (function () {\n var amis = amisRequire('amis/embed');\n amis.embed('#root', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'hello world'\n });\n })();\n </script>\n </body>\n</html>\n
\n",
- "toc": {
- "label": "目录",
- "type": "toc",
- "children": [
- {
- "label": "npm",
- "fragment": "npm",
- "fullPath": "#npm",
- "level": 2,
- "children": [
- {
- "label": "安装",
- "fragment": "%E5%AE%89%E8%A3%85",
- "fullPath": "#%E5%AE%89%E8%A3%85",
- "level": 3
- },
- {
- "label": "使用",
- "fragment": "%E4%BD%BF%E7%94%A8",
- "fullPath": "#%E4%BD%BF%E7%94%A8",
- "level": 3
- }
- ]
- },
- {
- "label": "SDK",
- "fragment": "sdk",
- "fullPath": "#sdk",
- "level": 2
- }
- ],
- "level": 0
- }
- };
-
-});
diff --git a/gh-pages/docs/types/api.html b/gh-pages/docs/types/api.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/docs/types/api.html
+++ b/gh-pages/docs/types/api.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/docs/types/schemanode.html b/gh-pages/docs/types/schemanode.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/docs/types/schemanode.html
+++ b/gh-pages/docs/types/schemanode.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/audio.html b/gh-pages/examples/audio.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/audio.html
+++ b/gh-pages/examples/audio.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/carousel.html b/gh-pages/examples/carousel.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/carousel.html
+++ b/gh-pages/examples/carousel.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/chart.html b/gh-pages/examples/chart.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/chart.html
+++ b/gh-pages/examples/chart.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/aside.html b/gh-pages/examples/crud/aside.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/aside.html
+++ b/gh-pages/examples/crud/aside.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/columns.html b/gh-pages/examples/crud/columns.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/columns.html
+++ b/gh-pages/examples/crud/columns.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/fixed.html b/gh-pages/examples/crud/fixed.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/fixed.html
+++ b/gh-pages/examples/crud/fixed.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/footable.html b/gh-pages/examples/crud/footable.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/footable.html
+++ b/gh-pages/examples/crud/footable.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/grid.html b/gh-pages/examples/crud/grid.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/grid.html
+++ b/gh-pages/examples/crud/grid.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/header-group.html b/gh-pages/examples/crud/header-group.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/header-group.html
+++ b/gh-pages/examples/crud/header-group.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/header-hide.html b/gh-pages/examples/crud/header-hide.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/header-hide.html
+++ b/gh-pages/examples/crud/header-hide.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/item-actions.html b/gh-pages/examples/crud/item-actions.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/item-actions.html
+++ b/gh-pages/examples/crud/item-actions.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/jump-next.html b/gh-pages/examples/crud/jump-next.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/jump-next.html
+++ b/gh-pages/examples/crud/jump-next.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/keyboards.html b/gh-pages/examples/crud/keyboards.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/keyboards.html
+++ b/gh-pages/examples/crud/keyboards.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/list.html b/gh-pages/examples/crud/list.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/list.html
+++ b/gh-pages/examples/crud/list.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/load-more.html b/gh-pages/examples/crud/load-more.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/load-more.html
+++ b/gh-pages/examples/crud/load-more.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/load-once.html b/gh-pages/examples/crud/load-once.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/load-once.html
+++ b/gh-pages/examples/crud/load-once.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/merge-cell.html b/gh-pages/examples/crud/merge-cell.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/merge-cell.html
+++ b/gh-pages/examples/crud/merge-cell.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/nested.html b/gh-pages/examples/crud/nested.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/nested.html
+++ b/gh-pages/examples/crud/nested.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/crud/table.html b/gh-pages/examples/crud/table.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/crud/table.html
+++ b/gh-pages/examples/crud/table.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/dialog/drawer.html b/gh-pages/examples/dialog/drawer.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/dialog/drawer.html
+++ b/gh-pages/examples/dialog/drawer.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/dialog/simple.html b/gh-pages/examples/dialog/simple.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/dialog/simple.html
+++ b/gh-pages/examples/dialog/simple.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/combo.html b/gh-pages/examples/form/combo.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/combo.html
+++ b/gh-pages/examples/form/combo.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/custom.html b/gh-pages/examples/form/custom.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/custom.html
+++ b/gh-pages/examples/form/custom.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/definitions.html b/gh-pages/examples/form/definitions.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/definitions.html
+++ b/gh-pages/examples/form/definitions.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/fields-tabs.html b/gh-pages/examples/form/fields-tabs.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/fields-tabs.html
+++ b/gh-pages/examples/form/fields-tabs.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/fieldset.html b/gh-pages/examples/form/fieldset.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/fieldset.html
+++ b/gh-pages/examples/form/fieldset.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/formula.html b/gh-pages/examples/form/formula.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/formula.html
+++ b/gh-pages/examples/form/formula.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/full.html b/gh-pages/examples/form/full.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/full.html
+++ b/gh-pages/examples/form/full.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/hint.html b/gh-pages/examples/form/hint.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/hint.html
+++ b/gh-pages/examples/form/hint.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/ide.html b/gh-pages/examples/form/ide.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/ide.html
+++ b/gh-pages/examples/form/ide.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/mode.html b/gh-pages/examples/form/mode.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/mode.html
+++ b/gh-pages/examples/form/mode.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/picker.html b/gh-pages/examples/form/picker.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/picker.html
+++ b/gh-pages/examples/form/picker.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/reaction.html b/gh-pages/examples/form/reaction.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/reaction.html
+++ b/gh-pages/examples/form/reaction.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/remote.html b/gh-pages/examples/form/remote.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/remote.html
+++ b/gh-pages/examples/form/remote.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/rich-text.html b/gh-pages/examples/form/rich-text.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/rich-text.html
+++ b/gh-pages/examples/form/rich-text.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/static.html b/gh-pages/examples/form/static.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/static.html
+++ b/gh-pages/examples/form/static.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/sub-form.html b/gh-pages/examples/form/sub-form.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/sub-form.html
+++ b/gh-pages/examples/form/sub-form.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/table.html b/gh-pages/examples/form/table.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/table.html
+++ b/gh-pages/examples/form/table.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/tabs.html b/gh-pages/examples/form/tabs.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/tabs.html
+++ b/gh-pages/examples/form/tabs.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/transfer.html b/gh-pages/examples/form/transfer.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/transfer.html
+++ b/gh-pages/examples/form/transfer.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/form/validation.html b/gh-pages/examples/form/validation.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/form/validation.html
+++ b/gh-pages/examples/form/validation.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/horizontal.html b/gh-pages/examples/horizontal.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/horizontal.html
+++ b/gh-pages/examples/horizontal.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/iframe.html b/gh-pages/examples/iframe.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/iframe.html
+++ b/gh-pages/examples/iframe.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/crud.html b/gh-pages/examples/linkpage/crud.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/crud.html
+++ b/gh-pages/examples/linkpage/crud.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/form.html b/gh-pages/examples/linkpage/form.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/form.html
+++ b/gh-pages/examples/linkpage/form.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/form2.html b/gh-pages/examples/linkpage/form2.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/form2.html
+++ b/gh-pages/examples/linkpage/form2.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/options-local.html b/gh-pages/examples/linkpage/options-local.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/options-local.html
+++ b/gh-pages/examples/linkpage/options-local.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/options.html b/gh-pages/examples/linkpage/options.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/options.html
+++ b/gh-pages/examples/linkpage/options.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/linkpage/page.html b/gh-pages/examples/linkpage/page.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/linkpage/page.html
+++ b/gh-pages/examples/linkpage/page.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/pages/error.html b/gh-pages/examples/pages/error.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/pages/error.html
+++ b/gh-pages/examples/pages/error.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/pages/form.html b/gh-pages/examples/pages/form.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/pages/form.html
+++ b/gh-pages/examples/pages/form.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/pages/simple.html b/gh-pages/examples/pages/simple.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/pages/simple.html
+++ b/gh-pages/examples/pages/simple.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/sdk.html b/gh-pages/examples/sdk.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/sdk.html
+++ b/gh-pages/examples/sdk.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/services/data.html b/gh-pages/examples/services/data.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/services/data.html
+++ b/gh-pages/examples/services/data.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/services/form.html b/gh-pages/examples/services/form.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/services/form.html
+++ b/gh-pages/examples/services/form.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/services/schema.html b/gh-pages/examples/services/schema.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/services/schema.html
+++ b/gh-pages/examples/services/schema.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/tabs/form.html b/gh-pages/examples/tabs/form.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/tabs/form.html
+++ b/gh-pages/examples/tabs/form.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/tabs/normal.html b/gh-pages/examples/tabs/normal.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/tabs/normal.html
+++ b/gh-pages/examples/tabs/normal.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/tabs/tab1.html b/gh-pages/examples/tabs/tab1.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/tabs/tab1.html
+++ b/gh-pages/examples/tabs/tab1.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/tabs/tab2.html b/gh-pages/examples/tabs/tab2.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/tabs/tab2.html
+++ b/gh-pages/examples/tabs/tab2.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/tabs/tab3.html b/gh-pages/examples/tabs/tab3.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/tabs/tab3.html
+++ b/gh-pages/examples/tabs/tab3.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/task.html b/gh-pages/examples/task.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/task.html
+++ b/gh-pages/examples/task.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/video.html b/gh-pages/examples/video.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/video.html
+++ b/gh-pages/examples/video.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/examples/wizard.html b/gh-pages/examples/wizard.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/examples/wizard.html
+++ b/gh-pages/examples/wizard.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/index.html b/gh-pages/index.html
index d754eccff..17a533c5d 100644
--- a/gh-pages/index.html
+++ b/gh-pages/index.html
@@ -35,9 +35,9 @@
-
-
-
+
+
+
diff --git a/gh-pages/pkg/app_ebde9ce.js b/gh-pages/pkg/app_754dbb2.js
similarity index 98%
rename from gh-pages/pkg/app_ebde9ce.js
rename to gh-pages/pkg/app_754dbb2.js
index c48186e7e..2a4d28b07 100644
--- a/gh-pages/pkg/app_ebde9ce.js
+++ b/gh-pages/pkg/app_754dbb2.js
@@ -966,7 +966,7 @@ amis.define("8ee3b98",function(e,a){"use strict";Object.defineProperty(a,"__esMo
;/*!src/renderers/Date.tsx*/
amis.define("29e1f6a",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.TimeFieldRenderer=t.DateTimeFieldRenderer=t.DateFieldRenderer=t.DateField=void 0;var a=e("node_modules/tslib/tslib"),r=a.__importDefault(e("node_modules/react/index")),n=e("0f9ebdf"),s=a.__importDefault(e("node_modules/moment/moment")),o=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={random:0},t}return a.__extends(t,e),t.prototype.componentDidMount=function(){var e=this,t=this.props,a=t.fromNow,r=t.updateFrequency;a&&r&&(this.refreshInterval=setInterval(function(){e.setState({random:Math.random()})},r))},t.prototype.componentWillUnmount=function(){clearInterval(this.refreshInterval)},t.prototype.render=function(){var e=this.props,t=e.value,a=e.valueFormat,n=e.format,o=e.placeholder,l=e.fromNow,d=e.className,i=e.classnames,u=e.translate,m=r.default.createElement("span",{className:"text-muted"},o);if(t){var f=s.default(t,s.default.ISO_8601),p=s.default(t,a);m=f.isValid()?f.format(n):p.isValid()?p.format(n):!1}return l&&(m=s.default(m).fromNow()),m=m?m:r.default.createElement("span",{className:"text-danger"},u("日期无效")),r.default.createElement("span",{className:i("DateField",d)},m)},t.defaultProps={placeholder:"-",format:"YYYY-MM-DD",valueFormat:"X",fromNow:!1,updateFrequency:6e4},t}(r.default.Component);t.DateField=o;var l=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return a.__extends(t,e),t.defaultProps=a.__assign(a.__assign({},o.defaultProps),{format:"YYYY-MM-DD"}),t=a.__decorate([n.Renderer({test:/(^|\/)date$/,name:"date-field"})],t)}(o);t.DateFieldRenderer=l;var d=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return a.__extends(t,e),t.defaultProps=a.__assign(a.__assign({},o.defaultProps),{format:"YYYY-MM-DD HH:mm:ss"}),t=a.__decorate([n.Renderer({test:/(^|\/)datetime$/,name:"datetime-field"})],t)}(o);t.DateTimeFieldRenderer=d;var i=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return a.__extends(t,e),t.defaultProps=a.__assign(a.__assign({},o.defaultProps),{format:"HH:mm"}),t=a.__decorate([n.Renderer({test:/(^|\/)time$/,name:"time-field"})],t)}(o);t.TimeFieldRenderer=i});
;/*!src/renderers/Dialog.tsx*/
-amis.define("e299c64",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DialogRenderer=void 0;var o=e("node_modules/tslib/tslib"),n=o.__importDefault(e("node_modules/react/index")),a=e("919cbd9"),r=e("0f9ebdf"),i=e("6a2dbb7"),s=o.__importDefault(e("628f736")),l=o.__importDefault(e("node_modules/lodash/findLast")),d=e("9a80175"),c=e("node_modules/mobx/lib/index"),p=e("b7bbd16"),h=e("4550477"),u=e("node_modules/react-dom/index"),f=e("1953fc1"),m=function(e){function t(t){var o=e.call(this,t)||this;return o.isDead=!1,o.$$id=d.guid(),o.state={entered:!!o.props.show},o.handleSelfClose=o.handleSelfClose.bind(o),o.handleAction=o.handleAction.bind(o),o.handleDialogConfirm=o.handleDialogConfirm.bind(o),o.handleDialogClose=o.handleDialogClose.bind(o),o.handleDrawerConfirm=o.handleDrawerConfirm.bind(o),o.handleDrawerClose=o.handleDrawerClose.bind(o),o.handleEntered=o.handleEntered.bind(o),o.handleExited=o.handleExited.bind(o),o.handleFormInit=o.handleFormInit.bind(o),o.handleFormSaved=o.handleFormSaved.bind(o),o.handleFormChange=o.handleFormChange.bind(o),o.handleChildFinished=o.handleChildFinished.bind(o),o}return o.__extends(t,e),t.prototype.componentWillMount=function(){var e=this,t=this.props.store;this.reaction=c.reaction(function(){return""+t.loading+t.error},function(){return e.forceUpdate()})},t.prototype.componentWillUnmount=function(){this.reaction&&this.reaction(),this.isDead=!0},t.prototype.buildActions=function(){var e=this.props,t=e.actions,o=e.confirm,n=e.translate;if("undefined"!=typeof t)return t;var a=[];return a.push({type:"button",actionType:"cancel",label:n("取消")}),o&&a.push({type:"button",actionType:"confirm",label:n("确认"),primary:!0}),a},t.prototype.handleSelfClose=function(){var e=this.props,t=e.onClose,o=e.store;o.updateMessage(),t()},t.prototype.handleAction=function(e,t,o){var n=this.props,a=n.store,r=n.onAction;"reset"===t.type?a.reset():"cancel"===t.actionType?this.handleSelfClose():r&&r(e,t,o)},t.prototype.handleDialogConfirm=function(e,t){for(var n=[],a=2;a