diff --git a/docs/guide/scenes/login-register.zh-CN.md b/docs/guide/scenes/login-register.zh-CN.md
new file mode 100644
index 00000000000..19c2f25c1c5
--- /dev/null
+++ b/docs/guide/scenes/login-register.zh-CN.md
@@ -0,0 +1,1729 @@
+# 登陆注册
+
+## 登陆
+
+#### Markup Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
+import { Tabs, Card } from 'antd'
+import * as ICONS from '@ant-design/icons'
+import { VerifyCode } from './VerifyCode'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const normalForm = createForm({
+ validateFirst: true,
+})
+
+const phoneForm = createForm({
+ validateFirst: true,
+})
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ Password,
+ VerifyCode,
+ },
+ scope: {
+ icon(name) {
+ return React.createElement(ICONS[name])
+ },
+ },
+})
+
+export default () => {
+ return (
+
+ )
+}
+```
+
+#### JSON Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
+import { Tabs, Card } from 'antd'
+import * as ICONS from '@ant-design/icons'
+import { VerifyCode } from './VerifyCode'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const normalForm = createForm({
+ validateFirst: true,
+})
+
+const phoneForm = createForm({
+ validateFirst: true,
+})
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ Password,
+ VerifyCode,
+ },
+ scope: {
+ icon(name) {
+ return React.createElement(ICONS[name])
+ },
+ },
+})
+
+const normalSchema = {
+ type: 'object',
+ properties: {
+ username: {
+ type: 'string',
+ title: '用户名',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-component-props': {
+ prefix: "{{icon('UserOutlined')}}",
+ },
+ },
+ password: {
+ type: 'string',
+ title: '密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ 'x-component-props': {
+ prefix: "{{icon('LockOutlined')}}",
+ },
+ },
+ },
+}
+
+const phoneSchema = {
+ type: 'object',
+ properties: {
+ phone: {
+ type: 'string',
+ title: '手机号',
+ required: true,
+ 'x-validator': 'phone',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-component-props': {
+ prefix: "{{icon('PhoneOutlined')}}",
+ },
+ },
+ verifyCode: {
+ type: 'string',
+ title: '验证码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'VerifyCode',
+ 'x-component-props': {
+ prefix: "{{icon('LockOutlined')}}",
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.phone#value', '.phone#valid'],
+ fulfill: {
+ state: {
+ 'component[1].readyPost': '{{$deps[0] && $deps[1]}}',
+ 'component[1].phoneNumber': '{{$deps[0]}}',
+ },
+ },
+ },
+ ],
+ },
+ },
+}
+
+export default () => {
+ return (
+
+ )
+}
+```
+
+#### 纯 JSX 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { Field } from '@formily/react'
+import { Form, FormItem, Input, Password, Submit } from '@formily/antd'
+import { Tabs, Card } from 'antd'
+import { UserOutlined, LockOutlined, PhoneOutlined } from '@ant-design/icons'
+import { VerifyCode } from './VerifyCode'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const normalForm = createForm({
+ validateFirst: true,
+})
+
+const phoneForm = createForm({
+ validateFirst: true,
+})
+
+export default () => {
+ return (
+
+ )
+}
+```
+
+## 新用户注册
+
+#### Markup Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ FormLayout,
+ Input,
+ Select,
+ Password,
+ Cascader,
+ DatePicker,
+ Submit,
+ Space,
+ FormGrid,
+ Upload,
+ ArrayItems,
+ Editable,
+ FormButtonGroup,
+} from '@formily/antd'
+import { action } from '@formily/reactive'
+import { Card, Button } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+const IDUpload = (props) => {
+ return (
+
+ }>上传复印件
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ FormGrid,
+ FormLayout,
+ Input,
+ DatePicker,
+ Cascader,
+ Select,
+ Password,
+ IDUpload,
+ Space,
+ ArrayItems,
+ Editable,
+ },
+ scope: {
+ fetchAddress: (field) => {
+ const transform = (data = {}) => {
+ return Object.entries(data).reduce((buf, [key, value]) => {
+ if (typeof value === 'string')
+ return buf.concat({
+ label: value,
+ value: key,
+ })
+ const { name, code, cities, districts } = value
+ const _cities = transform(cities)
+ const _districts = transform(districts)
+ return buf.concat({
+ label: name,
+ value: code,
+ children: _cities.length
+ ? _cities
+ : _districts.length
+ ? _districts
+ : undefined,
+ })
+ }, [])
+ }
+
+ field.loading = true
+ fetch('//unpkg.com/china-location/dist/location.json')
+ .then((res) => res.json())
+ .then(
+ action((data) => {
+ field.dataSource = transform(data)
+ field.loading = false
+ })
+ )
+ },
+ },
+})
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+#### JSON Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ FormLayout,
+ Input,
+ Select,
+ Password,
+ Cascader,
+ DatePicker,
+ Submit,
+ Space,
+ FormGrid,
+ Upload,
+ ArrayItems,
+ Editable,
+ FormButtonGroup,
+} from '@formily/antd'
+import { action } from '@formily/reactive'
+import { Card, Button } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+const IDUpload = (props) => {
+ return (
+
+ }>上传复印件
+
+ )
+}
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ FormGrid,
+ FormLayout,
+ Input,
+ DatePicker,
+ Cascader,
+ Select,
+ Password,
+ IDUpload,
+ Space,
+ ArrayItems,
+ Editable,
+ },
+ scope: {
+ fetchAddress: (field) => {
+ const transform = (data = {}) => {
+ return Object.entries(data).reduce((buf, [key, value]) => {
+ if (typeof value === 'string')
+ return buf.concat({
+ label: value,
+ value: key,
+ })
+ const { name, code, cities, districts } = value
+ const _cities = transform(cities)
+ const _districts = transform(districts)
+ return buf.concat({
+ label: name,
+ value: code,
+ children: _cities.length
+ ? _cities
+ : _districts.length
+ ? _districts
+ : undefined,
+ })
+ }, [])
+ }
+
+ field.loading = true
+ fetch('//unpkg.com/china-location/dist/location.json')
+ .then((res) => res.json())
+ .then(
+ action((data) => {
+ field.dataSource = transform(data)
+ field.loading = false
+ })
+ )
+ },
+ },
+})
+
+const schema = {
+ type: 'object',
+ properties: {
+ username: {
+ type: 'string',
+ title: '用户名',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ password: {
+ type: 'string',
+ title: '密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ 'x-component-props': {
+ checkStrength: true,
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.confirm_password'],
+ fulfill: {
+ state: {
+ errors:
+ '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
+ },
+ },
+ },
+ ],
+ },
+ confirm_password: {
+ type: 'string',
+ title: '确认密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ 'x-component-props': {
+ checkStrength: true,
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.password'],
+ fulfill: {
+ state: {
+ errors:
+ '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
+ },
+ },
+ },
+ ],
+ },
+ name: {
+ type: 'void',
+ title: '姓名',
+ 'x-decorator': 'FormItem',
+ 'x-decorator-props': {
+ asterisk: true,
+ feedbackLayout: 'none',
+ },
+ 'x-component': 'FormGrid',
+ properties: {
+ firstName: {
+ type: 'string',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-component-props': {
+ placeholder: '姓',
+ },
+ },
+ lastName: {
+ type: 'string',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-component-props': {
+ placeholder: '名',
+ },
+ },
+ },
+ },
+ email: {
+ type: 'string',
+ title: '邮箱',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-validator': 'email',
+ },
+ gender: {
+ type: 'string',
+ title: '性别',
+ enum: [
+ {
+ label: '男',
+ value: 1,
+ },
+ {
+ label: '女',
+ value: 2,
+ },
+ {
+ label: '第三性别',
+ value: 3,
+ },
+ ],
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Select',
+ },
+ birthday: {
+ type: 'string',
+ required: true,
+ title: '生日',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'DatePicker',
+ },
+ address: {
+ type: 'string',
+ required: true,
+ title: '地址',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Cascader',
+ 'x-reactions': '{{fetchAddress}}',
+ },
+ idCard: {
+ type: 'string',
+ required: true,
+ title: '身份证复印件',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'IDUpload',
+ },
+ contacts: {
+ type: 'array',
+ required: true,
+ title: '联系人信息',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ArrayItems',
+ items: {
+ type: 'object',
+ 'x-component': 'ArrayItems.Item',
+ properties: {
+ sort: {
+ type: 'void',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ArrayItems.SortHandle',
+ },
+ popover: {
+ type: 'void',
+ title: '完善联系人信息',
+ 'x-decorator': 'Editable.Popover',
+ 'x-component': 'FormLayout',
+ 'x-component-props': {
+ layout: 'vertical',
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.popover.name'],
+ fulfill: {
+ schema: {
+ title: '{{$deps[0]}}',
+ },
+ },
+ },
+ ],
+ properties: {
+ name: {
+ type: 'string',
+ title: '姓名',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-component-props': {
+ style: {
+ width: 300,
+ },
+ },
+ },
+ email: {
+ type: 'string',
+ title: '邮箱',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-validator': [{ required: true }, 'email'],
+ 'x-component-props': {
+ style: {
+ width: 300,
+ },
+ },
+ },
+ phone: {
+ type: 'string',
+ title: '手机号',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ 'x-validator': [{ required: true }, 'phone'],
+ 'x-component-props': {
+ style: {
+ width: 300,
+ },
+ },
+ },
+ },
+ },
+ remove: {
+ type: 'void',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'ArrayItems.Remove',
+ },
+ },
+ },
+ properties: {
+ addition: {
+ type: 'void',
+ title: '新增联系人',
+ 'x-component': 'ArrayItems.Addition',
+ },
+ },
+ },
+ },
+}
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+#### 纯 JSX 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { Field, VoidField } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ Input,
+ Select,
+ Password,
+ Cascader,
+ DatePicker,
+ Submit,
+ FormGrid,
+ Upload,
+ FormButtonGroup,
+} from '@formily/antd'
+import { action } from '@formily/reactive'
+import { Card, Button } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import 'antd/lib/tabs/style'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+const IDUpload = (props) => {
+ return (
+
+ }>上传复印件
+
+ )
+}
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+## 忘记密码
+
+#### Markup Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ Input,
+ Password,
+ Submit,
+ FormButtonGroup,
+} from '@formily/antd'
+import { Card } from 'antd'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ Password,
+ },
+})
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+#### JSON Schema 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { createSchemaField } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ Input,
+ Password,
+ Submit,
+ FormButtonGroup,
+} from '@formily/antd'
+import { Card } from 'antd'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+const SchemaField = createSchemaField({
+ components: {
+ FormItem,
+ Input,
+ Password,
+ },
+})
+
+const schema = {
+ type: 'object',
+ properties: {
+ username: {
+ type: 'string',
+ title: '用户名',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ email: {
+ type: 'string',
+ title: '邮箱',
+ required: true,
+ 'x-validator': 'email',
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Input',
+ },
+ oldPassword: {
+ type: 'string',
+ title: '原始密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ },
+ password: {
+ type: 'string',
+ title: '新密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ 'x-component-props': {
+ checkStrength: true,
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.confirm_password'],
+ fulfill: {
+ state: {
+ errors:
+ '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
+ },
+ },
+ },
+ ],
+ },
+ confirm_password: {
+ type: 'string',
+ title: '确认密码',
+ required: true,
+ 'x-decorator': 'FormItem',
+ 'x-component': 'Password',
+ 'x-component-props': {
+ checkStrength: true,
+ },
+ 'x-reactions': [
+ {
+ dependencies: ['.password'],
+ fulfill: {
+ state: {
+ errors:
+ '{{$deps[0] && $self.value && $self.value !== $deps[0] ? "确认密码不匹配" : ""}}',
+ },
+ },
+ },
+ ],
+ },
+ },
+}
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
+
+#### 纯 JSX 案例
+
+```tsx
+import React from 'react'
+import { createForm } from '@formily/core'
+import { Field } from '@formily/react'
+import {
+ Form,
+ FormItem,
+ Input,
+ Password,
+ Submit,
+ FormButtonGroup,
+} from '@formily/antd'
+import { Card } from 'antd'
+import 'antd/lib/button/style'
+
+const form = createForm({
+ validateFirst: true,
+})
+
+export default () => {
+ return (
+
+
+
+
+
+ )
+}
+```
diff --git a/docs/guide/scenes/more.md b/docs/guide/scenes/more.md
index 6161bbbfcff..140b6b2d1ae 100644
--- a/docs/guide/scenes/more.md
+++ b/docs/guide/scenes/more.md
@@ -1,5 +1,6 @@
-# 更多场景
+# More Scenes
-因为Formily在表单层面上是一个非常完备的方案，而且还很灵活，支持的场景非常多，但是场景案例，我们无法一一列举。
+Because Formily is a very complete solution at the form level, and it is also very flexible. It supports a lot of scenarios, but we can't list them all.
+
+Therefore, I still hope that the community can help Formily improve more scenarios! We would be very grateful!😀
-所以，还是希望社区能帮助Formily完善更多场景案例！我们会不胜感激！😀
\ No newline at end of file
diff --git a/docs/guide/scenes/more.zh-CN.md b/docs/guide/scenes/more.zh-CN.md
new file mode 100644
index 00000000000..6161bbbfcff
--- /dev/null
+++ b/docs/guide/scenes/more.zh-CN.md
@@ -0,0 +1,5 @@
+# 更多场景
+
+因为Formily在表单层面上是一个非常完备的方案，而且还很灵活，支持的场景非常多，但是场景案例，我们无法一一列举。
+
+所以，还是希望社区能帮助Formily完善更多场景案例！我们会不胜感激！😀
\ No newline at end of file
diff --git a/docs/guide/scenes/query-list.md b/docs/guide/scenes/query-list.md
index f6254b9bc38..326d7ca9cda 100644
--- a/docs/guide/scenes/query-list.md
+++ b/docs/guide/scenes/query-list.md
@@ -1,9 +1,11 @@
-# 查询列表
+# Query List
-查询列表目前formily对应的解决方案是阿里巴巴统一列表组件 [AList](https://alist.wiki)，具体参考AList写法
+The current query list solution corresponding to formily is [AList](https://alist.wiki), the unified list component of Alibaba.
+Specific reference to AList writing.
-在1.x中，我们提供了useFormTableQuery的React Hook给用户使用，但是发现，该Hook
-- 在简单场景，其实使用 [ahooks](https://ahooks.js.org/)中的useTable就能解决问题
-- 复杂场景，useFormTableQuery的抽象度又并不高，还是会导致很多样板代码，相反 [AList](https://alist.wiki) 在复杂场景的表现则很优秀
+In 1.x, we provided the React Hook of useFormTableQuery for users to use, but found that the Hook
+- In simple scenarios, the useTable in [ahooks](https://ahooks.js.org/) can actually solve the problem
+- In complex scenarios, the abstraction of useFormTableQuery is not high, and it will still lead to a lot of boilerplate code. On the contrary, [AList](https://alist.wiki) performs well in complex scenarios.
+
+So, let the professional project solve the professional field. Formily's positioning is always the form.
-所以，专业的领域就让专业的项目去解决吧，Formily的定位始终还是表单
\ No newline at end of file
diff --git a/docs/guide/scenes/query-list.zh-CN.md b/docs/guide/scenes/query-list.zh-CN.md
new file mode 100644
index 00000000000..f6254b9bc38
--- /dev/null
+++ b/docs/guide/scenes/query-list.zh-CN.md
@@ -0,0 +1,9 @@
+# 查询列表
+
+查询列表目前formily对应的解决方案是阿里巴巴统一列表组件 [AList](https://alist.wiki)，具体参考AList写法
+
+在1.x中，我们提供了useFormTableQuery的React Hook给用户使用，但是发现，该Hook
+- 在简单场景，其实使用 [ahooks](https://ahooks.js.org/)中的useTable就能解决问题
+- 复杂场景，useFormTableQuery的抽象度又并不高，还是会导致很多样板代码，相反 [AList](https://alist.wiki) 在复杂场景的表现则很优秀
+
+所以，专业的领域就让专业的项目去解决吧，Formily的定位始终还是表单
\ No newline at end of file
diff --git a/docs/guide/scenes/step-form.md b/docs/guide/scenes/step-form.md
index 3c87a186a9a..49ec8239555 100644
--- a/docs/guide/scenes/step-form.md
+++ b/docs/guide/scenes/step-form.md
@@ -1,3 +1,4 @@
-# 分步表单
+# Step-by-Step Form
+
+Mainly use the [FormStep](https://antd.formilyjs.org/components/form-step) component in [@formily/antd](https://antd.formilyjs.org) or [@formily/next](ttps://next.formilyjs.org)
-主要使用[@formily/antd](https://antd.formilyjs.org) 或 [@formily/next](https://next.formilyjs.org) 中的[FormStep](https://antd.formilyjs.org/components/form-step)组件
\ No newline at end of file
diff --git a/docs/guide/scenes/step-form.zh-CN.md b/docs/guide/scenes/step-form.zh-CN.md
new file mode 100644
index 00000000000..3c87a186a9a
--- /dev/null
+++ b/docs/guide/scenes/step-form.zh-CN.md
@@ -0,0 +1,3 @@
+# 分步表单
+
+主要使用[@formily/antd](https://antd.formilyjs.org) 或 [@formily/next](https://next.formilyjs.org) 中的[FormStep](https://antd.formilyjs.org/components/form-step)组件
\ No newline at end of file
diff --git a/docs/guide/scenes/tab-form.md b/docs/guide/scenes/tab-form.md
index 4b43442fd59..a39b9b6039a 100644
--- a/docs/guide/scenes/tab-form.md
+++ b/docs/guide/scenes/tab-form.md
@@ -1,3 +1,4 @@
-# 选项卡/手风琴表单
+# Tab/Accordion Form
+
+Mainly use the [FormTab](https://antd.formilyjs.org/components/form-tab) component and [FormCollapse](https://antd.formilyjs.org/components/form-collapse) component in [@formily/antd](https://antd.formilyjs.org) or [@formily/next](https://next.formilyjs.org)
-主要使用[@formily/antd](https://antd.formilyjs.org) 或 [@formily/next](https://next.formilyjs.org) 中的[FormTab](https://antd.formilyjs.org/components/form-tab)组件 与 [FormCollapse](https://antd.formilyjs.org/components/form-collapse)组件
diff --git a/docs/guide/scenes/tab-form.zh-CN.md b/docs/guide/scenes/tab-form.zh-CN.md
new file mode 100644
index 00000000000..4b43442fd59
--- /dev/null
+++ b/docs/guide/scenes/tab-form.zh-CN.md
@@ -0,0 +1,3 @@
+# 选项卡/手风琴表单
+
+主要使用[@formily/antd](https://antd.formilyjs.org) 或 [@formily/next](https://next.formilyjs.org) 中的[FormTab](https://antd.formilyjs.org/components/form-tab)组件 与 [FormCollapse](https://antd.formilyjs.org/components/form-collapse)组件
diff --git a/docs/guide/upgrade.md b/docs/guide/upgrade.md
index 416f30ca0c3..41fbbb863e8 100644
--- a/docs/guide/upgrade.md
+++ b/docs/guide/upgrade.md
@@ -1,238 +1,233 @@
-# V2 升级指南
+# V2 Upgrade Guide
-这里着重提一下，Formily2 相比于 Formily1.x，差别非常大，存在大量 Break Change。
+It is important to mention here that Formily2 is very different from Formily1.x, and there are a lot of Break Changes.
-所以对老用户而言，基本上是需要重新学习的，V1 和 V2 是无法做到平滑升级的。
+Therefore, for old users, they basically need to learn again, and V1 and V2 cannot be upgraded smoothly.
-但是 Formily2 的项目初衷就是为了降低大家的学习成本，因为老用户本身已经对 Formily 的核心思想有过一定的了解，为了帮助老用户更快速的学习 Formily2，本文会列举出 V1 和 V2 的核心差异点，并不会列举新增的能力。
+But the original intention of the Formily2 project is to reduce everyone's learning costs, because the old users themselves have a certain understanding of Formily's core ideas. In order to help old users learn Formily2 more quickly, this article will list the core differences between V1 and V2. , and will not list the new capabilities.
-## 内核差异
+## Kernel Difference
-> 这里主要指@formily/core 的差异
+> This mainly refers to the difference between @formily/core
-因为 Formily1.x 用户在使用内核 API 的时候，主要是使用 setFieldState/setFormState 与 getFieldState/getFormState，在 V2 中保留了这些 API，但是内部的模型属性是有语义上的差别的，差别如下：
+Because Formily1.x users mainly use setFieldState/setFormState and getFieldState/getFormState when using the core APIs, these APIs are retained in V2, but the internal model properties are semantically different. The differences are as follows:
**modified**
-- V1: 代表字段是否已改动，其实并没有任何用处，因为字段初始化就代表已改动
-- V2: 代表字段是否被手动修改，也就是组件触发 onChange 事件的时候才会设置为 true
+- V1: Represent whether the field has been changed, in fact, it is of no use, because the initialization of the field means that it has been changed.
+- V2: Indicates whether the field is manually modified, that is, it will be set to true when the component triggers the onChange event.
**inputed**
-- V1: 代表字段是否被手动修改
-- V2: 移除，统一使用 modified
+- V1: Represent Whether the field has been manually modified
+- V2: Remove, use modified uniformly
**pristine**
-- V1: 代表字段 value 是否等于 initialValue
-- V2: 移除，用户手动判断，该属性会导致大量脏检查
+- V1:Represent whether the field value is equal to initialValue
+- V2: Remove, user manual judgment, this attribute will cause a lot of dirty checks
**display**
-- V1: 代表字段是否显示，如果为 false，不会移除字段值
-- V2: 代表字段展示模式，值为`"none" | "visible" | "hidden"`
+- V1: Represent whether the field is displayed, if it is false, the field value will not be removed
+- V2: Represent the field display mode, the value is `"none" | "visible" | "hidden"`
**touched**
-- V1: 冗余字段
-- V2: 移除
+- V1: Redundant field
+- V2: Remove
**validating**
-- V1: 代表字段是否正在校验
-- V2: 移除，统一使用 validateStatus
+- V1: Whether the representative field is being verified
+- V2: Remove, use validateStatus uniformly
**effectErrors/effectWarnings**
-- V1: 代表用户手动操作的 errors 和 warnings
-- V2: 移除，统一使用 feedbacks
+- V1: Errors and warnings that represent the manual operation of the user
+- V2: Remove, use feedbacks uniformly
**ruleErrors/ruleWarnings**
-- V1: 代表校验器校验操作的 errors 与 warnings
-- V2: 移除，统一使用 feedbacks
+- V1: Errors and warnings representing the verification operation of the validator
+- V2: Remove, use feedbacks uniformly
**values**
-- V1: 代表 onChange 事件返回的所有参数
-- V2: 移除，统一使用 inputValues
+- V1: Represent all the parameters returned by the onChange event
+- V2: Remove, use inputValues uniformly
**rules**
-- V1:代表校验规则
-- V2:移除，统一使用 validator，因为 rules 的字面意思是规则，但是规则的含义很大，不局限于校验规则
+- V1: Represent verification rules
+- V2: Remove, use validator uniformly, because rules literally means rules, but the meaning of rules is very big, not limited to verification rules
**props**
-- V1:代表组件的扩展属性，定位很不清晰，在纯 JSX 场景是代表组件属性与 FormItem 属性的集合，在 Schema 场景又是代表 Schema 字段的属性
-- V2: 移除，统一使用 decorator 和 component
+- V1: Represent the extended attributes of the component, and the positioning is very unclear. In the pure JSX scenario, it represents the collection of component attributes and FormItem attributes. In the Schema scenario, it represents the attributes of the Schema field.
+- V2: Remove, use decorator and component uniformly
**VirtualField**
-- V1: 代表虚拟字段
-- V2: 改名，统一使用[VoidField](https://core.formilyjs.org/api/models/void-field)
+- V1: Represents a virtual field
+- V2: Renamed and use [VoidField](https://core.formilyjs.org/api/models/void-field) uniformly
-**unmount行为**
+## Bridge layer differences
-- V1: 字段unmount，字段值默认会被删除
-- V2: 移除，这个默认行为太隐晦，如果要删值，可以直接修改value，同时自动删值的行为只有字段display为none时才会自动删值
-
-## 桥接层差异
-
-> 这里主要指@formily/react 和@formily/react-schema-renderer 的差异
+> This mainly refers to the difference between @formily/react and @formily/react-schema-renderer.
**createFormActions/createAsyncFormActions**
-- V1 创建一个 Form 操作器，可以调用 setFieldState/setFormState 方法
-- V2 移除，统一使用@formily/core 中的[createForm](https://core.formilyjs.org/api/entry/create-form)创建出来的 Form 实例操作状态
+- V1 Create a Form operator, you can call the setFieldState/setFormState method.
+- V2 is removed, and the operation status of the Form instance created by [createForm](https://core.formilyjs.org/api/entry/create-form) in @formily/core is used uniformly.
**Form**
-- V1 内部会创建 Form 实例，可以受控传递 values/initialValues 属性等
-- V2 移除，统一使用[FormProvider](https://react.formilyjs.org/api/components/form-provider)
+- V1 will create a Form instance inside, which can control the transfer of values/initialValues attributes, etc.
+- V2 removed, unified use of [FormProvider](https://react.formilyjs.org/api/components/form-provider)
**SchemaForm**
-- V1 内部会解析 json-schema 协议，同时会创建 Form 实例，支持受控模式，并渲染
-- V2 移除，统一使用[createSchemaField](https://react.formilyjs.org/api/components/schema-field)创建出来的 SchemaField 组件，且不支持受控模式
+- V1 will parse the json-schema protocol internally, create a Form instance, support controlled mode, and render it.
+- V2 is removed, the SchemaField component created by [createSchemaField](https://react.formilyjs.org/api/components/schema-field) is used uniformly, and the controlled mode is not supported.
**Field**
-- V1 支持受控模式，需要使用 render props 进行组件状态映射
-- V2 不支持受控模式，传入 decorator/component 属性即可快速实现状态映射
+- V1 supports controlled mode, which requires the use of render props for component state mapping.
+- V2 does not support controlled mode, you can quickly implement state mapping by passing in the decorator/component property.
**VirtualField**
-- V1 支持受控模式，需要使用 render props 进行组件状态映射
-- V2 不支持受控模式，改名[VoidField](https://react.formilyjs.org/api/components/void-field)，传入 decorator/component 属性即可快速实现状态映射
+- V1 supports controlled mode, which requires the use of render props for component state mapping.
+- V2 does not support controlled mode, renamed [VoidField](https://react.formilyjs.org/api/components/void-field), and passed in the decorator/component property to quickly implement state mapping.
**FieldList**
-- V1 代表自增字段控制组件
-- V2 改名为[ArrayField](https://react.formilyjs.org/api/components/array-field)
+- V1 Represent auto-incremented field control component
+- V2 Renamed to [ArrayField](https://react.formilyjs.org/api/components/array-field)
**FormSpy**
-- V1 监听所有生命周期触发，并重新渲染
-- V2 移除，统一使用[FormConsumer](https://react.formilyjs.org/api/components/form-consumer)
+- V1 Monitor all life cycle triggers and re-render
+- V2 Remove and use [FormConsumer](https://react.formilyjs.org/api/components/form-consumer)
**SchemaMarkupField**
-- V1 代表 Schema 描述标签组件
-- V2 移除，统一使用[createSchemaField](https://react.formilyjs.org/api/components/schema-field)工厂函数创建出来的描述标签组件
+- V1 Stands for Schema description label component
+- V2 Remove, unified use the description label component created by the [createSchemaField](https://react.formilyjs.org/api/components/schema-field)
**useFormQuery**
-- V1 用于实现表单查询的快捷 Hook，支持中间件机制
-- V2 暂时移除
+- V1 Fast Hook for realizing form query, supporting middleware mechanism
+- V2 Temporarily remove
**useForm**
-- V1 代表创建 Form 实例
-- V2 代表消费上下文中的 Form 实例，如果要创建，请使用[createForm](https://react.formilyjs.org/api/entry/create-form)
+- V1 Represents the creation of a Form instance
+- V2 Represents the Form instance in the consumption context, if you want to create it, please use [createForm](https://react.formilyjs.org/api/entry/create-form)
**useField**
-- V1 代表创建 Field 实例
-- V2 代表消费上下文中的 Field 实例，如果要创建，请调用[form.createField](https://core.formilyjs.org/api/models/form#createfield)
+- V1 Represents the creation of a Field instance
+- V2 Represents the Field instance in the consumption context, if you want to create it, please call [form.createField](https://core.formilyjs.org/api/models/form#createfield)
**useVirtualField**
-- V1 代表创建 VirtualField 实例
-- V2 移除，如果要创建，请调用[form.createVoidField](https://core.formilyjs.org/api/models/form#createvoidfield)
+- V1 Represents the creation of a VirtualField instance
+- V2 Remove, if you want to create, please call [form.createVoidField](https://core.formilyjs.org/api/models/form#createvoidfield)
**useFormState**
-- V1 消费上下文中的 Form 状态
-- V2 移除，统一使用[useForm](https://react.formilyjs.org/api/hooks/use-form)
+- V1 Form state in consumption context
+- V2 Remove, use [useForm](https://react.formilyjs.org/api/hooks/use-form) uniformly
**useFieldState**
-- V1 消费上下文中的 Field 状态
-- V2 移除，统一使用[useField](https://react.formilyjs.org/api/hooks/use-field)
+- V1 consume Field status in context
+- V2 Remove, use [useField](https://react.formilyjs.org/api/hooks/use-field)
**useFormSpy**
-- V1 创建生命周期监听器，并触发重新渲染
-- V2 移除
+- V1 Create a lifecycle listener and trigger a re-render
+- V2 Remove
**useSchemaProps**
-- V1 消费上下文中的 SchemaField 的 Props
-- V2 移除，统一使用[useFieldSchema](https://react.formilyjs.org/api/hooks/use-field-schema)
+- V1Cconsume rops of SchemaField in context
+- V2 Remove, use [useFieldSchema](https://react.formilyjs.org/api/hooks/use-field-schema) uniformly
**connect**
-- V1 标准 HOC
-- V2 高阶函数改为 1 阶，属性有巨大变化，具体看[connect 文档](https://react.formilyjs.org/api/shared/connect)
+- V1 Standard HOC
+- V2 The higher-order function is changed to 1st order, and the properties have changed dramatically. See the [connect document](https://react.formilyjs.org/api/shared/connect) for details
**registerFormField/registerVirtaulBox/registerFormComponent/registerFormItemComponent**
-- V1 全局注册组件
-- V2 移除，不再支持全局注册
+- V1 Globally registered components
+- V2 Remove, global registration is no longer supported
**FormEffectHooks**
-- V1 RxJS 生命周期钩子
-- V2 移除，统一从@formily/core 中导出，且不会返回 RxJS Observable 对象
+- V1 RxJS lifecycle hook
+- V2 Remove, export from @formily/core uniformly, and will not return RxJS Observable object
**effects**
-- V1 支持回调函数`$`选择器
-- V2 移除`$`选择器
+- V1 Support callback function`$` selector
+- V2 Remove`$`selector
-## 协议层差异
+## Protocol layer differences
-> 这里主要指 JSON Schema 协议上的差异
+> This mainly refers to the difference in the JSON Schema protocol
**editable**
-- V1 直接在 Schema 描述中，代表字段是否可编辑
-- V2 改名 x-editable
+- V1 is directly in the Schema description, indicating whether the field can be edited
+- V2 Renamed x-editable
**visible**
-- V1 代表字段是否显示
-- V2 改名 x-visible
+- V1 Indicates whether the field is displayed
+- V2 Renamed x-visible
**display**
-- V1 代表字段是否显示，如果为 false，代表不删值的隐藏行为
-- V2 改名 x-display，代表字段展示模式，值为`"none" | "visible" | "hidden"`
+- V1 Represent whether the field is displayed or not, if it is false, it represents the hidden behavior without deleting the value
+- V2 Renamed x-display, which represents the field display mode, and the value is`"none" | "visible" | "hidden"`
**triggerType**
-- V1 代表字段校验时机
-- V2 移除，请使用`x-validator:[{triggerType:"onBlur",validator:()=>...}]`
+- V1 Represent the field verification timing
+- V2 Remove, please use`x-validator:[{triggerType:"onBlur",validator:()=>...}]`
**x-props**
-- V1 代表 FormItem 属性
-- V2 移除，请使用 x-decorator-props
+- V1 Represents the FormItem property
+- V2 Remove, please use x-decorator-props
**x-rules**
-- V1 代表字段校验规则
-- V2 改名 x-validator
+- V1 Represent field verification rules
+- V2 Renamed x-validator
**x-linkages**
-- V1 代表字段联动
-- V2 移除，统一使用 x-reactions
+- V1 Represent field linkage
+- V2 Remove, use x-reactions uniformly
**x-mega-props**
-- V1 代表 MegaLayout 组件的子组件属性
-- V2 移除
+- V1 Represent the sub-component properties of the MegaLayout component
+- V2 Remove
-## 组件库差异
+## Component library differences
-在 Formily1.x 中，我们主要使用@formily/antd 和@formily/antd-components，或者@formily/next 和@formily/next-components，
+In Formily 1.x, we mainly use @formily/antd and @formily/antd-components, or @formily/next and @formily/next-components.
-在 V2 中，我们有以下几个改变：
+In V2, we have the following changes:
-- @formily/antd 与@formily/antd-components 合并成@formily/antd，同时目录结构全部改成纯组件库的目录结构了。
+- @formily/antd and @formily/antd-components were merged into @formily/antd, and the directory structure was changed to that of a pure component library.
-- 不会再导出@formily/react @formily/core 的内部 API
-- 所有组件几乎都做了重写，无法平滑升级
-- 移除 styled-components
+- The internal API of @formily/react @formily/core will no longer be exported.
+- Almost all components have been rewritten and cannot be smoothly upgraded.
+- Remove styled-components.
diff --git a/docs/guide/upgrade.zh-CN.md b/docs/guide/upgrade.zh-CN.md
new file mode 100644
index 00000000000..416f30ca0c3
--- /dev/null
+++ b/docs/guide/upgrade.zh-CN.md
@@ -0,0 +1,238 @@
+# V2 升级指南
+
+这里着重提一下，Formily2 相比于 Formily1.x，差别非常大，存在大量 Break Change。
+
+所以对老用户而言，基本上是需要重新学习的，V1 和 V2 是无法做到平滑升级的。
+
+但是 Formily2 的项目初衷就是为了降低大家的学习成本，因为老用户本身已经对 Formily 的核心思想有过一定的了解，为了帮助老用户更快速的学习 Formily2，本文会列举出 V1 和 V2 的核心差异点，并不会列举新增的能力。
+
+## 内核差异
+
+> 这里主要指@formily/core 的差异
+
+因为 Formily1.x 用户在使用内核 API 的时候，主要是使用 setFieldState/setFormState 与 getFieldState/getFormState，在 V2 中保留了这些 API，但是内部的模型属性是有语义上的差别的，差别如下：
+
+**modified**
+
+- V1: 代表字段是否已改动，其实并没有任何用处，因为字段初始化就代表已改动
+- V2: 代表字段是否被手动修改，也就是组件触发 onChange 事件的时候才会设置为 true
+
+**inputed**
+
+- V1: 代表字段是否被手动修改
+- V2: 移除，统一使用 modified
+
+**pristine**
+
+- V1: 代表字段 value 是否等于 initialValue
+- V2: 移除，用户手动判断，该属性会导致大量脏检查
+
+**display**
+
+- V1: 代表字段是否显示，如果为 false，不会移除字段值
+- V2: 代表字段展示模式，值为`"none" | "visible" | "hidden"`
+
+**touched**
+
+- V1: 冗余字段
+- V2: 移除
+
+**validating**
+
+- V1: 代表字段是否正在校验
+- V2: 移除，统一使用 validateStatus
+
+**effectErrors/effectWarnings**
+
+- V1: 代表用户手动操作的 errors 和 warnings
+- V2: 移除，统一使用 feedbacks
+
+**ruleErrors/ruleWarnings**
+
+- V1: 代表校验器校验操作的 errors 与 warnings
+- V2: 移除，统一使用 feedbacks
+
+**values**
+
+- V1: 代表 onChange 事件返回的所有参数
+- V2: 移除，统一使用 inputValues
+
+**rules**
+
+- V1:代表校验规则
+- V2:移除，统一使用 validator，因为 rules 的字面意思是规则，但是规则的含义很大，不局限于校验规则
+
+**props**
+
+- V1:代表组件的扩展属性，定位很不清晰，在纯 JSX 场景是代表组件属性与 FormItem 属性的集合，在 Schema 场景又是代表 Schema 字段的属性
+- V2: 移除，统一使用 decorator 和 component
+
+**VirtualField**
+
+- V1: 代表虚拟字段
+- V2: 改名，统一使用[VoidField](https://core.formilyjs.org/api/models/void-field)
+
+**unmount行为**
+
+- V1: 字段unmount，字段值默认会被删除
+- V2: 移除，这个默认行为太隐晦，如果要删值，可以直接修改value，同时自动删值的行为只有字段display为none时才会自动删值
+
+## 桥接层差异
+
+> 这里主要指@formily/react 和@formily/react-schema-renderer 的差异
+
+**createFormActions/createAsyncFormActions**
+
+- V1 创建一个 Form 操作器，可以调用 setFieldState/setFormState 方法
+- V2 移除，统一使用@formily/core 中的[createForm](https://core.formilyjs.org/api/entry/create-form)创建出来的 Form 实例操作状态
+
+**Form**
+
+- V1 内部会创建 Form 实例，可以受控传递 values/initialValues 属性等
+- V2 移除，统一使用[FormProvider](https://react.formilyjs.org/api/components/form-provider)
+
+**SchemaForm**
+
+- V1 内部会解析 json-schema 协议，同时会创建 Form 实例，支持受控模式，并渲染
+- V2 移除，统一使用[createSchemaField](https://react.formilyjs.org/api/components/schema-field)创建出来的 SchemaField 组件，且不支持受控模式
+
+**Field**
+
+- V1 支持受控模式，需要使用 render props 进行组件状态映射
+- V2 不支持受控模式，传入 decorator/component 属性即可快速实现状态映射
+
+**VirtualField**
+
+- V1 支持受控模式，需要使用 render props 进行组件状态映射
+- V2 不支持受控模式，改名[VoidField](https://react.formilyjs.org/api/components/void-field)，传入 decorator/component 属性即可快速实现状态映射
+
+**FieldList**
+
+- V1 代表自增字段控制组件
+- V2 改名为[ArrayField](https://react.formilyjs.org/api/components/array-field)
+
+**FormSpy**
+
+- V1 监听所有生命周期触发，并重新渲染
+- V2 移除，统一使用[FormConsumer](https://react.formilyjs.org/api/components/form-consumer)
+
+**SchemaMarkupField**
+
+- V1 代表 Schema 描述标签组件
+- V2 移除，统一使用[createSchemaField](https://react.formilyjs.org/api/components/schema-field)工厂函数创建出来的描述标签组件
+
+**useFormQuery**
+
+- V1 用于实现表单查询的快捷 Hook，支持中间件机制
+- V2 暂时移除
+
+**useForm**
+
+- V1 代表创建 Form 实例
+- V2 代表消费上下文中的 Form 实例，如果要创建，请使用[createForm](https://react.formilyjs.org/api/entry/create-form)
+
+**useField**
+
+- V1 代表创建 Field 实例
+- V2 代表消费上下文中的 Field 实例，如果要创建，请调用[form.createField](https://core.formilyjs.org/api/models/form#createfield)
+
+**useVirtualField**
+
+- V1 代表创建 VirtualField 实例
+- V2 移除，如果要创建，请调用[form.createVoidField](https://core.formilyjs.org/api/models/form#createvoidfield)
+
+**useFormState**
+
+- V1 消费上下文中的 Form 状态
+- V2 移除，统一使用[useForm](https://react.formilyjs.org/api/hooks/use-form)
+
+**useFieldState**
+
+- V1 消费上下文中的 Field 状态
+- V2 移除，统一使用[useField](https://react.formilyjs.org/api/hooks/use-field)
+
+**useFormSpy**
+
+- V1 创建生命周期监听器，并触发重新渲染
+- V2 移除
+
+**useSchemaProps**
+
+- V1 消费上下文中的 SchemaField 的 Props
+- V2 移除，统一使用[useFieldSchema](https://react.formilyjs.org/api/hooks/use-field-schema)
+
+**connect**
+
+- V1 标准 HOC
+- V2 高阶函数改为 1 阶，属性有巨大变化，具体看[connect 文档](https://react.formilyjs.org/api/shared/connect)
+
+**registerFormField/registerVirtaulBox/registerFormComponent/registerFormItemComponent**
+
+- V1 全局注册组件
+- V2 移除，不再支持全局注册
+
+**FormEffectHooks**
+
+- V1 RxJS 生命周期钩子
+- V2 移除，统一从@formily/core 中导出，且不会返回 RxJS Observable 对象
+
+**effects**
+
+- V1 支持回调函数`$`选择器
+- V2 移除`$`选择器
+
+## 协议层差异
+
+> 这里主要指 JSON Schema 协议上的差异
+
+**editable**
+
+- V1 直接在 Schema 描述中，代表字段是否可编辑
+- V2 改名 x-editable
+
+**visible**
+
+- V1 代表字段是否显示
+- V2 改名 x-visible
+
+**display**
+
+- V1 代表字段是否显示，如果为 false，代表不删值的隐藏行为
+- V2 改名 x-display，代表字段展示模式，值为`"none" | "visible" | "hidden"`
+
+**triggerType**
+
+- V1 代表字段校验时机
+- V2 移除，请使用`x-validator:[{triggerType:"onBlur",validator:()=>...}]`
+
+**x-props**
+
+- V1 代表 FormItem 属性
+- V2 移除，请使用 x-decorator-props
+
+**x-rules**
+
+- V1 代表字段校验规则
+- V2 改名 x-validator
+
+**x-linkages**
+
+- V1 代表字段联动
+- V2 移除，统一使用 x-reactions
+
+**x-mega-props**
+
+- V1 代表 MegaLayout 组件的子组件属性
+- V2 移除
+
+## 组件库差异
+
+在 Formily1.x 中，我们主要使用@formily/antd 和@formily/antd-components，或者@formily/next 和@formily/next-components，
+
+在 V2 中，我们有以下几个改变：
+
+- @formily/antd 与@formily/antd-components 合并成@formily/antd，同时目录结构全部改成纯组件库的目录结构了。
+
+- 不会再导出@formily/react @formily/core 的内部 API
+- 所有组件几乎都做了重写，无法平滑升级
+- 移除 styled-components
diff --git a/docs/index.md b/docs/index.md
index 12c2ab037f0..fbff5513ae3 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,26 +1,26 @@
---
-title: Formily - 阿里巴巴统一前端表单解决方案
+title: Formily - Alibaba unified front-end form solution
order: 10
hero:
title: Alibaba Formily
- desc: 阿里巴巴统一前端表单解决方案
+ desc: Alibaba unified front-end form solution
actions:
- - text: 快速开始
+ - text: Quick start
link: /guide
features:
- icon: https://img.alicdn.com/imgextra/i2/O1CN016i72sH1c5wh1kyy9U_!!6000000003550-55-tps-800-800.svg
- title: 更易用
- desc: 开箱即用，案例丰富
+ title: Easier to use
+ desc: Out of the box, rich cases
- icon: https://img.alicdn.com/imgextra/i1/O1CN01bHdrZJ1rEOESvXEi5_!!6000000005599-55-tps-800-800.svg
- title: 更高效
- desc: 傻瓜写法，超高性能
+ title: More efficient
+ desc: Fool writing, ultra-high performance
- icon: https://img.alicdn.com/imgextra/i3/O1CN01xlETZk1G0WSQT6Xii_!!6000000000560-55-tps-800-800.svg
- title: 更专业
- desc: 完备，灵活，优雅
+ title: More Professional
+ desc: Complete, flexible and elegant
footer: Open-source MIT Licensed | Copyright © 2019-present
Powered by self
---
-## 安装依赖
+## Install dependencies
```bash
@@ -36,7 +36,7 @@ $ npm install --save @alifd/next moment
```
-## 安装 Formily
+## Install Formily
```bash
$ npm install --save @formily/core @formily/react @formily/antd
diff --git a/docs/index.zh-CN.md b/docs/index.zh-CN.md
new file mode 100644
index 00000000000..12c2ab037f0
--- /dev/null
+++ b/docs/index.zh-CN.md
@@ -0,0 +1,51 @@
+---
+title: Formily - 阿里巴巴统一前端表单解决方案
+order: 10
+hero:
+ title: Alibaba Formily
+ desc: 阿里巴巴统一前端表单解决方案
+ actions:
+ - text: 快速开始
+ link: /guide
+features:
+ - icon: https://img.alicdn.com/imgextra/i2/O1CN016i72sH1c5wh1kyy9U_!!6000000003550-55-tps-800-800.svg
+ title: 更易用
+ desc: 开箱即用，案例丰富
+ - icon: https://img.alicdn.com/imgextra/i1/O1CN01bHdrZJ1rEOESvXEi5_!!6000000005599-55-tps-800-800.svg
+ title: 更高效
+ desc: 傻瓜写法，超高性能
+ - icon: https://img.alicdn.com/imgextra/i3/O1CN01xlETZk1G0WSQT6Xii_!!6000000000560-55-tps-800-800.svg
+ title: 更专业
+ desc: 完备，灵活，优雅
+footer: Open-source MIT Licensed | Copyright © 2019-present
Powered by self
+---
+
+## 安装依赖
+
+```bash
+
+$ npm install --save antd moment
+
+```
+
+or
+
+```bash
+
+$ npm install --save @alifd/next moment
+
+```
+
+## 安装 Formily
+
+```bash
+$ npm install --save @formily/core @formily/react @formily/antd
+
+```
+
+or
+
+```bash
+$ npm install --save @formily/core @formily/react @formily/next
+
+```
diff --git a/packages/antd/src/array-items/index.tsx b/packages/antd/src/array-items/index.tsx
index 23273057cfb..7925285bf26 100644
--- a/packages/antd/src/array-items/index.tsx
+++ b/packages/antd/src/array-items/index.tsx
@@ -100,7 +100,11 @@ ArrayItems.displayName = 'ArrayItems'
ArrayItems.Item = (props) => {
const prefixCls = usePrefixCls('formily-array-items')
return (
-
+
{}}
+ className={cls(`${prefixCls}-card`, props.className)}
+ >
{props.children}
)
diff --git a/packages/next/src/array-items/index.tsx b/packages/next/src/array-items/index.tsx
index a8f7d1dc39d..856288e8f6c 100644
--- a/packages/next/src/array-items/index.tsx
+++ b/packages/next/src/array-items/index.tsx
@@ -99,7 +99,11 @@ ArrayItems.displayName = 'ArrayItems'
ArrayItems.Item = (props) => {
const prefixCls = usePrefixCls('formily-array-items')
return (
-
+
{}}
+ className={cls(`${prefixCls}-card`, props.className)}
+ >
{props.children}
)