替换文本块语法(> info、> warning等)为MDX的自定义容器语法(:::)，优化提示内容样式

Author: leo

docs/cli/index.md

@@ -20,7 +20,11 @@
 $ npm install -g @nestjs/cli
 ```
 
-> **提示** 或者，您可以使用 `npx @nestjs/cli@latest` 命令而无需全局安装 CLI。
+:::info 提示
+或者，您可以使用 `npx @nestjs/cli@latest` 命令而无需全局安装 CLI。
+:::
+
+
 
 ## 基本工作流程
 
@@ -46,7 +50,11 @@ $ npm run start:dev
 
 在浏览器中，打开 [http://localhost:3000](http://localhost:3000) 以查看正在运行的新应用程序。当您更改任何源文件时，应用程序将自动重新编译和重新加载。
 
-> **提示** 我们推荐使用 [SWC 构建器](../recipes/swc.md)来获得更快的构建速度（比默认的 TypeScript 编译器快 10 倍）。
+:::info 提示
+我们推荐使用 [SWC 构建器](../recipes/swc.md)来获得更快的构建速度（比默认的 TypeScript 编译器快 10 倍）。
+:::
+
+
 
 ## 项目结构
 

docs/cli/overview.md

@@ -12,7 +12,11 @@
 $ npm install -g @nestjs/cli
 ```
 
-> **提示** 你也可以在不全局安装 CLI 的情况下使用此命令 `npx @nestjs/cli@latest`。
+:::info 提示
+你也可以在不全局安装 CLI 的情况下使用此命令 `npx @nestjs/cli@latest`。
+:::
+
+
 
 #### 基本工作流程
 
@@ -38,7 +42,9 @@ $ npm run start:dev
 
 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 即可查看运行中的新应用。当您修改任何源文件时，应用程序会自动重新编译并加载。
 
-> info **提示** 我们推荐使用 [SWC 构建器](/recipes/swc)以获得更快的构建速度（性能比默认 TypeScript 编译器快 10 倍）。
+:::info 提示
+我们推荐使用 [SWC 构建器](/recipes/swc)以获得更快的构建速度（性能比默认 TypeScript 编译器快 10 倍）。
+:::
 
 #### 项目结构
 

docs/cli/workspaces.md

@@ -31,25 +31,20 @@ $ nest new my-project
 
 我们已经构建了一个*标准模式*结构，其文件夹结构如下所示：
 
-node_modules
-
-src
-
-app.controller.ts
-
-app.module.ts
-
-app.service.ts
-
-main.ts
-
-nest-cli.json
-
-package.json
-
-tsconfig.json
-
-eslint.config.mjs
+<div class="file-tree">
+    <div class="item">node_modules</div>
+    <div class="item">src</div>
+    <div class="children">
+        <div class="item">app.controller.ts</div>
+        <div class="item">app.module.ts</div>
+        <div class="item">app.service.ts</div>
+        <div class="item">main.ts</div>
+    </div>
+    <div class="item">nest-cli.json</div>
+    <div class="item">package.json</div>
+    <div class="item">tsconfig.json</div>
+    <div class="item">eslint.config.mjs</div>
+</div>
 
 我们可以将其转换为如下所示的 monorepo 模式结构：
 
@@ -60,47 +55,43 @@ $ nest generate app my-app
 
 此时，`nest` 将现有结构转换为 **monorepo 模式**结构。这会导致几项重要变化。现在的文件夹结构如下所示：
 
