@modern-js/main-doc 2.4.0 → 2.6.0

package/zh/guides/basic-features/alias.mdx

@@ -23,10 +23,10 @@ Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块
 ```bash
 .
 ├── common
-│   ├── styles
-│   │   └── base.css
-│   └── utils
-│       └── index.ts
+│   ├── styles
+│   │   └── base.css
+│   └── utils
+│       └── index.ts
 ├── App.tsx
 ```
 
@@ -62,4 +62,4 @@ export default defineConfig({
 });
 ```
 
-具体别名配置可以参考 【[API 资料 - source.alias](/configure/app/source/alias)】。
+对于别名配置的具体用法，请参考 [source.alias 文档](/configure/app/source/alias)。

package/zh/guides/basic-features/data-fetch.mdx

@@ -2,6 +2,7 @@
 title: 数据获取
 sidebar_position: 3
 ---
+
 # 数据获取
 
 Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
@@ -81,9 +82,9 @@ export default async (): Promise<ProfileData> => {
 
 ```tsx
 // routes/user/[id]/page.loader.ts
-import { LoaderArgs } from '@modern-js/runtime/router';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
 
-export default async ({ params }: LoaderArgs) => {
+export default async ({ params }: LoaderFunctionArgs) => {
   const { id } = params;
   const res = await fetch(`https://api/user/${id}`);
   return res.json();
@@ -100,9 +101,9 @@ export default async ({ params }: LoaderArgs) => {
 
 ```tsx
 // routes/user/[id]/page.loader.ts
-import { LoaderArgs } from '@modern-js/runtime/router';
+import { LoaderFunctionArgs } from '@modern-js/runtime/router';
 
-export default async ({ request }: LoaderArgs) => {
+export default async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
   const userId = url.searchParams.get('id');
   return queryUser(userId);
@@ -220,38 +221,46 @@ export default function UserLayout() {
 
 :::
 
+创建 `user/layout.loader.ts`，并添加以下代码：
+
+```ts title="routes/user/layout.loader.ts"
+import { defer } from "@edenx/runtime/router"
+
+const loader = () =>
+defer({
+  userInfo: new Promise((resolve) => {
+      setTimeout(() => {
+        resolve({
+          age: 1,
+          name: 'user layout'
+        })
+      }, 1000)
+    })
+  })
+
+export default loader;
+```
+
 在 `user/layout.tsx` 中添加以下代码：
 
 ```tsx title="routes/user/layout.tsx"
-import {
-  Await,
-  defer,
-  useLoaderData,
-  Outlet
-} from '@modern-js/runtime/router';
-
-export const loader = () => {
-  return defer({
-    // fetchUserInfo 是一个异步函数，返回用户信息
-    userInfo: fetchUserInfo(),
-  })
-}
+import { Await, defer, useLoaderData, Outlet } from '@modern-js/runtime/router';
 
 export default function UserLayout() {
-  const { userInfo } = useLoaderData() as {userInfo: Promise<UserInfo>};
+  const { userInfo } = useLoaderData() as { userInfo: Promise<UserInfo> };
   return (
     <div>
-      <React.Suspense
-        fallback={<p>Loading...</p>}
-      >
-        <Await resolve={userInfo} children={userInfo => (
-          <div>
-            <span>{userInfo.name}</span>
-            <span>{userInfo.age}</span>
-            <Outlet>
-          </div>
-        )}>
-        </Await>
+      <React.Suspense fallback={<p>Loading...</p>}>
+        <Await
+          resolve={userInfo}
+          children={userInfo => (
+            <div>
+              <span>{userInfo.name}</span>
+              <span>{userInfo.age}</span>
+              <Outlet />
+            </div>
+          )}
+        ></Await>
       </React.Suspense>
     </div>
   );
@@ -265,7 +274,7 @@ defer 的具体用法请查看 [defer](https://reactrouter.com/en/main/guides/de
 
 :::
 
-{/* TODO 缓存相关  */}
+{/* TODO 缓存相关 */}
 
 ### 错误用法
 

package/zh/guides/basic-features/html.mdx

@@ -2,9 +2,10 @@
 title: HTML 模板
 sidebar_position: 9
 ---
+
 # HTML 模板
 
-Modern.js 提供了 **JSX 语法**和**HTML(Ejs) 语法**两种方式用于自定义 HTML 模板。
+Modern.js 提供了 **JSX 语法**和 **HTML(EJS) 语法**两种方式用于自定义 HTML 模板。
 
 ## JSX 语法
 
@@ -14,14 +15,14 @@ Modern.js 约定，在 `src/` 目录下，或在入口目录下，可以创建 `
 
 ```bash
 .
-├── src
-│   ├── Document.tsx
-│   ├── entry-a
-│   │   ├── Document.tsx
-│   │   └── routes
-│   ├── entry-b
-│   │   └── routes
-│   └── modern-app-env.d.ts
+└── src
+    ├── Document.tsx
+    ├── entry-a
+    │   ├── Document.tsx
+    │   └── routes
+    ├── entry-b
+    │    └── routes
+    └── modern-app-env.d.ts
 ```
 
 `entry-a` 会优先使用当前入口下的 `Docoument.[jt]sx` 文件。如果当前入口没有 `Document.[jt]sx` 文件，例如 `entry-b`，则会查找根目录下的 `Document.[jt]sx` 文件。

package/zh/guides/basic-features/mock.mdx

@@ -77,3 +77,23 @@ module.exports = {
   },
 };
 ```
+
+## 按需使用 Mock 服务
+
+`config/mock/index.ts` 下还可以到处 `config` 对象，更精细的控制 Mock 服务。
+
+```ts
+type MockConfig = {
+  enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
+};
+
+export const config = {
+  enable: false
+}
+```
+
+目前仅支持 `enable` 配置，开发者可以通过该配置控制是否执行 Mock。
+
+:::note
+修改 `config` 后无需重启服务，即刻生效。
+:::

package/zh/guides/basic-features/routes.mdx

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # 路由
 
-Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同[入口](/docs/guides/concept/entries)类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
+Modern.js 的路由基于 [React Router 6](https://reactrouter.com/en/main)，并提供了多种类型的路由模式。根据不同 [入口](/guides/concept/entries) 类型，将路由分为三种模式，分别是**约定式路由**，**自控式路由**和**其他路由方案**。
 
 :::note
 本小节提到的路由，都是客户端路由，即 SPA 路由。
@@ -109,7 +109,7 @@ export default () => {
 .
 └── routes
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     ├── layout.tsx
     ├── page.tsx
     └── user
@@ -156,15 +156,15 @@ export default () => {
 ```
 └── routes
     ├── [id]
-    │   └── page.tsx
+    │   └── page.tsx
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     └── page.tsx
 ```
 
 `routes/[id]/page.tsx` 文件会转为 `/:id` 路由。除了可以确切匹配的 `/blog` 路由，其他所有 `/xxx` 都会匹配到该路由。
 
-在组件中，可以通过 [useParams](/apis/app/runtime/router/#useparams) 获取对应命名的参数。
+在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
 在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params.xxx` 可以获取。
 
@@ -181,11 +181,11 @@ export default () => {
 └── routes
     ├── $.tsx
     ├── blog
-    │   └── page.tsx
+    │   └── page.tsx
     └── page.tsx
 ```
 
-当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/#useparams) 捕获 url 的剩余部分。
+当访问任何匹配不到的路径时，都会渲染 `routes/$.tsx` 组件，同样，`$.tsx` 中可以使用 [useParams](/apis/app/runtime/router/router#useparams) 捕获 url 的剩余部分。
 ```ts title="$.tsx"
 import { useParams } from '@modern-js/runtime/router';
 // 当 path 是 `/aaa/bbb` 时
@@ -248,9 +248,9 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 .
 └── routes
     ├── blog
-    │   ├── [id]
-    │   │   └── page.tsx
-    │   └── page.tsx
+    │   ├── [id]
+    │   │   └── page.tsx
+    │   └── page.tsx
     ├── layout.tsx
     ├── loading.tsx
     └── page.tsx
@@ -292,6 +292,22 @@ Modern.js 建议必须有根 layout 和根 loading。
 
 同理，当路由从 `/` 或者 `/blog` 跳转到 `/blog/123` 时，如果 `blog/[id]/page` 组件的 JS Chunk 还未加载，也会先展示 `loading.tsx` 中导出的组件 UI。
 
+### 路由重定向
+
+可以通过创建 [`data loader`](/guides/basic-features/data-fetch) 文件做路由的重定向，如有文件 `routes/user/page.tsx`，想对这个文件对应的路由做重定向，可以创建 `routes/user/page.loader.ts` 文件：
+
+```ts title="routes/user/page.loader.ts"
+import { redirect } from "@edenx/runtime/router"
+
+export default () => {
+  const user = await getUser();
+  if(!user){
+    return redirect('/login');
+  }
+  return null;
+}
+```
+
 ### 错误处理
 
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -302,7 +318,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 
 {/* Todo API 路由 */}
 
-在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/#useparams) 获取的错误的具体信息：
+在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/apis/app/runtime/router/router#useparams) 获取的错误的具体信息：
 
 ```tsx
 import { useRouteError } from '@modern-js/runtime/router';
@@ -329,8 +345,15 @@ import type { AppConfig } from '@modern-js/runtime';
 export const config = (): AppConfig => {
   return {
     router: {
-      supportHtml5History: false
-    }
+      createRoutes() {
+        return [
+          {
+            path: 'edenx',
+            element: <div>edenx</div>,
+          },
+        ];
+      },
+    },
   }
 };
 ```
@@ -380,12 +403,10 @@ export default () => {
 配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
 
 ```tsx title="src/routes/layout.tsx"
-import {
-  RuntimeContext,
-} from '@modern-js/runtime';
+import { RuntimeContext } from '@modern-js/runtime';
 
 export const init = (context: RuntimeContext) => {
-  if (process.env.JUPITER_TARGET === 'node') {
+  if (process.env.MODERN_TARGET === 'node') {
     return {
       message: 'Hello World By Server',
     }

package/zh/guides/{basic-features → concept}/builder.mdx

@@ -1,12 +1,12 @@
 ---
-title: 构建能力
 sidebar_position: 2
 ---
-# 构建能力
+
+# 构建引擎
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
 
 ## 构建架构
 
@@ -14,7 +14,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 
 - 上层研发框架：Modern.js。
 - 通用构建引擎：Modern.js Builder。
-- 底层打包工具：webpack 和 Rspack。
+- 底层打包工具：webpack 和 rspack。
 
 <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
 

package/zh/guides/concept/entries.mdx

@@ -1,7 +1,7 @@
 ---
-title: 入口
-sidebar_position: 2
+sidebar_position: 1
 ---
+
 # 入口
 
 入口是 Modern.js 默认的文件约定，项目的每一个入口是一张独立的页面，对应一条**服务端路由**。
@@ -15,11 +15,11 @@ Modern.js 初始化的项目是单入口的，项目结构如下：
 ```
 .
 ├── src
-│   ├── modern-app-env.d.ts
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   ├── modern-app-env.d.ts
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 ├── package.json
 ├── modern.config.ts
 ├── pnpm-lock.yaml
@@ -41,10 +41,10 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 .
 ├── modern-app-env.d.ts
 ├── myapp
-│   └── routes
-│       ├── index.css
-│       ├── layout.tsx
-│       └── page.tsx
+│   └── routes
+│       ├── index.css
+│       ├── layout.tsx
+│       └── page.tsx
 └── new-entry
     └── routes
         ├── index.css

package/zh/guides/css/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "CSS 开发方案",
+  "position": 5,
+  "collapsed": false
+}

package/zh/guides/{basic-features/css → css}/less-sass.mdx

@@ -12,6 +12,6 @@ sidebar_position: 4
 - 如果需要自定义 [sass-loader](https://github.com/webpack-contrib/sass-loader) 的配置，请参考 [tools.less](/configure/app/tools/sass) 配置项。
 
 :::tip 提示
-经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/basic-features/css/postcss)】。
+经过 Less 和 Sass 预编译后的 CSS 文件，仍然会经过 Modern.js 内置的 [PostCSS](https://postcss.org/) 的转换，具备良好的浏览器兼容性。相关内容请参考【[PostCSS](/guides/css/postcss)】。
 
 :::

package/zh/guides/{basic-features/css → css}/postcss.mdx

@@ -10,10 +10,11 @@ sidebar_position: 3
 
 1. [Autoprefixer](https://github.com/postcss/autoprefixer) 根据需要支持的浏览器范围，会自动为 CSS 规则添加需要的浏览器厂商前缀。Modern.js 默认支持的浏览器范围为：`['> 0.01%', 'not dead', 'not op_mini all']`。
 
-:::info意
-  - 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
-  - `not dead` 是指不包含官方不再支持的浏览器和过去24个月没有更新的浏览器。
-  - `not op_mini all` 是指不包含 Opera Mini。
+:::info 注意
+
+- 【支持的浏览器范围为：`> 0.01%`】是指浏览器市场份额大于 0.01%。
+- `not dead` 是指不包含官方不再支持的浏览器和过去 24 个月没有更新的浏览器。
+- `not op_mini all` 是指不包含 Opera Mini。
 
 :::
 

package/zh/guides/{basic-features/css → css}/tailwindcss.mdx

@@ -18,7 +18,6 @@ sidebar_position: 2
 ```ts title="modern.config.ts"
 import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   plugins: [..., tailwindcssPlugin()],
 });

package/zh/guides/get-started/introduction.mdx

@@ -0,0 +1,31 @@
+---
+title: 介绍
+sidebar_position: 1
+---
+
+# Modern.js 介绍
+
+**Modern.js** 是基于 React 的渐进式现代 Web 开发框架。
+
+框架内置多种开箱即用的开发工具，拥有极致的构建性能，支持零配置的渲染范式切换，一体化的 API 调用。并从三种工程方案出发（应用工程方案、模块工程方案，Monorepo 工程方案），支持全链路的前端研发。
+
+Modern.js 是字节跳动的底层前端研发框架，已经直接或间接的服务上千个应用，包括中后台、PC Web、H5 等多种应用场景。框架覆盖完整的生命周期，拥有完善的插件体系，提供高度定制能力。支持通过生成器插件自定义业务线专属的工程方案，定制各种功能扩展和业务需求，帮助开发者更快速的搭建应用。
+
+## 为什么使用 Modern.js
+
+Modern.js 能为开发者提供极致的**开发体验（Development Experience）**，让应用拥有更好的**用户体验（User Experience）**。
+
+在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置**额外的功能和优化**。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。
+
+它主要包含以下特点：
+
+- 🪜 **渐进式**：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
+- 🏠 **一体化**：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
+- 📦 **开箱即用**：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
+- 🌏 **周边生态**：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
+- 🕸 **多种路由模式**：包含自控路由、基于文件约定的路由（嵌套路由）等。
+- 🚀 **独立构建核心**：支持多种打包工具，深度优化构建产物。
+
+## 下一步
+
+如果你希望了解如何使用 Modern.js，可以尝试 [创建第一个应用](/tutorials/first-app/c01-start)，或是阅读 [快速上手](/guides/get-started/quick-start)。

package/zh/guides/get-started/quick-start.mdx

@@ -1,6 +1,6 @@
 ---
 title: 快速上手
-sidebar_position: 1
+sidebar_position: 2
 ---
 # 快速上手
 
@@ -45,10 +45,9 @@ import DebugApp from "@site-docs/components/debug-app"
 
 可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 
-```ts
+```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
 
-// https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
   runtime: {
     router: true,
@@ -97,9 +96,9 @@ info    File sizes after production build:
 .
 ├── asset-manifest.json
 ├── html
-│   └── main
+│   └── main
 ├── loader-routes
-│   └── main
+│   └── main
 ├── modern.config.json
 ├── route.json
 └── static

package/zh/guides/get-started/upgrade.mdx

@@ -1,7 +1,8 @@
 ---
 title: 升级
-sidebar_position: 2
+sidebar_position: 3
 ---
+
 # 升级
 
 ## 通过命令行升级

package/zh/guides/topic-detail/_category_.json

@@ -1,5 +1,5 @@
 {
   "label": "专题详解",
-  "position": 5,
-  "collapsed": true
+  "position": 6,
+  "collapsed": false
 }

package/zh/guides/topic-detail/generator/plugin/api/input/addInputBefore.mdx

@@ -45,7 +45,7 @@ context.addInputBefore('packageManager', {
 });
 ```
 
-:::info意事项
+:::info 注意事项
 
 1. 添加问题的 key 不能和 Modern.js 提供的项目类型自身的问题的 key 重复
 

package/zh/guides/topic-detail/micro-frontend/c02-development.mdx

@@ -251,6 +251,31 @@ export default (props: {basename: string}) => {
 
 在完成了微前端整体开发流程的体验后，你可以进一步了解如何 [开发主应用](/guides/topic-detail/micro-frontend/c03-main-app)
 
+## Modern.js 微前端和直接使用 Garfish 的区别
+
+使用纯 `Garfish` API 开发微前端应用时
+- 主应用：
+  - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run)
+  - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp#domgetter)
+- 子应用：
+  - 导出 `provider` [参考](https://www.garfishjs.org/guide/start#2%E5%AF%BC%E5%87%BA-provider-%E5%87%BD%E6%95%B0)
+  - 设置应用的 `basename` [参考](https://www.garfishjs.org/guide/start#3-%E8%AE%BE%E7%BD%AE%E5%BA%94%E7%94%A8%E8%B7%AF%E7%94%B1-basename)
+
+区别于直接使用 `Garfish` 运行时 API 开发微前端项目，`Modern.js` 的微前端方案更加开箱即用。
+使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件，在 `Garfish`
+插件的加持下，你只需要
+- 主应用：
+  - 配置 `runtime.masterApp.apps` 参数注册子应用
+  - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
+- 子应用：
+  - 配置 `deploy.microFrontend`
+
+所以插件中为你做了如下事情
+  - 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
+  - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
+  - 帮助你正确导出了 `provider`（子应用）
+  - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
+
 ## 常见问题
 
 自查手册: https://www.garfishjs.org/issues/

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

@@ -4,7 +4,7 @@ title: 开发主应用
 ---
 # 开发主应用
 
-在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development.md) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
+在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
 
 在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
 
@@ -41,13 +41,13 @@ defineConfig(App, {
       getAppList: async () => {
         // 可以从其他远程接口获取
         return [{
-          name: 'SubConvention',
-          entry: 'http://localhost:3002',
-          // activeWhen: '/SubConvention'
+          name: 'Table',
+          entry: 'http://localhost:8001',
+          // activeWhen: '/table'
         }, {
-          name: 'SubCustom',
-          entry: 'http://localhost:3003'
-          // activeWhen: '/SubConvention'
+          name: 'Dashboard',
+          entry: 'http://localhost:8002'
+          // activeWhen: '/dashboard'
         }];
       },
     },
@@ -81,8 +81,8 @@ import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, B
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/SubConvention'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/SubCustom'}>加载自控式路由子应用</Link></div>
+    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
+    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
     <div><Link to={'/'}>卸载子应用</Link></div>
     <Outlet />
   </>
@@ -101,7 +101,7 @@ export default () => {
           return (
             <Route
               key={app.name}
-              path={`${app.name}/*`}
+              path={`${app.name.toLowerCase()}/*`}
               element={
               <Component
                 loadable={{
@@ -138,7 +138,7 @@ export default () => {
 };
 ```
 
-这里通过 `Route` 组件自定义了 **SubConvention** 的激活路由为 **/SubConvention**， **SubCustom** 的激活路由为 **/SubCustom**。
+这里通过 `Route` 组件自定义了 **Table** 的激活路由为 **/table**， **Dashboard** 的激活路由为 **/dashboard**。
 
 ### 集中式路由
 
@@ -149,7 +149,7 @@ export default () => {
 然后在主应用中使用 `useModuleApp` 方法获取 `MApp` 组件, 并在主应用渲染 `MApp`。
 
 ```tsx title=主应用：App.tsx
-import { useModuleApp } from '@modern-js/plugin-runtime';
+import { useModuleApp } from '@modern-js/plugin-garfish/runtime';
 
 function App() {
   const { MApp } = useModuleApps();
@@ -162,7 +162,7 @@ function App() {
 }
 ```
 
-这样启动应用后，访问 `/SubCustom` 路由，会渲染 `SubCustom` 子应用，访问 `/SubConvention` 路由，会渲染 `SubConvention` 子应用。
+这样启动应用后，访问 `/table` 路由，会渲染 `Table` 子应用，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用。
 
 ### 两种模式混用
 
@@ -182,7 +182,7 @@ function Loading() {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
       }}
@@ -229,7 +229,7 @@ function Loading({ error, pastDelay }) {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
         delay: 300 // 0.3 seconds
@@ -265,7 +265,7 @@ function Loading({ error, timeOut, pastDelay }) {
 
 function App(){
   return <>
-    <SubCustom
+    <Table
       loadable={{
         loading: Loading,
         timeOut: 10000 // 10s