修改文档，使其符合现在的推荐用法 (#5646)

.prettierrc

@@ -3,7 +3,5 @@
   "singleQuote": true,
   "trailingComma": "all",
   "proseWrap": "never",
-  "overrides": [
-    { "files": ".prettierrc", "options": { "parser": "json" } }
-  ]
+  "overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }]
 }

docs/plugins/plugin-layout.md

@@ -1,217 +1,184 @@
----
-translateHelp: true
----
-
 # @umijs/plugin-layout
 
+## How to enable
 
-## 启用方式
+The configuration is turned on.
 
-配置开启。
+## Introduction
 
-## 介绍
+In order to further reduce the cost of research and development, we tried to build the layout through the umi plug-in. You can have Ant Design's Layout through simple configuration, including navigation and sidebar. So that users do not need to care about the layout.
 
-为了进一步降低研发成本，我们尝试将布局通过 umi 插件的方式内置，只需通过简单的配置即可拥有 Ant Design 的 Layout，包括导航以及侧边栏。从而做到用户无需关心布局。
+- The default is Ant Design's Layout [@ant-design/pro-layout](https://www.npmjs.com/package/@ant-design/pro-layout), which supports all its configuration items.
+- The sidebar menu data is automatically generated according to the configuration in the route.
+- By default, it supports 403/404 processing and Error Boundary for routing.
+- Used together with @umijs/plugin-access plug-in, you can control routing permissions.
+- Use with @umijs/plugin-initial-state and @umijs/plugin-model to display the default user login information.
 
