@modern-js/main-doc 2.21.0 → 2.22.0

package/docs/en/tutorials/first-app/c08-entries.mdx

@@ -14,9 +14,9 @@ A complete project may require multiple entries, Modern.js supports the automati
 We can also use it to create new project elements and execute `pnpm run new` in the project root directory:
 
 ```bash
-? Action Create project element
-? Create project element New "entry"
-? Entry name (entry) landing-page
+? Please select the operation you want: Create Element
+? Please select the type of element to create: New "entry"
+? Please fill in the entry name: landing-page
 ```
 
 When created, the project will look like this:

package/docs/zh/apis/app/commands.mdx

@@ -126,7 +126,7 @@ Options:
 ```bash
 $ npx modern new
 ? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「应用入口」
+? 请选择创建元素类型 新建「应用入口」
 ? 请填写入口名称 entry
 ```
 
@@ -137,8 +137,8 @@ $ npx modern new
 ```bash
 $ npx modern new
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 (Use arrow keys)
-❯ 启用 Tailwind CSS 支持
+? 请选择功能名称 (Use arrow keys)
+❯ 启用 「Tailwind CSS」 支持
   启用「BFF」功能
   启用「微前端」模式
   启用「单元测试 / 集成测试」功能

package/docs/zh/apis/app/hooks/api/{functions/api.mdx → api.mdx}

@@ -4,7 +4,7 @@ sidebar_position: 1
 ---
 # **/*.[tj]s
 
-在 BFF 函数写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/functions/api)外，`api` 目录下的文件会被注册为接口的路由。
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/api#白名单)外，`api` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -31,7 +31,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -64,7 +64,7 @@ export const get = async () => {
 };
 ```
 
-这样导出函数，则会得到一个 `POST` 接口。
+这样导出函数，则会得到一个 `GET` 接口。
 
 应用工程中支持了 9 个 Method 定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
