@modern-js/main-doc 2.0.0-beta.2 → 2.0.0-beta.3

package/zh/tutorials/first-app/c07-app-entry/7.1-intro.md

@@ -8,37 +8,42 @@ title: 入口的用途​​​
 
 ```md
 .
-├── .vscode/
-├── src/
-│   ├── components/
-│   │   ├── Avatar/
-│   │   │   ├── index.stories.tsx
-│   │   │   └── index.tsx
-│   │   └── Item/
-│   │       ├── index.test.tsx
-│   │       └── index.tsx
-│   ├── styles/
-│   │   └── utils.css
-│   ├── .eslintrc.json
-│   ├── App.css
-│   ├── App.tsx
-│   └── modern-app-env.d.ts
-├── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
+├── .husky
 ├── .npmrc
 ├── .nvmrc
+├── .prettierrc
+├── .vscode
 ├── README.md
+├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml
+├── src
+│   ├── .eslintrc.js
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── components
+│       │   ├── Avatar
+│       │   │   ├── index.stories.tsx
+│       │   │   └── index.tsx
+│       │   └── Item
+│       │       ├── index.test.tsx
+│       │       └── index.tsx
+│       ├── index.css
+│       ├── layout.tsx
+│       ├── page.tsx
+│       └── styles
+│           └── utils.css
 └── tsconfig.json
 ```
 
 hello-modern 项目是一个应用工程，`src/` 目录里是应用工程源代码的主要部分，我们称之为【 Universal App 代码（大一统应用代码）】—— 既可以在客户端运行又可以在服务器端运行，有多种运行模式和部署模式，既能实现多页（MPA）也能实现单页（SPA）。
 
-我们把 `src/App.tsx` 称作【 应用入口（App Entry）】，一个应用工程可以有一到多个应用入口。
+我们把 `src/routes` 称作【 应用入口（App Entry）】，一个应用工程可以有一到多个应用入口。
 
 :::info 注
-应用入口不止 `App.[jt]sx` 一种，之后章节中会再次介绍。
+应用入口不止 `src/routes` 一种，之后章节中会再次介绍。
 :::
 
 :::info 注

package/zh/tutorials/first-app/c07-app-entry/7.2-add-entry-in-cli.md

@@ -23,38 +23,46 @@ Modern.js 支持自动创建新入口，前面的章节中提到过，`pnpm run
 
 ```md
 .
-├── .vscode/
-├── src/
-│   ├── hello-modern/
-│   │   ├── components/
-│   │   │   ├── Avatar/
-│   │   │   │   ├── index.stories.tsx
-│   │   │   │   └── index.tsx
-│   │   │   └── Item/
-│   │   │       ├── index.test.tsx
-│   │   │       └── index.tsx
-│   │   ├── styles/
-│   │   │   └── utils.css
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── landing-page/
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── .eslintrc.json
-│   └── modern-app-env.d.ts
-├── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
+├── .husky
 ├── .npmrc
 ├── .nvmrc
+├── .prettierrc
+├── .vscode
 ├── README.md
