@modern-js/main-doc 2.7.0 → 2.8.0

package/zh/apis/app/runtime/model/use-model.mdx

@@ -9,7 +9,7 @@ import ReduckTip from "@site-docs/components/reduck-tip"
 <ReduckTip />
 
 :::tip 提示
-Reduck 原始类型较为复杂，以下涉及类型定义的地方，展示的是简化后的类型信息。原始类型见 [model](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/useModel.ts)。
+Reduck 原始类型较为复杂，以下涉及类型定义的地方，展示的是简化后的类型信息。原始类型见 [model](https://github.com/web-infra-dev/reduck/blob/main/packages/store/src/model/useModel.ts)。
 
 :::
 

package/zh/apis/app/runtime/web-server/hook.mdx

@@ -3,11 +3,10 @@ title: Hook
 ---
 # Hook
 
-用于拓展 Modern.js 内置的 Web Server，非 BFF 请求会经过这些中 Hook 的处理。
+用于拓展 Modern.js 内置的 Web Server，所有的页面请求都会经过 Hook。
 
 :::note
 更多内容可以查看[自定义 Web Server](/guides/advanced-features/web-server)。
-
 :::
 
 ## 使用姿势
@@ -27,7 +26,6 @@ pnpm run new
 ? 请选择你想要的操作 创建工程元素
 ? 新建「自定义 Web Server」源码目录
 ```
-
 :::
 
 ## 函数签名
@@ -64,7 +62,7 @@ type HookContext = {
 function Hook(context: HookContext, next: NextFunction): Promsie<void> | void;
 ```
 
-另外，不同 Hook 额外提供了不同的上下文。目前 Modern.js 支持 `AtferMatch` 和 `AfterRender` 两个 Hook。
+另外，不同 Hook 额外提供了不同的上下文。目前 Modern.js 支持 `AfterMatch` 和 `AfterRender` 两个 Hook。
 
 ```ts
 type AfterMatchContext = HookContext & {

package/zh/apis/app/runtime/web-server/middleware.mdx

@@ -3,13 +3,10 @@ title: Middleware
 ---
 # Middleware
 
-用于拓展 Modern.js 内置的 Web Server，只有 SSR 请求会经过这些中间件。
-
-与 [Hook](/apis/app/runtime/web-server/hook) 不同的是，Middleware 可以使用 Server 运行时框架拓展。
+用于拓展 Modern.js 内置的 Web Server，与 [Hook](/apis/app/runtime/web-server/hook) 不同的是，Middleware 可以直接操作 Node 原生的请求、响应对象，并且可以使用框架拓展。
 
 :::note
 更多内容可以查看[自定义 Web Server](/guides/advanced-features/web-server)。
-
 :::
 
 ## 使用姿势
@@ -38,6 +35,11 @@ pnpm run new
 ## 函数签名
 
 ```ts
+type Middleware = (
+  context: MiddlewareContext,
+  next: NextFunction,
+) => Promise<void> | void;
+
 type MiddlewareContext = {
   response: {
     set: (key: string, value: string) => void;
@@ -71,11 +73,6 @@ type MiddlewareContext = {
     res: ServerResponse;
   };
 };
-
-type RequestHandler = (
-  context: Context,
-  next: NextFunction,
-) => Promise<void> | void;
 ```
 
 ### 参数
@@ -86,6 +83,10 @@ type RequestHandler = (
   - `source`：提供 Node.js 原生的 `req` 与 `res` 对象。
 - `next`：执行当前 Hook 的下一个监听函数（不影响整体服务端流程）。
 
+:::warning
+`next` 函数的执行不影响后续内置流程，只控制下一个中间件是否执行。只有当响应被写入时，后续渲染流程才会中断。
+:::
+
 ## 示例
 
 ### 服务端耗时打点
@@ -107,5 +108,24 @@ Modern.js 提供了 `res.locals` 属性用来存放当前请求的局部变量
 export const Middleware = () => async (ctx, next) => {
   ctx.res.locals.id = 'Modern.js';
   ctx.res.locals.rpc = createRpcInstance();
-});
+};
 ```
+
+### 框架拓展
+
+Middleware 还可以和 BFF 一样，使用运行时框架拓展。Modern.js 约定，当使用框架运行时拓展时，类型信息从 `@modern-js/runtime/{namespace}` 下导出，Middleware 可以使用框架语法，例如框架中间件写法，以下是伪代码：
+
+```ts
+import { SomeType } from '@modern-js/runtime/{namespace}';
+
+export const middleware: SomeType = (ctx, next) => {
+  console.log(ctx.url);
+  next();
+};
+```
+
+默认情况下，在安装框架拓展插件后，Web Server 的框架拓展能力是关闭的。如果希望使用框架拓展，可以通过 [`server.enableFrameworkExt`](/configure/app/server/enable-framework-ext.html) 开启。
+
+:::info
+框架拓展导出的类型名不一定为 Middleware，命名由框架拓展插件。
+:::

package/zh/apis/monorepo/commands/gen-release-note.mdx

@@ -9,7 +9,7 @@ Usage: modern gen-release-note [options]
 根据当前仓库 changeset 文件生成 Release Note
 
 Options:
-  --repo <repo>      仓库名称，用于生成 Pull Request 链接， 例如： modern-js-dev/modern.js
+  --repo <repo>      仓库名称，用于生成 Pull Request 链接， 例如： web-infra-dev/modern.js
   --custom <cumtom>  自定义 Release Note 生成函数
   -h, --help         display help for command
 ```
@@ -24,9 +24,9 @@ Options:
 ```markdown
 ## Features:
 
-[[#1160](https://github.com/modern-js-dev/modern.js/pull/1160)] export ExecaError type
+[[#1160](https://github.com/web-infra-dev/modern.js/pull/1160)] export ExecaError type
 
 ## Bug Fix:
 
-[[#1264](https://github.com/modern-js-dev/modern.js/pull/1264)] fix: conventional router app use App.init not work
+[[#1264](https://github.com/web-infra-dev/modern.js/pull/1264)] fix: conventional router app use App.init not work
 ```

package/zh/components/enable-bff.mdx

@@ -7,8 +7,8 @@ import { Tabs, Tab as TabItem } from "@theme";
   <TabItem value="express" label="Express.js" default>
 
 ```ts title="edenx.config.ts"
-import expressPlugin from '@edenx/plugin-express';
-import bffPlugin from '@edenx/plugin-bff';
+import expressPlugin from '@modern-js/plugin-express';
+import bffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [expressPlugin(), bffPlugin()],
@@ -19,8 +19,8 @@ export default defineConfig({
   <TabItem value="koa" label="Koa.js">
 
 ```ts title="edenx.config.ts"
-import koaPlugin from '@edenx/plugin-koa';
-import bffPlugin from '@edenx/plugin-bff';
+import koaPlugin from '@modern-js/plugin-koa';
+import bffPlugin from '@modern-js/plugin-bff';
 
 export default defineConfig({
   plugins: [koaPlugin(), bffPlugin()],

package/zh/components/init-rspack-app.mdx

@@ -0,0 +1,7 @@
+```bash
+$ npx @modern-js/create myapp
+? 请选择你想创建的工程类型 应用
+? 请选择开发语言 TS
+? 请选择包管理工具 pnpm
+? 请选择构建工具 Rspack
+```

package/zh/components/release-note.mdx

@@ -1 +1 @@
-根据官网 [Release Note](https://github.com/modern-js-dev/modern.js/releases)，开发者也可以手动将项目升级到想要的版本。
+根据官网 [Release Note](https://github.com/web-infra-dev/modern.js/releases)，开发者也可以手动将项目升级到想要的版本。

package/zh/configure/app/bff/enable-handle-web.mdx

@@ -0,0 +1,24 @@
+---
+title: enableHandleWeb
+---
+
+# bff.enableHandleWeb
+
+- **类型：** `boolean`
+- **默认值：** `false`
+
+:::caution 注意
+请先在当前应用项目根目录使用【[new](/apis/app/commands#modern-new)】 启用 BFF 功能。
+:::
+
+默认情况下，BFF 服务只能处理 BFF API 的请求。
+
+当该值设置为 `true` 时，页面请求流量也会经过 BFF，并且 Modern.js 内置的页面渲染的逻辑默认会作为 BFF 服务的最后一个中间件运行。
+
+```ts title="modern.config.ts"
+export default defineConfig({
+  bff: {
+    enableHandleWeb: true,
+  },
+});
+```

package/zh/configure/app/server/enable-framework-ext.mdx

@@ -35,7 +35,7 @@ export const middleware: Middleware = (ctx, next) => {
 开启后，Middleware 类型将从其他命名空间下导出，并且可以使用框架拓展的语法：
 
 ```ts title="server/index.ts"
-import { SomeType } from '@modern-js/runtime/{frameworknName}';
+import { SomeType } from '@modern-js/runtime/{namespace}';
 
 export const middleware: SomeType = (...args) => {
   console.log(args[0].url);

package/zh/guides/advanced-features/bff/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "BFF",
-  "position": 1,
+  "position": 2,
   "link": {
     "type": "doc",
     "id": "guides/advanced-features/bff/index"

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

@@ -1,11 +1,11 @@
 ---
 title: 使用 Rspack
-sidebar_position: 12
+sidebar_position: 1
 ---
 
 # 使用 Rspack
 
-[Rspack](https://www.rspack.org/) 是字节跳动 Web Infra 团队自研的 Rust Bundler，核心架构对齐 webpack 实现，并对社区常用的构建能力做了开箱即用的支持。
+[Rspack](https://www.rspack.dev/) 是字节跳动 Web Infra 团队自研的 Rust Bundler，核心架构对齐 webpack 实现，并对社区常用的构建能力做了开箱即用的支持。
 
 Rspack 通过以下方式来提升编译性能：
 
@@ -13,22 +13,18 @@ Rspack 通过以下方式来提升编译性能：
 - 充分利用多核优势，整个编译过程充分进行多线程优化。
 - 基于请求的按需编译（Lazy Compilation），减小每次编译的模块数目，以提升冷启动的速度。
 
-## 初始化 rspack 项目
+## 初始化 Rspack 项目
 
-Modern.js 生成器会提供一个可交互的问答界面，只需将构建工具选择为**rspack**，即可创建一个 rspack 项目:
+Modern.js 生成器会提供一个可交互的问答界面，只需将构建工具选择为 **Rspack**，即可创建一个 Rspack 项目:
 
-```bash
-$ npx @modern-js/create myapp
-? 请选择你想创建的工程类型 应用
-? 请选择开发语言 TS
-? 请选择包管理工具 pnpm
-? 请选择构建工具 rspack
-```
+import InitRspackApp from "@site-docs/components/init-rspack-app"
+
+<InitRspackApp />
 
 项目创建完成后，在项目中执行 `pnpm run dev` 即可体验项目。更多项目信息可参考[快速上手](/guides/get-started/quick-start.html)。
 
 :::tip
-使用 rspack 作为打包工具时，以下功能暂不支持使用:
+使用 Rspack 作为打包工具时，以下功能暂不支持使用:
 
 - 服务端渲染（SSR）
 - 静态站点生成（SSG）
@@ -37,17 +33,17 @@ $ npx @modern-js/create myapp
 
 :::
 
-## 从 webpack 迁移至 rspack
+## 从 webpack 迁移至 Rspack
 
-通过执行 `pnpm run new` 可启用 rspack 构建：
+通过执行 `pnpm run new` 可启用 Rspack 构建：
 
 ```bash
 $ pnpm run new
 ? 请选择你想要的操作 启用可选功能
-? 启用可选功能 启用「rspack 构建」
+? 启用可选功能 启用「Rspack 构建」
 ```
 
-执行命令后，在 modern.config.ts 中开启 rspack 构建：
+执行命令后，在 modern.config.ts 中开启 Rspack 构建：
 
 ```ts title=modern.config.ts
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -65,5 +61,5 @@ export default defineConfig<'rspack'>({
 ```
 
 :::tip
-从 webpack 迁移至 rspack，会有一些构建和配置能力上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
+从 webpack 迁移至 Rspack，会有一些构建和配置能力上的差异，详情可参考：[配置差异](https://modernjs.dev/builder/guide/advanced/rspack-start.html#从-webpack-迁移到-rspack)
 :::

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

@@ -1,23 +1,35 @@
 ---
 title: 自定义 Web Server
-sidebar_position: 2
+sidebar_position: 3
 ---
 # 自定义 Web Server
 
 Modern.js 作为以客户端为中心的开发框架，对服务端的定制能力较弱。而在有些开发场景下，需要定制特殊的服务端逻辑，例如用户鉴权、请求预处理、添加页面渲染骨架等。
 
-因此 Modern.js 提供了一种功能，让项目可以在给定的范围内扩展 Modern.js 内置的 Web Server，来实现相应的需求。
+一些开发者可能会有疑惑，Modern.js 已经提供了 [BFF 能力](/guides/advanced-features/bff/function.html)，为什么还需要**自定义 Web Server**。
 
-## 创建自定义 Web Server
+因为在默认情况下，页面路由并不会经过 BFF，它没有办法为页面访问提供服务端的定制逻辑。之所以这样设计，是因为我们不希望控制页面的服务与 BFF 服务绑定在一起，避免 BFF 的框架限制页面的部署方式。例如将页面与 BFF 分开托管、将页面服务部署到非 Node 的环境上，或是针对部署平台做定制等。
 
-在项目根目录执行 `pnpm run new` 命令，按照如下选择，开启「自定义 Web Serve」功能：
+出于上述原因，Modern.js 提供了三种方式，让项目可以在根据需求，渐进式的定制服务端能力。
+
+:::warning
+三种扩展方式无法同时工作，开发者需要根据场景选择合适的方式。
+:::
+
+## 使用 API 扩展 Web Server
+
+第一种方式是通过 Modern.js 提供的服务端运行时 API，在特定的生命周期对服务端进行定制。提供这种方式的目的是在部分情况下，开发者并不需要控制完整的 Web Server，只需要添加服务端逻辑即可。
+
+这种方式无法控制完整的 Web Server，并且扩展逻辑**只在请求页面时生效**。因此，它适用于服务端逻辑相对简单，不希望额外创建 BFF 或者 BFF 和页面无需公用服务端逻辑场景。
+
+可以在项目根目录执行 `pnpm run new` 命令，开启「自定义 Web Serve」功能：
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
 ? 创建工程元素 新建「自定义 Web Server」源码目录
 ```
 
-执行命令后，在 `modern.config.ts` 中注册 Server 插件:
+执行命令后，在 `modern.config.ts` 中注册 `@modern-js/plugin-server` 插件:
 
 ```ts title="modern.config.ts"
 import serverPlugin from '@modern-js/plugin-server';
@@ -27,31 +39,84 @@ export default defineConfig({
 });
 ```
 
-项目目录下会新建 `server/index.ts` 文件，自定义逻辑在这个文件中编写。
+开启功能后，项目目录下会自动创建 `server/index.ts` 文件，可以在这个文件中编写自定义逻辑。Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
 
-## 使用 API 扩展 Web Server
+### Hook
 
-Modern.js 提供了 **Hook** 与 **Middleware** 两类 API 来扩展 Web Server。
+Modern.js 提供的 Hook 用于控制 Web Server 中的内置逻辑，所有的页面请求都会经过 Hook。
 
-### Hook
+目前提供了两种 Hook，分别是 `AfterMatch` 和 `AfterRender`，可以用于修改渲染结果。可以在 `server/index.ts` 中这样写：
+
+```ts
+import type { AfterMatchHook, AfterRenderHook } from '@modern-js/runtime/server';
+
+export const afterMatch: AfterMatchHook = (ctx, next) => {
+  next();
+}
+
+export const afterRender: AfterRenderHook = (ctx, next) => {
+  next();
+}
+```
 
-Hook 可以控制 Web Server 对请求处理的内置逻辑，非 BFF 请求会经过 Hook 的处理。
+项目在使用 Hook 时，应该有以下最佳实践：
 
-Hook 不可以使用运行时框架拓展。
+1. 在 afterMatch 中做权限校验。
+2. 在 afterMatch 做 Rewrite 和 Redirect。
+3. 在 afterRender 中做 HTML 内容注入。
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+:::note
+详细 API 和更多用法可以查看 [Hook](/apis/app/runtime/web-server/hook)。
+:::
 
 ### Middleware
 
-Middleware 可以为 Web Server 添加前置中间件，只有 SSR 请求会经过 Middleware 的处理。
+对于某些项目，可能在服务端有更多的需求，Modern.js 提供了 Middleware 为 Web Server 添加前置中间件。它只能运行在 Node 环境下，因此如果项目被部署到其他环境中，如 Worker 环境，则不可以使用 Middleware。
+
+Modern.js 默认提供了一套 API 供项目使用：
 
-Middleware 可以使用运行时框架拓展。
+```ts
+import { Middlewre } from '@modern-js/runtime/server';
 
-详细 API 可以查看 [Hook](/apis/app/runtime/web-server/middleware)。
+export const middleware = (context, next) => {
+  const { source: { req, res } } = context;
+  console.log(req.url);
+  next();
+};
+```
+
+:::note
+详细 API 和更多用法可以查看 [Middleware](/apis/app/runtime/web-server/middleware)。
+:::
+
+项目在使用 Middleware 时，应该有以下最佳实践：
+
+1. 在 Middleware 中可以直接操作原生的请求、响应对象，做数据打点、注入 SSR 渲染可能用到的 Node 服务（数据库、Redis 等）。
+2. 在 Middleware 里可以做类似功能打标、爬虫优化等功能。
+3. 在 Middleware 里可以无视后续默认渲染，自定义渲染流程。
+
+**总的来说，CSR 项目中，使用 Hook 基本能满足简单场景的所有需求。SSR 项目中，可以使用 Middleware 做更复杂的 Node 扩展。**
+
+## 通过 BFF 托管页面请求
+
+第二种方式，是利用 BFF 来托管页面渲染，这种方式下，所有的请求都会先打到 BFF 的服务。
+
+因为这种方式可以通过 BFF 统一控制所有请求的服务端逻辑。因此，它适用于服务端逻辑复杂，BFF 和页面需要公用服务端逻辑的场景。但它整体还是依托于 Modern.js 的 Web Server 运行，无法将逻辑运行在已有的服务上。
+
+使用这种方式，我们需要先通过 `pnpm new` 开启「BFF」功能。然后在配置文件中添加 [`bff.enableHandleWeb`](/configure/app/bff/enable-handle-web.html) 配置：
+
+```ts
+export default defineConfig({
+  bff: {
+    enableHandleWeb: true,
+  },
+});
+```
+
+当该值设置为 `true` 时，页面请求流量也会经过 BFF，并且 Modern.js 内置的页面渲染的逻辑默认会作为 BFF 服务的最后一个中间件运行。
 
 ## 完全自定义的 Web Server
 
 :::note
 敬请期待
-
 :::

package/zh/guides/concept/builder.mdx

@@ -6,7 +6,7 @@ sidebar_position: 2
 
 **Modern.js 的构建能力由 [Modern.js Builder](https://modernjs.dev/builder) 提供。**
 
-Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
+Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向 Web 开发场景的构建引擎，可以脱离 Modern.js 被独立使用。Modern.js Builder 同时支持 webpack 和 Rspack 等多种打包工具，默认情况下使用最成熟的 webpack 进行打包。
 
 ## 构建架构
 

package/zh/guides/topic-detail/changesets/github.mdx

@@ -72,7 +72,7 @@ jobs:
           fetch-depth: 100
 
       - name: Create Release Pull Request
-        uses: modern-js-dev/actions@main
+        uses: web-infra-dev/actions@main
         with:
           # this expects you to have a script called release which does a build for your packages and calls changeset publish
           versionNumber: ${{ github.event.inputs.version }}
@@ -136,7 +136,7 @@ jobs:
           fetch-depth: 1
 
       - name: Release
-        uses: modern-js-dev/actions@main
+        uses: web-infra-dev/actions@main
         with:
           # this expects you to have a script called release which does a build for your packages and calls changeset publish
           version: ${{ github.event.inputs.version }}

package/zh/guides/topic-detail/changesets/release-note.mdx

@@ -9,7 +9,7 @@ Modern.js 提供了 `modern gen-release-note` 命令，支持通过当前存在
 默认生成的 Release Note 格式为：
 
 ```markdown
-[[#1220](https://github.com/modern-js-dev/modern.js/pull/1220)] feat: support bff operators -- Ming
+[[#1220](https://github.com/web-infra-dev/modern.js/pull/1220)] feat: support bff operators -- Ming
 ```
 
 根据 commit 信息获取 changeset 的 Pull Request ID，并生成 Github 的链接，内容为 changeset 的 changelog 信息和作者信息。

package/zh/guides/topic-detail/framework-plugin/plugin-api.mdx

@@ -45,7 +45,7 @@ interface UserConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+具体配置字段的意义请参考【[配置](/configure/app/usage)】。
 
 ### useAppContext
 
@@ -96,7 +96,7 @@ interface NormalizedConfig {
 }
 ```
 
-具体配置字段的意义请参考【[配置](/configure/app/source/alias)】。
+具体配置字段的意义请参考【[配置](/configure/app/usage)】。
 
 ### useHookRunners
 

package/zh/guides/topic-detail/generator/plugin/develop.mdx

@@ -43,7 +43,7 @@ npx @modern-js/create plugin --plugin @modern-js/generator-plugin-plugin
 创建项目命令执行完成后，会对应的生成一个开发生成器插件的项目，`package.json` 中也会根据你的选择对应的生成 `meta` 信息。
 
 :::info
-生成器插件开发可参考 `@modern-js/generator-plugin-plugin` [源码地址](https://github.com/modern-js-dev/modern.js/tree/main/packages/generator/plugins/generator-plugin)
+生成器插件开发可参考 `@modern-js/generator-plugin-plugin` [源码地址](https://github.com/web-infra-dev/modern.js/tree/main/packages/generator/plugins/generator-plugin)
 
 :::
 

package/zh/guides/topic-detail/model/faq.mdx

@@ -10,7 +10,7 @@ title: 常见问题
 Reduck 的编译构建产物默认使用 ES6 语法，如果你需要支持更低版本的浏览器，请将 `@modern-js-reduck` 命名空间下的所有包加入到应用的编译过程。
 
 :::info 补充信息
-Reduck 使用的 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 的详细[配置](https://github.com/modern-js-dev/reduck/blob/main/common/config.js#L10~L17)。
+Reduck 使用的 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 的详细[配置](https://github.com/web-infra-dev/reduck/blob/main/common/config.js#L10~L17)。
 
 :::
 

package/zh/guides/topic-detail/model/manage-effects.mdx

@@ -255,6 +255,6 @@ const handleClick = async () => {
 ```
 
 :::info 补充信息
-[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
+[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/effects)
 
 :::

package/zh/guides/topic-detail/model/model-communicate.mdx

@@ -100,7 +100,7 @@ Modern.js 默认开启 [自动生成 actions](./auto-actions.mdx)，所以 `step
 ![communicate-models](https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/docs/models-communicate.gif)
 
 :::info 补充信息
-- 本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication)。
+- 本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/models-communication)。
 - 相关 API 的更多介绍，请参考：[model](/apis/app/runtime/model/model_#函数类型)。
 
 :::

package/zh/guides/topic-detail/model/performance.mdx

@@ -166,6 +166,6 @@ const barModel = model("bar").define({
 我们创建缓存函数 `createSelector`，仅当 `barModel` 的状态发生改变或 `fooModel` 的 `a` 状态发生改变时，才会重新计算 `combineA` 的值。
 
 :::info 补充信息
-本节完整的[示例代码](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
+本节完整的[示例代码](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/performance-optimization)
 
 :::

package/zh/guides/topic-detail/model/quick-start.mdx

@@ -8,7 +8,7 @@ import ReduckMigration from "@site-docs/components/reduck-migration"
 
 <ReduckMigration />
 
-[Reduck](https://github.com/modern-js-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
+[Reduck](https://github.com/web-infra-dev/reduck) 是 Modern.js 团队开发的遵循 MVC 模式的状态管理库，底层状态存储基于 [Redux](https://redux.js.org/) 实现，同时提供更高层级的抽象，并完全兼容 Redux 生态。
 
 Reduck 的目标是以 MVC 模式组织 React 应用开发结构，将业务逻辑维护在 Model 层，业务逻辑与 UI 解耦，让开发业务逻辑更集中、更简单，同时通过更高层级的抽象，减少重复工作（样板代码）。
 
@@ -110,4 +110,4 @@ function Counter() {
 
 ![countModel](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/simple-count-model.gif)
 
-这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。
+这样，我们就完了一个简单的计数器应用。本节完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model)查看。

package/zh/guides/topic-detail/model/use-model.mdx

@@ -163,7 +163,7 @@ function ThreeComponent() {
 
 使用 React 的 refs 也可以实现类似效果，其实 `useStaticModel` 内部也使用到了 refs。不过直接 `useStaticModel` 有助于将状态的管理逻辑从组件中解耦，统一收敛到 Model 层。
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/static-model)查看。
 
 ### 作为局部状态使用
 
@@ -195,7 +195,7 @@ function LocalCounter() {
 
 ![local-model](https://lf3-static.bytednsdoc.com/obj/eden-cn/eueh7vhojuh/modern/local-model.gif)
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/local-model)查看。
 
 ## 在组件外使用
 
@@ -239,7 +239,7 @@ setInterval(() => {
 }, 1000);
 ```
 
-完整的示例代码可以在[这里](https://github.com/modern-js-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
+完整的示例代码可以在[这里](https://github.com/web-infra-dev/modern-js-examples/tree/main/series/tutorials/runtime-api/model/counter-model-outof-react)查看。
 
 :::info
 如果是通过 [`createStore`](/apis/app/runtime/model/create-store) 手动创建的 Store 对象，无需通过 `useStore` 在组件内获取，即可直接使用。