-apps
-
-my-app
-
-src
-
-app.controller.ts
-
-app.module.ts
-
-app.service.ts
-
-main.ts
-
-tsconfig.app.json
-
-my-project
-
-src
-
-app.controller.ts
-
-app.module.ts
-
-app.service.ts
-
-main.ts
-
-tsconfig.app.json
-
-nest-cli.json
-
-package.json
-
-tsconfig.json
-
-eslint.config.mjs
+<div class="file-tree">
+  <div class="item">apps</div>
+    <div class="children">
+      <div class="item">my-app</div>
+      <div class="children">
+        <div class="item">src</div>
+        <div class="children">
+          <div class="item">app.controller.ts</div>
+          <div class="item">app.module.ts</div>
+          <div class="item">app.service.ts</div>
+          <div class="item">main.ts</div>
+        </div>
+        <div class="item">tsconfig.app.json</div>
+      </div>
+      <div class="item">my-project</div>
+      <div class="children">
+        <div class="item">src</div>
+        <div class="children">
+          <div class="item">app.controller.ts</div>
+          <div class="item">app.module.ts</div>
+          <div class="item">app.service.ts</div>
+          <div class="item">main.ts</div>
+        </div>
+        <div class="item">tsconfig.app.json</div>
+      </div>
+    </div>
+  <div class="item">nest-cli.json</div>
+  <div class="item">package.json</div>
+  <div class="item">tsconfig.json</div>
+  <div class="item">eslint.config.mjs</div>
+</div>
 
 `generate app` 原理图已重新组织代码 - 将每个**应用**项目移至 `apps` 文件夹下，并在每个项目的根目录中添加项目特定的 `tsconfig.app.json` 文件。我们原来的 `my-project` 应用已成为该 monorepo 的**默认项目** ，现在与刚添加的 `my-app` 并列位于 `apps` 文件夹下。我们将在下文讨论默认项目。
 
-> error **警告** 将标准模式结构转换为 monorepo 仅适用于遵循标准 Nest 项目结构的项目。具体来说，在转换过程中，原理图会尝试将 `src` 和 `test` 文件夹重新定位到根目录下 `apps` 文件夹内的项目文件夹中。如果项目未使用此结构，转换将失败或产生不可靠的结果。
+:::warning 警告
+将标准模式结构转换为 monorepo 仅适用于遵循标准 Nest 项目结构的项目。具体来说，在转换过程中，原理图会尝试将 `src` 和 `test` 文件夹重新定位到根目录下 `apps` 文件夹内的项目文件夹中。如果项目未使用此结构，转换将失败或产生不可靠的结果。
+:::
 
 #### 工作区项目
 
@@ -250,19 +241,21 @@ Nest 将组织和构建标准项目及 monorepo 结构项目所需的元数据
 }
 ```
 
-> warning **警告** 当将 `spec` 指定为对象时，生成原理图的键目前不支持自动别名处理。这意味着如果将键指定为例如 `service: false` 并尝试通过别名 `s` 生成服务，规范文件仍会被生成。为确保正常原理图名称和别名都能按预期工作，请同时指定常规命令名称和别名，如下所示。
->
-> ```javascript
-> {
->   "generateOptions": {
->     "spec": {
->       "service": false,
->       "s": false
->     }
->   },
->   ...
-> }
-> ```
+:::warning 警告
+当将 `spec` 指定为对象时，生成原理图的键目前不支持自动别名处理。这意味着如果将键指定为例如 `service: false` 并尝试通过别名 `s` 生成服务，规范文件仍会被生成。为确保正常原理图名称和别名都能按预期工作，请同时指定常规命令名称和别名，如下所示。
+:::
+
+
+```javascript
+{
+  "generateOptions": {
+    "spec": {
+      "service": false,
+      "s": false
+    }
+  },
+  ...
+}
 ```
 
 #### 项目专属生成选项
@@ -287,7 +280,9 @@ Nest 将组织和构建标准项目及 monorepo 结构项目所需的元数据
 }
 ```
 
-> warning **注意** 生成选项的优先级顺序如下：命令行界面(CLI)指定的选项优先于项目专属选项，项目专属选项会覆盖全局选项。
+:::warning 注意
+生成选项的优先级顺序如下：命令行界面(CLI)指定的选项优先于项目专属选项，项目专属选项会覆盖全局选项。
+:::
 
 #### 指定编译器
 
@@ -340,7 +335,11 @@ TypeScript 编译会自动将编译器输出（`.js` 和 `.d.ts` 文件）分发
 ]
 ```
 
-> **警告** 在顶层 `compilerOptions` 属性中设置 `watchAssets` 将覆盖 `assets` 属性内的所有 `watchAssets` 配置
+:::warning 警告
+在顶层 `compilerOptions` 属性中设置 `watchAssets` 将覆盖 `assets` 属性内的所有 `watchAssets` 配置
+:::
+
+
 
 #### 项目属性
 

docs/devtools/ci-cd.md

@@ -1,6 +1,8 @@
 ### CI/CD 集成
 
-> info **提示** 本章介绍 Nest Devtools 与 Nest 框架的集成。如需了解 Devtools 应用程序，请访问 [Devtools](https://devtools.nestjs.com) 官网。
+:::info 提示
+本章介绍 Nest Devtools 与 Nest 框架的集成。如需了解 Devtools 应用程序，请访问 [Devtools](https://devtools.nestjs.com) 官网。
+:::
 
 CI/CD 集成功能适用于**[企业版](/settings)**计划的用户。
 
@@ -174,7 +176,11 @@ const publishOptions = {
 };
 ```
 