+├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml
+├── src
+│   ├── .eslintrc.js
+│   ├── hello-modern
+│   │   ├── index.test.ts
+│   │   └── routes
+│   │       ├── components
+│   │       │   ├── Avatar
+│   │       │   │   ├── index.stories.tsx
+│   │       │   │   └── index.tsx
+│   │       │   └── Item
+│   │       │       ├── index.test.tsx
+│   │       │       └── index.tsx
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── page.tsx
+│   │       └── styles
+│   │           └── utils.css
+│   ├── landing-page
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       └── page.tsx
+│   └── modern-app-env.d.ts
 └── tsconfig.json
 ```
 
 可以看到联系人列表应用的文件，都被自动重构到 `src/hello-modern/` 里。
 
-同时新建了一个 `src/landing-page/`，里面同样有 `App.tsx`（`pnpm run new` 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）
+同时新建了一个 `src/landing-page/`，里面同样有 `routes/*`（`pnpm run new` 命令只做了这些事，所以你也可以很容易的手动创建新入口或修改入口）
 
 执行 `pnpm run dev`，显示：
 
@@ -74,15 +82,7 @@ Modern.js 框架的设计原则之一是【[约定优于配置（Convention over
 
 其他入口的 URL，是在根路径后追加入口名，比如 `http://localhost:8080/landing-page`。
 
-:::info 注
-`src/` 下如果有 `App.[jt]sx`，就认为这个应用工程是单入口的，`src/` 下的其他文件和目录，都会被视为入口内部的文件。
-
-`src/` 下如果没有  `App.[jt]sx`，那么 `src/` **下一级**目录里，如果有 `App.[jt]sx`，这个目录就会被视为一个应用入口。
-
-`App.jsx` 被看作约定中**标识**，也有其他形式的**标识**，之后的章节中会继续介绍。
-:::
-
-接下来，我们把 `src/hello-modern/App.tsx` 重命名为 `src/contacts/App.tsx`：
+接下来，我们把 `src/hello-modern/` 重命名为 `src/contacts/`：
 
 ```bash
 mv src/hello-modern src/contacts

package/zh/tutorials/first-app/c07-app-entry/7.3-manage-entries-by-hand.md

@@ -8,9 +8,8 @@ title: 管理应用入口​​​
 
 我们可以在 `package.json` 中的 `modernConfig`，或是在符合[业界主流惯例](https://github.com/davidtheclark/cosmiconfig)的 Modern.js 配置文件里，自己写代码来控制项目的配置。
 
-之前的章节中，我们都是直接修改 `package.json` 中的 `modernConfig` 字段来实现修改配置。
 
-现在，让我们在项目目录下，新建一个 `modern.config.ts`（若已新建可忽略），并在里面添加内容：
+现在，让我们在项目目录 `modern.config.ts` 里面添加内容：
 
 ```typescript title="modern.config.ts"
 export default defineConfig({
@@ -29,19 +28,15 @@ export default defineConfig({
 
 如果注释掉 `ssrByEntries` 和它的值，landing-page 的 SSR 功能就恢复开启了。
 
-:::info 注
-当相同配置字段出现于两个文件中时， `package.json` 中 `modernConfig` 字段里的配置会优先于 `modern.config.js` 中的配置。
-:::
-
 当需要配置包含复杂逻辑的选项时，比如，开发者想在项目中使用 `*.myext` 文件，这是一种非主流的文件类型，Modern.js 没有默认集成对它的支持。
 
-所以，开发者可以在 `modern.config.js` 里增加对它的支持（通过webpack配置），如下所示：
+所以，开发者可以在 `modern.config.ts` 里增加对它的支持（通过webpack配置），如下所示：
 
 :::info 注
 更多 webpack 配置相关可以查看 [Webpack 配置文档](/docs/configure/app/tools/webpack)。
 :::
 
-```js
+```ts
 // 注：以下为伪代码，loader等名字皆为虚构，仅做演示使用
 export default defineConfig({
   tools: {
@@ -59,7 +54,7 @@ export default defineConfig({
 
 这个需求要修改 webpack 配置，用 Modern.js 配置的`tools.webpack`选项来实现显然是更方便的。
 
-还有一些时候，需要一些更复杂的逻辑来做设置，比如需要 JS 变量、表达式、导入模块等，这种时候也适合用 `modern.config.js` 来手动配置，比如：
+还有一些时候，需要一些更复杂的逻辑来做设置，比如需要 JS 变量、表达式、导入模块等，这种时候也适合用 `modern.config.ts` 来手动配置，比如：
 
 ```js
 export default defineConfig({

package/zh/tutorials/first-app/c08-client-side-routing/8.1-code-based-routing.md

@@ -1,5 +1,5 @@
 ---
-title: 使用自控式路由​​​​
+title: 使用约定式路由​​​​
 ---
 
 上一章节中，我们学习了如何创建应用入口。
@@ -21,55 +21,53 @@ export default defineConfig({
 
 之前我们已经为联系人列表增加了 Archive 按钮，接下来我们添加一个客户端路由 `/archives`，访问这个路由时，只显示已存档的联系人，而原有的 `/` 继续显示所有联系人。
 
-打开 `src/contacts/App.tsx`，在原有的 `mockData` 下方新增 `mockArchivedData`：
+新建 `src/contacts/routes/archives/page.tsx`, 添加如下代码：
 
-```js
-const mockData = getAvatar([
-  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-  { name: 'Bradley', email: 'd.wfovsqyo@gpkcjwjgb.fr' },
-  { name: 'Davis', email: '"t.kqkoj@utlkwnpwk.nu' },
-]);
-
-const mockArchivedData = getAvatar([
-  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-]);
+```ts
+import { List } from 'antd';
+import { Helmet } from '@modern-js/runtime/head';
+import Item from '../components/Item';
+
+const getAvatar = (users: Array<{ name: string; email: string }>) =>
+  users.map(user => ({
+    ...user,
+    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+  }));
+
+const getMockArchivedData = () =>
+  getAvatar([
+    { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
+    { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
+  ]);
+function Index() {
+  return (
+    <div className="container lg mx-auto">
+      <Helmet>
+        <title>Archives</title>
+      </Helmet>
+      <List
+        dataSource={getMockArchivedData()}
+        renderItem={info => <Item key={info.name} info={info} />}
+      />
+    </div>
+  );
+}
+
+export default Index;
 ```
 
-在文件顶部引入 [React Router](https://reactrouter.com/) 的 `Route`、`Switch` 和 [React Helmet](https://github.com/nfl/react-helmet) 的 `Helmet` 组件：
+这里使用了 [React Helmet](https://github.com/nfl/react-helmet) 的 `Helmet` 组件，在 `src/contacts/routes/page.tsx` 中也添加 Helmet 组件：
 
-```js
-import { Route, Switch } from '@modern-js/runtime/router';
+```tsx
 import { Helmet } from '@modern-js/runtime/head';
-```
 
-在 `App` 组件中使用 `Route` 写两个路由，分别用不同的 mock 数据渲染列表：
-
-```js
 function App() {
   return (
     <div className="container lg mx-auto">
-      <Switch>
-        <Route path="/" exact={true}>
-          <Helmet>
-            <title>All</title>
-          </Helmet>
-          <List
-            dataSource={mockData}
-            renderItem={info => <Item key={info.name} info={info} />}
-          />
-        </Route>
-        <Route path="/archives" exact={true}>
-          <Helmet>
-            <title>Archives</title>
-          </Helmet>
-          <List
-            dataSource={mockArchivedData}
-            renderItem={info => <Item key={info.name} info={info} />}
-          />
-        </Route>
-      </Switch>
+      <Helmet>
+        <title>All</title>
+      </Helmet>
+      ...
     </div>
   );
 }
@@ -77,12 +75,8 @@ function App() {
 
 :::info 注
 Modern.js 默认集成了 react-helmet，无需安装依赖，可以直接使用，也可以结合 SSR 使用，满足 SEO 需求。
-
-Modern.js 也默认集成了 react-router，无需安装依赖和自己配置 `BrowserRouter` 等样板代码，可以直接用 Route、Switch 等组件实现路由逻辑。
 :::
 
-React Router v4+ 有两种用法，一种是 `component-based` 的，一种是基于全局配置的。这两种都由开发者自己用代码来控制客户端路由逻辑，所以我们把这种模式称作【**自控式路由**】。
-
 执行 `pnpm run dev`，访问 `http://localhost:8080/contacts`，可以看到完整的联系人，页面的标题是 All：
 
 ![display](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/display.png)
@@ -95,7 +89,7 @@ React Router v4+ 有两种用法，一种是 `component-based` 的，一种是
 
 **接下来我们增加一个简单的导航栏，让用户能在两个列表之间切换**。
 
-打开 src/contacts/App.tsx，在顶部导入 Radio 组件：
+打开 `src/contacts/layout.tsx`，在顶部导入 Radio 组件：
 
 ```tsx
 import { List, Radio } from 'antd';
@@ -103,39 +97,48 @@ import { List, Radio } from 'antd';
 
 然后将 UI 最顶部进行修改，增加一组单选框
 
-```tsx {3-8}
-return (
-  <div className="container lg mx-auto">
-    <div className="h-16 p-2 flex items-center justify-center">
-      <Radio.Group onChange={handleSetList} value={currentList}>
-        <Radio value="/">All</Radio>
-        <Radio value="/archives">Archives</Radio>
-      </Radio.Group>
+```tsx {5-8}
+export default function Layout() {
+  return (
+    <div>
+      <div className="h-16 p-2 flex items-center justify-center">
+        <Radio.Group onChange={handleSetList} value={currentList}>
+          <Radio value="/">All</Radio>
+          <Radio value="/archives">Archives</Radio>
+        </Radio.Group>
+      </div>
+      <Outlet />
     </div>
-    <Switch>
+  );
+}
+
 ```
 
 然后我们来实现 `currentList` 和 `handleSetList`。
 
-引入两个 React Hook：`useState` 和 `useHistory`，以及 Ant Design 的事件类型定义：
+引入三个 React Hook：`useState` 和 `useNavigate` 和 `useParams`，以及 Ant Design 的事件类型定义：
 
 ```js
 import { useState } from 'react';
-import { List, Radio, RadioChangeEvent } from 'antd';
-import { Route, Switch, useHistory } from '@modern-js/runtime/router';
+import { Radio, RadioChangeEvent } from 'antd';
+import { Outlet, useNavigate, useParams } from '@modern-js/runtime/router';
 ```
 
-最后在 App 组件里增加局部状态和相关逻辑：
+最后在 Layout 组件里增加局部状态和相关逻辑：
 
 ```js {2-8}
-function App() {
-  const history = useHistory();
-  const [currentList, setList] = useState(history.location.pathname || '/');
+export default function Layout() {
+  const navigate = useNavigate();
+  const params = useParams();
+  const [currentList, setList] = useState(params.pathname || '/');
   const handleSetList = (e: RadioChangeEvent) => {
     const { value } = e.target;
     setList(value);
-    history.push(value);
+    navigate(value);
   };
+  return (
+  ...
+}
 ```
 
 到这里就已经完成了页面导航栏实现，执行 `pnpm run dev` 查看效果：

package/zh/tutorials/first-app/c09-bff/9.2-enable-bff.md

@@ -18,8 +18,6 @@ title: 启用 BFF
 # 请选择运行时框
 ❯ Express
   Koa
-  Egg
-  Nest
 ```
 
 :::info 注
@@ -30,43 +28,47 @@ title: 启用 BFF
 
 ```md
 .
-├── .vscode/
-├── api/
-│   ├── info/
-│   │   └── [type].ts
-│   ├── .eslintrc.json
-│   ├── _app.ts
-│   └── index.ts
-├── src/
-│   ├── contacts/
-│   │   ├── components/
-│   │   │   ├── Avatar/
-│   │   │   │   ├── index.stories.tsx
-│   │   │   │   └── index.tsx
-│   │   │   └── Item/
-│   │   │       ├── index.test.tsx
-│   │   │       └── index.tsx
-│   │   ├── styles/
-│   │   │   └── utils.css
-│   │   ├── App.css
-│   │   └── App.tsx
-│   ├── landing-page/
-│   │   └── pages/
-│   │       ├── comments/
-│   │       │   └── [commentTitle]/
-│   │       │       └── index.tsx
-│   │       ├── _app.tsx
-│   │       ├── docs.tsx
-│   │       └── index.tsx
-│   ├── .eslintrc.json
-│   └── modern-app-env.d.ts
-├── .editorconfig
+├── .eslintrc.js
 ├── .gitignore
+├── .husky
 ├── .npmrc
 ├── .nvmrc
+├── .prettierrc
+├── .vscode
 ├── README.md
+├── api
+│   ├── _app.ts
+│   ├── index.ts
+│   └── info
+│       └── [type].ts
+├── modern.config.ts
 ├── package.json
 ├── pnpm-lock.yaml
+├── src
+│   ├── .eslintrc.js
+│   ├── contacts
+│   │   ├── index.test.ts
+│   │   └── routes
+│   │       ├── archives
+│   │       │   └── page.tsx
+│   │       ├── components
+│   │       │   ├── Avatar
+│   │       │   │   ├── index.stories.tsx
+│   │       │   │   └── index.tsx
+│   │       │   └── Item
+│   │       │       ├── index.test.tsx
+│   │       │       └── index.tsx
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       ├── page.tsx
+│   │       └── styles
+│   │           └── utils.css
+│   ├── landing-page
+│   │   └── routes
+│   │       ├── index.css
+│   │       ├── layout.tsx
+│   │       └── page.tsx
+│   └── modern-app-env.d.ts
 └── tsconfig.json
 ```
 

package/zh/tutorials/first-app/c09-bff/9.3-fetch-bff.md

@@ -35,7 +35,7 @@ mv api/index.ts api/contacts.ts
 我们使用 [faker](https://github.com/Marak/Faker.js) 来 mock 需要的数据，首先安装依赖：
 
 ```bash
-pnpm add faker
+pnpm add faker@5.5.3
 ```
 
 将 `api/contacts.ts` 内容改为：
@@ -65,69 +65,22 @@ export const get = async () => {
 
 ![browser-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/api-result.png)
 
-接下来我们把 `src/contacts/App.tsx` 里硬编码的 `mockData` 改成从 BFF 加载。
+接下来我们把 `src/routes/contacts/page.tsx` 里硬编码的 `getMockData` 改成从 BFF 加载:
 
-我们将业务逻辑迁移到组件中，`App.tsx` 只保留简单的路由部分，执行：
-
-<Tabs>
-<TabItem value="macOS" label="macOS" default>
-
-```bash
-mkdir -p src/contacts/components/AllContacts/
-mkdir -p src/contacts/components/ArchivedContacts/
-touch src/contacts/components/AllContacts/index.tsx
-touch src/contacts/components/ArchivedContacts/index.tsx
-```
-
-</TabItem>
-<TabItem value="Windows" label="Windows">
-
-```powershell
-mkdir -p src/contacts/components/AllContacts/
-mkdir -p src/contacts/components/ArchivedContacts/
-ni src/contacts/components/AllContacts/index.tsx
-ni src/contacts/components/ArchivedContacts/index.tsx
-```
-
-</TabItem>
-</Tabs>
-
-`ArchivedContacts/index.tsx` 的内容：
-
-```js
+```tsx
+import { Helmet } from '@modern-js/runtime/head';
 import { List } from 'antd';
-import Item from '../Item';
-
-const getAvatar = (users: Array<{ name: string; email: string }>) =>
-  users.map(user => ({
-    ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
-  }));
-
-const mockArchivedData = getAvatar([
-  { name: 'Thomas', email: 'w.kccip@bllmfbgv.dm' },
-  { name: 'Chow', email: 'f.lfqljnlk@ywoefljhc.af' },
-]);
-
-const ArchivedContacts = () => (
-  <List
-    dataSource={mockArchivedData}
-    renderItem={info => <Item key={info.name} info={info} />}
-  />
-);
-
-export default ArchivedContacts;
-```
-
-`AllContacts/index.tsx` 的内容：
+import 'ladda/dist/ladda.min.css';
+import 'tailwindcss/base.css';
+import 'tailwindcss/components.css';
+import 'tailwindcss/utilities.css';
+import './styles/utils.css';
 
-```tsx
 import { useState, useEffect } from 'react';
-import { List } from 'antd';
 import { get as contacts } from '@api/contacts';
-import Item from '../Item';
+import Item from './components/Item';
 
-const AllContacts = () => {
+function Index() {
   const [list, setList] = useState(
     [] as Array<{ name: string; email: string; avatar: string }>,
   );
@@ -141,20 +94,25 @@ const AllContacts = () => {
     }
   });
   return (
-    (list.length && (
-      <List
-        dataSource={list}
-        renderItem={info => <Item key={info.name} info={info} />}
-      />
-    )) || (
-      <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
-        Pending...
-      </div>
-    )
+    <div className="container lg mx-auto">
+      <Helmet>
+        <title>All</title>
+      </Helmet>
+      {(list.length && (
+        <List
+          dataSource={list}
+          renderItem={info => <Item key={info.name} info={info} />}
+        />
+      )) || (
+        <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
+          Pending...
+        </div>
+      )}
+    </div>
   );
-};
+}
 
-export default AllContacts;
+export default Index;
 ```
 
 在 Modern.js 中，可以通过调用函数（前后端一体化）的方式，直接调用 BFF 接口，调用时无需关心域名、路径等。
@@ -163,38 +121,6 @@ export default AllContacts;
 在使用 `pnpm run new` 创建 BFF 时，Modern.js 已经默认在 `tsconig.json` 中注入了别名。这也是之前提到的，生成器在项目创建之后并不会被抛弃，仍旧可以在开发过程中不断为项目提供新的内容。
 :::
 
-接下来修改 `src/contacts/App.tsx`，把 `List` 组件的调用代码替换成上面的 `AllContacts` 和 `ArchivedContacts`：
-
-```tsx
-<Route path="/" exact={true}>
-  <Helmet>
-    <title>All</title>
-  </Helmet>
-  <AllContacts />
-</Route>
-<Route path="/archives" exact={true}>
-  <Helmet>
-    <title>Archives</title>
-  </Helmet>
-  <ArchivedContacts />
-</Route>
-```
-
-删除 `App.tsx` 里的 mock 数据和 `List` 组件，把 `Item` 组件替换成 `ContactList`：
-
-```tsx
-import { useState } from 'react';
-import { Radio, RadioChangeEvent } from 'antd';
-import { Route, Switch, useHistory } from '@modern-js/runtime/router';
-import { Helmet } from '@modern-js/runtime/head';
-import 'tailwindcss/base.css';
-import 'tailwindcss/components.css';
-import 'tailwindcss/utilities.css';
-import './styles/utils.css';
-import AllContacts from './components/AllContacts';
-import ArchivedContacts from './components/ArchivedContacts';
-```
-
 执行 `pnpm run dev`，再打开页面`http://localhost:8000/contacts`，可以看到页面加载后，会先初始化联系人数据（显示 pending），之后每次切换到 All 列表，也会重新请求联系人数据：
 
 ![browser-result](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/08/browser-result.png)

package/zh/tutorials/first-app/c10-model/10.1-application-architecture.md

@@ -2,11 +2,11 @@
 title: 应用架构
 ---
 
-上一章节中，我们把硬编码的 `mockData` 改成从 BFF 加载，从 `App.tsx` 里拆分出了 `components/AllContacts.tsx` 和 `components/ArchivedContacts.tsx`，在 `AllContacts` 组件里用 BFF 函数，获取到联系人数据之后，保存在 `AllContacts` 的组件内部状态里，而 `ArchivedContacts` 组件暂时继续使用 mock 数据。
+上一章节中，我们把硬编码的 `mockData` 改成从 BFF 加载，在 `pages.tsx` 组件里用 BFF 函数，获取到联系人数据之后，保存在 `Index` 的组件内部状态里，而 `archives/index` 组件暂时继续使用 mock 数据。
 
-本章节中，为了进一步实现项目功能，我们需要让 `AllContacts` 和  `ArchivedContacts` 都从 BFF 获取数据，还要实现【 Archive 】按钮，点击按钮能把联系人归档。
+本章节中，为了进一步实现项目功能，我们需要让两个组件都从 BFF 获取数据，还要实现【 Archive 】按钮，点击按钮能把联系人归档。
 
-业务逻辑变复杂之后，相关代码不可避免会变多，如果都写在 AllContacts 组件或其他组件里，都会让这个组件的可读性和可维护性变差，让做不同事情的代码混在一起。
+业务逻辑变复杂之后，相关代码不可避免会变多，如果都写在组件里，都会让这个组件的可读性和可维护性变差，让做不同事情的代码混在一起。
 
 原本可以跟 UI 完全解耦的业务逻辑（比如网络请求、纯数据的操作、状态的管理等）跟 UI 逻辑（比如联系人列表如何展现）混在一起，当需要修改 UI 的时候，不得不跟 UI 无关的业务逻辑代码打交道，反过来也一样，不符合【 [单一职责原则（SRP）](https://zh.wikipedia.org/wiki/%E5%8D%95%E4%B8%80%E5%8A%9F%E8%83%BD%E5%8E%9F%E5%88%99)】，也做不到【 [关注点分离（SoC）](https://zh.wikipedia.org/wiki/%E5%85%B3%E6%B3%A8%E7%82%B9%E5%88%86%E7%A6%BB)】。
 
@@ -16,8 +16,6 @@ title: 应用架构
 
 Modern.js 提供开箱即用的**应用架构**，支持几种扮演不同**角色（role）**、属于不同**分层（layer）**的代码模块类型，可以把业务逻辑解耦到不同类型的代码模块里，做到高[内聚](https://zh.wikipedia.org/wiki/%E5%85%A7%E8%81%9A%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8))低[耦合](https://zh.wikipedia.org/wiki/%E8%80%A6%E5%90%88%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8))。
 
-之前介绍的 `App.tsx` 和 `pages/` 都是其中一种代码模块，通过在最顶层对客户端路由的管理，把其他代码模块最终组织到一起，形成应用。
-
 当前项目里 `components/` 目录中的 React 组件，是一种可以称作【 视图组件 】的代码模块，负责 UI、交互上的界面展现。
 
-本章节我们来把 `AllContacts` 组件中可以跟 UI 解耦的业务逻辑，移到一种叫【 Model（业务模型）】的代码模块里。
+本章节我们来把 `page.tsx` 中的 Index 组件中可以跟 UI 解耦的业务逻辑，移到一种叫【 Model（业务模型）】的代码模块里。

package/zh/tutorials/first-app/c10-model/10.2-add-model.md

@@ -121,11 +121,11 @@ const actions = {
 为了做到高内聚低耦合，一个 Model 的 state、action、side effect 不应该分散在不同文件里。接下来我们把上面的代码连起来，放在同一个 Model 文件里，执行以下命令：
 
 ```bash
-mkdir -p src/contacts/models/
-touch src/contacts/models/contacts.ts
+mkdir -p src/contacts/routes/models/
+touch src/contacts/routes/models/contacts.ts
 ```
 
-`src/contacts/models/contacts.ts` 的内容：
+`src/contacts/routes/models/contacts.ts` 的内容：
 
 ```tsx
 import { model } from '@modern-js/runtime/model';