@modern-js/main-doc 2.69.7 → 3.0.0-alpha.1

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

@@ -2,88 +2,14 @@
 
 [Tailwind CSS](https://tailwindcss.com/) 是一个以 Utility Class 为基础的 CSS 框架和设计系统，可以快速地为组件添加常用样式，同时支持主题样式的灵活扩展。
 
-在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照以下步骤操作：
+## 在 Modern.js 中使用 Tailwind CSS
 
-1. 在项目根目录下执行 `pnpm run new`，按照如下进行选择：
+在 Modern.js 中使用 [Tailwind CSS](https://tailwindcss.com/)，你只需要按照 Rsbuild 操作步骤进行配置，Rsbuild 支持 Tailwind CSS v3 和 v4 版本：
 
-```text
-? 请选择你想要的操作 启用可选功能
-? 请选择功能名称 启用 「Tailwind CSS」 支持
-```
+- [Tailwind CSS v3](https://rsbuild.rs/zh/guide/styling/tailwindcss-v3#tailwind-css-v3)
+- [Tailwind CSS v4](https://rsbuild.rs/zh/guide/styling/tailwindcss)
 
-成功开启后，你会看到 `package.json` 中新增了 `tailwindcss` 和 `@modern-js/plugin-tailwindcss` 依赖。
-
-2. 在 `modern.config.ts` 中注册 Tailwind 插件:
-
-```ts title="modern.config.ts"
-import { tailwindcssPlugin } from '@modern-js/plugin-tailwindcss';
-
-export default defineConfig({
-  plugins: [..., tailwindcssPlugin()],
-});
-```
-
-3. 创建 `index.css` 文件，添加以下代码：
-
-```css title="index.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-
-:::info
-根据需求不同，你可以选择性地导入 Tailwind CSS 提供的 CSS 样式。请参考 [`@tailwind` 文档](https://tailwindcss.com/docs/functions-and-directives#tailwind) 来了解 `@tailwind` 指令的详细用法。
-:::
-
-4. 引用 `index.css` 文件，比如在入口的根组件 `src/App.jsx` 添加如下代码：
-
-```js
-import './index.css';
-```
-
-5. 然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了：
-
-```tsx
-const Hello = () => (
-  <div className="h-12 w-48">
-    <p className="text-xl font-medium text-black">hello world</p>
-  </div>
-);
-```
-
-### 配置 Tailwind CSS
-
-在 Modern.js 中，你有两种方式来配置 Tailwind CSS：
-
-1. 使用 `tailwind.config.{ts,js}` 文件，该用法与 Tailwind CSS 的官方用法一致，请参考 ["Tailwind CSS - Configuration"](https://tailwindcss.com/docs/configuration) 来了解更多用法。
-
-```ts title="tailwind.config.ts"
-import type { Config } from 'tailwindcss';
-
-export default {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-} as Config;
-```
-
-:::tip
-请升级 Modern.js 到 >= MAJOR_VERSION.33.0 版本，以支持自动读取 `tailwind.config.{ts,js}` 文件。
-:::
-
-2. 使用 [tools.tailwindcss](/configure/app/tools/tailwindcss.html) 配置项，这是旧版本的用法，我们更推荐使用 `tailwind.config.{ts,js}` 文件进行配置。
-
-```ts title="modern.config.ts"
-export default {
-  tools: {
-    tailwindcss: {
-      content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    },
-  },
-};
-```
-
-如果你同时使用了 `tailwind.config.{ts,js}` 文件和 `tools.tailwindcss` 选项，那么 `tools.tailwindcss` 定义的配置会优先生效，并覆盖 `tailwind.config.{ts,js}` 中定义的内容。
-
-### Tailwind CSS 自动补全
+## Tailwind CSS 自动补全
 
 Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件，用于在 VS Code 中自动补全 Tailwind CSS 的 class names、CSS functions 和 directives。
 
@@ -92,20 +18,10 @@ Tailwind CSS 官方提供了 [Tailwind CSS IntelliSense](https://github.com/tail
 1. 在 VS Code 中安装 [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) 插件。
 2. 如果项目的根目录没有 `tailwind.config.{ts,js}` 文件，那么你需要创建该文件，并写入当前项目的 Tailwind CSS 配置，否则 IDE 插件将无法正确生效。
 
-## Tailwind CSS 版本
-
-Modern.js 同时支持 Tailwind CSS v2 和 v3 版本，框架会识别项目 `package.json` 中的 `tailwindcss` 依赖版本，并启用相应的配置。默认情况下，我们会为你安装 Tailwind CSS v3 版本。
-
-如果你的项目仍在使用 Tailwind CSS v2，我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异，请参考以下文章：
-
-- [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3)
-- [Upgrade Guide](https://tailwindcss.com/docs/upgrade-guide)
-
 ## 浏览器兼容性
 
-Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器，相关背景请参考：
+Tailwind CSS v3 不支持 IE 11 浏览器，相关背景请参考：
 
 - [Tailwind CSS v3 - Browser Support](https://tailwindcss.com/docs/browser-support)。
-- [Tailwind CSS v2 - Browser Support](https://v2.tailwindcss.com/docs/browser-support)
 
 如果你在 IE 11 浏览器上使用 Tailwind CSS，可能会出现部分样式不可用的现象，请谨慎使用。

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

@@ -2,14 +2,11 @@
 title: 数据缓存
 sidebar_position: 4
 ---
+
 # 数据缓存
 
 `cache` 函数可以让你缓存数据获取或计算的结果，相比整页[渲染缓存](/guides/basic-features/render/ssr-cache)，它提供了更精细的数据粒度控制，并且适用于客户端渲染(CSR)、服务端渲染（SSR）、API 服务(BFF)等多种场景。
 
-:::info
-需要 x.65.5 及以上版本
-:::
-
 ## 基本用法
 
 :::note
@@ -27,7 +24,7 @@ import { fetchUserData } from './api';
 const getUser = cache(fetchUserData);
 
 const loader = async () => {
-  const user = await getUser(user); // 函数入参发生变化时，函数会重新执行
+  const user = await getUser('123'); // 函数入参发生变化时，函数会重新执行
   return {
     user,
   };
@@ -67,7 +64,7 @@ interface CacheOptions {
 ## 使用范围
 
 与 react 的 [cache](https://react.dev/reference/react/cache) 函数只能在 server component 组件中使用不同，
-EdenX 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
+Modern.js 提供的 `cache` 函数可以在任意的前端或服务端的代码中使用。
 
 ## 详细用法
 
@@ -79,7 +76,6 @@ EdenX 提供的 `cache` 函数可以在任意的前端或服务端的代码中
 无 `options` 参数时，可以看作是 react [`cache`](https://react.dev/reference/react/cache) 函数的替代品，可以在任意服务端代码中使用（比如可以在 SSR 项目的 data loader 中），不局限于 server component。
 :::
 
-
 ```ts
 import { cache } from '@modern-js/runtime/cache';
 import { fetchUserData } from './api';
@@ -108,8 +104,8 @@ const getDashboardStats = cache(
     return await fetchComplexStatistics();
   },
   {
-    maxAge: CacheTime.MINUTE * 2,  // 在 2 分钟内调用该函数会返回缓存的数据
-  }
+    maxAge: CacheTime.MINUTE * 2, // 在 2 分钟内调用该函数会返回缓存的数据
+  },
 );
 ```
 
@@ -117,8 +113,11 @@ const getDashboardStats = cache(
 
 `revalidate` 参数用于设置缓存过期后，重新验证缓存的时间窗口，可以和 `maxAge` 参数一起使用，类似与 HTTP Cache-Control 的 stale-while-revalidate 模式。
 
+如以下示例，缓存的行为会根据时间分为三个阶段：
 
-如以下示例，在缓存未过期的 2分钟内，如果调用 `getDashboardStats` 函数，会返回缓存的数据，如果缓存过期，2分到3分钟内，收到的请求会先返回旧数据，然后后台会重新请求数据，并更新缓存。
+1. **0 到 2 分钟（`maxAge` 内）**：缓存新鲜，直接返回缓存数据，不会重新请求
+2. **2 到 3 分钟（`maxAge` 到 `maxAge + revalidate` 之间）**：缓存过期但在重新验证窗口内，会立即返回旧数据，同时在后台重新请求数据并更新缓存
+3. **超过 3 分钟（超过 `maxAge + revalidate`）**：缓存完全过期，会重新执行函数获取新数据
 
 ```ts
 import { cache, CacheTime } from '@modern-js/runtime/cache';
@@ -130,7 +129,7 @@ const getDashboardStats = cache(
   {
     maxAge: CacheTime.MINUTE * 2,
     revalidate: CacheTime.MINUTE * 1,
-  }
+  },
 );
 ```
 
@@ -147,7 +146,7 @@ const getDashboardStats = cache(
   },
   {
     tag: 'dashboard',
-  }
+  },
 );
 
 const getComplexStatistics = cache(
@@ -156,10 +155,10 @@ const getComplexStatistics = cache(
   },
   {
     tag: 'dashboard',
-  }
+  },
 );
 
-await revalidateTag('dashboard-stats'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
+await revalidateTag('dashboard'); // 会使 getDashboardStats 函数和 getComplexStatistics 函数的缓存都失效
 ```
 
 #### `getKey` 参数
@@ -181,7 +180,7 @@ const getUser = cache(
     maxAge: CacheTime.MINUTE * 5,
     // 只使用第一个参数（userId）作为缓存键
     getKey: (userId, options) => userId,
-  }
+  },
 );
 
 // 下面两次调用会共享缓存，因为 getKey 只使用了 userId
