docs(site): add english doc

docs/guide/advanced/async.md

@@ -1,15 +1,16 @@
-# 实现异步数据源
+# Asynchronous Data Sources
 
-异步数据源管理，核心体现在[Field](https://core.formilyjs.org/api/models/field)模型中的 dataSource 属性，我们可以在 effects 中修改 Field 的 dataSource，也可以在 reactions 中修改 dataSource 属性。
+Asynchronous data source management, the core is reflected in the dataSource property of the [Field](https://core.formilyjs.org/api/models/field) model. We can modify the dataSource of the Field in effects, or modify the dataSource property in reactions. 
 
-如果字段组件内部(比如 Select)有消费 dataSource 属性，当 dataSource 发生变化时，对应组件会自动重渲染。
+If the field component (such as Select) has a consumer dataSource property, when the dataSource changes, the corresponding component will automatically re-render.
 
 <Alert>
-注意：如果是业务自定义组件，请手动映射dataSource到自定义组件中，可以使用 <a href="https://react.formilyjs.org/api/shared/connect">connect</a>，也可以使用 <a href="https://react.formilyjs.org/api/shared/observer">observer</a> + <a href="https://react.formilyjs.org/api/hooks/use-field">useField</a>
+Note: If it is a business custom component, please manually map the dataSource to the custom component, you can use  <a href="https://react.formilyjs.org/api/shared/connect">connect</a> or <a href="https://react.formilyjs.org/api/shared/observer">observer</a> + <a href="https://react.formilyjs.org/api/hooks/use-field">useField</a>
 </Alert>
 
-具体案例可以参考：
+Specific cases can refer to: 
 
 - [Select](https://antd.formilyjs.org/components/select)
 - [TreeSelect](https://antd.formilyjs.org/components/tree-select)
 - [Cascader](https://antd.formilyjs.org/components/cascader)
+

docs/guide/advanced/async.zh-CN.md

@@ -0,0 +1,15 @@
+# 实现异步数据源
+
+异步数据源管理，核心体现在[Field](https://core.formilyjs.org/api/models/field)模型中的 dataSource 属性，我们可以在 effects 中修改 Field 的 dataSource，也可以在 reactions 中修改 dataSource 属性。
+
+如果字段组件内部(比如 Select)有消费 dataSource 属性，当 dataSource 发生变化时，对应组件会自动重渲染。
+
+<Alert>
+注意：如果是业务自定义组件，请手动映射dataSource到自定义组件中，可以使用 <a href="https://react.formilyjs.org/api/shared/connect">connect</a>，也可以使用 <a href="https://react.formilyjs.org/api/shared/observer">observer</a> + <a href="https://react.formilyjs.org/api/hooks/use-field">useField</a>
+</Alert>
+
+具体案例可以参考：
+
+- [Select](https://antd.formilyjs.org/components/select)
+- [TreeSelect](https://antd.formilyjs.org/components/tree-select)
+- [Cascader](https://antd.formilyjs.org/components/cascader)

docs/guide/advanced/build.md

@@ -1,40 +1,40 @@
-# 按需打包
+# Pack on Demand
 
-## 基于Umi开发
+## Based on Umi Development
 
-#### 安装 `babel-plugin-import`
+#### Install `babel-plugin-import`
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
-或者
+or
 ```shell
 yarn add babel-plugin-import --dev
 ```
 
-#### 插件配置
-修改 `.umirc.js`或 `.umirc.ts`
+#### Plugin Configuration
+Modify `.umirc.js` or `.umirc.ts`
 
 ```js
 export default {
   extraBabelPlugins: [['babel-plugin-import', {"libraryName": "@formily/antd", "libraryDirectory": "lib"}]],
 };
 ```
 
-## 基于create-react-app开发
+## Based on Create-react-app Development
 
-  首先我们需要对`create-react-app`的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 `create-react-app` 进行自定义配置的社区解决方案）。
-引入 `react-app-rewired` 并修改 `package.json` 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。
+First, we need to customize the default configuration of `create-react-app`, here we use [react-app-rewired](https://github.com/timarney/react-app-rewired) （A community solution for custom configuration of `create-react-app`)
+Introduce `react-app-rewired`  and modify the startup configuration in  `package.json`. Due to the new [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) version, you also need to install [customize-cra](https://github.com/arackaf/customize-cra). 
 
 ```shell
 $ npm install react-app-rewired customize-cra  --save-dev
 ```
-或者
+or
 ```shell
 $ yarn add react-app-rewired customize-cra --dev
 ```
 
-修改 `package.json`
+modify `package.json`
 ```diff
 "scripts": {
 -   "start": "react-scripts start",
@@ -45,25 +45,25 @@ $ yarn add react-app-rewired customize-cra --dev
 +   "test": "react-app-rewired test",
 }
 ```
-然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。
+Then create a  `config-overrides.js` in the project root directory to modify the default configuration. 
 
 ```js
 module.exports = function override(config, env) {
   // do stuff with the webpack config...
   return config;
 };
 ```
-#### 安装 babel-plugin-import
+#### Install babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
-或者
+or
 ```shell
 yarn add babel-plugin-import --dev
 ```
 
-修改`config-overrides.js`
+modify `config-overrides.js`
 
 ```diff
 + const { override, fixBabelImports } = require('customize-cra');
@@ -81,19 +81,19 @@ yarn add babel-plugin-import --dev
 ```
 
 
-## 在Webpack中使用
+## Use in Webpack
 
-#### 安装 babel-plugin-import
+#### Install babel-plugin-import
 
 ```shell
 npm install babel-plugin-import --save-dev
 ```
-或者
+or
 ```shell
 yarn add babel-plugin-import --dev
 ```
 
-修改 `.babelrc` 或者 babel-loader
+Modify `.babelrc` or babel-loader
 
 ```json
 {
@@ -103,4 +103,5 @@ yarn add babel-plugin-import --dev
 }
 ```
 
-更多配置请参考 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+For more configuration, please refer to [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+

docs/guide/advanced/build.zh-CN.md

@@ -0,0 +1,106 @@
+# 按需打包
+
+## 基于Umi开发
+
+#### 安装 `babel-plugin-import`
+
+```shell
+npm install babel-plugin-import --save-dev
+```
+或者
+```shell
+yarn add babel-plugin-import --dev
+```
+
+#### 插件配置
+修改 `.umirc.js`或 `.umirc.ts`
+
+```js
+export default {
+  extraBabelPlugins: [['babel-plugin-import', {"libraryName": "@formily/antd", "libraryDirectory": "lib"}]],
+};
+```
+
+## 基于create-react-app开发
+
+  首先我们需要对`create-react-app`的默认配置进行自定义，这里我们使用 [react-app-rewired](https://github.com/timarney/react-app-rewired) （一个对 `create-react-app` 进行自定义配置的社区解决方案）。
+引入 `react-app-rewired` 并修改 `package.json` 里的启动配置。由于新的 [react-app-rewired@2.x](https://github.com/timarney/react-app-rewired#alternatives) 版本的关系，你还需要安装 [customize-cra](https://github.com/arackaf/customize-cra)。
+
+```shell
+$ npm install react-app-rewired customize-cra  --save-dev
+```
+或者
+```shell
+$ yarn add react-app-rewired customize-cra --dev
+```
+
+修改 `package.json`
+```diff
+"scripts": {
+-   "start": "react-scripts start",
++   "start": "react-app-rewired start",
+-   "build": "react-scripts build",
++   "build": "react-app-rewired build",
+-   "test": "react-scripts test",
++   "test": "react-app-rewired test",
+}
+```
+然后在项目根目录创建一个 `config-overrides.js` 用于修改默认配置。
+
+```js
+module.exports = function override(config, env) {
+  // do stuff with the webpack config...
+  return config;
+};
+```
+#### 安装 babel-plugin-import
+
+```shell
+npm install babel-plugin-import --save-dev
+```
+或者
+```shell
+yarn add babel-plugin-import --dev
+```
+
+修改`config-overrides.js`
+
+```diff
++ const { override, fixBabelImports } = require('customize-cra');
+
+- module.exports = function override(config, env) {
+-   // do stuff with the webpack config...
+-   return config;
+- };
++ module.exports = override(
++   fixBabelImports('import', {
++     libraryName: '@formily/antd',
++     libraryDirectory: 'lib'
++   }),
++ );
+```
+
+
+## 在Webpack中使用
+
+#### 安装 babel-plugin-import
+
+```shell
+npm install babel-plugin-import --save-dev
+```
+或者
+```shell
+yarn add babel-plugin-import --dev
+```
+
+修改 `.babelrc` 或者 babel-loader
+
+```json
+{
+  "plugins": [
+    ["import", { "libraryName": "@formily/antd", "libraryDirectory": "lib"}]
+  ]
+}
+```
+
+更多配置请参考 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)

docs/guide/advanced/business-logic.md

@@ -1,39 +1,40 @@
-# 管理业务逻辑
+# Manage Business Logic
 
-在前面的文档中，我们其实可以发现 Formily 已经提供了局部描述逻辑的能力，也就是字段组件的 x-reactions/reactions 属性，而且在 Schema 中，x-reactions 既能传函数，也能传一个结构化对象，当然，还有 Formily1.x 继承下来的 effects，那么总结一下，在 Formily2.x 中描述逻辑的方式有：
+In the previous document, we can actually find that Formily has provided the ability to describe the logic locally, that is, the x-reactions/reactions property of the field component. And in Schema, x-reactions can pass both functions and a structured object. Of course, there are also effects inherited from Formily 1.x, So to summarize, the ways to describe logic in Formily 2.x are:
 
-- 纯 JSX 模式下的 effects 或 reactions 属性
-- Schema 模式下的 effects 或结构化 x-reactions 属性
-- Schema 模式下的 effects 或函数态 x-reactions 属性
+- Effects or reactions property in pure JSX mode
+- Effects or structured x-reactions property in Schema mode
+- Effects or functional x-reactions property in Schema mode
 
-这么多描述逻辑的方式，我们该如何选择？什么场景下是最佳实践呢？首先，我们要理解清楚 effects 和 reactions 的定位。
+With so many ways of describing logic, how should we choose? What scenarios are best practices? First, we need to understand the positioning of effects and reactions.
 
-首先，reactions 是用在具体字段属性上的响应器，它会基于函数内依赖的数据变化而重复执行，它最大的优点就是简单直接，容易理解，比如：
+First of all, reactions are responders used on specific field properties. They will be executed repeatedly based on the data changes that the function depends on. Its biggest advantage is that it is simple, straightforward and easy to understand, such as:
 
 ```tsx pure
 <Field
   name="A"
   reactions={(field) => {
-    /**具体逻辑实现**/
+    /**specific logic implementation**/
   }}
 />
 ```
 
-然后，effects 是用于实现副作用隔离逻辑管理模型，它最大的优点就是在字段数量超多的场景下，可以让视图代码变得更易维护，同时它还有一个能力，就是可以批量化的对字段做处理。比如我们在 A,B,C 字段属性显示声明 x-reactions，如果这 3 个字段的 x-reactions 逻辑都是一模一样的，那我们在 effects 中只需这么写即可：
+Then, effects are used to implement the side-effect isolation logic management model. Its biggest advantage is that it can make the view code easier to maintain in a scenario with a large number of fields. At the same time, it also has the ability to process fields in batches. For example, we declare x-reactions in the field properties of A, B, C. If the x-reactions logic of these three fields are exactly the same, then we only need to write this in effects:
 
 ```ts
 onFieldReact('*(A,B,C)', (field) => {
-  //...逻辑
+  //...logic
 })
 ```
 
-使用 effects 还有一个好处就是可以实现一系列的可复用逻辑插件，可以做到很方便的逻辑可拔插，同时还能做一些全局监控之类的事情。
+Another advantage of using effects is that a series of reusable logic plug-ins can be implemented, which can be very convenient logic pluggable, and at the same time can do some things like global monitoring.
 
-这样看来，是不是我们就不需要局部定义逻辑了？
+In this way, do we not need to define the logic locally?
 
-并不是，上面的写法的前提是对于字段数量很多，如果视图层满屏的 reactions，看着是很难受的，所以考虑将逻辑抽离统一维护则是一个比较好的策略。相反，如果字段数量很少，逻辑相对简单的，直接在字段属性上写 reactions 也是不错的，清晰明了。
+No, the premise of the above writing is that for a large number of fields, if the view layer is full of reactions, it looks uncomfortable, so it is a better strategy to consider extracting logic from unified maintenance.
+On the contrary, if the number of fields is small and the logic is relatively simple, it is also good to write reactions directly on the field attributes, which is clear. 
 
-同时，因为 JSON Schema 是可以给配置化系统消费的，我们需要在配置界面上对具体某个字段做逻辑配置。所以我们还是需要支持局部定义逻辑能力，同时还需要支持结构化描述逻辑，比如：
+At the same time, because JSON Schema can be consumed by the configuration system, we need to logically configure a specific field on the configuration interface. So we still need to support local definition logic capabilities, and also need to support structured description logic, such as:
 
 ```json
 {
@@ -48,29 +49,29 @@ onFieldReact('*(A,B,C)', (field) => {
 }
 ```
 
-这样可以很好的解决大部分配置场景的联动需求了，但是，还有一种场景，就是我们的联动过程是存在异步的，逻辑非常复杂的，或者存在大量数据处理的，那我们就只能考虑开放函数态描述的能力了，比如：
+This can well solve the linkage requirements of most configuration scenarios. However, there is another scenario, that is, our linkage process is asynchronous, the logic is very complicated, or there is a large amount of data processing, then we can only consider open up the ability to describe functional states, such as:
 
 ```json
 {
-  "x-reactions": "{{(field)=>{/**具体逻辑实现**/}}}"
+  "x-reactions": "{{(field)=>{/**specific logic implementation**/}}}"
 }
 ```
 
-这种就很像是低代码配置了，当然，我们也可以在上下文作用域中注册一系列的通用逻辑函数：
+This is very similar to a low-code configuration. Of course, we can also register a series of general logic functions in the context scope: 
 
 ```json
 {
   "x-reactions": "{{customFunction}}"
 }
 ```
 
-最终总结下来，我们管理业务逻辑的方式，有以下优先级：
+In conclusion, the way we manage business logic has the following priorities:
 
-- 纯源码模式
-  - 字段数量庞大，逻辑复杂，优先选择 effects 中定义逻辑
-  - 字段数量少，逻辑简单，优先选择 reactions 中定义逻辑
-- Schema 模式
-  - 不存在异步逻辑，优先选择结构化 reactions 定义逻辑
-  - 存在异步逻辑，或者大量计算，优先选择函数态 reactions 定义逻辑
+- Pure source mode
+  - The number of fields is huge and the logic is complex, and the logic defined in effects is preferred. 
+  - The number of fields is small, the logic is simple, and the logic defined in reactions is preferred
+- Schema mode
+  - There is no asynchronous logic, structured reactions are preferred to define logic.
+  - There is asynchronous logic, or a large number of calculations, the functional state reactions are preferred to define logic.
 
-对于 effects 中如何玩出花来，我们主要看[@formily/core](https://core.formilyjs.org)文档即可
+For how to play with effects in effects, we mainly look at the [@formily/core](https://core.formilyjs.org) document.