@modern-js/main-doc 2.22.0 → 2.22.1

package/docs/zh/guides/concept/entries.mdx

@@ -30,7 +30,7 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
 └── tsconfig.json
 ```
 
-在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，通过生成器创建入口即可：
+在 Modern.js 项目中，你可以很方便的将单入口切换成多入口，直接在项目下执行 `pnpm run new`，根据提示创建入口即可：
 
 ```bash
 ? 请选择你想要的操作 创建工程元素
@@ -54,34 +54,38 @@ Modern.js 初始化的项目是单入口的（SPA），项目结构如下：
         └── page.tsx
 ```
 
-原本的代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了新的目录。
+原本的入口代码被移动到了和 `package.json` 中 `name` 同名的目录下，并创建了 `new-entry` 入口目录。
 
 执行 `pnpm run dev` 后，可以看到新增了一条名为 `/new-entry` 的路由，并且被迁移的代码路由并未发生变化。
 
 :::tip
-Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
+Modern.js 会将与 `package.json` 文件中 `name` 字段同名的入口作为主入口，主入口的路由为 `/`，其他入口的路由为 `/{entryName}`。
 
-比如，package.json 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
+比如，`package.json` 中的 `name` 为 `myapp` 时，`src/myapp` 会作为项目的主入口。
 
 :::
 
 ## 入口类型
 
-不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
+不同的入口类型具有不同的编译和运行时行为。
+
+import EntryMode from '@site-docs/components/entry-mode.mdx';
+
+<EntryMode />
 
 默认情况下，Modern.js 启动项目前会对 `src/` 下的文件进行扫描，识别入口，并生成对应的服务端路由。
 
 :::tip
-可以通过 [source.entriesDir](/configure/app/source/entries-dir) 更改入口目录为其他目录。
+可以通过 [source.entriesDir](/configure/app/source/entries-dir) 修改页面的入口识别目录。
 
 :::
 
 并非 `src/` 下所有的一级目录都会成为项目入口, 入口所在目录必须满足以下四个条件之一：
 
-1. 具有 `routes/` 目录
-2. 具有 `App.[jt]sx?` 文件
-3. 具有 `index.[jt]sx?` 文件
-4. 具有 `pages/` 目录（兼容 Modern.js 1.0）
+1. 具有 `routes/` 目录。
+2. 具有 `App.[jt]sx?` 文件。
+3. 具有 `index.[jt]sx?` 文件。
+4. 具有 `pages/` 目录（兼容 Modern.js 1.0）。
 
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
 
@@ -94,7 +98,7 @@ Modern.js 会将与 package.json 文件中 `name` 字段同名的入口作为主
 
 ### 框架模式入口
 
-框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 Webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
+框架模式指需要使用 Modern.js 框架能力，例如 Router、SSR、一体化调用等。这类入口约定下，开发者定义的入口并不是真正的 webpack 编译入口。Modern.js 在启动时会生成一个封装过的入口，可以在 `node_modules/.modern/{entryName}/index.js` 找到真正的入口。
 
 #### 约定式路由
 
@@ -135,7 +139,7 @@ export default () => {
 
 #### 自定义 Bootstrap
 
-如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 bootstrap 函数作为入参传入，并用导出的函数替代默认的 bootstrap，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
+如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 会将默认的 `bootstrap` 函数作为入参传入，并用导出的函数替代默认的 `bootstrap`，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 
 ```tsx
 export default (App: React.ComponentType, bootstrap: () => void) => {
@@ -178,9 +182,9 @@ export default AppWrapper;
 
 ### 构建模式入口
 
-构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 Webpack 的入口。
+构建模式是指不使用任何 Modern.js 运行时的能力，完全由开发者自己定义项目 webpack 的入口。
 
-如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 Webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
+如果入口中存在 `index.[jt]sx` ，并且没有默认导出函数时，这时候该文件就是真正的 webpack 入口文件。这里和 [Create React App](https://github.com/facebook/create-react-app) 类似，需要自己将组件挂载到 DOM 节点、添加热更新代码等。例如:
 
 ```js title=src/index.jsx
 import React from 'react';

package/docs/zh/guides/get-started/quick-start.mdx

@@ -12,9 +12,9 @@ import Prerequisites from "@site-docs/components/prerequisites"
 
 ## 安装
 
-Modern.js 提供了 `@modern-js/create` 生成器来创建项目，不要全局安装，使用 `npx` 按需运行。
+Modern.js 提供了 `@modern-js/create` 工具来创建项目，不要全局安装，使用 `npx` 按需运行。
 
-可以使用已有的空目录来创建项目：
+可以在已有的空目录来创建项目：
 
 ```bash
 mkdir myapp && cd myapp
@@ -41,9 +41,9 @@ import DebugApp from "@site-docs/components/debug-app"
 
 ## 使用配置
 
-通过生成器创建的 Modern.js 项目中，存在 `modern.config.ts` 文件。
+通过 `@modern-js/create` 创建的 Modern.js 项目中，会默认生成 `modern.config.ts` 文件。
 
-可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
+可以通过该配置文件修改配置，覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 
 ```ts title="modern.config.ts"
 import appTools, { defineConfig } from '@modern-js/app-tools';
@@ -51,7 +51,6 @@ import appTools, { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   runtime: {
     router: true,
-    state: true,
   },
   server: {
     ssr: true,
@@ -93,14 +92,12 @@ info    File sizes after production build:
 构建产物默认生成到 `dist/`，目录结构如下：
 
 ```
-.
-├── asset-manifest.json
+dist
 ├── html
-│   └── main
-├── loader-routes
-│   └── main
+│   └── main
 ├── modern.config.json
 ├── route.json
+├── routes-manifest.json
 └── static
     ├── css
     └── js

package/docs/zh/guides/get-started/upgrade.mdx

@@ -16,7 +16,7 @@ $ pnpm run upgrade
 
 > modern upgrade
 
-[INFO] [项目类型]: 应用
+[INFO] [项目类型]: Web 应用
 [INFO] [Modern.js 最新版本]: 2.0.0
 [INFO] 已更新 Modern.js 依赖至最新版本!
 ```

package/docs/zh/guides/topic-detail/changesets/add.mdx

@@ -2,9 +2,9 @@
 sidebar_position: 2
 ---
 
-# 添加一个 changeset
+# 添加 Changesets
 
-当我们开发完成一个功能时，需要添加一个 changeset 用于声明当前功能，用于后续版本发布。
+当我们开发完成时，需要添加一个 changeset 声明当前变更，用于后续版本发布。
 
 ## 信息
 
@@ -14,7 +14,7 @@ sidebar_position: 2
 
 - 本次变更需要升级的版本号类型，类型符合 [semver](https://semver.org/) 规范。
 
-- 本次变更的 Changelog 信息。
+- 本次变更的 changelog 信息。
 
 ## 步骤
 
@@ -25,17 +25,17 @@ sidebar_position: 2
 
 ### 模块工程方案
 
-#### 在根目录执行以下命令：
+#### 在根目录执行 change 命令
 
 ```bash
 pnpm run change
 ```
 
-#### 选择本次变更需要升级的版本号类型，点击回车：
+#### 选择本次变更需要升级的版本号类型
 
 ![选择版本类型](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-version.png)
 
-#### 填入 Changelog 信息，并点击两次回车：
+#### 填入 changelog 信息，并点击两次回车：
 
 ![写入变更信息](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog.png)
 
@@ -55,13 +55,13 @@ feat: test module solution changeset
 
 我们假设 monorepo 中存在三个模块包，分别为 `module-1`，`module-2`，`module-3`。
 
-#### 在根目录执行以下命令：
+#### 在根目录执行 change 命令
 
 ```bash
 pnpm run change
 ```
 
-#### 选择本次需要升级的包列表：
+#### 选择本次需要升级的包列表
 
 Changesets 会根据当前代码变更(`git diff Head...baseBranch`)，将 Monorepo 中的 package 分为两类，`changed packages` 和 `unchanged packages`，方便用户进行选择。
 
@@ -69,11 +69,13 @@ Changesets 会根据当前代码变更(`git diff Head...baseBranch`)，将 Monor
 
 ![选择升级包](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-select-packages.png)
 
-#### 分别选择不同版本类型对应的包，changeset 会询问 `major` 和 `minor` 类型，如果存在包未选择这两种类型，将会默认使用 `patch` 类型：
+#### 分别选择不同版本类型对应的包
+
+changeset 会询问 `major` 和 `minor` 类型，如果存在包未选择这两种类型，将会默认使用 `patch` 类型。
 
 ![选择升级包版本类型](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-auto-select-patch.png)
 
-#### 填入 Changelog 信息，并点击两次回车：
+#### 填入 changelog 信息
 
 ![写入变更信息](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-input-changelog-monorepo.png)
 
@@ -94,10 +96,10 @@ feat: test-changeset
 
 change 命令支持以下参数：
 
-- `--empty` 添加一个空的 changeset。
+- `--empty`： 添加一个空的 changeset。
 
 ```bash
-pnpm run change -- --empty
+pnpm run change --empty
 ```
 
 执行完成后，将在项目的 `.changeset` 目录创建空的 changeset 文件，文件内容如下：
@@ -107,7 +109,7 @@ pnpm run change -- --empty
 ---
 ```
 
-- `--open` 使用该参数时，在填写 Changelog 步骤会打开系统默认编辑器进行填写。
+- `--open`： 使用该参数时，在填写 changelog 步骤会打开系统默认编辑器进行填写。
 
 ## 注意事项
 

package/docs/zh/guides/topic-detail/changesets/changelog.mdx

@@ -2,15 +2,15 @@
 sidebar_position: 6
 ---
 
-# 自定义 Changelog 生成
+# 自定义 changelog 生成
 
-Changesets 默认会使用 `@changesets/cli/changelog` 生成 Changelog 信息，如果默认的 Changelog 信息不能满足需求，可以自定义 Changelog 的生成。
+Changesets 默认会使用 `@changesets/cli/changelog` 生成 Changelog 信息，如果默认的 changelog 信息不能满足需求，可以自定义 changelog 的生成。
 
-## 自定义 Changlog 内容
+## 自定义 changelog 内容
 
-Changelog 信息主要包含以下两种信息：
+changelog 信息主要包含以下两种信息：
 
-- changeset 中写入的 Changelog 信息。
+- changeset 中写入的 changelog 信息。
 
 - 本次版本升级关联包的版本变更信息。
 
@@ -41,7 +41,7 @@ export type Changeset = {
 
 #### 返回值
 
-Changelog 内容。
+changelog 内容。
 
 #### 默认实现
 
@@ -91,7 +91,7 @@ type DependenciesUpdated = ModCompWithPackage[];
 
 #### 返回值
 
-Changelog 内容。
+changelog 内容。
 
 #### 默认实现
 
@@ -128,11 +128,11 @@ async function getDependencyReleaseLine(changesets, dependenciesUpdated) {
 
 ## 配置
 
-Changesets 配置文件中 `changelog` 字段，该字段用于标记 Changelog 信息的获取途径。
+Changesets 配置文件中 `changelog` 字段用于标记 changelog 信息的获取途径。
 
-该配置可以为字符串，直接声明获取 Changelog 信息模块的模块名称或者路径。
+该配置可以为字符串，直接声明获取 changelog 信息模块的模块名称或者路径。
 
-该配置还支持配置数组，数组中第一个元素为获取 Changelog 信息模块的模块名称或者路径，第二个元素为传入对应函数的参数值，会作为 `getReleaseLine` 和 `getDependencyReleaseLine` 函数的第三个参数传入。
+该配置还支持配置数组，数组中第一个元素为获取 changelog 信息模块的模块名称或者路径，第二个元素为传入对应函数的参数值，会作为 `getReleaseLine` 和 `getDependencyReleaseLine` 函数的第三个参数传入。
 
 ### 配置相对路径
 
@@ -162,9 +162,9 @@ module.exports = {
 
 ### 使用模块工程方案
 
-自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
+自定义 changelog 还可以使用模块工程方案进行管理，提供通用方案。
 
-#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块
@@ -173,7 +173,7 @@ module.exports = {
 ? 请选择包管理工具：pnpm
 ```
 
-#### 实现自定义内容。
+#### 实现自定义内容
 
 ```ts title="src/index.ts"
 export async function getReleaseLine() {}
@@ -181,11 +181,11 @@ export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}
 ```
 
-#### 将模块发布到 NPM。
+#### 将模块发布到 NPM
 
-#### 在目标仓库根目录安装对应模块，例如 `custom-changelog`。
+#### 在目标仓库根目录安装对应模块，例如 `custom-changelog`
 
-#### 配置 changeset 的 changelog 配置为包名称。
+#### 配置 changeset 的 changelog 配置为包名称
 
 ```json title=".changesets/config.json"
 {
@@ -198,7 +198,7 @@ export async function getDependencyReleaseLine() {}
 
 如果你当前仓库为 Monorepo 工程方案，可以直接使用模块子项目进行管理。
 
-#### 执行 `pnpm run new` 创建模块子项目。
+#### 执行 `pnpm run new` 创建模块子项目
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块
@@ -207,7 +207,7 @@ export async function getDependencyReleaseLine() {}
 ? 请选择开发语言：TS
 ```
 
-#### 实现自定义内容。
+#### 实现自定义内容
 
 ```ts title="src/index.ts"
 export async function getReleaseLine() {}
@@ -215,7 +215,7 @@ export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}
 ```
 
-#### 在 Monorepo 根目录添加子项目模块依赖，例如 `custom-changelog`。
+#### 在 Monorepo 根目录添加子项目模块依赖，例如 `custom-changelog`
 
 ```json title="package.json"
 {
@@ -226,7 +226,7 @@ export async function getDependencyReleaseLine() {}
 }
 ```
 
-#### 配置 changeset 的 changelog 配置为包名称。
+#### 配置 changeset 的 changelog 配置为包名称
 
 ```json title=".changesets/config.json"
 {

package/docs/zh/guides/topic-detail/changesets/commit.mdx

@@ -118,7 +118,7 @@ type ReleasePlan = {
 
 - options
 
-配置 commit 时的配置信息。
+配置 commit 时的其他参数。
 
 > commit 配置为数组时，第二个参数支持传入默认的配置信息，会对应的使用该参数传递。
 
@@ -169,7 +169,7 @@ Changesets 配置文件中 `commit` 字段，该字段用于标记是否需要
 
 commit 配置如果为相对路径为 `.changesets` 目录下的相对路径。
 
-例如创建 .changeset/my-commit-config.js 文件，定义如下内容：
+例如创建 `.changeset/my-commit-config.js` 文件，定义如下内容：
 
 ```js title=".changeset/my-commit-config.js"
 async function getAddMessage(changeset, options) {}
@@ -195,9 +195,7 @@ commit 配置为 ./my-commit-config.js 即可:
 
 自定义 commit 还可以使用模块工程方案进行管理，提供通用方案。
 
-自定义 Changelog 还可以使用模块工程方案进行管理，提供通用方案。
-
-#### 使用 `npx @modern-js/create@latest` 创建模块工程方案。
+#### 使用 `npx @modern-js/create@latest` 创建模块工程方案
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块
@@ -206,7 +204,7 @@ commit 配置为 ./my-commit-config.js 即可:
 ? 请选择包管理工具：pnpm
 ```
 
-#### 实现自定义内容。
+#### 实现自定义内容
 
 ```ts title="src/index.ts"
 export async function getAddMessage() {}
@@ -214,15 +212,15 @@ export async function getAddMessage() {}
 export async function getVersionMessage() {}
 ```
 
-#### 将模块发布到 NPM。
+#### 将模块发布到 NPM
 
-#### 在目标仓库根目录安装对应模块，例如 custom-commit。
+#### 在目标仓库根目录安装对应模块，例如 `custom-commit`
 
-#### 配置 changeset 的 commit 配置为包名称。
+#### 配置 changeset 的 commit 配置为包名称
 
 ```json title="package.json"
 {
-  "changelog": "custom-commit",
+  "commit": "custom-commit",
    ...
 }
 ```
@@ -231,7 +229,7 @@ export async function getVersionMessage() {}
 
 如果你当前仓库为 Monorepo 工程方案，可以直接使用模块子项目进行管理。
 
-#### 执行 `pnpm run new` 创建模块子项目。
+#### 执行 `pnpm run new` 创建模块子项目
 
 ```md
 ? 请选择你想创建的工程类型：Npm 模块
@@ -240,7 +238,7 @@ export async function getVersionMessage() {}
 ? 请选择开发语言：TS
 ```
 
-#### 实现自定义内容。
+#### 实现自定义内容
 
 ```ts title="src/index.ts"
 export async function getAddMessage() {}
@@ -248,7 +246,7 @@ export async function getAddMessage() {}
 export async function getVersionMessage() {}
 ```
 
-#### 在 Monorepo 根目录添加子项目模块依赖，例如 custom-commit。
+#### 在 Monorepo 根目录添加子项目模块依赖，例如 `custom-commit`
 
 ```json title="package.json"
 {
@@ -259,7 +257,7 @@ export async function getVersionMessage() {}
 }
 ```
 
-#### 配置 changeset 的 commit 配置为包名称。
+#### 配置 changeset 的 commit 配置为包名称
 
 ```json title=".changesets/config.json"
 {

package/docs/zh/guides/topic-detail/changesets/config.mdx

@@ -4,7 +4,7 @@ sidebar_position: 5
 
 # Changesets 配置文件
 
-我们前面了解到，初始化 Modern.js 仓库时，会默认初始化 Changesets 的配置文件，即 `.changeset/config.json` 文件，下面我们将详细了解一下该文件中支持哪些配置。
+我们前面了解到，初始化 Modern.js 仓库时，会默认初始化 changesets 的配置文件，即 `.changeset/config.json` 文件，下面我们将详细了解一下该文件中支持哪些配置。
 
 ## 配置介绍
 
@@ -106,15 +106,15 @@ pkg-b @ version 1.0.0
 
 默认值：`@changesets/cli/changelog`
 
-生成 Changelog 规则。
+生成 changelog 规则。
 
-配置为 `false` 时，执行 bump 命令时，在 `CHANGELOG.md` 文件中只声明版本号，不声明其他 Changelog 信息。
+配置为 `false` 时，执行 bump 命令时，在 `CHANGELOG.md` 文件中只声明版本号，不声明其他 changelog 信息。
 
 ![关闭 changelog 配置](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/changeset-empty-changelog.png)
 
-配置为 `@changesets/cli/changelog` 将使用官方提供的 Changlog 生成规则，将 changeset 信息转换为 Changlog 内容。
+配置为 `@changesets/cli/changelog` 将使用官方提供的 changlog 生成规则，将 changeset 信息转换为 changlog 内容。
 
-配置为数组时，第一个参数为自定义 NPM 包或者路径，第二个参数为需要传入的默认参数配置，自定义格式我们将在后续[自定义 Changelog](/guides/topic-detail/changesets/changelog) 章节讲解。
+配置为数组时，第一个参数为自定义 NPM 包或者路径，第二个参数为需要传入的默认参数配置，自定义格式我们将在后续[自定义 changelog](/guides/topic-detail/changesets/changelog) 章节讲解。
 
 ### \_\_\_experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH
 

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

@@ -6,7 +6,7 @@ sidebar_position: 9
 
 ## BOT
 
-在 Github 上，Changesets 提供了机器人用于检测当前 Pull Request 是否存在 changeset，并提供了 UI 界面添加和修改 changeset。
+在 Github 上，changesets 提供了机器人用于检测当前 Pull Request 是否存在 changeset，并提供了 UI 界面添加和修改 changeset。
 
 ### 安装
 
@@ -46,9 +46,9 @@ sidebar_position: 9
 
 Modern.js 提供了自动创建发版 Pull Request 的 Github Action，提供基于选择的分支自动执行 bump 操作，更新 lock 文件及创建 Pull Request 操作。
 
-### 使用
+#### 使用
 
-在仓库中创建 `.github/workflows/release-pull-request.yml` 文件，填入以下内容：
+- 在仓库中创建 `.github/workflows/release-pull-request.yml` 文件，填入以下内容：
 
 ```yaml
 name: Release Pull Request
@@ -57,8 +57,15 @@ on:
   workflow_dispatch:
     inputs:
       version:
-        description: 'Release Version(v1.0.0)'
+        type: choice
+        description: 'Release Type(canary, beta, alpha, latest)'
         required: true
+        default: 'latest'
+        options:
+        - canary
+        - beta
+        - alpha
+        - latest
 
 jobs:
   release:
@@ -71,37 +78,40 @@ jobs:
           # This makes Actions fetch only one branch to release
           fetch-depth: 100
 
+      - ... # install dependencies and build repo package
       - name: Create Release Pull Request
-        uses: web-infra-dev/actions@main
+        uses: web-infra-dev/actions@v2
         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 }}
+          version: ${{ github.event.inputs.version }}
+          versionNumber: 'auto'
           type: 'pull request'
+          tools: 'modern'
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.REPO_SCOPED_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           REPOSITORY: ${{ github.repository }}
           REF: ${{ github.ref }}
 ```
 
-将 Workflow 合并到主分支后，进入 Github 仓库对应的 Action 页面，选择 Release Pull Request：
+- 将 Workflow 合并到主分支后，进入 Github 仓库对应的 Action 页面，选择 Release Pull Request：
 
 ![Release Pull Request Action](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/action-pull-request.png)
 
-选择本次发布的分支并填入版本号，版本号格式推荐 v1.0.0，点击 Run workflow 按钮：
+- 选择本次发布类型，点击 Run workflow 按钮：
 
-![Run Release Pull Request](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/run-pull-request-action.png)
+![Run Release Pull Request](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/action-pull-request.jpeg)
 
-workflow 运行完成后将自动创建 `Release-${version}` 的 Pull Request，自动完成 `bump` changeset 相关版本号并更新 lock 文件，Pull Request 的内容为执行 `gen-release-note` 命令自动生成的 Release Note。
+- Workflow 运行完成后将自动创建 `Release-${version}` 的 Pull Request，自动完成 `bump` changeset 相关版本号并更新 lock 文件，Pull Request 的内容为执行 `gen-release-note` 命令自动生成的 Release Note。
 
-![Release Pull Request](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/release-pull-request.png)
+![Release Pull Request](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/release-pull-request.jpeg)
 
 ### 自动 Release
 
-Modern.js 提供了自动创建发版 Pull Request 的 Github Action，提供基于选择的分支自动执行 release 操作，将包发布到 NPM 上。
+Modern.js 提供了自动发布版本 的 Github Action，提供基于选择的分支自动执行 release 操作，将包发布到 NPM 上。
 
 #### 使用
 
-在仓库中创建 `.github/workflows/release.yml` 文件，填入以下内容：
+- 在仓库中创建 `.github/workflows/release.yml` 文件，填入以下内容：
 
 ```yaml
 name: Release
@@ -111,14 +121,14 @@ on:
     inputs:
       version:
         type: choice
-        description: 'Release Version(canary, alpha, pre, latest)'
+        description: 'Release Version(canary, beta, alpha, latest)'
         required: true
-        default: 'canary'
+        default: 'next'
         options:
-          - canary
-          - alpha
-          - pre
-          - latest
+        - canary
+        - beta
+        - alpha
+        - latest
       branch:
         description: 'Release Branch(confirm release branch)'
         required: true
@@ -135,13 +145,14 @@ jobs:
           # This makes Actions fetch only one branch to release
           fetch-depth: 1
 
+      - ... # install dependencies and build repo package
       - name: Release
-        uses: web-infra-dev/actions@main
+        uses: web-infra-dev/actions@v2
         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 }}
           branch: ${{ github.event.inputs.branch }}
           type: 'release'
+          tools: 'modern'
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
@@ -149,16 +160,16 @@ jobs:
           REF: ${{ github.ref }}
 ```
 
-配置仓库的 NPM_TOKEN:
+- 配置仓库的 NPM_TOKEN:
 
 ![配置 Token](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/github-set-npm-token.png)
 
-将 Workflow 合并到主分支后，进入 Github 仓库对应的 Action 页面，选择 Release：
+- 将 Workflow 合并到主分支后，进入 Github 仓库对应的 Action 页面，选择 Release：
 
 ![Release Action](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/release-action.png)
 
-选择分支名称和发布版本类型，点击 Run workflow 按钮：
+- 选择分支名称和发布版本类型，点击 Run workflow 按钮：
 
 ![Run Release Action](https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/run-release-workflow.png)
 
-Workflow 将自动完成仓库 build 和发布到 NPM 流程。
+- Workflow 将自动完成仓库 build 和发布到 NPM 流程。