@@ -211,11 +210,10 @@ const getUser = cache(
   {
     maxAge: CacheTime.MINUTE * 5,
     getKey: (userId, options) => generateKey(userId),
-  }
+  },
 );
 ```
 
-
 #### `customKey` 参数
 
 `customKey` 参数用于**完全定制**缓存的键，它是一个函数，接收一个包含以下属性的对象，返回值必须是字符串类型。
@@ -229,6 +227,7 @@ const getUser = cache(
 :::info
 
 一般在以下场景，缓存会失效：
+
 1. 函数的入参发生变化
 2. 不满足 maxAge 条件
 3. 调用了 `revalidateTag`
@@ -244,16 +243,13 @@ import { cache } from '@modern-js/runtime/cache';
 import { fetchUserData } from './api';
 
 // 不同的函数引用，但是通过 customKey 可以使它们共享一个缓存
-const getUserA = cache(
-  fetchUserData,
-  {
-    maxAge: CacheTime.MINUTE * 5,
-    customKey: ({ params }) => {
-      // 返回一个稳定的字符串作为缓存的键
-      return `user-${params[0]}`;
-    },
-  }
-);
+const getUserA = cache(fetchUserData, {
+  maxAge: CacheTime.MINUTE * 5,
+  customKey: ({ params }) => {
+    // 返回一个稳定的字符串作为缓存的键
+    return `user-${params[0]}`;
+  },
+});
 
 // 即使函数引用变了，只要 customKey 返回相同的值，也会命中缓存
 const getUserB = cache(
@@ -264,7 +260,7 @@ const getUserB = cache(
       // 返回与 getUserA 相同的键
       return `user-${params[0]}`;
     },
-  }
+  },
 );
 
 // 现在你可以在不同的函数实现间共享缓存
@@ -272,12 +268,9 @@ await getUserA(123); // 获取数据并使用键 "user-123" 缓存
 await getUserB(123); // 缓存命中，返回缓存的数据
 
 // 可以利用 generatedKey 参数在默认键的基础上进行修改
-const getUserC = cache(
-  fetchUserData,
-  {
-    customKey: ({ generatedKey }) => `prefix-${generatedKey}`,
-  }
-);
+const getUserC = cache(fetchUserData, {
+  customKey: ({ generatedKey }) => `prefix-${generatedKey}`,
+});
 
 // 用于可预测的缓存键，便于外部管理
 const getUserD = cache(
@@ -287,7 +280,7 @@ const getUserD = cache(
   {
     maxAge: CacheTime.MINUTE * 5,
     customKey: ({ params }) => `app:user:${params[0]}`,
-  }
+  },
 );
 ```
 
