@modern-js/main-doc 2.7.0 → 2.8.0

package/en/guides/topic-detail/micro-frontend/c03-main-app.mdx

@@ -1,45 +1,45 @@
 ---
 sidebar_position: 3
-title: 开发主应用
+title: Develop Main App
 ---
-# 开发主应用
+# Develop Main App
 
-在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
+In the previous [Experience micro frontend](/guides/topic-detail/micro-frontend/c02-development), an example was used to demonstrate how to create and configure micro frontend sub-applications. Through this chapter, you can further understand how to develop the main application, and its common configuration.
 
-在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
+After creating an application project through the `@modern-js/create` command, you can execute `pnpm run new` in the project (the `modern new` command is actually executed). After selecting the 「micro frontend」 mode, the micro frontend will be installed. Dependencies, just register the plugin manually.
 
 import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 <EnableMicroFrontend />
 
-## 注册子应用信息
+## Register Sub-app
 
-当在 `masterApp` 配置上提供了信息后，将会认为该应用为主应用，目前存在两种子应用信息的配置方式，这两种方式分别应用于不同的场景。
+When the information is provided on the `masterApp` configuration, the application will be considered the main application. At present, there are two configuration methods for sub-app information, and these two methods are applied to different scenarios.
 
-### 直接注册子应用信息
+### Register sub-app info directly
 
-可以直接通过配置注册子应用信息：
+You can register the sub-application information directly through the configuration:
 
 :::tip
-可以通过 API [defineConfig](/apis/app/runtime/app/define-config) 在运行时进行配置。
-当参数为函数时无法被序列化到产物代码，所以在涉及到函数之类的配置时请通过 defineConfig 来进行配置
+It can be configured at runtime via the API [defineConfig](/apis/app/runtime/app/define-config).
 
+When the parameter is a function, it cannot be serialized to the product code, so please configure it through defineConfig when it comes to configuration such as functions
 :::
 
 import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
 
 <MicroRuntimeConfig />
 
-### 自定义远程应用列表
+### Custom remote app list
 
-通过该函数可以拉取远程的子应用列表，并将其注册至运行时框架：
+This function allows you to pull a list of remote child applications and register them with the runtime framework:
 
 ```ts title="App.tsx"
 defineConfig(App, {
   masterApp: {
     manifest: {
       getAppList: async () => {
-        // 可以从其他远程接口获取
+        // get from remote api
         return [{
           name: 'Table',
           entry: 'http://localhost:8001',
@@ -55,24 +55,24 @@ defineConfig(App, {
 });
 ```
 
-## 渲染子应用
+## Renderer sub-app
 
-在微前端中分为两种加载子应用的方式：
+There are two ways to load sub-app in micro frontend:
 
-1. **子应用组件** 获取到每个子应用的组件，之后就可以像使用普通的 `React` 组件一样渲染微前端的子应用。
-2. **集中式路由** 通过集中式的路由配置，自动根据当前页面 `pathname` 激活渲染对应的子应用。
+1. **Sub-app component ** Get the components of each sub-app, and then you can render the sub-app of micro frontend just like using ordinary'React 'components.
+2. **Centralized routing** Through centralized routing configuration, the corresponding sub-app of rendering is automatically activated according to the current page `pathname`.
 
-### 子应用组件
+### Sub-app component
 
-开发者使用 `useModuleApps` 方法可以获取到各个子应用的组件。
+Developers can use the `useModuleApps` method to obtain the components of each child application.
 
-再通过 `router` 组件的结合运用，开发者可以自控式的根据不同的路由渲染不同的子应用。
+Through the combined use of the `router` component, developers can autonomously render different sub-applications according to different routes.
 
-假设我们的子应用列表配置如下：
+Suppose our subapp list is configured as follows:
 
 <EnableMicroFrontend />
 
-编辑主应用 `App.tsx` 文件如下：
+`App.tsx` as follow:
 
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
@@ -81,9 +81,9 @@ import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, B
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
-    <div><Link to={'/'}>卸载子应用</Link></div>
+    <div><Link to={'/table'}>load file-based sub-app</Link></div>
+    <div><Link to={'/dashboard'}>load self-controlled sub-app</Link></div>
+    <div><Link to={'/'}>unmount sub-app</Link></div>
     <Outlet />
   </>
 )