-> **提示** 理想情况下，`DEVTOOLS_API_KEY` 环境变量应从机密信息中获取。
+:::info 提示
+理想情况下，`DEVTOOLS_API_KEY` 环境变量应从机密信息中获取。
+:::
+
+
 
 该工作流将在每个针对 `master` 分支的拉取请求时运行，或者当有代码直接提交到 `master` 分支时触发。您可以根据项目需求自由调整此配置。关键在于我们需要为 `GraphPublisher` 类提供必要的环境变量（以便运行）。
 

docs/devtools/overview.md

@@ -1,6 +1,8 @@
 ### 概述
 
-> info **提示** 本章介绍 Nest Devtools 与 Nest 框架的集成。如需了解 Devtools 应用程序，请访问 [Devtools](https://devtools.nestjs.com) 官网。
+:::info 提示
+本章介绍 Nest Devtools 与 Nest 框架的集成。如需了解 Devtools 应用程序，请访问 [Devtools](https://devtools.nestjs.com) 官网。
+:::
 
 要开始调试本地应用程序，请打开 `main.ts` 文件，并确保在应用程序选项对象中将 `snapshot` 属性设置为 `true`，如下所示：
 
@@ -21,7 +23,9 @@ async function bootstrap() {
 $ npm i @nestjs/devtools-integration
 ```
 
-> warning **注意** 如果您的应用中使用了 `@nestjs/graphql` 包，请确保安装最新版本（`npm i @nestjs/graphql@11`）。
+:::warning 注意
+如果您的应用中使用了 `@nestjs/graphql` 包，请确保安装最新版本（`npm i @nestjs/graphql@11`）。
+:::
 
 有了这个依赖项后，让我们打开 `app.module.ts` 文件并导入刚刚安装的 `DevtoolsModule`：
 
@@ -38,13 +42,17 @@ $ npm i @nestjs/devtools-integration
 export class AppModule {}
 ```
 
-> warning **注意** 此处检查 `NODE_ENV` 环境变量的原因是——切勿在生产环境使用此模块！
+:::warning 注意
+ 此处检查 `NODE_ENV` 环境变量的原因是——切勿在生产环境使用此模块！
+:::
 
 当 `DevtoolsModule` 导入完成且应用启动运行后（`npm run start:dev`），您应当能够访问 [Devtools](https://devtools.nestjs.com) 网址并查看自省生成的图谱。
 
 ![](/assets/devtools/modules-graph.png)
 
-> info **提示** 如上方截图所示，每个模块都连接到 `InternalCoreModule`。`InternalCoreModule` 是一个始终被导入根模块的全局模块。由于它被注册为全局节点，Nest 会自动在所有模块与 `InternalCoreModule` 节点之间创建连接边。现在，若要从图中隐藏全局模块，可以使用侧边栏中的" **隐藏全局模块** "复选框。
+:::info 提示
+如上方截图所示，每个模块都连接到 `InternalCoreModule`。`InternalCoreModule` 是一个始终被导入根模块的全局模块。由于它被注册为全局节点，Nest 会自动在所有模块与 `InternalCoreModule` 节点之间创建连接边。现在，若要从图中隐藏全局模块，可以使用侧边栏中的" **隐藏全局模块** "复选框。
+:::
 
 由此可见，`DevtoolsModule` 会让你的应用暴露一个额外的 HTTP 服务器（运行在 8000 端口），Devtools 应用将通过该端口来内省你的应用程序。
 
@@ -54,11 +62,15 @@ export class AppModule {}
 
 要聚焦特定节点，点击矩形框后图形界面会弹出包含 **"聚焦"** 按钮的窗口。您也可以使用侧边栏的搜索栏来定位特定节点。
 
-> info **提示** 如果点击**检查**按钮，应用程序将带您进入 `/debug` 页面并自动选中该特定节点。
+:::info 提示
+如果点击**检查**按钮，应用程序将带您进入 `/debug` 页面并自动选中该特定节点。
+:::
 
 ![](/assets/devtools/node-popup.png)
 
-> info **提示** 要将图表导出为图片，请点击图表右上角的**导出为 PNG** 按钮。
+:::info 提示
+要将图表导出为图片，请点击图表右上角的**导出为 PNG** 按钮。
+:::
 
 使用位于侧边栏（左侧）的表单控件，您可以控制边的接近度，例如可视化特定的应用程序子树：
 
@@ -70,7 +82,11 @@ export class AppModule {}
 
 #### 排查"无法解析依赖项"错误
 
-> **注意** 此功能支持 `@nestjs/core` 版本 ≥`v9.3.10`。
+:::info 注意
+此功能支持 `@nestjs/core` 版本 ≥`v9.3.10`。
+:::
+
+
 
 您可能遇到的最常见错误消息是关于 Nest 无法解析提供者依赖项的问题。使用 Nest Devtools，您可以轻松识别问题并学习如何解决它。
 
@@ -114,7 +130,9 @@ const app = await NestFactory.create(AppModule, {
 
 ![](/assets/devtools/routes.png)
 
-> info **提示** 此页面不仅显示 HTTP 路由，还包括所有其他类型的入口点（例如 WebSockets、gRPC、GraphQL 解析器等）。
+:::info 提示
+此页面不仅显示 HTTP 路由，还包括所有其他类型的入口点（例如 WebSockets、gRPC、GraphQL 解析器等）。
+:::
 
 入口点按其宿主控制器分组显示。您也可以使用搜索栏查找特定入口点。
 
@@ -134,7 +152,11 @@ const app = await NestFactory.create(AppModule, {
 
 ![](/assets/devtools/sandbox-table.png)
 
-> **提示** ：要美观地显示对象数组，可使用 `console.table()`（或直接使用 `table()`）函数。
+:::info 提示
+要美观地显示对象数组，可使用 `console.table()`（或直接使用 `table()`）函数。
+:::
+
+
 
 您可以通过这个视频查看**交互式演练场（Interactive Playground）** 功能的实际应用：
 
@@ -152,7 +174,9 @@ const app = await NestFactory.create(AppModule, {
 
 ![](/assets/devtools/audit.png)
 
-> info **提示** 上面的截图并未显示所有可用的审计规则。
+:::info 提示
+上面的截图并未显示所有可用的审计规则。
+:::
 
 当您需要识别应用程序中的潜在问题时，本页面非常有用。
 
@@ -165,7 +189,9 @@ await app.listen(process.env.PORT ?? 3000); // OR await app.init()
 fs.writeFileSync('./graph.json', app.get(SerializedGraph).toString());
 ```
 
-> info **提示**`SerializedGraph` 是从 `@nestjs/core` 包中导出的。
+:::info 提示
+`SerializedGraph` 是从 `@nestjs/core` 包中导出的。
+:::
 
 然后你可以拖放/上传这个文件：
 

docs/faq/errors.md

@@ -4,7 +4,9 @@
 
 #### "无法解析依赖项"错误
 
-> info **提示** 查看 [NestJS Devtools](./devtools/overview#调查无法解析依赖项错误) 可以帮助您轻松解决"无法解析依赖项"错误。
+:::info 提示
+查看 [NestJS Devtools](./devtools/overview#调查无法解析依赖项错误) 可以帮助您轻松解决"无法解析依赖项"错误。
+:::
 
 最常见的错误消息是关于 Nest 无法解析提供者的依赖项。错误消息通常如下所示：
 

docs/faq/global-prefix.md

@@ -21,4 +21,7 @@ app.setGlobalPrefix('v1', {
 app.setGlobalPrefix('v1', { exclude: ['cats'] });
 ```
 
-> info **提示** `path` 属性支持使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp#parameters) 包进行通配参数匹配。注意：这里不接受星号通配符 `*`，而必须使用参数形式（`:param`）或命名通配符（`*splat`）。
+:::info 提示
+`path` 属性支持使用 [path-to-regexp](https://github.com/pillarjs/path-to-regexp#parameters) 包进行通配参数匹配。注意：这里不接受星号通配符 `*`，而必须使用参数形式（`:param`）或命名通配符（`*splat`）。
+:::
+