@modern-js/main-doc 0.0.0-next-1685383616364 → 0.0.0-next-1685436485731

package/docs/en/guides/topic-detail/generator/codesmith/develop.mdx

@@ -12,9 +12,9 @@ Modern.js provides a microgenerator to create a microgenerator project, you can
 $ mkdir <projectDir>
 $ npx @modern-js/codesmith-cli @modern-js/generator-generator
 
-? Package Name: <generatorName>
-? Package Manager: pnpm
-? Development Language: TS
+? Please fill in the project name: <generatorName>
+? Please select the package manager: pnpm
+? Please select the programming language: TS
 ```
 
 ## Add template file

package/docs/en/guides/topic-detail/generator/plugin/develop.mdx

@@ -17,25 +17,25 @@ Different plugin types will ask different questions. You can choose the plugin t
 ### Extension type
 
 ```
-? Please select the solution you want to create: Npm Module
-? Please select the scene you want to create: Generator Plugin
-? Plugin Package Name: plugin
-? Development Language: TS
-? Package Manager: pnpm
-? Plugin Type: extend
-? Plugin Base Type: Web App
+? Please select the type of project you want to create: Npm Module
+? Please select the project scenario: Generator Plugin
+? Please fill in the package name of the generator plugin: plugin
+? Please select the programming language: TS
+? Please select the package manager: pnpm
+? Please select the type of plugin: extend
+? Please select the base type of the plugin: Web App
 ```
 
 ### Customized type
 
 ```
 ? Plugin Package Name: plugin
-? Development Language: TS
-? Package Manager: pnpm
-? Plugin Type: custom
-? Plugin Key: mobile-app
-? Plugin Show Name: Mobile App
-? Plugin Base Type: Web App
+? Please select the programming language: TS
+? Please select the package manager: pnpm
+? Please fill in the plugin keyword: custom
+? Please fill in the plugin keyword: mobile-app
+? Please fill in the display name of the plugin: Mobile App
+? Please select the base type of the plugin: Web App
 ```
 
 After the execution of the create project command is completed, a project for developing the generator plugin will be generated accordingly, and the `meta` information will also be generated according to your selection in the `package.json`.

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

@@ -33,8 +33,8 @@ npx @modern-js/create@latest
 After the project is created, we can enable the `micro frontend` through `pnpm run new`:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
@@ -115,8 +115,8 @@ npx @modern-js/create@latest
 After the project is created, we can enable the `micro frontend` function through `pnpm run new`:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and add the main micro frontend app and add the list of sub-apps:
@@ -143,8 +143,8 @@ npx @modern-js/create@latest
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:
@@ -192,8 +192,8 @@ npx @modern-js/create@latest
 After create sub-app. We execute `pnpm run new` to enable the `micro frontend` function:
 
 ```bash
-? Action Enable features
-? Enable features Enable Micro Front-end Feature
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Micro Front-end Feature
 ```
 
 Next, let's register the micro frontend plugin and modify `modern.config.ts` to add the configuration of the micro frontend sub-app `deploy.microFrontend`:

package/docs/en/tutorials/first-app/c03-css.mdx

@@ -114,8 +114,8 @@ Modern.js integrates the mainstream, light, general-purpose Utility Class librar
 Execute `pnpm run new` and select the following to start Tailwind CSS:
 
 ```bash
-? Action: Enable features
-? Enable features: Enable Tailwind CSS
+? Please select the operation you want: Enable features
+? Please select the feature name: Enable Tailwind CSS
 ```
 
 Register the Tailwind plugin in `modern.config.ts`:

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/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/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

@@ -37,8 +37,8 @@ import InitRspackApp from '@site-docs/components/init-rspack-app';
 
 ```bash
 $ pnpm run new
-? 请选择你想要的操作：启用可选功能
-? 启用可选功能：启用「Rspack 构建」
+? 请选择你想要的操作 启用可选功能
+? 请选择功能名称 启用「Rspack 构建」
 ```
 
 执行以上命令后，在 `modern.config.ts` 中添加 Rspack 相关配置即可：

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 插件: