@modern-js/main-doc 2.35.0 → 2.35.1

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

@@ -1,10 +1,11 @@
 ---
-sidebar_position: 4
+title: 数据获取
+sidebar_position: 3
 ---
 
 # 数据获取
 
-Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在 CSR 和 SSR 环境同构的进行开发。
+Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过这些 API，在项目中获取数据。
 
 需要注意的是，这些 API 并不帮助应用发起请求，而是帮助开发者更好地管理数据，提升项目的性能。
 
@@ -216,26 +217,25 @@ export default function UserLayout() {
 
 :::info
 此功能目前是实验性质，后续 API 可能有调整。
-目前仅支持 CSR，敬请期待 Streaming SSR。
 
 :::
 
 创建 `user/layout.loader.ts`，并添加以下代码：
 
 ```ts title="routes/user/layout.loader.ts"
-import { defer } from "@modern-js/runtime/router"
+import { defer } from '@modern-js/runtime/router';
 
 const loader = () =>
-defer({
-  userInfo: new Promise((resolve) => {
+  defer({
+    userInfo: new Promise(resolve => {
       setTimeout(() => {
         resolve({
           age: 1,
-          name: 'user layout'
-        })
-      }, 1000)
-    })
-  })
+          name: 'user layout',
+        });
+      }, 1000);
+    }),
+  });
 
 export default loader;
 ```
@@ -346,7 +346,6 @@ export default async (): Promise<ProfileData> => {
 
 在 SSR 项目中，每个 `loader` 也是一个服务端接口，我们推荐使用 `loader` 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 
-
 ## useLoader（旧版）
 
 **`useLoader`** 是 Modern.js 老版本中的 API。该 API 是一个 React Hook，专门提供给 SSR 应用使用，让开发者能同构的在组件中获取数据。

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

@@ -135,7 +135,7 @@ export default function Document(): React.ReactElement {
       <!--<?- html ?>-->
       <h1 style="color:red">以下为构建时传过来的参数：</h1>
       <h2>entryName: sub</h2>
-      <h2>title: </h2>
+      <h2>title:</h2>
       <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
@@ -166,12 +166,11 @@ export default function Document(): React.ReactElement {
 }
 ```
 
+## HTML 语法
 
-## Html 语法
+Modern.js 也支持通过 HTML(EJS) 语法来生成 HTML 文件。
 
-Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中会内置一份 HTML 模板，用于生成 HTML 代码。
-
-基于 HTML 语法的模板，Modern.js 提供了**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式来自定义模板。
+默认情况下，Modern.js 的工程中会内置一份 HTML 模板，用于生成 HTML 代码。如果你需要自定义 HTML 模板，可以使用**自定义 HTML 片段**和**完全自定义 HTML 模板**两种方式。
 
 ### 自定义 HTML 片段
 

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 1
+sidebar_position: 2
 ---
 
 # 路由方案
@@ -151,13 +151,13 @@ export default () => {
 
 #### Config
 
-每个 `Layout` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
+每个 `Layout`, `$` 或 `Page` 文件都可以定义一个自己的 `config` 文件，如 `page.config.ts`，该文件中我们约定了一个具名导出 `handle`，
 这个字段中你可以定义任意属性：
 
 ```ts title="routes/page.config.ts"
 export const handle = {
-  breadcrumbName: 'profile'
-}
+  breadcrumbName: 'profile',
+};
 ```
 
 定义的这些属性可以通过 [`useMatches`](https://reactrouter.com/en/main/hooks/use-matches) hook 获取：
@@ -165,15 +165,13 @@ export const handle = {
 ```ts title="routes/layout.ts"
 export default () => {
   const matches = useMatches;
-  const breadcrumbs = matches.map(matchedRoute => matchedRoute?.handle?.breadcrumbName);
-  return (
-    <Breadcrumb names={breadcrumbs}>
-    </Breadcrumb>
-  )
-}
+  const breadcrumbs = matches.map(
+    matchedRoute => matchedRoute?.handle?.breadcrumbName,
+  );
+  return <Breadcrumb names={breadcrumbs}></Breadcrumb>;
+};
 ```
 
-
 ### 动态路由
 
 通过 `[]` 命名的文件目录，生成的路由会作为动态路由。例如以下文件目录：
@@ -233,6 +231,7 @@ export default () => {
 ```
 
 当访问任何匹配不到的路径时(如 `/blog/a`)，都会渲染 `routes/$.tsx` 组件，因为这里有 `layout.tsx`，渲染的 UI 如下：
+
 ```tsx
 <RootLayout>
   <BlogLayout>
@@ -254,7 +253,6 @@ params['*']; // => 'aaa/bbb'
 
 `$.tsx` 可以加入到 `routes` 目录下的任意目录中，一个常见的使用示例是添加 `routes/$.tsx` 文件去定制任意层级的 404 内容。
 
-
 ### 无路径布局
 
 当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
@@ -368,6 +366,17 @@ export default () => {
 };
 ```
 
+在组件内做重定向，则可以通过 `useNavigate` hook，示例如下：
+
+```ts title="routes/user/page.ts"
+import { useNavigate } from '@modern-js/runtime/router';
+
+export default () => {
+  const navigate = useNavigate();
+  navigate('/login');
+};
+```
+
 ### 错误处理
 
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -493,6 +502,7 @@ export const init = (context: RuntimeContext) => {
 ```
 
 :::info
+
 - 该功能目前仅在 Webpack 项目中支持，Rspack 项目暂不支持。
 - 对数据的预加载目前只会预加载 SSR 项目中 [Data Loader](/guides/basic-features/data-fetch) 中返回的数据。
 
@@ -512,14 +522,13 @@ export const init = (context: RuntimeContext) => {
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
-import Motivation from '@site-docs/components/convention-routing-motivation'
-
-<Motivation/>
+import Motivation from '@site-docs/components/convention-routing-motivation';
 
-import Practice from '@site-docs/components/routes-practice'
+<Motivation />
 
-<Practice/>
+import Practice from '@site-docs/components/routes-practice';
 
+<Practice />
 
 ## 自控式路由
 
@@ -569,5 +578,3 @@ export default defineConfig({
 ```
 
 如上述配置， 如果关闭了 [`runtime.router`](/configure/app/runtime/router) 配置，并直接使用 `react-router-dom` 进行项目路由管理时，还需要根据 React Router 文档自行包裹 `Provider`。
-
-

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

@@ -91,23 +91,15 @@ $ pnpm run build
 
 > modern build
 
-info    Create a production build...
-
-info    File sizes after production build:
+info    Staring production build...
+ready   Client compiled in 50ms
+info    Production file sizes:
 
   File                                      Size         Gzipped
-  dist/static/js/lib-corejs.ffeb7fb8.js     214.96 kB    67.23 kB
-  dist/static/js/lib-react.09721b5c.js      152.61 kB    49.02 kB
-  dist/static/js/218.102e2f39.js            85.45 kB     28.5 kB
-  dist/static/js/lib-babel.a7bba875.js      11.93 kB     3.95 kB
-  dist/html/main/index.html                 5.84 kB      2.57 kB
-  dist/static/js/main.3568a38e.js           3.57 kB      1.44 kB
-  dist/static/css/async/304.c3c481a5.css    2.62 kB      874 B
-  dist/asset-manifest.json                  1.48 kB      349 B
-  dist/static/js/async/304.c45706bc.js      1.4 kB       575 B
-  dist/static/js/async/509.fcb06e14.js      283 B        230 B
-
- Client ✔ done in 3.57s
+  dist/static/js/lib-react.09721b5c.js      152.6 kB     49.0 kB
+  dist/html/main/index.html                 5.8 kB       2.5 kB
+  dist/static/js/main.3568a38e.js           3.5 kB       1.4 kB
+  dist/static/css/main.03221f72.css         1.4 kB       741 B
 ```
 
 构建产物默认生成到 `dist/`，目录结构如下：
@@ -135,8 +127,7 @@ $ pnpm run serve
 
 > modern serve
 
-Starting the modern server...
-info    App running at:
+Starting production server...
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

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

@@ -8,11 +8,13 @@ sidebar_position: 3
 
 Modern.js 提供了 `upgrade` 命令支持项目升级到最新的 Modern.js 版本。
 
-在项目中执行 `pnpm run upgrade`：
+在项目中执行 `upgrade` 命令：
 
-```bash
-$ pnpm run upgrade
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="run upgrade" />
 
+```bash
 > modern upgrade
 
 [INFO] [项目类型]: Web 应用
@@ -22,11 +24,15 @@ $ pnpm run upgrade
 
 可以看到项目 `package.json` 中的依赖已经更改到最新。
 
+:::tip
+如果项目的 package.json 中没有声明 upgrade 命令，你可以执行 `npx modern upgrade`，效果是等价的。
+:::
+
 ## 指定版本升级
 
 Modern.js 所有的官方包目前都使用**统一版本号**进行发布。
 
-import ReleaseNote from "@site-docs/components/release-note"
+import ReleaseNote from '@site-docs/components/release-note';
 
 <ReleaseNote />
 

package/docs/zh/guides/topic-detail/framework-plugin/hook-list.mdx

@@ -736,7 +736,7 @@ export const myPlugin = (): CliPlugin<AppTools> => ({
 
 :::
 
-应用工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
+Modern.js 工程中的 Server 部分也支持了插件。其中的 Hook 将会提供一些特定阶段调用和特殊功能的 Hook。
 
 ### `create`
 

package/docs/zh/guides/topic-detail/framework-plugin/implement.mdx

@@ -177,6 +177,8 @@ export const myPlugin = (): CliPlugin => ({
 });
 ```
 
+注意，只有当前插件的 setup 异步函数执行完毕，才会继续执行下一个插件的 setup 函数。因此，你需要避免在 setup 函数中进行耗时过长的异步操作，防止影响 CLI 启动性能。
+
 ## 添加插件
 
 自定义插件的使用方式可以查看：[plugins (框架插件)](/configure/app/plugins)。下面会介绍 Modern.js 中推荐的插件实现方法。

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

@@ -2,6 +2,7 @@
 sidebar_position: 2
 title: 体验微前端
 ---
+
 # 体验微前端
 
 通过本章你可以了解到：
@@ -10,7 +11,9 @@ title: 体验微前端
 - 微前端项目开发的基本流程。
 
 ## 创建应用
+
 目前支持两种路由模式
+
 - 自控式路由
 - 约定式路由
 
@@ -27,7 +30,7 @@ mkdir masterApp && cd masterApp
 npx @modern-js/create@latest
 ```
 
-import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
+import DefaultMWAGenerate from '@site-docs/components/default-mwa-generate';
 
 <DefaultMWAGenerate />
 
@@ -40,17 +43,19 @@ import DefaultMWAGenerate from "@site-docs/components/default-mwa-generate";
 
 接下来，让我们注册微前端插件并添加开启微前端主应用，并增加子应用列表：
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
 然后我们在 routes 文件夹下新建两个目录
+
 - table (用于加载约定式路由子应用)
 - dashboard (用于加载自控式路由子应用)
 
 在这两个目录下我们需要新建一个 `$.tsx` 文件作为主应用约定式路由的入口($ 代表模糊匹配，即 `/table` 和 `/table/test` 都会匹配到这个 `$.tsx` 作为该路由的入口文件，这会保证在微前端场景下正确加载子应用路由)
 
 #### 加载约定式路由子应用
+
 ```js title="src/routes/table/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -61,13 +66,14 @@ const Index = () => {
     <div>
       <Table />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
 
 #### 加载自控式路由子应用
+
 ```js title="src/routes/dashboard/$.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
@@ -78,21 +84,30 @@ const Index = () => {
     <div>
       <Dashboard />
     </div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
+
 #### 路由跳转
+
 此时主应用配置已经完成，通过路由即可加载子应用，修改主应用的 `layout.tsx` 来跳转路由
+
 ```js title="src/route/layout.tsx"
 import { Outlet, Link } from '@modern-js/runtime/router';
 
 const Layout = () => (
   <div>
-    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
-    <div><Link to={'/'}>卸载子应用</Link></div>
+    <div>
+      <Link to={'/table'}>加载约定式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>加载自控式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/'}>卸载子应用</Link>
+    </div>
     <Outlet />
   </div>
 );
@@ -123,8 +138,10 @@ npx @modern-js/create@latest
 <EnableMicroFrontend />
 
 由于是自控式路由，我们删除掉 `routes` 文件夹并在 `src` 目录下增加 `App.tsx` 文件，此处如果使用的 `非 MApp` 组件，需要通过 `React Router v6` 的 `createBrowserRouter` API 来创建路由
+
 #### 加载子应用
-import CustomRouterMicroFrontend from "@site-docs/components/custom-router-micro-frontend";
+
+import CustomRouterMicroFrontend from '@site-docs/components/custom-router-micro-frontend';
 
 <CustomRouterMicroFrontend />
 
@@ -139,7 +156,7 @@ npx @modern-js/create@latest
 
 按照如下选择，生成项目：
 
-<DefaultMWAGenerate/>
+<DefaultMWAGenerate />
 
 我们执行 `pnpm run new` 来开启 `微前端` 功能：
 
@@ -156,7 +173,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8081
+    port: 8081,
   },
   runtime: {
     router: true,
@@ -170,12 +187,13 @@ export default defineConfig({
 ```
 
 添加 `src/routes/page.tsx` 代码
+
 ```js title="src/routes/page.tsx"
 const Index = () => {
   return (
     <div className="container-box">subApp: 约定式路由的子应用的根路由</div>
-  )
-}
+  );
+};
 
 export default Index;
 ```
@@ -191,7 +209,7 @@ npx @modern-js/create@latest
 
 按照如下选择，生成项目：
 
-<DefaultMWAGenerate/>
+<DefaultMWAGenerate />
 
 我们执行 `pnpm run new` 来开启 `微前端`：
 
@@ -208,7 +226,7 @@ import { garfishPlugin } from '@modern-js/plugin-garfish';
 
 export default defineConfig({
   dev: {
-    port: 8082
+    port: 8082,
   },
   runtime: {
     router: true,
@@ -220,6 +238,7 @@ export default defineConfig({
   plugins: [appTools(), garfishPlugin()],
 });
 ```
+
 自控式路由需要删除掉 `routes` 文件夹并在 `src` 目录下新建 `App.tsx`
 
 并在 `src/App.tsx` 添加代码，注意需要从 `props` 中解析并传递 `basename` 给 `BrowserRouter`
@@ -227,7 +246,7 @@ export default defineConfig({
 ```js title="src/App.tsx"
 import { BrowserRouter, Route, Routes } from '@modern-js/runtime/router';
 
-export default (props: {basename: string}) => {
+export default (props: { basename: string }) => {
   const { basename } = props;
 
   return (
@@ -242,7 +261,9 @@ export default (props: {basename: string}) => {
 ```
 
 ## 调试
+
 按顺序在目录执行 `pnpm run dev` 命令启动应用：
+
 - masterApp 主应用 `http://localhost:8080`
 - table 子应用(约定式路由) `http://localhost:8081`
 - dashboard 子应用(自控式路由) `http://localhost:8082`
@@ -254,6 +275,7 @@ export default (props: {basename: string}) => {
 ## Modern.js 微前端和直接使用 Garfish 的区别
 
 使用纯 `Garfish` API 开发微前端应用时
+
 - 主应用：
   - 安装 Garfish 依赖并使用 `Garfish.run` 注册子应用 [参考](https://www.garfishjs.org/api/run)
   - 提供一个常驻的 `DOM` 节点供子应用挂载 [参考](https://www.garfishjs.org/api/registerApp#domgetter)
@@ -264,6 +286,7 @@ export default (props: {basename: string}) => {
 区别于直接使用 `Garfish` 运行时 API 开发微前端项目，`Modern.js` 的微前端方案更加开箱即用。
 使用 `pnpm new` 启用微前端模式后会自动在 `Modern.js` 应用中集成 `Garfish` 插件，在 `Garfish`
 插件的加持下，你只需要
+
 - 主应用：
   - 配置 `runtime.masterApp.apps` 参数注册子应用
   - 使用 `useModuleApps` API 获取子应用实例并在组件中完成渲染
@@ -271,10 +294,11 @@ export default (props: {basename: string}) => {
   - 配置 `deploy.microFrontend`
 
 所以插件中为你做了如下事情
-  - 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
-  - `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
-  - 帮助你正确导出了 `provider`（子应用）
-  - 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
+
+- 帮助你通过 `Garfish` 运行时 API 自动注册子应用（主应用）
+- `useModulesApps` 函数的返回值提供了一个常驻的 `DOM` 节点供子应用挂载（主应用）
+- 帮助你正确导出了 `provider`（子应用）
+- 帮助你正确设置了 `basename` 给 `Modern.js` 运行时提供 `Router` 实例，如果是`自控式路由`或`手动引入的 react-router-dom` 那么需要从 `App.tsx` 的 `props` 中获取 `basename` 手动传递给引入的 `Router 实例`（子应用）
 
 ## 常见问题
 

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

@@ -2,13 +2,14 @@
 sidebar_position: 3
 title: 开发主应用
 ---
+
 # 开发主应用
 
 在上一章 [体验微前端](/guides/topic-detail/micro-frontend/c02-development) 通过一个示例演示了如何创建和配置微前端子应用，通过本章你可以进一步了解如何开发主应用，以及它的常见配置。
 
-在通过 `@modern-js/create` 命令创建应用工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
+在通过 `@modern-js/create` 命令创建 Modern.js 工程后，可以在项目中执行 `pnpm run new`（实际执行了 `modern new` 命令），在选择了「微前端」模式后，会安装微前端依赖依赖，只需手动注册插件即可。
 
-import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
+import EnableMicroFrontend from '@site-docs/components/enable-micro-frontend';
 
 <EnableMicroFrontend />
 
@@ -26,7 +27,7 @@ import EnableMicroFrontend from "@site-docs/components/enable-micro-frontend";
 
 :::
 
-import MicroRuntimeConfig from "@site-docs/components/micro-runtime-config";
+import MicroRuntimeConfig from '@site-docs/components/micro-runtime-config';
 
 <MicroRuntimeConfig />
 
@@ -40,15 +41,18 @@ defineConfig(App, {
     manifest: {
       getAppList: async () => {
         // 可以从其他远程接口获取
-        return [{
-          name: 'Table',
-          entry: 'http://localhost:8001',
-          // activeWhen: '/table'
-        }, {
-          name: 'Dashboard',
-          entry: 'http://localhost:8002'
-          // activeWhen: '/dashboard'
-        }];
+        return [
+          {
+            name: 'Table',
+            entry: 'http://localhost:8001',
+            // activeWhen: '/table'
+          },
+          {
+            name: 'Dashboard',
+            entry: 'http://localhost:8002',
+            // activeWhen: '/dashboard'
+          },
+        ];
       },
     },
   },
@@ -77,16 +81,30 @@ defineConfig(App, {
 ```js title="App.tsx"
 import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
 
-import { RouterProvider, Route, createBrowserRouter, createRoutesFromElements, BrowserRouter, Link, Outlet } from '@modern-js/runtime/router';
+import {
+  RouterProvider,
+  Route,
+  createBrowserRouter,
+  createRoutesFromElements,
+  BrowserRouter,
+  Link,
+  Outlet,
+} from '@modern-js/runtime/router';
 
 const AppLayout = () => (
   <>
-    <div><Link to={'/table'}>加载约定式路由子应用</Link></div>
-    <div><Link to={'/dashboard'}>加载自控式路由子应用</Link></div>
-    <div><Link to={'/'}>卸载子应用</Link></div>
+    <div>
+      <Link to={'/table'}>加载约定式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/dashboard'}>加载自控式路由子应用</Link>
+    </div>
+    <div>
+      <Link to={'/'}>卸载子应用</Link>
+    </div>
     <Outlet />
   </>
-)
+);
 
 export default () => {
   const { apps, MApp } = useModuleApps();
@@ -103,25 +121,25 @@ export default () => {
               key={app.name}
               path={`${app.name.toLowerCase()}/*`}
               element={
-              <Component
-                loadable={{
-                  loading: ({ pastDelay, error }: any) => {
-                    if (error) {
-                      return <div>error: {error?.message}</div>;
-                    } else if (pastDelay) {
-                      return <div>loading</div>;
-                    } else {
-                      return null;
-                    }
-                  },
-                }}
-              />
+                <Component
+                  loadable={{
+                    loading: ({ pastDelay, error }: any) => {
+                      if (error) {
+                        return <div>error: {error?.message}</div>;
+                      } else if (pastDelay) {
+                        return <div>loading</div>;
+                      } else {
+                        return null;
+                      }
+                    },
+                  }}
+                />
               }
             />
-          )
+          );
         })}
-      </Route>
-    )
+      </Route>,
+    ),
   );
 
   return (

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

@@ -2,6 +2,7 @@
 sidebar_position: 4
 title: 主子应用通信
 ---
+
 # 主子应用通信
 
 ## props 通信

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

@@ -2,6 +2,7 @@
 sidebar_position: 5
 title: 混合技术栈
 ---
+
 # 混合技术栈
 
 Modern.js 微前端方案是基于 [Garfish](https://garfishjs.org/) 封装的，提供了一些更开箱即用的使用方式。

package/docs/zh/tutorials/first-app/c02-component.mdx

@@ -1,6 +1,7 @@
 ---
 title: 编写 UI 组件
 ---
+
 # 编写 UI 组件
 
 上一章节中，我们学习了如何初始化项目，并使用配置修改 Modern.js 的默认行为。
@@ -9,9 +10,9 @@ title: 编写 UI 组件
 
 为了做更好的 UI 展示和交互，我们引入组件库 [Antd](https://ant.design/index-cn) 来开发，使用 `<List>` 组件来代替原始的列表。先添加依赖：
 
-```bash
-pnpm add antd
-```
+import { PackageManagerTabs } from '@theme';
+
+<PackageManagerTabs command="add antd" />
 
 修改 `src/routes/page.tsx`，在顶部导入组件：