diff --git a/docs/.vuepress/public/mixin.png b/docs/.vuepress/public/mixin.png
new file mode 100644
index 00000000..f35a3407
Binary files /dev/null and b/docs/.vuepress/public/mixin.png differ
diff --git a/docs/.vuepress/public/side.png b/docs/.vuepress/public/side.png
new file mode 100644
index 00000000..426ccbfa
Binary files /dev/null and b/docs/.vuepress/public/side.png differ
diff --git a/docs/.vuepress/public/top.png b/docs/.vuepress/public/top.png
new file mode 100644
index 00000000..54500d0c
Binary files /dev/null and b/docs/.vuepress/public/top.png differ
diff --git a/docs/zh/guide/env.md b/docs/zh/guide/env.md
index 8daf936b..8dfa1ec6 100644
--- a/docs/zh/guide/env.md
+++ b/docs/zh/guide/env.md
@@ -58,7 +58,7 @@ FES_ENV=sit umi dev
 
 #### 配置优先级
 
-环境配置 > 临时配置 > .env
+临时配置 > 环境配置 > .env
 
 ::: tip
 如果两份配置中存在相同的项，则优先级高的会覆盖优先级低的。
diff --git a/docs/zh/guide/route.md b/docs/zh/guide/route.md
index d13917c2..6cd4b49d 100644
--- a/docs/zh/guide/route.md
+++ b/docs/zh/guide/route.md
@@ -92,7 +92,7 @@ pages
                 "count": 5
             },
             {
-                "path": "*",
+                "path": "/:pathMatch(.*)",
                 "component": require('@/pages/*').default,
                 "name": "FUZZYMATCH",
                 "meta": {},
@@ -140,7 +140,7 @@ pages
 ```
 
 ### 模糊匹配
-Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现 `404` 路由。     
+Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现 [404 路由](https://next.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1)。     
 
 比如以下目录结构：
 
@@ -156,7 +156,7 @@ pages
         path: '/', component: require('@/pages/index').default, count: 5
     },
     {
-        path: '*', component: require('@/pages/**').default, count: 3
+        path: '/:pathMatch(.*)', component: require('@/pages/**').default, count: 3
     }
 ]
 ```
@@ -216,6 +216,7 @@ const router = new VueRouter({
 当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
 
 ## 路由跳转
+想学习更多，可以查看 [Vue Router 官方文档](https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE)。
 
 ### 声明式
 ```vue
diff --git a/docs/zh/reference/plugin/plugins/access.md b/docs/zh/reference/plugin/plugins/access.md
index a4688966..58e8bed1 100644
--- a/docs/zh/reference/plugin/plugins/access.md
+++ b/docs/zh/reference/plugin/plugins/access.md
@@ -45,8 +45,8 @@ Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件
 
 ## 配置
 
-### 编译配置
-在 `.fes.js` 中配置：
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
 ```js
 export default {
     access: {
@@ -68,35 +68,74 @@ export default {
 
 
 ### 运行时配置
-在 `app.js` 中配置：
+在 `app.js` 中配置
+
+#### unAccessHandler
+- **类型**：`Function`
+  
+- **默认值**：`null`
+
+- **详情**：     
+  
+  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+- **参数**
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+
+比如：
 ```js
 export const access = {
-    noAccessHandler({ router, to, from, next}) {
-        console.log("被拦截");
-        next(false);
+    unAccessHandler({ to, next }) {
+        const accesssIds = accessApi.getAccess();
+        if (to.path === '/404') {
+            accessApi.setAccess(accesssIds.concat(['/404']));
+            return next('/404');
+        }
+        if (!accesssIds.includes('/403')) {
+            accessApi.setAccess(accesssIds.concat(['/403']));
+        }
+        next('/403');
     }
 };
 
 ```
-#### noAccessHandler
-- **类型**：函数
+
+#### noFoundHandler
+- **类型**：`Function`
   
-- **默认值**：null
+- **默认值**：`null`
 
 - **详情**：     
   
-  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `noAccessHandler` 函数。
+  当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
 - **参数**
-  - router
-  - to
-  - from
-  - next
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+
+比如：
+```js
+export const access = {
+    noFoundHandler({ next }) {
+        const accesssIds = accessApi.getAccess();
+        if (!accesssIds.includes('/404')) {
+            accessApi.setAccess(accesssIds.concat(['/404']));
+        }
+        next('/404');
+    }
+};
+
+```
 
 ## API
 
 ### access
+插件 API 通过 `@webank/fes` 导出：
 ```js
-import { access } from '@webank/fes-plugin-access'
+import { access } from '@webank/fes'
 ```
 
 #### access.hasAccess
@@ -107,15 +146,15 @@ import { access } from '@webank/fes-plugin-access'
   - accessId，资源Id
 - **返回值**：Boolean
 
-#### access.hasLoading
+#### access.isDataReady
 - **类型**：函数
   
-- **详情**：可以用异步数据来设置权限，`hasLoading` 用来判断异步数据是否已经加载完毕。
+- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
 - **参数**：null
 - **返回值**：Boolean
 ```js
 import { access } from '@webank/fes';
-console.log(access.hasLoading())
+console.log(access.isDataReady())
 ```
 
 
@@ -145,16 +184,15 @@ import { access } from '@webank/fes';
 access.setAccess(['/a', '/b', '/c'])
 ```
 
-#### access.addAccess
+#### access.getAccess
 - **类型**：函数
   
-- **详情**：添加某个资源Id为可见。
-- **参数**：
-  - accessId，资源Id
+- **详情**：返回当前可见的资源列表。
+- **参数**：null
 
 ```js
 import { access } from '@webank/fes';
-access.addAccess("aaa");
+access.getAccess();
 ```
 
 ### useAccess
diff --git a/docs/zh/reference/plugin/plugins/layout.md b/docs/zh/reference/plugin/plugins/layout.md
index 2c702865..b92851cc 100644
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@@ -1,8 +1,188 @@
 # @webank/fes-plugin-layout
 
+## 介绍
+为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
+- 侧边栏菜单数据根据路由中的配置自动生成。
+- 布局，提供 `side`、 `top`、`mixin` 三种布局。
+- 主题，提供 `light`、`dark` 两种主题。
+- 默认实现对路由的 404、403 处理。
+- 搭配 [@webank/fes-plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
+- 搭配 [@webank/fes-plugin-loacle](./locale.html) 插件使用，提供切换语言的能力。
+- 支持自定义头部区域。
+  
+- 可配置页面是否需要 layout。
+
+## 布局类型
+默认是 `side`
+
+### side
+![side](/side.png)
+### top
+![top](/top.png)
+### mixin
+![mixin](/mixin.png)
 
 ## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@webank/fes": "^2.0.0",
+        "@webank/fes-plugin-layout": "^2.0.0"
+    },
+}
+```
+
+### 页面禁用布局
+Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
+```vue
+<config>
+{
+    "layout": false
+}
+</config>
+<script>
+</script>
+```
 
 ## 配置
 
-## API
\ No newline at end of file
+### 编译时配置
+在 `.fes.js` 中配置：
+```js
+export default {
+    layout: {
+        title: "Fes.js",
+        footer: 'Created by MumbelFe',
+        multiTabs: false,
+        menus: [{
+            name: 'index'
+        }, {
+            name: 'onepiece'
+        }, {
+            name: 'store'
+        }, {
+            name: 'simpleList'
+        }]
+    },
+```
+
+#### title
+- **类型**：`String`
+  
+- **默认值**：`name` in package.json
+
+- **详情**：产品名，会显示在 Logo 旁边。   
+
+#### logo
+- **类型**：`String`
+  
+- **默认值**：默认提供 fes.js 的 Logo
+
+- **详情**：Logo，会显示在布局上。
+
+#### locale
+- **类型**：`boolean`
+  
+- **默认值**：`false`
+
+- **详情**：是否显示语言选择框。
+
+#### multiTabs
+- **类型**：`boolean`
+  
+- **默认值**：`false`
+
+- **详情**：是否开启多页。
+
+#### menus
+- **类型**：`Array`
+  
+- **默认值**：`[]`
+
+- **详情**：菜单配置，子项具体配置如下：
+  
+  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](http://localhost:8080/zh/guide/route.html#%E6%89%A9%E5%B1%95%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
+  
+  - **path**：菜单的路径，可配置第三方地址。
+  
+  - **title**：菜单的标题。
+  
+  - **children**：子菜单配置。
+  
+  
+### 运行时配置
+在 `app.js` 中配置：
+```js
+import UserCenter from '@/components/UserCenter';
+export const layout = {
+    customHeader: <UserCenter />
+};
+
+```
+#### customHeader
+- **类型**：Vue Component
+  
+- **默认值**：`null`
+
+- **详情**：布局的 Header 部位提供组件自定义功能。
+
+#### unAccessHandler
+- **类型**：`Function`
+  
+- **默认值**：`null`
+
+- **详情**：     
+  
+  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+- **参数**
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+
+比如：
+```js
+export const access = {
+    unAccessHandler({ to, next }) {
+        const accesssIds = accessApi.getAccess();
+        if (to.path === '/404') {
+            accessApi.setAccess(accesssIds.concat(['/404']));
+            return next('/404');
+        }
+        if (!accesssIds.includes('/403')) {
+            accessApi.setAccess(accesssIds.concat(['/403']));
+        }
+        next('/403');
+    }
+};
+
+```
+
+#### noFoundHandler
+- **类型**：函数
+  
+- **默认值**：null
+
+- **详情**：     
+  
+  当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
+- **参数**
+  - router：createRouter 创建的路由实例
+  - to： 准备进入的路由
+  - from：离开的路由
+  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
+
+比如：
+```js
+export const access = {
+    noFoundHandler({ next }) {
+        const accesssIds = accessApi.getAccess();
+        if (!accesssIds.includes('/404')) {
+            accessApi.setAccess(accesssIds.concat(['/404']));
+        }
+        next('/404');
+    }
+};
+
+```
\ No newline at end of file
diff --git a/docs/zh/reference/plugin/plugins/locale.md b/docs/zh/reference/plugin/plugins/locale.md
index 7e6c396d..4b9fa6af 100644
--- a/docs/zh/reference/plugin/plugins/locale.md
+++ b/docs/zh/reference/plugin/plugins/locale.md
@@ -1,7 +1,202 @@
 # @webank/fes-plugin-locale
 
+## 介绍
+国际化插件，基于 [Vue I18n](https://github.com/intlify/vue-i18n-next)，用于解决 i18n 问题。
 ## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@webank/fes": "^2.0.0",
+        "@webank/fes-plugin-locale": "^2.0.0"
+    },
+}
+```
+
 
 ## 配置
 
-## API
\ No newline at end of file
+### 约定式配置
+Fes.js 约定如下目录，项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换：
+```
+src
+  ├── locales
+  │    ├── zh-CN.js
+  │    └── en-US.js
+  └── pages
+  │    └── index.vue
+  └── app.js
+```
+多语言文件的命名规范：`<lang>-<COUNTRY>.js`
+
+多语言文件的内容规范：键值组成的字面量，如下：
+```js
+// src/locales/zh-CN.js
+export default {
+    menu: {
+        interface: '接口'
+    },
+    overview: '概述',
+    i18n: {
+        internationalization: '国际化，基于',
+        achieve: '实现。',
+        ui: 'UI组件'
+    }
+};
+```
+```js
+// src/locales/zh-CN.js
+export default {
+    menu: {
+        interface: 'interface'
+    },
+    overview: 'Overview',
+    i18n: {
+        internationalization: 'internationalization，base on',
+        achieve: 'to achieve.',
+        ui: 'UI components'
+    }
+};
+```
+想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
+
+
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
+```js
+export default {
+    locale: {
+    }
+}
+```
+默认配置为：
+```js
+export default {
+    locale: {
+        locale: 'zh-CN', // default locale
+        fallbackLocale: 'zh-CN', // set fallback locale
+        baseNavigator: true, // 开启浏览器语言检测
+        share: true, // 用户是否需要手动改变语言
+    }
+} 
+```
+所有配置项如下：
+
+#### locale
+- **类型**：`String`
+  
+- **默认值**：`zh-CN`
+
+- **详情**：当前的语言。
+
+#### fallbackLocale
+- **类型**：`String`
+  
+- **默认值**：`zh-CN`
+
+- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
+
+#### baseNavigator
+- **类型**：`Boolean`
+  
+- **默认值**：`true`
+
+- **详情**：开启浏览器语言检测。
+
+默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
+
+#### share
+- **类型**：`Boolean`
+  
+- **默认值**：`true`
+
+- **详情**：是否共享API，共享语言选择器 `{ SelectLang } `，其他插件可以获取到共享内容。
+  
+比如：
+```js
+import { plugin } from "@@/core/coreExports";
+const localeShared = plugin.getShared("locale");
+```
+
+
+### 运行时配置
+暂无。
+
+## API
+
+### locale
+插件 API 通过 `@webank/fes` 导出：
+```js
+import { locale } from '@webank/fes'
+```
+
+#### locale.messages
+- **类型**：`Object`
+  
+- **详情**：当前的配置的语言信息。
+
+#### locale.setLocale
+- **类型**：`Function`
+  
+- **详情**：设置当前的语言。
+- **参数**：
+  - locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
+- **返回值**：`null`
+```js
+import { locale } from '@webank/fes';
+locale.setLocale({ locale: 'en-US' });
+```
+
+#### locale.addLocale
+- **类型**：`Function`
+  
+- **详情**：手动添加语言配置。
+- **参数**：
+  - locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
+  - messages, 语言信息。
+- **返回值**：`null`
+```js
+import { locale } from '@webank/fes'
+locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
+```
+
+
+#### locale.getAllLocales
+- **类型**：`Function`
+  
+- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
+- **参数**：null
+- **返回值**：`Array`
+```js
+import { locale } from '@webank/fes';
+console.log(locale.getAllLocales());
+// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
+```
+
+
+### useI18n
+Composition API, 只能在 `setup` 函数中使用，更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。
+举个例子：
+```vue
+<template>
+  <form>
+    <label>{{ t('language') }}</label>
+  </form>
+  <p>message: {{ t('hello') }}</p>
+</template>
+
+<script>
+import { useI18n } from '@webank/fes'
+
+export default {
+ setup() {
+   const { t } = useI18n()
+   // Something to do ...
+
+   return { ..., t }
+ }
+}
+</script>
+```
+
+`useI18n()`返回结果是 [Composer](https://vue-i18n.intlify.dev/api/composition.html#composer)，提供类似 `t`、`n`、`d` 等转换函数，在模板中使用。
\ No newline at end of file
diff --git a/packages/fes-plugin-layout/README.md b/packages/fes-plugin-layout/README.md
index 5bcd3b30..3dd57ad4 100644
--- a/packages/fes-plugin-layout/README.md
+++ b/packages/fes-plugin-layout/README.md
@@ -5,6 +5,7 @@
 multi tabs： 是/否
 
 ## todo-list
+1. 菜单的国际化
 
 ### theme
 1. 主题light-白色