@@ -304,30 +297,31 @@ const stats = {
   hits: 0,
   misses: 0,
   stales: 0,
-  hitRate: () => stats.hits / stats.total
+  hitRate: () => stats.hits / stats.total,
 };
 
-const getUser = cache(
-  fetchUserData,
-  {
-    maxAge: CacheTime.MINUTE * 5,
-    onCache({ status, key, params, result }) {
-      // status 可以是 'hit'、'miss' 或 'stale'
-      stats.total++;
-
-      if (status === 'hit') {
-        stats.hits++;
-      } else if (status === 'miss') {
-        stats.misses++;
-      } else if (status === 'stale') {
-        stats.stales++;
-      }
-
-      console.log(`缓存${status === 'hit' ? '命中' : status === 'miss' ? '未命中' : '陈旧'}，键：${String(key)}`);
-      console.log(`当前命中率：${stats.hitRate() * 100}%`);
+const getUser = cache(fetchUserData, {
+  maxAge: CacheTime.MINUTE * 5,
+  onCache({ status, key, params, result }) {
+    // status 可以是 'hit'、'miss' 或 'stale'
+    stats.total++;
+
+    if (status === 'hit') {
+      stats.hits++;
+    } else if (status === 'miss') {
+      stats.misses++;
+    } else if (status === 'stale') {
+      stats.stales++;
     }
-  }
-);
+
+    console.log(
+      `缓存${
+        status === 'hit' ? '命中' : status === 'miss' ? '未命中' : '陈旧'
+      }，键：${String(key)}`,
+    );
+    console.log(`当前命中率：${stats.hitRate() * 100}%`);
+  },
+});
 
 // 使用示例
 await getUser(1); // 缓存未命中
@@ -348,6 +342,7 @@ await getUser(2); // 缓存未命中
 这个回调只在提供 `options` 参数时被调用。当使用无 options 的缓存函数时，不会调用 `onCache` 回调。
 
 `onCache` 回调对以下场景非常有用：
+
 - 监控缓存性能
 - 计算命中率
 - 记录缓存操作
@@ -405,11 +400,13 @@ configureCache({
 ##### 使用 `customKey` 确保缓存键稳定性
 
 :::warning 重要建议
+
 当使用自定义存储容器（如 Redis）时，**建议配置 `customKey`** 来确保缓存键的稳定性。这样可以确保：
 
 1. **跨进程共享**：不同服务器实例能够共享相同的缓存
 2. **应用重启后缓存有效**：重启应用后仍能命中之前的缓存
 3. **代码部署后缓存保持**：代码更新后相同逻辑的缓存仍然有效
+
 :::
 
 默认的缓存键生成机制基于函数引用，在分布式环境中可能不够稳定。建议使用 `customKey` 提供稳定的缓存键：
@@ -431,7 +428,7 @@ const getUser = cache(
     maxAge: CacheTime.MINUTE * 5,
     // 使用被缓存函数相关的稳定标识符作为缓存键
     customKey: () => `fetchUserData`,
-  }
+  },
 );
 ```
 
@@ -451,7 +448,7 @@ class RedisContainer implements Container {
   }
 
   async get(key: string): Promise<string | null> {
-    const value = await this.redis.get(key);
+    const value = await this.client.get(key);
     return value ? JSON.parse(value) : null;
   }
 
@@ -499,4 +496,3 @@ configureCache({
 1. **序列化**：所有的缓存数据都会被序列化为字符串存储，容器只需要处理字符串的存取操作。
 
 2. **TTL 支持**：如果你的存储后端支持 TTL（生存时间），可以在 `set` 方法中使用 `options.ttl` 参数（单位为秒）。
-

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

@@ -9,11 +9,7 @@ Modern.js 中提供了开箱即用的数据获取能力，开发者可以通过
 
 ## 什么是 Data Loader
 
-:::note
-Modern.js v1 项目通过 `useLoader` 获取数据，这已经不是我们推荐的用法，建议迁移到 Data Loader。
-:::
-
-Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `loader` 函数，我们称为 Data Loader，它会在对应的路由组件渲染之前执行，为组件提供数据。如下面示例：
+Modern.js 推荐使用[约定式路由](/guides/basic-features/routes/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `loader` 函数，我们称为 Data Loader，它会在对应的路由组件渲染之前执行，为组件提供数据。如下面示例：
 
 ```bash
 .
@@ -40,17 +36,19 @@ export const loader = async (): Promise<ProfileData> => {
 ```
 
 :::warning 兼容性
+
 - 在之前的版本中，Data Loader 是定义在 `.loader` 文件中的。当前版本中，我们推荐定义在 `.data` 文件中，同时我们会保持对 `.loader` 文件的兼容。
 - 在 `.loader` 文件中，Data Loader 可以默认导出。但在 `data` 文件中，Data Loader 需要以 `loader` 具名导出。
+
 ```ts
-  // xxx.loader.ts
-export default () => {}
+// xxx.loader.ts
+export default () => {};
 
 // xxx.data.ts
-export const loader = () => {}
+export const loader = () => {};
 ```
-:::
 
+:::
 
 在路由组件中，你可以通过 `useLoaderData` 函数获取数据：
 
@@ -76,7 +74,7 @@ export default function UserPage() {
 在以后的版本中，Modern.js 可能会支持在 CSR 环境下，`loader` 函数也在服务端运行，以提高性能和安全性，所以这里建议尽可能地保证 `loader` 的纯粹，只做数据获取的场景。
 :::
 
-当在浏览器端导航时，基于[约定式路由](/guides/basic-features/routes)，Modern.js 能够支持所有的 `loader` 函数并行执行（请求）。即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 `loader` 函数都会并行执行（请求），这种方式解决了部分请求、渲染瀑布流的问题，较大的提升了页面性能。
+当在浏览器端导航时，基于[约定式路由](/guides/basic-features/routes/routes)，Modern.js 能够支持所有的 `loader` 函数并行执行（请求）。即当访问 `/user/profile` 时，`/user` 和 `/user/profile` 下的 `loader` 函数都会并行执行（请求），这种方式解决了部分请求、渲染瀑布流的问题，较大的提升了页面性能。
 
 ## `loader` 函数
 
@@ -84,7 +82,7 @@ export default function UserPage() {
 
 ### params
 
-`params` 是当路由为[动态路由](/guides/basic-features/routes#动态路由)时的动态路由片段，会作为参数传入 `loader` 函数：
+`params` 是当路由为[动态路由](/guides/basic-features/routes/routes#动态路由)时的动态路由片段，会作为参数传入 `loader` 函数：
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { LoaderFunctionArgs } from '@modern-js/runtime/router';
@@ -160,9 +158,10 @@ SSR 应用的 `loader` 函数只在服务端执行可以带来以下好处：
 ```tsx
 export async function loader() {
   const res = await fetch('URL_ADDRESS');
+  const data = await res.json();
   return {
-    message: res.message
-  }
+    message: data.message,
+  };
 }
 ```
 
@@ -170,7 +169,7 @@ export async function loader() {
 
 ### 基本用法
 
-在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes#错误处理) 组件：
+在 `loader` 函数中，可以通过 `throw error` 或者 `throw response` 的方式处理错误，当 `loader` 函数中有错误被抛出时，Modern.js 会停止执行当前 `loader` 中的代码，并将前端 UI 切换到定义的 [`ErrorBoundary`](/guides/basic-features/routes/routes#错误处理) 组件：
 
 ```tsx
 // routes/user/profile/page.data.ts
@@ -207,7 +206,7 @@ export default ErrorBoundary;
 // routes/user/profile/page.data.ts
 export async function loader() {
   const user = await fetchUser();
-  if(!user){
+  if (!user) {
     throw new Response('The user was not found', { status: 404 });
   }
   return user;
@@ -260,7 +259,6 @@ export function UserLayout() {
 
 如果想获取 `entry1/routes/layout.tsx` 中 `loader` 返回的数据，`routeId` 的值就是 `entry1_layout`。
 
-
 ## Loading UI (Experimental)
 
 :::info Experimental

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

@@ -14,7 +14,7 @@ sidebar_position: 4
 
 ## 什么是 Data Action
 
-Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `action` 函数，我们称为 Data Action，开发者可以在合适的时机调用它：
+Modern.js 推荐使用[约定式路由](/guides/basic-features/routes/routes)做路由的管理，每个路由组件（`layout.ts`，`page.ts` 或 `$.tsx`）都可以有一个同名的 `.data` 文件。这些文件可以导出一个 `action` 函数，我们称为 Data Action，开发者可以在合适的时机调用它：
 
 ```bash
 .
@@ -29,7 +29,7 @@ Modern.js 推荐使用[约定式路由](/guides/basic-features/routes)做路由
 ```ts title="routes/user/layout.data.ts"
 import type { ActionFunction } from '@modern-js/runtime/router';
 
-export const action: ActionFunction = ({ request }) => {
+export const action: ActionFunction = async ({ request }) => {
   const newUser = await request.json();
   const name = newUser.name;
   return updateUserProfile(name);
@@ -82,7 +82,7 @@ export default () => {
 
 ### params
 
-`params` 是当路由为[动态路由](/guides/basic-features/routes#动态路由)时动态路由片段，会作为参数传入 `action` 函数：
+`params` 是当路由为[动态路由](/guides/basic-features/routes/routes#动态路由)时动态路由片段，会作为参数传入 `action` 函数：
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';
@@ -97,7 +97,7 @@ export const action = async ({ params }: ActionFunctionArgs) => {
 
 ### request
 
-`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。通过 `request`，可以在 action 函数中获取到浏览器端提交的数据，如 `request.json()`，`request.formData()`，`request.json()` 等。具体使用哪个 API，请参考[数据类型](#数据类型)。
+`request` 是一个 [Fetch Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) 实例。通过 `request`，可以在 action 函数中获取到浏览器端提交的数据，如 `request.json()`，`request.formData()`，`request.text()` 等。具体使用哪个 API，请参考[数据类型](#数据类型)。
 
 ```tsx title="routes/user/[id]/page.data.ts"
 import { ActionFunctionArgs } from '@modern-js/runtime/router';

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

@@ -70,7 +70,7 @@ module.exports = {
 
 ```js
 module.exports = {
-  'api/getInfo': (req, res) => {
+  '/api/getInfo': (req, res) => {
     setTimeout(() => {
       res.end('delay 2000ms');
     }, 2000);
@@ -83,6 +83,9 @@ module.exports = {
 `config/mock/index.ts` 下还可以导出 `config` 对象，更精细的控制 Mock 服务。
 
 ```ts
+import type { IncomingMessage } from 'node:http';
+import type { ServerResponse } from 'node:http';
+
 type MockConfig = {
   enable: ((req: IncomingMessage, res: ServerResponse) => boolean) | boolean;
 };

package/docs/zh/guides/basic-features/debug/proxy.mdx

@@ -4,21 +4,16 @@ sidebar_position: 6
 
 # 网络代理
 
-## 本地代理
-
-Modern.js 在 [`tools.devServer`](/configure/app/tools/dev-server) 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：
+Modern.js 在 [`dev.server.proxy`](/configure/app/dev/server) 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：
 
 ```ts title="modern.config.ts"
 import { defineConfig } from '@modern-js/app-tools';
 
 export default defineConfig({
-  tools: {
-    devServer: {
+  dev: {
+    server: {
       proxy: {
-        '/go/api': {
-          target: 'http://www.example.com/',
-          changeOrigin: true,
-        },
+        '/go/api': 'http://www.example.com/',
       },
     },
   },
@@ -31,9 +26,3 @@ export default defineConfig({
 配置格式可参考：[http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)。
 
 :::
-
-## 全局代理
-
-import GlobalProxy from "@site-docs/components/global-proxy"
-
-<GlobalProxy />

package/docs/zh/guides/basic-features/debug/rsdoctor.mdx

@@ -26,14 +26,14 @@ import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 export default {
   // ...
   tools: {
-    rspack(config, { appendPlugins }) {
+    bundlerChain(chain) {
       // 仅在 RSDOCTOR 为 true 时注册插件，因为插件会增加构建耗时
       if (process.env.RSDOCTOR) {
-        appendPlugins(
-          new RsdoctorRspackPlugin({
+        chain.plugin('rsdoctor').use(RsdoctorRspackPlugin, [
+          {
             // 插件选项
-          }),
-        );
+          },
+        ]);
       }
     },
   },
@@ -46,7 +46,7 @@ export default {
 
 ## 执行构建
 
-在你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
+你可以在项目内执行 build 命令，在完成构建后，Rsdoctor 会自动打开本次构建的分析页面。
 
 ```bash
 RSDOCTOR=true npm run build