@@ -75,6 +75,6 @@ export const get = async () => {
 可以在一个文件中定义多个不同 Method 的函数，但如果定义多个相同 Method 的函数，则只有第一个会生效。
 
 :::info
-需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关，这个后面会提到。
+需要注意的是，定义的函数都应该是异步的，这个与函数调用时类型有关。
 
 :::

package/docs/zh/apis/app/hooks/api/app.mdx

@@ -0,0 +1,12 @@
+---
+title: _app.[tj]s
+sidebar_position: 2
+---
+# _app.[tj]s
+
+在 [BFF 函数写法](/guides/advanced-features/bff/type.html#函数写法)下，该文件可以为 BFF 函数添加前置中间件。
+
+:::note
+具体示例请参考 [hook](/apis/app/runtime/bff/hook)
+
+:::

package/docs/zh/apis/app/hooks/api/{framework/lambda.mdx → lambda.mdx}

@@ -1,10 +1,10 @@
 ---
 title: lambda/*.[tj]s
-sidebar_position: 1
+sidebar_position: 3
 ---
 # lambda/*.[tj]s
 
-在 BFF 框架写法下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/framework/lambda#白名单)外，`api/` 目录下的文件会被注册为接口的路由。
+在 [BFF 框架写法](/guides/advanced-features/bff/type.html#框架写法)下，声明 API 路由的文件。除了[某些约定文件](/apis/app/hooks/api/lambda#白名单)外，`lambda/` 目录下的文件会被注册为接口的路由。
 
 :::info
 使用 `api` 目录需要开启 BFF 功能，需要在项目下执行 new 命令启用「BFF」功能。
@@ -34,7 +34,7 @@ sidebar_position: 1
 
 ### 动态路由
 
-同样的，你可以通过创建带有 `[xxx]` 的文件夹或者文件来支持动态的命名路由参数。
+路由系统支持通过 `[]` 命名的文件目录生成动态路由。
 
 - `api/lambda/user/[username]/info.ts` -> `$BASENAME/user/:username/info`
 - `api/lambda/user/[username]/delete.ts` -> `$BASENAME/user/:username/delete`
@@ -44,7 +44,7 @@ sidebar_position: 1
 
 ### 白名单
 
-默认 `api` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
+默认 `lambda` 目录下所有文件都会当作 BFF 函数文件去解析，但同样我们也设置了白名单，这些文件不被被解析：
 
 - 命名以 `_` 开头的文件。例如：`_utils.ts`。
 - 命名以 `_` 开头的文件夹下所有文件。例如：`_utils/index.ts`、`_utils/cp.ts`。
@@ -54,4 +54,4 @@ sidebar_position: 1
 
 ## 函数定义
 
-和函数写法下[函数定义](/apis/app/hooks/api/functions/api#define-function)完全一致。
+和函数写法下[函数定义](/apis/app/hooks/api/api#函数定义)完全一致。

package/docs/zh/apis/app/hooks/api/test.mdx

@@ -1,12 +1,12 @@
 ---
 title: test.[tj]s
-sidebar_position: 2
+sidebar_position: 4
 ---
 # test.[tj]s
 
-应用的 BFF 测试文件，支持在 `api/` 目录后缀为 `.test.[tj]sx?` 的文件中编写测试用例。
+The BFF test file of the application supports writing test cases in files with the suffix `.test.[tj]sx?` under the `api/` directory.
 
 :::info
-使用单元测试、集成测试需要提前在项目下执行 new 命令启用「单元测试 / 集成测试」功能。
+Enabling unit testing and integration testing requires running the new command to enable the "Unit Testing/Integration Testing" function under the project first.
 
 :::

package/docs/zh/apis/app/hooks/config/icon.mdx

@@ -1,11 +1,11 @@
 ---
-title: icon
+title: icon/
 sidebar_position: 2
 ---
 
-# Icon
+# icon/
 
-## 设置 favicon
+## Favicon
 
 当项目根目录的 `config` 目录下存在 `favicon.*` 文件时，Modern.js 会自动将该文件设置到 [html.favicon](/configure/app/html/favicon) 配置项中，用于生成页面的 favicon 图标：
 
@@ -24,15 +24,15 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- favicon.png
-- favicon.jpg
-- favicon.jpeg
-- favicon.svg
-- favicon.ico
+- `favicon.png`
+- `favicon.jpg`
+- `favicon.jpeg`
+- `favicon.svg`
+- `favicon.ico`
 
-## 设置 app icon
+## Apple Touch Icon
 
-当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 apple-touch-icon 图标。
+当项目根目录的 `config` 目录下存在 `icon.*` 文件时，Modern.js 会自动将该文件设置到 [html.appIcon](/configure/app/html/app-icon) 配置项中，用于生成 iOS 系统下的 Apple Touch Icon 图标。
 
 ```
 ./config
@@ -49,8 +49,8 @@ sidebar_position: 2
 
 在设置 app icon 时，Modern.js 会按以下顺序寻找文件：
 
-- icon.png
-- icon.jpg
-- icon.jpeg
-- icon.svg
-- icon.ico
+- `icon.png`
+- `icon.jpg`
+- `icon.jpeg`
+- `icon.svg`
+- `icon.ico`

package/docs/zh/apis/app/hooks/config/mock.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # mock/
 
-项目根目录下存在 `config/mock/index.js` 时，在开发环节自动开启 Mock 服务。
+当项目目录下存在 `config/mock/index.js` 时，Modern.js 在开发环节将自动开启 Mock 服务。

package/docs/zh/apis/app/hooks/config/public.mdx

@@ -4,13 +4,13 @@ sidebar_position: 3
 ---
 # public/
 
-`public/` 目录中可以放置任意格式的静态资源文件，文件会被 Serve 在 Web 应用域名下。
+`public/` 目录中可以放置任意格式的静态资源文件，文件会被服务端部署到对应的应用域名下。
 
 ## 说明
 
-被 Serve 的文件路由基于目录结构的约定，其中，`public/` 为根目录，对应 Web 应用根路径。
+文件路由基于目录结构的约定，其中，`public/` 为根目录，对应 Web 应用根路径。
 
-例如 `config/public/sdk/index.js` 文件，在部署后将会被 Serve 在 `${domain}/sdk/index.js` 下。
+例如 `config/public/sdk/index.js` 文件，在部署后将会被部署在 `${domain}/sdk/index.js` 下。
 
 ## 场景
 

package/docs/zh/apis/app/hooks/config/upload.mdx

@@ -14,7 +14,7 @@ sidebar_position: 4
 
 ## 场景
 
-例如 `google-analysis.js` 等项目自用的 SDK（通常需要 http 缓存）。
+例如 `google-analysis.js` 等项目自用的 SDK（通常需要 HTTP 缓存）。
 
 图片、字体文件、通用 CSS 等。
 

package/docs/zh/apis/app/hooks/modern-config.mdx

@@ -1,9 +1,9 @@
 ---
-title: modern.config.js
+title: modern.config.[tj]s
 sidebar_position: 8
 ---
-# modern.config.js
+# modern.config.[tj]s
 
 Modern.js 配置文件, 通过该文件可以对当前项目的各个方面进行个性化配置。
 
-了解配置的具体用法，请参考 [配置使用](/configure/app/usage)。
+了解配置的具体用法，请参考[配置使用](/configure/app/usage)。

package/docs/zh/apis/app/hooks/server/index_.mdx

@@ -4,11 +4,6 @@ sidebar_position: 1
 ---
 # index.[tj]s
 
-扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 Hook 或 Middleware。
+扩展 Modern.js Web Server 的文件，在此文件中可以给应用工程启动的 Web Server 添加 [Hook](/apis/app/runtime/web-server/hook) 或 [Middleware](/apis/app/runtime/web-server/middleware)。
 
 可以对请求和响应进行拦截处理，鉴权与角色、请求预处理、异常兜底等。也可在内置处理逻辑（包括路由匹配、资源寻址、头部注入、页面渲染，静态 Web 托管）插入特定的业务逻辑。
-
-:::info
-具体使用示例可查看 [Hook](/apis/app/runtime/web-server/hook) & [Middleware](/apis/app/runtime/web-server/middleware)。
-
-:::

package/docs/zh/apis/app/hooks/shared.mdx

@@ -4,4 +4,4 @@ sidebar_position: 5
 ---
 # shared/
 
-共享源码目录。当项目在 `api/`、`server/`、`src/` 下有公共代码时，可将这些代码放到 shared 目录下，而不是直接引用。
+共享源码目录。当项目在 `api/`、`server/`、`src/` 下有公共代码时，可将这些代码放到 `shared` 目录下，而不是直接引用。

package/docs/zh/apis/app/hooks/src/app.mdx

@@ -4,46 +4,36 @@ sidebar_position: 1
 ---
 # App.[tj]sx
 
-应用使用自控路由时的入口标识符。
+应用使用[自控路由](/guides/basic-features/routes.html#self-controlled-routing)时的入口标识符。
 
 `App.[tj]sx` 并不是实际的应用入口，Modern.js 会自动生成真正的构建打包的入口文件, 内容大致如下：
 
 ```js
 import React from 'react';
+import ReactDOM from 'react-dom/client';
 import { createApp, bootstrap } from '@modern-js/runtime';
 // App.[jt]sx
 import App from '@_modern_js_src/App';
-import { state } from '@modern-js/runtime/plugins';
-import {
-  immer,
-  effects,
-  autoActions,
-  devtools,
-} from '@modern-js/runtime/model';
-
-const createStatePlugins = config => {
-  const plugins = [];
-  plugins.push(immer(config['immer']));
-  plugins.push(effects(config['effects']));
-  plugins.push(autoActions(config['autoActions']));
-  plugins.push(devtools(config['devtools']));
-  return plugins;
-};
+// runtime plugin
+import { router } from '@modern-js/runtime/plugins';
+
+const IS_BROWSER = typeof window !== 'undefined' && window.name !== 'nodejs';
+const MOUNT_ID = 'root';
+
 let AppWrapper = null;
+
 function render() {
   AppWrapper = createApp({
     plugins: [
-      state({
-        ...{ plugins: createStatePlugins(true) },
-        ...App?.config?.state,
-      }),
-    ],
-  })(App);
+     router({...{"serverBase":["/"]}, ...App.config?.router}),
+    ]
+  })(App)
   if (IS_BROWSER) {
-    bootstrap(AppWrapper, MOUNT_ID);
+    bootstrap(AppWrapper, MOUNT_ID, null, ReactDOM);
   }
-  return AppWrapper;
+  return AppWrapper
 }
+
 AppWrapper = render();
 export default AppWrapper;
 ```

package/docs/zh/apis/app/hooks/src/index_.mdx

@@ -4,13 +4,13 @@ sidebar_position: 4
 ---
 # index.[tj]s
 
-应用项目入口标识。
+应用使用自定义 `bootstrap` 时的入口标识。
 
-通常情况下 [`src/App.[tj]sx, src/[entry]/App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在 `bootstrap` 之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `index.[tj]s`。 下面有分两种情况进行讨论:
+通常情况下 [`App.[tj]sx`](/apis/app/hooks/src/app) 钩子文件已经能满足我们的需求，当我们需要在 `bootstrap` 之前添加自定义行为或者完全接管 webpack 打包入口时，可以在 `src` 或者入口目录下放置 `index.[tj]s`。 下面有分两种情况进行讨论：
 
-1. 在 bootstrap 之前添加自定义行为：
+## 在 bootstrap 之前添加自定义行为
 
-只需要 `src/index.[tj]s` 默认导出函数:
+只需要 `src/index.[tj]s` 默认导出函数：
 
 ```js title=src/index.js
 import ReactDOM from 'react-dom/client';
@@ -22,9 +22,9 @@ export default (App: React.ComponentType) => {
 };
 ```
 
-2. 完全接管 webpack 入口:
+## 完全接管 webpack 入口
 
-当 `src/index.[tj]sx?` 下没有默认导出函数时，该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码:
+当 `src/index.[tj]sx?` 下没有默认导出函数时，该文件即为真正的 webpack 打包入口文件, 可以直接像使用 create-react-app 等脚手架一样组织代码：
 
 ```js title=src/index.jsx
 import React from 'react';

package/docs/zh/apis/app/hooks/src/pages.mdx

@@ -4,9 +4,13 @@ sidebar_position: 3
 ---
 # pages/
 
-应用使用基于文件系统路由时的入口标识。
+应用使用 [`Pages` 入口](https://modernjs.dev/v1/docs/guides/usages/entries#pages-%E5%85%A5%E5%8F%A3)时的入口标识。
 
-当项目结构为 `Pages 入口` 类型时， 会分析 `src/pages` 目录下的文件得到客户端路由配置。
+:::info
+兼容 Modern.js 1.0 `Pages` 入口，推荐使用[约定式路由](guides/basic-features/routes.html#约定式路由)。
+:::
+
+当项目结构为 `Pages 入口`类型时， 会分析 `src/pages` 目录下的文件得到客户端路由配置。
 
 举例说明，例如以下目录结构：
 
@@ -20,7 +24,7 @@ sidebar_position: 3
         └── info.jsx
 ```
 
-对应生成的路由配置为:
+对应生成的路由配置为：
 
 ```bash
 [

package/docs/zh/apis/app/hooks/src/routes.mdx

@@ -4,13 +4,13 @@ sidebar_position: 2
 ---
 # routes/
 
-应用使用基于文件系统路由时的入口标识。
+应用使用[约定式路由](guides/basic-features/routes.html#约定式路由)时的入口标识。
 
-当项目结构为 `Routes 入口` 类型时， 会分析 `src/routes` 目录下的文件得到客户端路由配置。具体用法请查看[约定式路由](/guides/basic-features/routes)
+约定式路由以 `routes/` 为约定的入口， 会分析 `src/routes` 目录下的文件得到客户端路由配置。
 
 任何在 `src/routes` 下的 `layout.[tj]sx` 和 `page.[tj]sx` 都会作为应用的路由：
 
-```bash {3}
+```bash {3,4}
 .
 └── routes
     ├── layout.tsx
@@ -54,7 +54,7 @@ sidebar_position: 2
 
 在组件中，可以通过 [useParams](/apis/app/runtime/router/router#useparams) 获取对应命名的参数。
 
-在 loader 中，params 会作为 [loader](/guides/basic-features/data-fetch#loader-函数) 的入参，通过 `params` 的属性可以获取到对应的参数。
+在使用 [loader](/guides/basic-features/data-fetch#loader-函数) 函数获取数据时，`params` 会作为 `loader` 函数的入参，通过 `params` 的属性可以获取到对应的参数。
 
 ## 布局组件
 

package/docs/zh/apis/app/hooks/src/stories.mdx

@@ -8,7 +8,7 @@ sidebar_position: 7
 
 可以在项目源码目录 `src/` 下创建 `*.stories.[tj]sx` 格式的文件作为 Storybook 的调试文件。
 
-在项目下执行 dev story 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
+在项目下执行 `npm run dev story` 命令，支持使用这些文件在 Storybook 中对相关内容进行调试。
 
 :::info
 使用 Storybook 需要提前在项目下执行 new 命令启用「Visual Testing (Storybook)」模式。

package/docs/zh/apis/app/runtime/core/use-runtime-context.mdx

@@ -28,6 +28,7 @@ type RuntimeContext = {
     cookie: string;
   };
   store: ReduckStore;
+  router: RemixRouter;
 };
 
 function useRuntimeContext(): RuntimeContext;
@@ -41,7 +42,10 @@ function useRuntimeContext(): RuntimeContext;
   - `query`：请求的查询字符串对象。
   - `headers`：请求头信息。
   - `cookie`：请求的 cookie 信息。
-- `store`：在开启了 state 插件的时候，该值为 reduck 全局 `store`。
+- `store`：在开启了 state 插件的时候，该值为 Reduck 全局 `store`。
+- `router`：在开启 router 插件的时候存在。
+  - `location`：当前路由对应的位置信息。同 [`useLocation`](/apis/app/runtime/router/router.html#uselocation) 返回值。
+  - `navigate`：导航到给定路径。同 [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate) 返回值。
 
 ## 示例
 

package/docs/zh/components/language-config.mdx

@@ -0,0 +1,9 @@
+### language
+
+问题：请选择开发语言
+
+选项：
+
+- TS -- ts
+
+- ES6+ -- js

package/docs/zh/components/package-manager.mdx

@@ -0,0 +1,11 @@
+### packageManager
+
+问题：请选择包管理工具
+
+选项：
+
+- pnpm -- pnpm
+
+- Yarn -- yarn
+
+- npm -- npm

package/docs/zh/components/ua-polyfill.mdx

@@ -9,7 +9,7 @@ Modern.js 中还提供了基于浏览器 [UA](https://developer.mozilla.org/zh-C
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「基于 UA 的 Polyfill」功能
+? 请选择功能名称 启用「基于 UA 的 Polyfill」功能
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 Polyfill 插件:

package/docs/zh/configure/app/source/design-system.mdx

@@ -13,7 +13,7 @@ sidebar_label: designSystem
 :::
 
 <details>
-  <summary>designSystem 配置详情</summary>
+  <summary>DesignSystem 配置详情</summary>
 
 ```js
 const designSystem = {
@@ -644,14 +644,13 @@ const designSystem = {
   },
 };
 ```
+</details>
 
 :::tip 提示
-更多关于：<a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS 配置</a>。
+更多关于 TailwindCSS 配置可查看[这里](https://tailwindcss.com/docs/configuration#theme)。
 
 :::
 
-</details>
-
 `designSystem` 用于定义项目的调色板、排版比例（Typographic Scales 或者 Type Scale）、字体列表、断点、边框圆角值等等。因为 Modern.js 借用了 Tailwind Theme 的设计方式，并且内部也集成了 Tailwind CSS，所以 `designSystem` 使用方式与 Tailwind CSS Theme 相同。
 
 ### 结构

package/docs/zh/configure/app/source/enable-async-entry.mdx

@@ -9,14 +9,11 @@ sidebar_label: enableAsyncEntry
 
 该选项用于 webpack 模块联邦（Module Federation）场景。
 
-开启此选项后，Modern.js 会通过 Dynamic Import 来包裹自动生成的入口文件（asynchronous boundary），使页面代码可以消费模块联邦生成的远程模块。
+开启此选项后，Modern.js 会通过 Dynamic Import 来包裹自动生成的入口文件（Asynchronous Boundaries），使页面代码可以消费模块联邦生成的远程模块。
 
 ## 背景知识
 
-如果不了解 webpack 模块联邦，请先阅读 Module Federation 官方文档：
-
-- [中文文档](https://webpack.docschina.org/concepts/module-federation/)
-- [英文文档](https://webpack.js.org/concepts/module-federation)
+如果不了解 webpack 模块联邦，请先阅读 [Module Federation 官方文档](https://webpack.docschina.org/concepts/module-federation/)。
 
 ## 示例
 

package/docs/zh/configure/app/source/entries.mdx

@@ -20,7 +20,7 @@ type Entries = Record<
 
 - **默认值：** 根据当前项目的目录结构计算出的入口对象。
 
-用于配置自定义的页面入口。
+用于配置自定义页面入口。
 
 :::tip 何时使用
 对于大部分场景，Modern.js 根据目录结构自动生成的入口已经可以满足需求，具体可参考[入口](/guides/concept/entries)。
@@ -156,7 +156,7 @@ export default defineConfig({
 
 例如以下目录结构:
 
-```
+```bash
 .
 ├── src
 │   ├── chat

package/docs/zh/configure/app/tools/swc.mdx

@@ -22,8 +22,8 @@ import SWC from '@modern-js/builder-doc/docs/zh/shared/swc.md';
 首先，你需要执行 `pnpm run new` 启用 SWC 编译：
 
 ```bash
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「SWC 编译」
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「SWC 编译」
 ```
 
 执行完成后，你只需在 `modern.config.ts` 文件中注册 SWC 插件，即可启用 SWC 编译和压缩能力。

package/docs/zh/guides/advanced-features/rspack-start.mdx

@@ -31,14 +31,14 @@ import InitRspackApp from '@site-docs/components/init-rspack-app';
 
 :::
 
-## 从 webpack 迁移至 Rspack
+## 开启 Rspack 构建
 
 在一个已有的 Modern.js 项目中，你可以通过执行 `pnpm run new` 来启用 Rspack 构建：
 
 ```bash
 $ pnpm run new
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「Rspack 构建」
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「Rspack 构建」
 ```
 
 执行以上命令后，在 `modern.config.ts` 中添加 Rspack 相关配置即可：
@@ -55,9 +55,9 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 });
 ```
 
-:::tip
-从 webpack 迁移至 Rspack 时，存在一些构建能力和配置上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
-:::
+## 配置迁移
+
+开启 Rspack 构建能力后，还需要参考 [配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack) 进行进一步的配置迁移。
 
 ## Rspack 和 Modern.js 的版本关系
 

package/docs/zh/guides/advanced-features/ssg.mdx

@@ -10,7 +10,7 @@ SSG（Static Site Generation）是一种基于数据与模板，在构建时渲
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「SSG」功能
+? 请选择功能名称 启用「SSG」功能
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 SSG 插件：

package/docs/zh/guides/advanced-features/testing.mdx

@@ -9,8 +9,8 @@ Modern.js 默认集成了 [Jest](https://jestjs.io/) 的测试能力。
 我们首先需要执行 `pnpm run new` 启用「单元测试 / 集成测试」功能：
 
 ```
-? 请选择你想要的操作： 启用可选功能
-? 启用可选功能： 启用「单元测试 / 集成测试」功能
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「单元测试 / 集成测试」功能
 ```
 
 执行上述命令后，`package.json` 中将会自动生成 `"test": "modern test"` 命令。

package/docs/zh/guides/advanced-features/web-server.mdx

@@ -26,7 +26,7 @@ Modern.js 作为以客户端为中心的开发框架，对服务端的定制能
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
-? 创建工程元素 新建「自定义 Web Server」源码目录
+? 请选择创建元素类型 新建「自定义 Web Server」源码目录
 ```
 
 执行命令后，在 `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件:

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

@@ -67,7 +67,7 @@ Modern.js 内部集成了 Babel 的 [babel-plugin-styled-components](https://git
 
 ```bash
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用 Tailwind CSS 支持
+? 请选择功能名称 启用 「Tailwind CSS」 支持
 ```
 
 在 `modern.config.ts` 中注册 Tailwind 插件:

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

@@ -32,7 +32,7 @@ export default {
   /* method 默认为 GET */
   '/api/getExample': { id: 1 },
 
-  /* 可以使用自定义函数根据请求动态返回数据，返回值参考 express middleware */
+  /* 可以使用自定义函数根据请求动态返回数据, req & res 都是 Node.js HTTP 原生对象 */
   'POST /api/addInfo': (req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');
     res.end('200');