@@ -91,13 +91,13 @@ const AppLayout = () => (
 export default () => {
   const { apps, MApp } = useModuleApps();
 
-  // 使用的不是 MApp 组件，需要使用 createBrowserRouter 来创建路由
+  // Instead of using the MApp component, you need to use createBrowserRouter to create the route
   const router = createBrowserRouter(
     createRoutesFromElements(
       <Route path="/" element={<AppLayout />}>
         {apps.map(app => {
           const { Component } = app;
-          // 模糊匹配，path 需要写成类似 abc/* 的模式
+          // Fuzzy match, path needs to be written in a pattern similar to abc/*
           return (
             <Route
               key={app.name}
@@ -125,12 +125,12 @@ export default () => {
   );
 
   return (
-    // 方法一：使用 MApp 自动根据配置的 activeWhen 参数加载子应用(本项目配置在 modern.config.ts 中)
+    // Use MApp to automatically load sub-applications according to the configured activeWhen parameters (this project is configured in modern.config.ts)
     // <BrowserRouter>
     //   <MApp />
     // </BrowserRouter>
 
-    // 方法二：手动写 Route 组件方式加载子应用，方便于需要鉴权等需要前置操作的场景
+    // Manually write the Route component to load the sub-application, which is convenient for scenarios that require pre-operation such as authentication
     <>
       <RouterProvider router={router} />
     </>
@@ -138,17 +138,17 @@ export default () => {
 };
 ```
 
-这里通过 `Route` 组件自定义了 **Table** 的激活路由为 **/table**， **Dashboard** 的激活路由为 **/dashboard**。
+Here, the activation route of **Table** is customized as **/table** through the `Route` component, and the activation route of **Dashboard** is **/dashboard**.
 
-### 集中式路由
+### Centralized routing
 
-**集中式路由** 是将子应用的激活路由集中配置的方式。我们给子应用列表信息添加 `activeWhen` 字段来启用 **集中式路由**。
+**Centralized Routing** is a way to centrally configure active routes for subapps. We enable **Centralized Routing** by adding an `activeWhen` field to the subapp list information.
 
 <MicroRuntimeConfig />
 
-然后在主应用中使用 `useModuleApp` 方法获取 `MApp` 组件, 并在主应用渲染 `MApp`。
+Use `useModuleApp` api in Main App, get `MApp` component and then render it
 
-```tsx title=主应用：App.tsx
+```tsx title=Main App：App.tsx
 import { useModuleApp } from '@modern-js/plugin-garfish/runtime';
 
 function App() {
@@ -162,18 +162,22 @@ function App() {
 }
 ```
 
-这样启动应用后，访问 `/table` 路由，会渲染 `Table` 子应用，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用。
+After starting the application in this way, accessing the '/table' route will render the'Table 'sub-application, and accessing the'/dashboard 'route will render the'Dashboard' sub-application.
 
-### 两种模式混用
 
-当然 **子应用组件** 和 **集中式路由** 是可以混合使用的。
+### Mix Mode
 
-- 一部分子应用作为 **子应用组件** 激活，另外一部分作为 **集中式路由** 激活。
-- 一部分子应用既可以作为 **集中式路由** 激活，也可以作为 **子应用组件** 激活。
 
-### 添加 loading
+Of course, **sub-application components** and **centralized routing** can be mixed.
+
+
+- One molecular application is activated as a **sub-application component**, and the other part is activated as a **centralized routing**.
+- A molecular application can be activated either as a **centralized routing** or as a **sub-application component**.
+
+### Loading
+
+By configuring the `loadable` configuration, loading components can be added for 「centralized routing」 and 「sub-applicati」, and errors, timeouts, flashes, etc. can be considered, so as to provide users with a better user experience. The design and implementation of this function refer to [react-loadable](https://github.com/jamiebuilds/react-loadable), and the basic functions are similar.
 
-通过配置 `loadable` 配置，可以为「集中式路由」、「子应用」添加 loading 组件，并可以考虑错误、超时、闪烁等情况的出现，从而为用户提供更好的用户体验。该功能的设计与实现参考至 [react-loadable](https://github.com/jamiebuilds/react-loadable)，基本功能较为相似。
 
 ```tsx
 function Loading() {
@@ -191,9 +195,9 @@ function App(){
 }
 ```
 
-#### 增加错误状态
+#### Add Error Status
 
-当微前端子应用加载失败或渲染失败时，`loading component` 将会接收 `error` 参数（若没有错误时 error 是 null）
+When the micro-frontend sub-application fails to load or render, the `loading component` will receive the `error` parameter (if there is no error, the error is null).
 
 ```tsx
 function Loading({ error }) {
@@ -205,11 +209,13 @@ function Loading({ error }) {
 }
 ```
 
-#### 避免 loading 闪退
+#### Avoid Loading Flash Back
+
+Sometimes the display time of the loading component may be less than 200ms, and the loading component will flash back at this time. Many user studies have proved that the loading flash back situation will cause the user to perceive that the loading content takes longer than the actual time.
 
-有时 loading 组件的显示时间可能小于 200ms，这个时候会出现 loading 组件闪退的情况。许多用户研究证明，loading 闪退的情况会导致用户感知加载内容的耗时比实际耗时更长，在 loading 小于 200ms 时，不展示内容，用户会认为它更快。
+When loading is less than 200ms, if the content is not displayed, the user will think it is faster.
 
-所以 loading 组件还提供了 `pastDelay` 参数，超过设置的延迟展示时才会为 true，可以通过 `delay` 参数设置延迟的时长
+Therefore, the loading component also provides the `pastDelay` parameter, which will only be true when it exceeds the set delay display. You can set the delay duration through the `delay` parameter.
 
 ```tsx
 function Loading({ error, pastDelay }) {
@@ -223,7 +229,7 @@ function Loading({ error, pastDelay }) {
 }
 ```
 
-`delay` 的默认值为 `200ms`，可以通过 `loadable` 中的 `delay` 来设置延迟展示的时间
+The default value of `delay` is `200ms`, you can set the delay display time through `delay` in `loadable`.
 
 ```tsx
 
@@ -239,11 +245,11 @@ function App(){
 }
 ```
 
-#### 增加超时状态
+#### Add Timeout State
 
-有时因为网络的原因，从而导致微前端子应用加载失败，从而导致一直展示 loading 的状态，这对于用户而言非常糟糕，因为他们不知道合适才会获得具体的响应，他们是否需要刷新页面，通过增加超时状态可以很好的解决该问题。
+Sometimes because of the network, the micro-front-end sub-application fails to load, resulting in the loading state being displayed all the time, which is very bad for users, because they don't know the right response to get a specific response, whether they need to refresh the page, by Increasing the timeout state can solve this problem well.
 
-loading 组件在超时时会获得 `timeOut` 参数，当微前端应用加载超时时将会获得 `timeOut` 属性值为 true
+The loading component will get the `timeOut` parameter when timeout, when the micro frontend application loads timeout, it will get the `timeOut` property value of true.
 
 ```tsx
 function Loading({ error, timeOut, pastDelay }) {
@@ -259,7 +265,7 @@ function Loading({ error, timeOut, pastDelay }) {
 }
 ```
 
-超时状态是关闭的，可以通过在 `loadable` 中设置 `timeout` 参数开启
+The timeout state is off and can be enabled by setting the `timeout` parameter in `loadable`:
 
 ```tsx
 

package/en/guides/topic-detail/micro-frontend/c04-communicate.mdx

@@ -1,14 +1,14 @@
 ---
 sidebar_position: 4
-title: 主子应用通信
+title: Communicate
 ---
-# 主子应用通信
+# Communicate
 
-## props 通信
+## Props
 
-Modern.js 中，会将子应用包裹成一个 React 组件，直接通过给 React 组件传递 `props` 即可实现主应用和子应用通信的目的。
+In Modern.js, the sub-application will be wrapped into a React component, and the purpose of communicating between the main application and the sub-application can be achieved directly by passing'props' to the React component.
 
-```tsx title=主应用：App.tsx
+```tsx title=Main：App.tsx
 function App() {
   const { MApp } = useModuleApps();
 
@@ -20,21 +20,21 @@ function App() {
 }
 ```
 
-```tsx title=子应用：App.tsx
+```tsx title=Main：App.tsx
 function App(props) {
   console.log(props);
   return ...
 }
 ```
 
-子应用将会打印 `{count: 0}`，目前尚未支持子应用渲染响应式，及时在主应用上更改 `count` 的数据也不会触发视图更新
+The child application will print `{count: 0}`. Currently, child application rendering responsiveness is not supported. Changing the data of'count 'on the main application in time will not trigger a view update
 
-## channel 通信
+## channel
 
-[Garfish.channel](https://www.garfishjs.org/api/channel) 用于应用间的通信。它是 `EventEmitter2` 的实例
+[Garfish.channel] (https://www.garfishjs.org/api/channel) Used for communication between applications. It is an instance of `EventEmitter2`.
 
 ```ts
-// 子应用监听登录事件
+// sub app listen login event
 const App = () => {
   const handleLogin = userInfo => {
     console.log(`${userInfo.name} has login`);
@@ -48,7 +48,7 @@ const App = () => {
   });
 };
 
-// 主应用触发监听事件
+// main app emit login event
 api.getLoginInfo.then(res => {
   if (res.code === 0) {
     window.Garfish.channel.emit('login', res.data);

package/en/guides/topic-detail/micro-frontend/c05-mixed-stack.mdx

@@ -1,26 +1,26 @@
 ---
 sidebar_position: 5
-title: 混合技术栈
+title: Mixed Stack
 ---
-# 混合技术栈
+# Mixed Stack
 
-Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的，提供了一些更开箱即用的使用方式。
+The Modern.js micro frontend scheme is based on the [Garfish](https://garfishjs.org/) package and provides some more out-of-the-box usage.
 
-当你的主应用和子应用不全是 Modern.js 应用的时候，可以参考这篇文档。
+When your main application and sub-application are not all Modern.js applications, you can refer to this document.
 
-1. 子应用是 **Modern.js**，主应用使用的原生 Garfish 微前端。
-2. 主应用是 **Modern.js**，子应用有的是其它技术栈。
+1. The sub-app is **Modern.js**, the native Garfish micro frontend used by the main app.
+2. The main application is **Modern.js**, and some sub-applications have other technology stacks.
 
-## 子应用是 Modern.js
+## Modern.js Sub App
 
-**Modern.js** 子应用编译后会生成标准的 [Garfish 子应用导出](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0)。
-所以可以直接接入标准的微前端主应用。
+**Modern.js** subapps compile to generate a standard [Garfish subapp export](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0).
+So you can directly access the standard micro frontend main application.
 
-:::info
-子应用是 **Modern.js**，主应用使用的原生 Garfish 微前端时，**子应用调试模式** 不可用。
 
+:::info
+The child application is **Modern.js**, when the main application uses the native Garfish micro frontend, the **child application debugging mode** is not available.
 :::
 
-## 主应用是 Modern.js
+## Modern.js Main App
 
-主应用是 **Modern.js**，子应用用的其它技术栈。子应用按照 [Garfish 子应用标准](https://www.garfishjs.org/guide/demo/react) 开发即可。
+The Main App is **Modern.js**, and other technology stacks used by sub-applications. Sub-App can be developed according to [Garfish Sub-Application Standard](https://www.garfishjs.org/guide/demo/react).

package/en/guides/topic-detail/model/auto-actions.mdx

@@ -1,23 +1,22 @@
 ---
 sidebar_position: 6
-title: 自动生成 Actions
+title: Automatically Actions
 ---
-# 自动生成 Actions
+# Automatically Generated Actions
 
-在 [快速上手](/guides/topic-detail/model/quick-start) 中，我们实现最简单的计数器 Model 也需要 10 行代码。
-实际上，Modern.js 支持根据声明的 `state` 类型，自动生成常用的 Actions，从而简化模板代码量。当前支持的类型有：
+In the [Quick Start](/guides/topic-detail/model/quick-start), we implemented the simplest counter model, which still required 10 lines of code. In fact, Modern.js supports automatically generating commonly used actions based on the declared `state` type, which reduces the amount of boilerplate code. The currently supported types are:
 
-- 原始数据类型
-- 数组类型
-- 简单对象类型（Plain Object）
+- Primitive data types
+- Array types
+- Simple object types (Plain Object)
 
-## 原始数据类型
+## Primitive data types
 
 ```ts
 const countModel = model('count').define({ state: 1 });
 ```
 
-如上我们仅用一行就完成了一个简单的 `countModel`。使用 Model 的示例代码如下：
+As shown above, we only need one line to create a simple `countModel`. Here's an example code that uses the model:
 
 ```tsx
 function Counter() {
@@ -30,9 +29,9 @@ function Counter() {
 }
 ```
 
-## 数组类型
+## Array Types
 
-当 State 为数组类型时，自动生成 Actions 的示例代码如下：
+When the state is an array type, an example code for automatically generating actions is shown below:
 
 ```ts
 const countModel = model('count').define({ state: [] });
@@ -52,11 +51,11 @@ function Counter() {
 }
 ```
 
-我们可以使用 JavaScript Array 对象的方法，修改 State。
+We can use the methods of the JavaScript Array object to modify the state.
 
-## 简单对象类型
+## Simple Object Types
 
-当 State 为简单对象类型时，自动生成 Actions 的示例代码如下：
+When the state is a simple object type, an example code for automatically generating actions is shown below:
 
 ```ts
 const countModel = model('count').define({
@@ -78,15 +77,13 @@ function Counter() {
 }
 ```
 
-根据 `a`、`b`、`c` 三个不同的字段分别生成 `setA`、`setB`、`setC` 三个 Actions。
+Three different fields `a`, `b`, and `c` each generate `setA`, `setB`, and `setC` actions, respectively.
 
 :::info
-当用户自定义的 Action 和 Modern.js 自动生成的 Action 名字一致时，用户自定义的 Action 优先级更高。例如，
-在 `countModel` 中已经自定义 `setA` 这个 Action，调用 `actions.setA()` 时，最终执行的是用户自定义的 `setA`。
-
+When the user-defined action and the action automatically generated by Modern.js have the same name, the user-defined action takes precedence. For example, if `setA` action is already defined in `countModel`, calling `actions.setA()` executes the user-defined `setA`.
 :::
 
-:::info 补充信息
-相关 API 的更多介绍，请参考[这里](/apis/app/runtime/model/auto-actions)。
-
+:::info Additional Information
+For more information on related APIs, please refer to [here](/apis/app/runtime/model/auto-actions).
 :::
+

package/en/guides/topic-detail/model/computed-state.mdx

@@ -1,32 +1,32 @@
 ---
 sidebar_position: 4
-title: 衍生状态
+title: Derived State
 ---
-# 衍生状态
 
-一些场景中，组件需要对 Model 中的 State 进行进一步计算，才能在组件中使用，这部分逻辑可以直接写在组件内部，也可以通过 Model 的衍生状态实现。
-衍生状态定义在 Model 中的 `computed` 字段下。根据依赖的 Model 的不同、返回类型的不同，衍生状态的定义方法可以分为以下 3 种。
+# Derived State
 
-## 只依赖自身的 State
+In some scenarios, components need to perform further calculations on the State in Model before they can be used in the components. This logic can be directly written in the component or implemented through derived states in Model. Derived states are defined under the `computed` field in the Model. Depending on the dependencies of the Model and the return type, there are three ways to define derived states.
 
-衍生状态只依赖当前 Model 的 State，State 会作为第一个参数，传入衍生状态的定义函数中。
+## Only Depend on the Model's Own State
 
-例如， todo 应用的 State 有 `items` 和 `filter`，`filter` 用于过滤当前页面显示的 todo 项，所以我们定义了一个 `visibleTodos` 的衍生状态可以直接在组件中使用。示例代码如下：
+The derived state only depends on the current Model's State, which is passed as the first parameter to the derived state's definition function.
+
+For example, the todo application has `items` and `filter` in its State, and `filter` is used to filter the todo items displayed on the current page. Therefore, we define a `visibleTodos` derived state that can be directly used in the component. The sample code is as follows:
 
 ```ts
 /**
- *  假设 todo item 结构如下：
+ *  Assuming the structure of the todo item is as follows:
 {
     id: string;          // id
-    text: string;        // todo 事项
-    completed: boolean;  // 完成状态：0 代表未完成，1 代表完成
+    text: string;        // todo
+    completed: boolean;
 }
 **/
 
 const todoModel = model('todo').define({
   state: {
     items: [],
-    filter: 'ALL', // ALL: 显示全部；COMPLETED：显示完成的事项；ACTIVE：显示未完成的事项
+    filter: 'ALL', // ALL: show all；COMPLETED：show completed；ACTIVE：show active
   },
   computed: {
     visibleTodos: state => {
@@ -45,7 +45,7 @@ const todoModel = model('todo').define({
 });
 ```
 
-衍生状态最终会和 Model 的 State 进行合并，因此，可以通过 Model 的 State 对象访问到衍生状态，例如，`visibleTodos` 在组件内的使用方式如下：
+Derived state will eventually be merged with the Model's State, so the derived state can be accessed through the Model's State object. For example, the `visibleTodos` can be used in the component as follows:
 
 ```ts
 function Todo() {
@@ -63,15 +63,17 @@ function Todo() {
 }
 ```
 
-## 依赖其他 Model 的 State
+## Dependent State from Other Models
+
+In addition to depending on the current model's state, derived states may also depend on the state of other models. In this case, the definition format for the derived state is:
 
-除了依赖当前 Model 的 State，衍生状态还依赖其他 Model 的 State，这时候衍生状态的定义格式为：
 
 ```ts
 [stateKey]: [...depModels, (selfState, ...depModels) => computedState]
 ```
 
-下面的示例，演示了 `barModel` 的衍生状态 `combinedValue` 是如何依赖 `fooModel` 的 State 的。
+The following example demonstrates how the derived state `combinedValue` of `barModel` depends on the state of `fooModel`.
+
 
 ```ts
 const fooModel = model('foo').define({
@@ -93,16 +95,17 @@ const barModel = model('bar').define({
 });
 ```
 
-## 函数类型的衍生状态
+## Derived State with Function Type
 
-衍生状态还可以返回一个函数。这时候衍生状态的定义格式为：
+Derived states can also return a function. In this case, the definition format for the derived state is:
 
 ```ts
-[stateKey]: (state) => (...args) => computedState    // 只依赖自身的 state
-[stateKey]: [...depModels, (selfState, ...depModels) => (...args) => computedState]  // 依赖其他 Model 的 state
+[stateKey]: (state) => (...args) => computedState    // Only relies on its own state
+[stateKey]: [...depModels, (selfState, ...depModels) => (...args) => computedState]  // Relies on the state of other models
 ```
 
-假设，todo 应用的 state 不存储 `filter` 状态，而是直接在组件中使用，那么 `visibleTodos` 可以是一个函数类型的值，这个函数在组件中使用的时候，接收 `filter` 参数。如下所示：
+Assuming the `filter` state is not stored in the state of the todo app, but is instead used directly in the component, `visibleTodos` can be a function type value. This function receives the `filter` parameter when used in the component, as shown below:
+
 
 ```ts
 const todoModel = model('todo').define({
@@ -126,11 +129,11 @@ const todoModel = model('todo').define({
 });
 
 function Todo(props) {
-  // filter 状态通过 props 传入
+  // use props pass filter
   const { filter } = props;
   const [state, actions] = useModel(todoModel);
 
-  // 计算得到最终要显示的 todos
+  // get final todos
   const todos = state.visibleTodos(filter);
 
   return (
@@ -145,7 +148,6 @@ function Todo(props) {
 }
 ```
 
-:::info 更多参考
-[使用 Model](/guides/topic-detail/model/computed-state)
-
+:::info Additional Reference
+[Using Models](/guides/topic-detail/model/computed-state)
 :::

package/en/guides/topic-detail/model/define-model.mdx

@@ -1,12 +1,13 @@
 ---
 sidebar_position: 2
-title: 创建 Model
+title: Define Model
 ---
-# 创建 Model
+# Define a Model
 
-上一节的计数器应用中，我们简单演示了如何创建一个 Model。本节我们将详细介绍 Model 的创建方法。
+In the previous section, we demonstrated how to create a Model for a simple counter application. In this section, we will provide a detailed introduction on how to create a Model.
+
+We can create a Model using the `model` API. For example, `model('foo')` creates a Model named `foo`. We can define the State and Actions included in the Model by calling the `define` function returned by `model('foo')`:
 
-通过 `model` API 创建 Model，例如，`model('foo')` 表示要创建一个名为 `foo` 的 Model，通过调用 `model('foo')` 返回的 `define` 函数，定义 Model 包含的 State、Actions 等：
 
 ```js
 import { model, useModel } from '@modern-js/runtime/model';
@@ -24,14 +25,14 @@ const fooModel = model('foo').define({
 ```
 
 :::info
-- Model 中的 Action 中不能包含有副作用的逻辑，如请求 HTTP 接口，访问 localStorage 等。
-- `setValue` 内部直接修改了入参 State，看起来是违反了纯函数的定义，实际上 Reduck 内部使用 [immer](https://github.com/immerjs/immer) 来修改不可变对象，保证了这种写法不会影响对象的不可变性，所以 `setValue` 仍然是一个纯函数。当然，你也可以直接在 Action 中返回一个新对象，不过这样的写法会更加复杂一些。
+- Actions in the Model cannot contain side-effect logic, such as requesting HTTP interfaces, accessing localStorage, etc.
+- `setValue` directly modifies the input State, which seems to violate the definition of a pure function. However, Reduck uses [immer](https://github.com/immerjs/immer) internally to modify immutable objects, ensuring that this approach does not affect the immutability of the object, so `setValue` is still a pure function. Of course, you can also return a new object directly in the Action, but this approach will be more complex.
 
 :::
 
-`define` 接收的参数，只是对 Model 原始结构的描述：内部定义的 State、Actions 等。`define` 返回值 `fooModel` 才是真正创建得到的 Model 对象。例如，虽然 `setValue`，有 2 个参数，但是当真正调用 `setValue` 这个 Action 时，我们只需要传入 `payload` 一个参数，因为我们调用的是 `fooModel` 上的 Action 方法，而不是 Model 原始结构上描述的 Action 方法。详细参考[使用 Model](/guides/topic-detail/model/use-model)。
+The `define` function only describes the original structure of the Model, including the internally defined State, Actions, and so on. The `fooModel` returned by `define` is the actual Model object that is created. For example, although `setValue` has two parameters, when we call the `setValue` Action, we only need to pass in the `payload` parameter, because we are calling the Action method on `fooModel`, not the one described in the original structure of the Model. For more information, please refer to [Using Models](/guides/topic-detail/model/use-model).
 
-`define` 除了接收对象类型的参数，还可以接收函数类型的参数。例如：
+In addition to object-type parameters, `define` can also receive function-type parameters. For example:
 
 ```js
 import { model, useModel } from '@modern-js/runtime/model';
@@ -50,17 +51,16 @@ const fooModel = model('foo').define((context, utils) => {
 });
 ```
 
-通过函数定义 Model 时，函数内部会自动传入 `context`、`utils` 2 个参数，`context` 是 Reduck 的上下文对象，可以获取到 `store` 对象，`utils` 提供了一组工具函数，方便实现 Model 通信等复杂功能需求。
+When defining a Model using a function, the function automatically receives two parameters: `context` and `utils`. `context` is the context object of Reduck, which can obtain the `store` object, and `utils` provides a set of utility functions to facilitate the implementation of complex features such as Model communication.
 
-Model 支持复制。例如：
+Models support duplication. For example:
 
 ```ts
 const barModel = fooModel('bar');
 ```
 
-barModel 是基于 fooModel 创建出一个的新的 Model 对象，类比面向对象编程语言中的概念，barModel 和 fooModel 是基于同一个类（Class）创建出的 2 个实例对象。当两个模块的状态管理逻辑相同，例如一个页面中的两个 tab 模块，使用的数据的结构和逻辑相同，区别只是从不同的接口获取数据，那么可以通过 Model 复制的方式，创建 2 个不同的 Model 对象。
-
-:::info 补充信息
-本节涉及的 API 的详细定义，请参考[这里](/apis/app/runtime/model/model_)。
+`barModel` is a new Model object created based on `fooModel`. Analogous to the concepts in object-oriented programming languages, `barModel` and `fooModel` are two instance objects created based on the same class. When the state management logic of two modules is the same, for example, two tab modules in the same page use the same data structure and logic, but the difference is that they obtain data from different interfaces, then you can create two different Model objects by duplicating the Model.
 
+:::info Additional Information
+For detailed definitions of the APIs mentioned in this section, please refer to [here](/apis/app/runtime/model/model_).
 :::