-- 默认为 Ant Design 的 Layout [@ant-design/pro-layout](https://www.npmjs.com/package/@ant-design/pro-layout)，支持它全部配置项。
-- 侧边栏菜单数据根据路由中的配置自动生成。
-- 默认支持对路由的 403/404 处理和 Error Boundary。
-- 搭配 @umijs/plugin-access 插件一起使用，可以完成对路由权限的控制。
-- 搭配 @umijs/plugin-initial-state 插件和 @umijs/plugin-model 插件一起使用，可以拥有默认用户登陆信息的展示。
+> Want a dynamic menu? Check here [Advanced usage of menu](https://beta-pro.ant.design/docs/advanced-menu-cn)
 
-## 配置
+## Configuration
 
-### 构建时配置
+### Build-time configuration
 
-可以通过配置文件配置 `layout` 的主题等配置。
+The theme and other configurations of `layout` can be configured through the configuration file.
 
-```ts
+```tsx
 import { defineConfig } from 'umi';
 
 export const config = defineConfig({
-  layout:{
-    name: 'Ant Design', 
+  layout: {
+    name: 'Ant Design',
     locale: true,
-  }
+  },
 });
 ```
 
 #### name
 
-* Type: `string`
-* Default: `name` in package.json
+- Type: `string`
+- Default: `name` in package.json
 
-产品名，默认值为包名。
+Product name, the default value is the package name.
 
 #### logo
 
-* Type: `string`
-* default: Ant Design Logo
+- Type: `string`
+- default: Ant Design Logo
 
-产品 Logo
+Product Logo
 
 #### theme
 
-* Type: `string`
-* Default: `pro`
+- Type: `string`
+- Default: `pro`
 
-指定 Layout 主题，可选 `pro` 和 `tech`（`tech` 仅在蚂蚁内部框架 Bigfish 中生效）。
+Specify Layout theme, optional `pro` and `tech` (`tech` only takes effect in Ant's internal framework Bigfish).
 
 #### locale
 
-* Type: `boolean`
-* Default: `false`
+- Type: `boolean`
+- Default: `false`
 
-是否开始国际化配置。开启后路由里配置的菜单名会被当作菜单名国际化的 key，插件会去 locales 文件中查找 `menu.[key]`对应的文案，默认值为改 key。该功能需要配置 `@umijs/plugin-locale` 使用。
+Whether to start international configuration. After opening, the menu name configured in the route will be used as the key for the internationalization of the menu name. The plug-in will search the locales file for the corresponding copy of `menu.[key]`, and the default value is to change the key. This function needs to be configured with `@umijs/plugin-locale`.
 
-### 运行时配置
+### Runtime configuration
 
-Layout 插件允许通过运行时的配置退出登陆、自定义 ErrorBoundary 等功能。
+The Layout plug-in allows to log out and customize ErrorBoundary and other functions through runtime configuration.
 
-```js
+```tsx | pure
 // src/app.js
-export const layout = { 
-  logout: () => {}, // do something 
-  rightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode; 
+export const layout = {
+  // do something
+  logout: () => {},
+  // https://procomponents.ant.design/components/layout
+  rightRender: (initInfo) => {
+    return <Icon />;
+  }, // return string || ReactNode;
 };
 ```
 
-除了下面的插件支持的特有配置外，运行时配置支持所有的构建时配置并透传给 `@ant-design/pro-layout`。
+In addition to the specific configurations supported by the plugins below, the runtime configuration supports all build-time configurations and transmits them to `@ant-design/pro-layout`.
 
 #### logout
 
-* Type: `() => void`
-* Default: `null`
+- Type: `() => void`
+- Default: `null`
 
-用于运行时配置默认 Layout 的 UI 中，点击退出登录的处理逻辑，默认不做处理。
+In the UI that is used to configure the default Layout at runtime, the processing logic of clicking to log out will not be processed by default.
 
-> 注：默认在顶部右侧并不会显示退出按钮，需要在运行配置中配合`@umijs/plugin-intial-state`的`getInitialState`返回一个对象，才可以显示
+> Note: By default, the exit button will not be displayed on the top right side. You need to cooperate with the `getInitialState` of `@umijs/plugin-intial-state` in the running configuration to return an object before it can be displayed
 
 #### rightRender
 
-* Type: `(initialState) => React.ReactNode`
-* Default: 展示用户名、头像、退出登录相关组件
+- Type: `(initialState) => React.ReactNode`
+- Default: Display user name, avatar, logout related components
 
-`initialState` 从 `@umijs/plugin-initial-state` 插件中获取，需要搭配一起使用。
+`InitialState`is obtained from the`@umijs/plugin-initial-state` plugin and needs to be used together.
 
 #### onError
 
-* Type: `(error: Error, info: any) => void;`
+- Type: `(error: Error, info: any) => void;`
 
-发生错误后的回调（可做一些错误日志上报，打点等）。
+Callback after an error occurs (some error logs can be reported, management, etc.).
 
 #### ErrorComponent
 
-* Type: `(error: Error) => React.ReactElement<any>;`
-* Default: Ant Design Pro 的错误页。
+- Type: `(error: Error) => React.ReactElement<any>;`
+- Default: Error page of Ant Design Pro.
 
-发生错误后展示的组件。
+The component displayed after the error occurred.
 
-### 扩展的路由配置
+### Extended routing configuration
 
-Layout 插件会基于 umi 的路由，封装了更多的配置项，支持更多配置式的能力。新增：
+The Layout plugin will encapsulate more configuration items based on umi's routing, and support more configuration capabilities. Added:
 
-- 侧边栏菜单配置。
-- 布局路由级别展示/隐藏相关配置。
-- 与权限插件结合，配置式实现权限路由的功能。
+- Sidebar menu configuration.
+- Layout routing level display/hide related configuration.
+- Combined with the permission plug-in, the configuration type realizes the function of permission routing.
 
-新增如下配置项：
+Add the following configuration items:
 
 - menu
 - layout
 - access
 
-示例如下：
+Examples are as follows:
 
 ```typescript
 //config/route.ts
-export const routes: IBestAFSRoute[] =  [
+export const routes: IBestAFSRoute[] = [
   {
     path: '/welcome',
     component: 'IndexPage',
     menu: {
-      name: '欢迎', // 兼容此写法
+      name: 'Welcome', // compatible with this writing
       icon: 'testicon',
     },
-    layout:{
-      hideNav: true,
-    },
+    // more features view
+    // https://beta-pro.ant.design/docs/advanced-menu
+    // Do not show top bar
+    headerRender: false,
+    // Do not show footer
+    footerRender: false,
+    // Do not show the menu
+    menuRender: false,
+    // Do not show the menu top bar
+    menuHeaderRender: false,
+    // Permission configuration, need to be used in conjunction with plugin-access
     access: 'canRead',
-  }
-]
+    // hide child nodes
+    hideChildrenInMenu: true,
+    // hide yourself and child nodes
+    hideInMenu: true,
+    // The child item is raised up and still displayed,
+    flatMenu: true,
+  },
+];
 ```
 
 #### name
 
-* Type: `string`
+- Type: `string`
 
-菜单上显示的名称，没有则不显示。
+The name displayed on the menu, otherwise it will not be displayed.
 
 #### icon
 
-* Type: `string`
-
-菜单上显示的 Icon。
-
-#### menu
-
-* Type: `false` | `IRouteMenuConfig`
-* Default: `false`
-
-SideMenu 相关配置。默认为 false，表示在菜单中隐藏此项包括子项。
-
-menu 的可配置项包括：
-
-1. name
-
-* Type:  `string`
-当前菜单名，无默认值，必选，不填则表示不展示。
-
-2. icon
-
-* Type: `string`
-当前菜单的左侧 icon，可选 antd 的 icon name 和 url，可选。
-
-> icon name 为 组件名小写后去掉 `outlined` 或者 `filled` 或者 `twotone`，所得值。举例：`<UserOutlined />` 的 icon name 即： `user`。
-
-3. hideChildren
-
-* Type: `boolean`
-在菜单中隐藏他的子项，只展示自己。
-
-4. flatMenu
-
-* Type: `boolean`
-默认为false 在菜单中只隐藏此项，子项往上提，仍旧展示。
-
-
-#### layout
-
-* Type: false | IRouteLayoutConfig
-* Default: false
-
-Layout 相关配置。 默认为 false， 默认展示选择的 layout 主题。
-
-layout 的可配置项包括：
-
-1. hideMenu
-
-* Type: `boolean`
-* Default: `false`
+- Type: `string`
 
-当前路由隐藏左侧菜单，默认不隐藏。
+The Icon displayed on the menu.
 
-2. hideNav
+> The icon name is the lower case of the component name and then remove the `outlined`or`filled`or`twotone`to obtain the value. Example: The icon name of`<UserOutlined />`is: `user`.
 
-* Type: `boolean`
-* Default: `false`
+#### flatMenu
 
-当前路由隐藏导航头，默认不隐藏。
+- Type: `boolean` The default is false. Only this item is hidden in the menu, and the sub-items are raised up and still displayed.
+- Default: `false`
 
 #### access
 
-* Type: `string`
+- Type: `string`
 
-当 Layout 插件配合 `@umijs/plugin-access` 插件使用时生效。
+It takes effect when the Layout plugin is used in conjunction with the `@umijs/plugin-access` plugin.
 
-权限插件会将用户在这里配置的 access 字符串与当前用户所有权限做匹配，如果找到相同的项，并当该权限的值为 false，则当用户访问该路由时，默认展示 403 页面。
+The permission plugin will match the access string configured by the user here with all the permissions of the current user. If the same item is found and the value of the permission is false, the 403 page will be displayed by default when the user accesses the route.