Merge branch 'master' into vue3

2025-04-06 03:59:53 +08:00 · 2021-11-12 14:33:12 +08:00 · 2021-11-12 14:33:12 +08:00 · 7a1db0259f
commit 7a1db0259f
parent 0f0c646ced ea71626028
177 changed files with 9621 additions and 10933 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -18,9 +18,7 @@ module.exports = {
        'no-undefined': 'off',
        'vue/valid-template-root': 'off'
    },
-    parserOptions: {
-        babelOptions: {
-            presets: ['@babel/preset-env']
-        }
+    env: {
+        jest: true
    }
 };
--- a/.fatherrc.js
+++ b/.fatherrc.js
@ -1,38 +0,0 @@
-import { readdirSync } from "fs";
-import { join } from "path";
-
-// utils must build before core
-// runtime must build before renderer-react
-
-const headPkgs = [
-    "fes-runtime",
-    "fes-compiler",
-    "fes",
-    "fes-preset-built-in",
-    "fes-plugin-request",
-    "fes-plugin-access",
-    "fes-plugin-model",
-    "fes-plugin-layout",
-    "fes-plugin-icon",
-    "fes-plugin-locale",
-    "fes-plugin-enums",
-    "fes-plugin-jest",
-    "fes-plugin-vuex",
-    "create-fes-app",
-    "fes-plugin-qiankun",
-    "fes-plugin-sass"
-];
-const tailPkgs = [];
-// const otherPkgs = readdirSync(join(__dirname, 'packages')).filter(
-//   (pkg) =>
-//     pkg.charAt(0) !== '.' && !headPkgs.includes(pkg) && !tailPkgs.includes(pkg),
-// );
-
-const otherPkgs = [];
-
-export default {
-    target: "node",
-    cjs: { type: "babel", lazy: false },
-    disableTypeCheck: true,
-    pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
-};
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@ -2,19 +2,23 @@ name: Deploy Docs
 on:
  push:
    branches:
-      - vue3
+      - master
    paths:
      - 'docs/**/**'
+      - 'package.json'
 jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@master
+      uses: actions/checkout@v2.3.1
+    
+    - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
+      run: npm install && npm run docs:build
+
    - name: Build and Deploy
-      uses: JamesIves/github-pages-deploy-action@master
-      env:
-        ACCESS_TOKEN: ${{ secrets.QLIN_GITEE_TOKEN }}
-        BRANCH: master
-        FOLDER: docs/.vuepress/dist
-        BUILD_SCRIPT: npm install && npm run docs:build
+      uses: JamesIves/github-pages-deploy-action@4.1.1
+      with:
+          branch: master # The branch the action should deploy to.
+          folder: docs/.vuepress/dist # The folder the action should deploy.
+          token: ${{ secrets.QLIN_GITEE_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -15,5 +15,6 @@ npm-debug.log
 /.changelog

 /packages/*/lib
+/packages/*/es
 /packages/*/dist
 package-lock.json
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "trailingComma": "none"
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,6 +2,26 @@

 <!-- DO NOT CHANGE THESE COMMENTS - See .github/actions/trigger-github-release/update-changelog.js -->
 <!-- insert-new-changelog-here -->
+
+## [2.0.0](https://github.com/WeBankFinTech/fes/compare/v0.2.3...v2.0.0) (2021-07-01)
+
+### 🚀 New Feature
+发布2.0.0，重构90%以上的代码，以Vue 3.0和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。匹配了覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
+
+支持插件如下：
+1. @fesjs/plugin-access	提供对页面资源的权限控制能力
+2. @fesjs/plugin-enums	提供统一的枚举存取及丰富的函数来处理枚举
+3. @fesjs/plugin-icon	svg 文件自动注册为组件
+4. @fesjs/plugin-jest	基于 Jest，提供单元测试、覆盖测试能力
+5. @fesjs/plugin-layout	简单的配置即可拥有布局，包括导航以及侧边栏
+6. @fesjs/plugin-locale	基于 Vue I18n，提供国际化能力
+7. @fesjs/plugin-model	简易的数据管理方案
+8. @fesjs/plugin-request	基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
+9. @fesjs/plugin-vuex	基于 Vuex, 提供状态管理能力
+10. @fesjs/plugin-qiankun	基于 qiankun，提供微服务能力
+11. @fesjs/plugin-sass	样式支持sass
+
+
 ## [0.2.3](https://github.com/WeBankFinTech/fes/compare/v0.2.2...v0.2.3) (2020-09-25)


--- a/README.en-US.md
+++ b/README.en-US.md
@ -0,0 +1,123 @@
+English | [简体中文](./README.md)
+
+
+<p align="center">
+  <a href="https://github.com/WeBankFinTech/fes.js">
+    <img alt="fes.js" width="250" src="https://i.loli.net/2021/03/12/Vb4LKc5gaHUfOwB.png">
+  </a>
+</p>
+
+<div align="center">
+
+An excellent front-end solution
+
+[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](https://github.com/WeBankFinTech/fes.js/issues)
+[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/WeBankFinTech/fes.js/pulls)
+
+</div>
+
+- document - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/)
+- changelog - [https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md](https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md)
+
+# Pain points
+Before developing a front-end project, we may need to do the following preparations：
+- Set up a development environment
+- Conventional code specification
+- Encapsulate API requests
+- Configure routing
+- Realize layout, menu, navigation
+- Realize login
+- authority management
+- ...
+
+In addition to the preparation work, there are many similar business types. For example, most of the middle and back-end applications are workbenches, additions, deletions, changes, permissions, charts, etc. If each project is completely processed manually, it will not only take time, but over time there may be multiple technology stacks and development specifications, leading to inconsistent development processes and making historical projects more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment.
+
+
+## Fes.js ？
+Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configuration routing and convention routing, which can be used for functional expansion. Equipped with a complete plug-in system covering the compile-time and runtime life cycle, it supports various function extensions and business requirements.    
+
+It mainly has the following functions:
+- 🚀  __fast__ , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.  
+  
+- 🧨  __easy__ , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
+
+- 💪  __strong__ , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
+
+- 📦  __expanded__ , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
+
+- 📡  __future__ , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
+
+## Plugins
+
+|  plugin   | introduce  | 
+|  ----  | ----  |
+| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | Provides the ability to control the permissions of page resources | 
+| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | Provide unified enumeration access and rich functions to handle enumeration | 
+| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg file is automatically registered as a component |  
+| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | Based on `Jest`, provide unit testing and coverage testing capabilities | 
+| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  Simple configuration to have a layout, including navigation and sidebar |
+| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  Based on `Vue I18n`, providing internationalization capabilities |
+| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  Simple data management solution |
+| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling |
+| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  Based on `Vuex`, provide state management capabilities |
+| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) |  Based on `qiankun`, provide microservice capabilities |
+| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) |  Style support sass |
+| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) |
+
+## As easy as counting 1, 2, 3
+use `yarn`：
+```bash
+# Create a template
+yarn create @fesjs/fes-app myapp
+
+# Installation dependencies
+yarn 
+
+# run
+yarn dev
+```
+
+use `npm`：
+```bash
+# Create a template
+npx @fesjs/create-fes-app myapp
+
+# Installation dependencies
+npm install 
+
+# run
+npm run dev
+```
+
+## Feedback
+
+| Github Issue  | WeChat group | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
+
+
+## Contributing
+
+Pull requests and stars are always welcome.
+
+For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues).
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+
+## Community activity
+
+### Fesjs community award-winning essay activity
+
+In order for the Fes.js open source project to run better, and to give back to the open source community, the community launched an award-winning essay event! Everyone is welcome to post practical experience to provide reference for community users and a wider range of developers.
+
+The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate.     
+
+Please stamp: https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+ 
+
--- a/README.md
+++ b/README.md
@ -1,3 +1,5 @@
+简体中文 | [English](./README.en-US.md)
+
 <p align="center">
  <a href="https://github.com/WeBankFinTech/fes.js">
    <img alt="fes.js" width="250" src="https://i.loli.net/2021/03/12/Vb4LKc5gaHUfOwB.png">
@ -32,7 +34,7 @@


 ## Fes.js 是什么？
-Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。     
+Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。     

 它主要具备以下功能：
 - 🚀  __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。  
@ -60,6 +62,7 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
 | [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Vuex`, 提供状态管理能力 |
 | [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) |  基于 `qiankun`，提供微服务能力 |
 | [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) |  样式支持sass |
+| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |

 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@ -93,18 +96,17 @@ npm run dev
 | [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |


-## Contributing
+## 参与共建

-Pull requests and stars are always welcome.
+我们非常欢迎社区同学能提交PR：

-For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues).
-
-1. Fork it!
-2. Create your feature branch: `git checkout -b my-new-feature`
-3. Commit your changes: `git commit -am 'Add some feature'`
-4. Push to the branch: `git push origin my-new-feature`
-5. Submit a pull request :D
+1. fork项目!
+2. 创建你的功能分支: `git checkout -b my-new-feature`
+3. 本地提交新代码: `git commit -am 'Add some feature'`
+4. 推送本地到服务器分支: `git push origin my-new-feature`
+5. 创建一个PR

+如果是发现Bug或者期望添加新功能，请提交[issue](https://github.com/WeBankFinTech/fes.js/issues)。

 ## 社区活动

--- a/build.config.js
+++ b/build.config.js
@ -0,0 +1,25 @@
+
+module.exports = {
+    // 需要编译的包
+    pkgs: [
+        'create-fes-app',
+        'fes',
+        'fes-compiler',
+        'fes-plugin-access',
+        'fes-plugin-enums',
+        'fes-plugin-icon',
+        'fes-plugin-jest',
+        'fes-plugin-layout',
+        'fes-plugin-locale',
+        'fes-plugin-model',
+        'fes-plugin-monaco-editor',
+        'fes-plugin-qiankun',
+        'fes-plugin-request',
+        'fes-plugin-sass',
+        'fes-plugin-vuex',
+        'fes-preset-built-in',
+        'fes-runtime',
+        'fes-utils'
+    ],
+    copy: []
+};
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@ -5,7 +5,7 @@ import { navbar, sidebar } from './configs'
 const config: UserConfig<DefaultThemeOptions> = {
  base: '/fesjs/',

-  evergreen: process.env.NODE_ENV !== 'production',
+  // evergreen: process.env.NODE_ENV !== 'production',

  head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]],

--- a/docs/.vuepress/configs/sidebar/en.ts
+++ b/docs/.vuepress/configs/sidebar/en.ts
@ -3,7 +3,7 @@ import type { SidebarConfig } from '@vuepress/theme-default'
 export const en: SidebarConfig = {
  '/guide/': [
    {
-      isGroup: true,
+      // isGroup: true,
      text: '介绍',
      children: [
        '/guide/README.md',
@ -11,7 +11,7 @@ export const en: SidebarConfig = {
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '基础',
      children: [
        '/guide/directory-structure.md',
@ -26,7 +26,7 @@ export const en: SidebarConfig = {
      ]
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '进阶',
      children: [
      ]
@ -42,13 +42,13 @@ export const en: SidebarConfig = {
  ],
  '/reference/plugin/': [
    {
-      isGroup: true,
+      // isGroup: true,
      text: 'Presets',
      children: [
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: 'Plugins',
      children: [
        '/reference/plugin/plugins/access.md',
@ -62,10 +62,11 @@ export const en: SidebarConfig = {
        '/reference/plugin/plugins/vuex.md',
        '/reference/plugin/plugins/qiankun.md',
        '/reference/plugin/plugins/sass.md',
+        '/reference/plugin/plugins/editor.md',
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '插件开发',
      children: [
        '/reference/plugin/dev/README.md',
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@ -3,7 +3,7 @@ import type { SidebarConfig } from '@vuepress/theme-default'
 export const zh: SidebarConfig = {
  '/zh/guide/': [
    {
-      isGroup: true,
+      // isGroup: true,
      text: '介绍',
      children: [
        '/zh/guide/README.md',
@ -11,7 +11,7 @@ export const zh: SidebarConfig = {
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '基础',
      children: [
        '/zh/guide/directory-structure.md',
@ -26,7 +26,7 @@ export const zh: SidebarConfig = {
      ]
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '进阶',
      children: [
      ]
@ -42,13 +42,13 @@ export const zh: SidebarConfig = {
  ],
  '/zh/reference/plugin/': [
    {
-      isGroup: true,
+      // isGroup: true,
      text: 'Presets',
      children: [
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: 'Plugins',
      children: [
        '/zh/reference/plugin/plugins/access.md',
@ -62,10 +62,11 @@ export const zh: SidebarConfig = {
        '/zh/reference/plugin/plugins/vuex.md',
        '/zh/reference/plugin/plugins/qiankun.md',
        '/zh/reference/plugin/plugins/sass.md',
+        '/zh/reference/plugin/plugins/editor.md',
      ],
    },
    {
-      isGroup: true,
+      // isGroup: true,
      text: '插件开发',
      children: [
        '/zh/reference/plugin/dev/README.md',
--- a/docs/guide/css.md
+++ b/docs/guide/css.md
@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
 </style>
 ```

+## CSS Modules
+支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
+```vue
+<style module>
+.layout-content {
+  max-width: 1000px;
+}
+```
+如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
+```js
+import style from '@/styles/index.module.css'
+console.log(style)
+```
+
 ## CSS 预处理器
 Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。
--- a/docs/guide/faq.md
+++ b/docs/guide/faq.md
@ -1 +1,2 @@
 # 常见问题
+
--- a/docs/guide/mock.md
+++ b/docs/guide/mock.md
@ -4,7 +4,7 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开

 ## 约定式 Mock 文件

-Fes.js 约定 `src/mock.js` 为 mock 文件。
+Fes.js 约定 `./mock.js` 为 mock 文件。

 比如：
 ```
@ -172,7 +172,6 @@ export default function ({ cgiMock, mockjs, utils }) {
 - utils.file(path)，从项目根目录根据path寻找文件，返回文件流。

 ## 配置 Mock
-
 详见配置 [mock](../reference/config/#mock)。

 ## 关闭 Mock
--- a/docs/guide/runtime-config.md
+++ b/docs/guide/runtime-config.md
@ -126,6 +126,10 @@ render(oldRender: Function)

 覆写 render。

+比如用于渲染之前做权限校验。
+
+
+
 ### onRouterCreated

 onRouterCreated({router})
--- a/docs/guide/template.md
+++ b/docs/guide/template.md
@ -1,4 +1,4 @@
-# HTML模板
+# HTML和静态资源

 Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认 HTML模板 是：
 ```html
@ -51,3 +51,33 @@ export default {
 - `NODE_ENV`
 - `FES_ENV`
 - `.env` 文件中以 `FES_APP_` 开头的变量
+
+## 处理静态资源
+
+放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
+
+### `public` 文件夹
+
+任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
+
+* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
+
+```html
+<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+```
+
+* 在模板中，你首先需要向你的组件传入基础 URL：
+
+```html
+setup() {
+  return {
+    publicPath: process.env.BASE_URL
+  }
+}
+```
+
+然后：
+
+```html
+<img :src="`${publicPath}my-image.png`">
+```
--- a/docs/reference/config/README.md
+++ b/docs/reference/config/README.md
@ -144,6 +144,24 @@ export default {
 }
 ```

+
+## extraBabelPlugins
+
+- 类型： `array`
+- 默认值： `[]`
+- 详情：  
+
+ 配置额外的 babel 插件。
+
+- 示例：
+```js
+export default {
+    extraBabelPlugins: [
+        ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
+    ],
+}
+```
+
 ## extraPostCSSPlugins

 - 类型： `array`
@ -278,6 +296,12 @@ export default {

    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。

+## router
+
+- 类型： `object`
+- 默认值： `{ mode: 'hash' }`
+- 详情： 配置路由，具体请查看指南中关于路由的介绍
+
 ## singular
 - 类型： `boolean`
 - 默认值： `false`
--- a/docs/reference/plugin/plugins/access.md
+++ b/docs/reference/plugin/plugins/access.md
@ -9,7 +9,7 @@
 Fes.js 把页面、页面元素统一叫做资源，每个资源都有 `accessId`：
 - 页面的 `accessId` 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
  
- 页面元素的 `accessId` 没有默认值，我们可以自定义。
+- 页面元素的 `accessId` 没有默认值，由我们自定义。
 ```vue
 <template>
    <access :id="accessId"> accessOnepicess1 <input /> </access>
@ -26,11 +26,39 @@ export default {
 </script>
 ```

+
+### 匹配规则
+
+#### 全等匹配
+资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源ID。如果我们设置：
+```js
+access.setAccess(['/a'])
+```
+由于权限列表中包含`/a`，则表示拥有此页面权限。
+
+#### 模糊匹配
+页面`@id.vue`会映射为动态路由`/:id`，想匹配此页面有两种办法：
+- **access.setAccess(['/:id'])**
+- **access.setAccess(['/*'])**
+
+第二种是模糊匹配，`*`表示任意路径。比如角色`admin`需要全部权限，则可以：
+```js
+export default {
+    access: {
+        roles: {
+            admin: ["*"]
+        }
+    }
+}
+```
+
+
 ### 角色
-Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
+通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。


-当然有时候业务比较复杂，角色不能在前端应用中预先定义，而是用户自定义的，储存在数据库中。不要怕！插件也提供粒度更细的 API 来控制当前用户能访问的资源。
+当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。
+

 ## 启用方式
 在 `package.json` 中引入依赖：
@ -157,7 +185,6 @@ import { access } from '@fesjs/fes';
 console.log(access.isDataReady())
 ```

-
 #### access.setRole
 - **类型**：函数
  
@ -220,10 +247,10 @@ export default {
 </script>
 ```
 ### v-access
-在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染DOM，当没有权限时隐藏此DOM。
+在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示DOM，当没有权限时隐藏此DOM。
 ```vue
 <template>
-    <div v-access="accessId"> accessOnepicess2 </div>
+    <div v-access="accessId"> accessOnepicess </div>
 </template>
 <script>
 export default {
@ -240,7 +267,7 @@ export default {
 组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
 ```vue
 <template>
-    <access :id="accessId"> accessOnepicess1 <input /> </access>
+    <access :id="accessId"> accessOnepicess </access>
 </template>
 <script>
 export default {
--- a/docs/reference/plugin/plugins/editor.md
+++ b/docs/reference/plugin/plugins/editor.md
@ -0,0 +1,120 @@
+# @fesjs/plugin-monaco-editor
+
+
+## 介绍
+我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-monaco-editor": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript', 'html', 'json']
+    }
+}
+```
+我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
+
+
+#### filename
+- **类型**：自定义worker脚本名称
+  
+- **默认值**：`'[name].worker.js'`
+
+#### publicPath
+- **类型**：自定义worker脚本的路径
+  
+- **默认值**：`''`
+
+#### languages
+- **类型**：需要支持的语言类型
+  
+- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
+
+- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript']
+    }
+}
+```
+
+## API
+
+### monaco
+编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
+```js
+import { monaco } from '@fesjs/fes';
+
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+```
+
+### 组件 MonacoEditor
+
+```vue
+<template>
+    <MonacoEditor 
+        v-model="json"
+        language="json"
+        height="400px"
+        check>
+    </MonacoEditor>
+</template>
+<script>
+import { MonacoEditor } from '@fesjs/fes';
+export default {
+    components: {
+        MonacoEditor
+    },
+    setup(){
+        const json = ref('');
+        return {
+            json
+        };
+    }
+}
+</script>
+```
+
+#### props
+| 属性 | 说明 | 类型 | 默认值  |
+| ------------- | ------------- | ------------- | ------------- |
+| theme  | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
+| language | 编辑器的语言 | string | - |
+| height  | 编辑器的高度 | string | `100%` |
+| width  | 编辑器的宽度 | string | `100%` |
+| modelValue(v-model)  | 编辑器的代码 | string | - |
+| readOnly  | 是否只读 | boolean | `false` |
+| options  | 编辑器的配置对象 | object | `{}` |
+| check  | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
+
+#### events
+
+| 事件名称 | 说明 | 回调参数 |
+| ------------- | ------------- | ------------- |
+| onload  | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
+| scrollChange  | 滚动时触发 | (e) => void |
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@ -14,12 +14,23 @@
  
 - 可配置页面是否需要 layout。

+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-layout": "^2.0.0"
+    },
+}
+```
+
 ## 布局类型
-配置参数是 `navigation`, 内容默认是 `side`：
+配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
 ```js
 export default {
    layout: {
-        navigation: 'side
+        navigation: 'side'
    }
 }
 ```
@ -36,28 +47,32 @@ export default {
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">

-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-layout": "^2.0.0"
-    },
-}
-```
-
 ### 页面禁用布局
-Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
+布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
 ```vue
-<config>
+<config lang="json">
 {
    "layout": false
 }
 </config>
-<script>
-</script>
 ```
+如果只是不想展示`side`，则：
+```
+<config lang="json">
+{
+    "layout": {
+        "side": false
+    }
+}
+</config>
+```
+`layout`的可选配置有：
+
+- **side**： 左侧区域
+  
+- **top**： 头部区域
+
+- **logo**：logo和标题区域。

 ## 配置

@ -174,13 +189,13 @@ export default {
    - 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
 ```js
 {
-    name: "user"
+    icon: "user"
 }
 ```
-    - 图表使用本地或者远程svg图片。
+    - 图标使用本地或者远程svg图片。
 ```js
 {
-    name: "/wine-outline.svg"
+    icon: "/wine-outline.svg"
 }
 ```
  
@ -201,7 +216,7 @@ export const layout = {
  
 - **默认值**：`null`

- **详情**：布局的 Header 部位提供组件自定义功能。
+- **详情**：top的区域部分位置提供组件自定义功能。

 #### unAccessHandler
 - **类型**：`Function`
--- a/docs/reference/plugin/plugins/qiankun.md
+++ b/docs/reference/plugin/plugins/qiankun.md
@ -136,6 +136,30 @@ export default {
 </script>
 ```

+####  使用 `<MicroAppWithMemoHistory />` 组件的方式
+如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
+
+
+`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
+
+ ```vue
+<template>
+    <MicroApp :name="name" url="/" />
+</template>
+<script>
+import { MicroApp } from '@fesjs/fes';
+
+export default {
+    components: { MicroApp },
+    setup(){
+        const name = "app1"
+        return {
+            name
+        }
+    }
+}
+</script>
+```

 ## 子应用配置

--- a/docs/reference/plugin/plugins/request.md
+++ b/docs/reference/plugin/plugins/request.md
@ -19,7 +19,7 @@
 ```js
 export default {
    request: {
-        dataField: 'result',
+        dataField: 'result'
    },
 }
 ```
@ -32,6 +32,16 @@ export default {

    `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。

+
+#### base(即将废弃)
+
+- 类型： `string`
+- 默认值： `''`
+- 详情：
+
+    `base` 接口前缀。 
+
+⚠️警告，这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
 ### 运行时配置

 在 `app.js` 中进行运行时配置。
@ -42,6 +52,8 @@ export const request = {
    responseDataAdaptor: (data) => {

    },
+    // 关闭 response data 校验（只判断 xhr status）
+    closeResDataCheck: false,
    // 请求拦截器
    requestInterceptors: [],
    // 相应拦截器
@ -50,17 +62,45 @@ export const request = {
    // 内部以 reponse.data.code === '0' 判断请求是否成功
    // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
    errorHandler: {
-        11199: (response) => {
-
+        11199(response) {
+            // 特殊 code 处理逻辑
        },
-        404: (error) => {
-
+        404(error) {
+        },
+        default(error) {
+            // 异常统一处理
        }
    },
    // 其他 axios 配置
    ...otherConfigs
 }
 ```
+
+#### skipErrorHandler
+
+- 类型： `boolean | string | number | array<string | number>`
+- 默认值： ``
+- 详情：
+
+    指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
+
+- 示列：
+
+```js
+import {request} from '@fesjs/fes';
+
+request('/api/login', null, {
+    skipErrorHandler: '110'
+}).then((res) => {
+    // do something
+}).catch((err) => {
+    // 这里处理 code 为 110 的异常
+    // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
+})
+```
+
+
+
 ## 使用

 ### 发起一个普通 post 请求
@ -78,6 +118,27 @@ request('/api/login', {
 })
 ```

+### merge 重复请求
+
+连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
+
+当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
+
+```js
+import {request} from '@fesjs/fes';
+
+request('/api/login', {
+    username: 'robby',
+    password: '123456'
+}, {
+    mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
+}).then((res) => {
+    // do something
+}).catch((err) => {
+    // 处理异常
+})
+```
+
 ### 请求节流

 ```js
@ -106,7 +167,7 @@ request('/api/login', {
 }, {
    cache: {
        cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
-        cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
+        cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
    },
 }).then((res) => {
    // do something
@ -117,6 +178,7 @@ request('/api/login', {

 若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。

+
 ### 结合 use 使用

 ```js
--- a/docs/reference/plugin/plugins/sass.md
+++ b/docs/reference/plugin/plugins/sass.md
@ -1,4 +1,4 @@
-# @fesjs/plugin-access
+# @fesjs/plugin-sass



--- a/docs/reference/plugin/plugins/vuex.md
+++ b/docs/reference/plugin/plugins/vuex.md
@ -49,13 +49,6 @@ store.getters[GETTER_TYPES.user.address]
 store.commit(MUTATION_TYPES.counter.increment)
 store.dispatch(ACTION_TYPES.user.login)
 ```
-
-```js
-import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES, store } from '@fesjs/fes';
-store.getters[GETTER_TYPES.user.address]
-store.commit(MUTATION_TYPES.counter.increment)
-store.dispatch(ACTION_TYPES.user.login)
-```
 ## API
 ### MUTATION_TYPES
 * 类型 `Object`
--- a/docs/zh/reference/plugin/plugins/access.md
+++ b/docs/zh/reference/plugin/plugins/access.md
@ -9,7 +9,7 @@
 Fes.js 把页面、页面元素统一叫做资源，每个资源都有 `accessId`：
 - 页面的 `accessId` 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
  
- 页面元素的 `accessId` 没有默认值，我们可以自定义。
+- 页面元素的 `accessId` 没有默认值，由我们自定义。
 ```vue
 <template>
    <access :id="accessId"> accessOnepicess1 <input /> </access>
@ -26,11 +26,39 @@ export default {
 </script>
 ```

+
+### 匹配规则
+
+#### 全等匹配
+资源的匹配规则默认是使用全等匹配，比如页面 `pages/a.vue` 对应路由 `path` 是 `/a`，则 `/a` 就是页面的资源ID。如果我们设置：
+```js
+access.setAccess(['/a'])
+```
+由于权限列表中包含`/a`，则表示拥有此页面权限。
+
+#### 模糊匹配
+页面`@id.vue`会映射为动态路由`/:id`，想匹配此页面有两种办法：
+- **access.setAccess(['/:id'])**
+- **access.setAccess(['/*'])**
+
+第二种是模糊匹配，`*`表示任意路径。比如角色`admin`需要全部权限，则可以：
+```js
+export default {
+    access: {
+        roles: {
+            admin: ["*"]
+        }
+    }
+}
+```
+
+
 ### 角色
-Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
+通常我们会用角色来控制权限，相应的Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。


-当然有时候业务比较复杂，角色不能在前端应用中预先定义，而是用户自定义的，储存在数据库中。不要怕！插件也提供粒度更细的 API 来控制当前用户能访问的资源。
+当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。
+

 ## 启用方式
 在 `package.json` 中引入依赖：
@ -157,7 +185,6 @@ import { access } from '@fesjs/fes';
 console.log(access.isDataReady())
 ```

-
 #### access.setRole
 - **类型**：函数
  
@ -220,10 +247,10 @@ export default {
 </script>
 ```
 ### v-access
-在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染DOM，当没有权限时隐藏此DOM。
+在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示DOM，当没有权限时隐藏此DOM。
 ```vue
 <template>
-    <div v-access="accessId"> accessOnepicess2 </div>
+    <div v-access="accessId"> accessOnepicess </div>
 </template>
 <script>
 export default {
@ -240,7 +267,7 @@ export default {
 组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
 ```vue
 <template>
-    <access :id="accessId"> accessOnepicess1 <input /> </access>
+    <access :id="accessId"> accessOnepicess </access>
 </template>
 <script>
 export default {
--- a/docs/zh/reference/plugin/plugins/editor.md
+++ b/docs/zh/reference/plugin/plugins/editor.md
@ -0,0 +1,120 @@
+# @fesjs/plugin-monaco-editor
+
+
+## 介绍
+我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-monaco-editor": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+### 编译时配置
+在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript', 'html', 'json']
+    }
+}
+```
+我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
+
+
+#### filename
+- **类型**：自定义worker脚本名称
+  
+- **默认值**：`'[name].worker.js'`
+
+#### publicPath
+- **类型**：自定义worker脚本的路径
+  
+- **默认值**：`''`
+
+#### languages
+- **类型**：需要支持的语言类型
+  
+- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
+
+- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为：
+```js
+export default {
+    monacoEditor: {
+        languages: ['javascript', 'typescript']
+    }
+}
+```
+
+## API
+
+### monaco
+编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
+```js
+import { monaco } from '@fesjs/fes';
+
+monaco.editor.defineTheme('myCoolTheme', {
+	base: 'vs',
+	inherit: false,
+	rules: [
+		{ token: 'custom-info', foreground: '808080' },
+		{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
+		{ token: 'custom-notice', foreground: 'FFA500' },
+		{ token: 'custom-date', foreground: '008800' },
+	]
+});
+
+```
+
+### 组件 MonacoEditor
+
+```vue
+<template>
+    <MonacoEditor 
+        v-model="json"
+        language="json"
+        height="400px"
+        check>
+    </MonacoEditor>
+</template>
+<script>
+import { MonacoEditor } from '@fesjs/fes';
+export default {
+    components: {
+        MonacoEditor
+    },
+    setup(){
+        const json = ref('');
+        return {
+            json
+        };
+    }
+}
+</script>
+```
+
+#### props
+| 属性 | 说明 | 类型 | 默认值  |
+| ------------- | ------------- | ------------- | ------------- |
+| theme  | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
+| language | 编辑器的语言 | string | - |
+| height  | 编辑器的高度 | string | `100%` |
+| width  | 编辑器的宽度 | string | `100%` |
+| modelValue(v-model)  | 编辑器的代码 | string | - |
+| readOnly  | 是否只读 | boolean | `false` |
+| options  | 编辑器的配置对象 | object | `{}` |
+| check  | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` |
+
+#### events
+
+| 事件名称 | 说明 | 回调参数 |
+| ------------- | ------------- | ------------- |
+| onload  | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
+| scrollChange  | 滚动时触发 | (e) => void |
--- a/docs/zh/reference/plugin/plugins/layout.md
+++ b/docs/zh/reference/plugin/plugins/layout.md
@ -57,6 +57,7 @@ export default {
 </config>
 ```
 如果只是不想展示`side`，则：
+```
 <config lang="json">
 {
    "layout": {
--- a/docs/zh/reference/plugin/plugins/vuex.md
+++ b/docs/zh/reference/plugin/plugins/vuex.md
@ -2,12 +2,26 @@
 ## 介绍
 集成vuex插件

-增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示
+增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示

 约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
-
+```
+└── src
+    ├── pages
+    │    └── index.vue
+    └── stores 
+    │    └── foo
+    │    │    └── bar.js
+    │    ├── counter.js
+    │    ├── plugin-logger.js       
+    │    ├── user.js
+    └── app.js
+```
 ::: tip
-vuex的提供的api直接导入使用
+为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api
+```js
+import { useStore } from 'vuex';
+```
 :::
 ## 启用方式
 在 `package.json` 中引入依赖：
@ -31,25 +45,141 @@ export default {
 ```

 ## 场景使用
-vuex定义模块之后，使用getter、mutation、action都是通过传入字符路径，如：
-```js
-import { useStore } from 'vuex';
-const store = useStore();
-store.getters['user/address']
-store.commit('counter/increment')
-store.dispatch('user/login')
-```
+先定义在stores下定义user模块，包含嵌套模块

-使用该插件，可以利用导出的事件类型，如：
+stores/user.js
 ```js
+export default {
+    namespaced: true,
+    state: () => ({
+        name: 'aring',
+        age: 20
+    }),
+    actions: {
+        login() {
+            return new Promise((reslove) => {
+                setTimeout(() => {
+                    console.log('login');
+                    reslove('OK');
+                }, 1000);
+            });
+        }
+    },
+    modules: {
+        address: {
+            state: () => ({
+                province: '广东省',
+                city: '深圳市',
+                zone: '南山区'
+            }),
+            getters: {
+                address(state) {
+                    return state.province + state.city + state.zone;
+                }
+            }
+        }
+    }
+};
+```
+stores/foo/bar.js
+```js
+export default {
+    namespaced: true,
+    state: () => ({
+        count: 0
+    }),
+    mutations: {
+        increment(state) {
+            state.count++;
+        }
+    },
+    getters: {
+        doubleCount(state) {
+            return state.count * 2;
+        }
+    },
+    actions: {
+        asyncIncrement({ commit }) {
+            setTimeout(() => {
+                commit('increment');
+            }, 2000);
+        }
+    }
+};
+```
+::: tip
+导出的`mutations`、`actions`和`getter`的事件类型，将会按文件命名；
+
+如`ACTION_TYPES.user.login`指向user模块中actions的login方法
+
+如`GETTER_TYPES.user.address`指向user模块中嵌套的address getter
+
+如`MUTATION_TYPES.fooBar.increment`指向foo/bar模块中mutations的increment方法
+:::
+
+在vue文件中使用store
+```vue
+<template>
+    <div>
+        <h4>Vuex</h4>
+        <div><button :disabled="disabled" @click="login">async login</button></div>
+        <div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>
+        <div>{{address}}</div>
+    </div>
+</template>
+<config>
+{
+    "name": "store",
+    "title": "vuex测试"
+}
+</config>
+<script>
+import { computed, ref } from 'vue';
 import { useStore } from 'vuex';
 import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes';
+
+export default {
+    setup() {
        const store = useStore();
-store.getters[GETTER_TYPES.user.address]
-store.commit(MUTATION_TYPES.counter.increment)
-store.dispatch(ACTION_TYPES.user.login)
+        console.log('store==>', store);
+        const disabled = ref(false);
+        // 可以利用导出的事件类型，不再通过字符传入（store.getters['user/address']）
+        return {
+            address: computed(() => store.getters[GETTER_TYPES.user.address]),
+            disabled,
+            login: () => {
+                disabled.value = true;
+                store.dispatch(ACTION_TYPES.user.login).then((res) => {
+                    window.alert(res);
+                    disabled.value = false;
+                });
+            },
+            fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), // foo/bar目录会解析成驼峰fooBar
+            fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])
+        };
+    }
+};
+</script>
+
 ```
+
+::: tip
+由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例
+
+`fesjs`导出了vuex实例`store`，如在app.js文件中
+```js
+import { store, GETTER_TYPES } from '@fesjs/fes';
+console.log(store.getters[GETTER_TYPES.user.address])
+```
+:::
+
+## vuex插件
+stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html)
 ## API
+
+### store
+* 类型 `Object`
+* vuex实例
 ### MUTATION_TYPES
 * 类型 `Object`
 * mutation的所有事件类型
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,8 @@
+
+module.exports = {
+    testPathIgnorePatterns: [
+        '/node_modules/',
+        'fes-template',
+        'fes-template-h5'
+    ]
+};
--- a/package.json
+++ b/package.json
@ -10,11 +10,14 @@
  "scripts": {
    "clean": "lerna clean",
    "bootstrap": "lerna bootstrap",
-    "build": "father-build --watch",
-    "ver": "lerna version patch --no-changelog --no-commit-hooks --no-private",
-    "release": "father-build && lerna publish from-git",
+    "dev": "node scripts/build.js --watch",
+    "build": "node scripts/build.js",
+    "ver": "lerna version --conventional-prerelease --no-changelog --no-commit-hooks --no-private",
+    "release": "node scripts/build.js && lerna publish from-git",
    "docs:dev": "vuepress dev docs --clean-cache",
-    "docs:build": "vuepress build docs --clean-cache"
+    "docs:build": "vuepress build docs --clean-cache",
+    "test": "fes test",
+    "lint": "eslint -c ./.eslintrc.js --ext .js,.jsx,.vue,.ts"
  },
  "license": "MIT",
  "keywords": [
@ -25,25 +28,31 @@
    "strong"
  ],
  "dependencies": {
-    "lerna": "^3.22.1"
+    "lerna": "^4.0.0"
  },
  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
-    "@vuepress/plugin-docsearch": "^2.0.0-alpha.18",
-    "@vuepress/plugin-pwa": "^2.0.0-alpha.18",
-    "@vuepress/plugin-pwa-popup": "^2.0.0-alpha.18",
-    "@vuepress/theme-vue": "^2.0.0-alpha.18",
-    "@webank/eslint-config-webank": "0.2.10",
+    "@fesjs/fes": "^2.0.0",
+    "@fesjs/plugin-jest": "^2.0.0",
+    "@vuepress/plugin-docsearch": "^2.0.0-beta.22",
+    "@vuepress/plugin-pwa": "^2.0.0-beta.22",
+    "@vuepress/plugin-pwa-popup": "^2.0.0-beta.22",
+    "@webank/eslint-config-webank": "0.3.1",
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.2",
    "commitizen": "^4.2.1",
    "cz-conventional-changelog": "^3.3.0",
-    "esbuild-loader": "^2.7.0",
-    "postcss-loader": "^5.0.0",
-    "postcss": "^8.0.0",
-    "father-build": "^1.19.1",
+    "deepmerge": "^4.2.2",
+    "fs-extra": "^10.0.0",
    "husky": "^4.3.0",
    "lint-staged": "^10.4.0",
-    "vuepress": "^2.0.0-alpha.18"
+    "postcss": "^8.0.0",
+    "postcss-loader": "^5.0.0",
+    "vuepress": "^2.0.0-beta.22",
+    "yargs-parser": "^20.2.9"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts}": [
--- a/packages/create-fes-app/package.json
+++ b/packages/create-fes-app/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/create-fes-app",
-  "version": "2.0.1",
+  "version": "2.0.5",
  "description": "create a app base on fes.js",
  "main": "lib/index.js",
  "files": [
@ -30,8 +30,8 @@
    "access": "public"
  },
  "dependencies": {
-    "@umijs/utils": "3.3.3",
-    "fs-extra": "^9.0.1",
+    "@fesjs/utils": "^2.0.2",
+    "fs-extra": "^10.0.0",
    "inquirer": "^7.3.3",
    "readline": "^1.3.0",
    "validate-npm-package-name": "^3.0.0"
--- a/packages/create-fes-app/src/cli.js
+++ b/packages/create-fes-app/src/cli.js
@ -1,4 +1,4 @@
-import { chalk, yParser } from '@umijs/utils';
+import { chalk, yParser } from '@fesjs/utils';
 import { existsSync } from 'fs';
 import { join } from 'path';

@ -15,7 +15,7 @@ const args = yParser(process.argv.slice(2), {
 });

 if (args._.length > 1) {
-    console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'));
+    console.log(chalk.yellow('\n Warning: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'));
 }

 if (args.version && !args._[0]) {
--- a/packages/create-fes-app/src/generator/App.js
+++ b/packages/create-fes-app/src/generator/App.js
@ -1,4 +1,4 @@
-import { Generator } from '@umijs/utils';
+import { Generator } from '@fesjs/utils';

 export default class AppGenerator extends Generator {
    constructor({
@ -15,7 +15,7 @@ export default class AppGenerator extends Generator {
    async writing() {
        this.copyDirectory({
            context: {
-                version: require('../../package').version
+                version: require('../../package.json').version
            },
            path: this.path,
            target: this.targetDir
--- a/packages/create-fes-app/src/index.js
+++ b/packages/create-fes-app/src/index.js
@ -1,5 +1,5 @@
 import path from 'path';
-import { chalk } from '@umijs/utils';
+import { chalk } from '@fesjs/utils';
 import validateProjectName from 'validate-npm-package-name';
 import fs from 'fs-extra';
 import inquirer from 'inquirer';
@ -27,7 +27,7 @@ export default async ({ cwd, args }) => {
        });
        throw new Error('Process exited');
    }
-    if (fs.existsSync(targetDir) && !args.merge) {
+    if (fs.pathExistsSync(targetDir) && !args.merge) {
        if (args.force) {
            await fs.remove(targetDir);
        } else if (inCurrent) {
--- a/packages/create-fes-app/templates/app/h5/package.json
+++ b/packages/create-fes-app/templates/app/h5/package.json
@ -40,14 +40,15 @@
    "access": "public"
  },
  "devDependencies": {
-    "@webank/eslint-config-webank": "0.3.0",
+    "@vue/compiler-sfc": "^3.2.6",
+    "@webank/eslint-config-webank": "0.4.2",
    "@ttou/postcss-px-to-viewport": "1.1.1"
  },
  "dependencies": {
    "@fesjs/fes": "^2.0.0",
    "@fesjs/plugin-icon": "^2.0.0",
    "@fesjs/plugin-request": "^2.0.0",
-    "vue": "^3.0.5"
+    "vue": "^3.2.6"
  },
  "private": true
 }
--- a/packages/create-fes-app/templates/app/pc/package.json
+++ b/packages/create-fes-app/templates/app/pc/package.json
@ -43,7 +43,8 @@
    "access": "public"
  },
  "devDependencies": {
-    "@webank/eslint-config-webank": "0.3.0"
+    "@vue/compiler-sfc": "^3.2.6",
+    "@webank/eslint-config-webank": "0.4.2"
  },
  "dependencies": {
    "@fesjs/fes": "^2.0.0",
@ -52,7 +53,7 @@
    "@fesjs/plugin-model": "^2.0.0",
    "@fesjs/plugin-enums": "^2.0.0",
    "ant-design-vue": "^2.2.0",
-    "vue": "^3.1.0"
+    "vue": "^3.2.6"
  },
  "private": true
 }
--- a/packages/fes-compiler/.fatherrc.js
+++ b/packages/fes-compiler/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-compiler/package.json
+++ b/packages/fes-compiler/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/compiler",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "description": "@fesjs/compiler",
  "main": "lib/index.js",
  "files": [
@ -24,9 +24,9 @@
    "access": "public"
  },
  "dependencies": {
-    "@babel/preset-env": "^7.12.13",
-    "@babel/register": "^7.12.13",
-    "@umijs/utils": "3.3.3",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/register": "^7.15.3",
+    "@fesjs/utils": "^2.0.2",
    "commander": "^7.0.0",
    "dotenv": "8.2.0",
    "joi": "17.3.0",
--- a/packages/fes-compiler/src/config/index.js
+++ b/packages/fes-compiler/src/config/index.js
@ -13,9 +13,8 @@ import {
    cleanRequireCache,
    lodash,
    parseRequireDeps,
-    winPath,
-    getFile
-} from '@umijs/utils';
+    winPath
+} from '@fesjs/utils';
 import assert from 'assert';
 import joi from 'joi';
 import { ServiceStage } from '../service/enums';
@ -181,20 +180,11 @@ export default class Config {
        // 潜在问题：
        // .local 和 .env 的配置必须有 configFile 才有效
        if (process.env.FES_ENV) {
-            const envConfigFileName = this.addAffix(
+            envConfigFile = this.addAffix(
                configFile,
                process.env.FES_ENV
            );
-            const fileNameWithoutExt = envConfigFileName.replace(
-                extname(envConfigFileName),
-                ''
-            );
-            envConfigFile = getFile({
-                base: this.cwd,
-                fileNameWithoutExt,
-                type: 'javascript'
-            }).filename;
-            if (!envConfigFile) {
+            if (!existsSync(join(this.cwd, envConfigFile))) {
                throw new Error(
                    `get user config failed, ${envConfigFile} does not exist, but process.env.FES_ENV is set to ${process.env.FES_ENV}.`
                );
--- a/packages/fes-compiler/src/config/utils/configUtils.js
+++ b/packages/fes-compiler/src/config/utils/configUtils.js
@ -1,4 +1,4 @@
-import { lodash } from '@umijs/utils';
+import { lodash } from '@fesjs/utils';
 import set from 'set-value';

 export function updateUserConfigWithKey({
--- a/packages/fes-compiler/src/config/utils/isEqual.js
+++ b/packages/fes-compiler/src/config/utils/isEqual.js
@ -1,4 +1,4 @@
-import { lodash } from '@umijs/utils';
+import { lodash } from '@fesjs/utils';

 function funcToStr(obj) {
    if (typeof obj === 'function') return obj.toString();
--- a/packages/fes-compiler/src/config/utils/mergeDefault.js
+++ b/packages/fes-compiler/src/config/utils/mergeDefault.js
@ -1,4 +1,4 @@
-import { deepmerge, lodash } from '@umijs/utils';
+import { deepmerge, lodash } from '@fesjs/utils';


 export default ({ defaultConfig, config }) => {
--- a/packages/fes-compiler/src/logger/index.js
+++ b/packages/fes-compiler/src/logger/index.js
@ -6,7 +6,7 @@
 import {
    createDebug,
    chalk
-} from '@umijs/utils';
+} from '@fesjs/utils';
 import readline from 'readline';

 export default class Logger {
--- a/packages/fes-compiler/src/service/babelRegister.js
+++ b/packages/fes-compiler/src/service/babelRegister.js
@ -1,7 +1,7 @@
 import {
    lodash,
    winPath
-} from '@umijs/utils';
+} from '@fesjs/utils';


 export default class BabelRegister {
--- a/packages/fes-compiler/src/service/getPaths.js
+++ b/packages/fes-compiler/src/service/getPaths.js
@ -5,7 +5,7 @@

 import { join } from 'path';
 import { existsSync, statSync } from 'fs';
-import { lodash, winPath } from '@umijs/utils';
+import { lodash, winPath } from '@fesjs/utils';

 function isDirectoryAndExist(path) {
    return existsSync(path) && statSync(path).isDirectory();
--- a/packages/fes-compiler/src/service/index.js
+++ b/packages/fes-compiler/src/service/index.js
@ -7,7 +7,7 @@ import { EventEmitter } from 'events';
 import assert from 'assert';
 import { AsyncSeriesWaterfallHook } from 'tapable';
 import { existsSync } from 'fs';
-import { lodash, chalk } from '@umijs/utils';
+import { lodash, chalk } from '@fesjs/utils';
 import { Command, Option } from 'commander';
 import { resolvePresets, pathToObj, resolvePlugins } from './utils/pluginUtils';
 import loadDotEnv from './utils/loadDotEnv';
@ -520,7 +520,6 @@ export default class Service extends EventEmitter {

    async runCommand({ rawArgv = {}, args = {} }) {
        assert(this.stage >= ServiceStage.init, 'service is not initialized.');
-
        Object.keys(this.commands).forEach((command) => {
            const commandOptionConfig = this.commands[command];
            const program = this.program;
--- a/packages/fes-compiler/src/service/pluginAPI.js
+++ b/packages/fes-compiler/src/service/pluginAPI.js
@ -4,7 +4,7 @@
 */

 import assert from 'assert';
-import * as utils from '@umijs/utils';
+import * as utils from '@fesjs/utils';
 import { isValidPlugin, pathToObj } from './utils/pluginUtils';
 import { EnableBy, PluginType, ServiceStage } from './enums';
 import Logger from '../logger';
--- a/packages/fes-compiler/src/service/utils/loadDotEnv.js
+++ b/packages/fes-compiler/src/service/utils/loadDotEnv.js
@ -10,9 +10,7 @@ export default function loadDotEnv(envPath) {
        const parsed = parse(readFileSync(envPath, 'utf-8')) || {};
        Object.keys(parsed).forEach((key) => {
            // eslint-disable-next-line no-prototype-builtins
-            if (!process.env.hasOwnProperty(key)) {
            process.env[key] = parsed[key];
-            }
        });
    }
 }
--- a/packages/fes-compiler/src/service/utils/pluginUtils.js
+++ b/packages/fes-compiler/src/service/utils/pluginUtils.js
@ -7,13 +7,13 @@ import {
    winPath,
    pkgUp,
    lodash
-} from '@umijs/utils';
+} from '@fesjs/utils';

 import { PluginType } from '../enums';

 const RE = {
-    [PluginType.plugin]: /^(@fesjs\/|@webank\/fes-|fes-)?plugin-/,
-    [PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)?preset-/
+    [PluginType.plugin]: /^(@fesjs\/|@webank\/fes-|fes-)plugin-/,
+    [PluginType.preset]: /^(@fesjs\/|@webank\/fes-|fes-)preset-/
 };

 export function isPluginOrPreset(type, name) {
--- a/packages/fes-plugin-access/.fatherrc.js
+++ b/packages/fes-plugin-access/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-access/build.config.js
+++ b/packages/fes-plugin-access/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-access/package.json
+++ b/packages/fes-plugin-access/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-access",
-  "version": "2.0.0",
+  "version": "2.0.1",
  "description": "@fesjs/plugin-access",
  "main": "lib/index.js",
  "files": [
@ -27,7 +27,7 @@
    "access": "public"
  },
  "dependencies": {
-    "lodash": "^4.17.15"
+    "lodash-es": "^4.17.15"
  },
  "peerDependencies": {
    "@fesjs/fes": "^2.0.0",
--- a/packages/fes-plugin-access/src/runtime/core.tpl
+++ b/packages/fes-plugin-access/src/runtime/core.tpl
@ -1,7 +1,7 @@
 import { reactive, unref, computed, inject } from "vue";
 import createDirective from "./createDirective";
 import createComponent from "./createComponent";
-import isPlainObject from "lodash/isPlainObject";
+import {isPlainObject} from "lodash-es";

 const accessKey = Symbol("plugin-access");

--- a/packages/fes-plugin-enums/.fatherrc.js
+++ b/packages/fes-plugin-enums/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-enums/build.config.js
+++ b/packages/fes-plugin-enums/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-enums/package.json
+++ b/packages/fes-plugin-enums/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-enums",
-  "version": "2.0.0",
+  "version": "2.0.1",
  "description": "@fesjs/plugin-enums",
  "main": "lib/index.js",
  "files": [
--- a/packages/fes-plugin-icon/.fatherrc.js
+++ b/packages/fes-plugin-icon/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-icon/build.config.js
+++ b/packages/fes-plugin-icon/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-icon/package.json
+++ b/packages/fes-plugin-icon/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-icon",
-  "version": "2.0.0",
+  "version": "2.0.4",
  "description": "@fesjs/plugin-icon",
  "main": "lib/index.js",
  "files": [
@ -30,6 +30,6 @@
    "vue": "^3.0.5"
  },
  "dependencies": {
-    "svgo": "1.3.2"
+    "svgo": "^2.3.1"
  }
 }
--- a/packages/fes-plugin-icon/src/optimizeSvg.js
+++ b/packages/fes-plugin-icon/src/optimizeSvg.js
@ -1,90 +1,36 @@
 import { extname, basename } from 'path';
 import { statSync, readFileSync } from 'fs';
+import { optimize } from 'svgo';

-
-import SVGO from 'svgo/lib/svgo';
-
-const svgo = new SVGO({
-    plugins: [{
-        cleanupAttrs: true
-    }, {
-        removeDoctype: true
-    }, {
-        removeXMLProcInst: true
-    }, {
-        removeComments: true
-    }, {
-        removeMetadata: true
-    }, {
-        removeTitle: true
-    }, {
-        removeDesc: true
-    }, {
-        removeUselessDefs: true
-    }, {
-        removeEditorsNSData: true
-    }, {
-        removeEmptyAttrs: true
-    }, {
-        removeHiddenElems: true
-    }, {
-        removeEmptyText: true
-    }, {
-        removeEmptyContainers: true
-    }, {
-        removeViewBox: false
-    }, {
-        cleanupEnableBackground: true
-    }, {
-        convertStyleToAttrs: true
-    }, {
-        convertColors: true
-    }, {
-        convertPathData: true
-    }, {
-        convertTransform: true
-    }, {
-        removeUnknownsAndDefaults: true
-    }, {
-        removeNonInheritableGroupAttrs: true
-    }, {
-        removeUselessStrokeAndFill: true
-    }, {
-        removeUnusedNS: true
-    }, {
-        cleanupIDs: true
-    }, {
-        cleanupNumericValues: true
-    }, {
-        moveElemsAttrsToGroup: true
-    }, {
-        moveGroupAttrsToElems: true
-    }, {
-        collapseGroups: true
-    }, {
-        removeRasterImages: false
-    }, {
-        mergePaths: true
-    }, {
-        convertShapeToPath: true
-    }, {
-        sortAttrs: true
-    }, {
+const presetDefault = [
+    {
+        name: 'preset-default',
+        params: {
+            overrides: {
+                sortAttrs: true,
                removeDimensions: true
-    }, {
-        removeAttrs: { attrs: '(stroke|fill)' }
-    }]
-});
+            }
+        }
+    },
+    {
+        name: 'removeAttrs',
+        params: {
+            attrs: '(fill|stroke|class)'
+        }
+    }
+];
+

 export default function optimizeSvg(files) {
    const optimizedSvgData = [];
    for (const filePath of files) {
        if (statSync(filePath).isFile() && extname(filePath) === '.svg') {
            const data = readFileSync(filePath, 'utf-8');
-            optimizedSvgData.push(svgo.optimize(data, { path: filePath }).then(svgData => ({
+            const svgData = optimize(data, { path: filePath, plugins: presetDefault });
+            optimizedSvgData.push({
                fileName: basename(filePath),
                ...svgData
-            })));
+            });
        }
    }
    return Promise.all(optimizedSvgData);
--- a/packages/fes-plugin-jest/.fatherrc.js
+++ b/packages/fes-plugin-jest/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-jest/helpers/setupFiles/jasmine.js
+++ b/packages/fes-plugin-jest/helpers/setupFiles/jasmine.js
@ -1 +0,0 @@
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 200000; // eslint-disable-line
--- a/packages/fes-plugin-jest/helpers/setupFiles/shim.js
+++ b/packages/fes-plugin-jest/helpers/setupFiles/shim.js
@ -1,6 +0,0 @@
-require('core-js/stable');
-require('regenerator-runtime/runtime');
-
-if (typeof window !== 'undefined') {
-    require('whatwg-fetch');
-}
--- a/packages/fes-plugin-jest/helpers/transformers/css.js
+++ b/packages/fes-plugin-jest/helpers/transformers/css.js
@ -1,9 +0,0 @@
-module.exports = {
-    process() {
-        return 'module.exports = {};';
-    },
-    getCacheKey() {
-    // The output is always the same.
-        return 'css';
-    }
-};
--- a/packages/fes-plugin-jest/helpers/transformers/javascript.js
+++ b/packages/fes-plugin-jest/helpers/transformers/javascript.js
@ -1,7 +1,10 @@
-const babelJest = require('babel-jest');
+const babelJest = require('babel-jest').default;

 module.exports = babelJest.createTransformer({
-    presets: [require.resolve('@umijs/babel-preset-umi/node')],
+    presets: [
+        ['@babel/preset-env', { targets: { node: 'current' } }]
+    ],
+    plugins: ['@vue/babel-plugin-jsx'],
    babelrc: false,
    configFile: false
 });
--- a/packages/fes-plugin-jest/package.json
+++ b/packages/fes-plugin-jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-jest",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "description": "@fesjs/plugin-jest",
  "main": "lib/index.js",
  "files": [
@ -30,21 +30,15 @@
    "access": "public"
  },
  "dependencies": {
-    "@babel/core": "7.11.6",
-    "@fesjs/compiler": "^2.0.0",
-    "@umijs/babel-preset-umi": "3.2.24",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
-    "core-js": "3.6.5",
-    "jest": "^26.6.3",
-    "jest-cli": "^26.6.3",
-    "jest-serializer-vue": "^2.0.2",
+    "@babel/preset-env": "^7.15.0",
+    "@fesjs/compiler": "^2.0.2",
+    "@vue/babel-plugin-jsx": "^1.0.6",
+    "babel-jest": "^27.0.6",
+    "jest": "^27.0.6",
    "jest-transform-stub": "^2.0.0",
    "jest-watch-typeahead": "^0.6.1",
-    "regenerator-runtime": "^0.13.7",
-    "ts-jest": "^26.5.0",
-    "typescript": "~4.1.2",
-    "vue-jest": "^5.0.0-0",
-    "whatwg-fetch": "^3.4.1"
+    "ts-jest": "^27.0.4",
+    "typescript": "^4.3.5",
+    "vue3-jest": "^27.0.0-alpha.1"
  }
 }
--- a/packages/fes-plugin-jest/src/createDefaultConfig.js
+++ b/packages/fes-plugin-jest/src/createDefaultConfig.js
@ -9,8 +9,8 @@ export default (cwd, args) => {
    const hasSrc = existsSync(join(cwd, 'src'));
    return {
        collectCoverageFrom: [
-            'index.{js,jsx,ts,tsx,vue}',
-            hasSrc && 'src/**/*.{js,jsx,ts,tsx,vue}',
+            'index.{js,jsx,vue}',
+            hasSrc && 'src/**/*.{js,jsx,vue}',
            '!**/.fes/**',
            '!**/typings/**',
            '!**/types/**',
@ -27,24 +27,18 @@ export default (cwd, args) => {
        ],
        transform: {
            // process *.vue files with vue-jest
-            '^.+\\.vue$': require.resolve('vue-jest'),
+            '^.+\\.vue$': require.resolve('vue3-jest'),
            '.+\\.(css|styl|less|sass|scss|jpg|jpeg|png|svg|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
                require.resolve('jest-transform-stub'),
            '^.+\\.jsx?$': require.resolve(
                '../helpers/transformers/javascript'
            )
        },
-        setupFiles: [require.resolve('../helpers/setupFiles/shim')],
-        setupFilesAfterEnv: [require.resolve('../helpers/setupFiles/jasmine')],
        transformIgnorePatterns: ['/node_modules/'],
        // support the same @ -> src alias mapping in source code
        moduleNameMapper: {
            '^@/(.*)$': '<rootDir>/src/$1'
        },
-        // serializer for snapshots
-        snapshotSerializers: [
-            'jest-serializer-vue'
-        ],
        testMatch: [
            `**/tests/**/*.(${testMatchTypes.join('|')}).[jt]s?(x)`,
            '**/__tests__/**/*.[jt]s?(x)'
--- a/packages/fes-plugin-jest/src/index.js
+++ b/packages/fes-plugin-jest/src/index.js
@ -3,7 +3,8 @@ import assert from 'assert';
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { Logger } from '@fesjs/compiler';
-import { options as CliOptions } from 'jest-cli/build/cli/args';
+// jest-cli 不在暴露 options，维护一份本地的 options
+import { options as CliOptions } from './jestArgs';
 import createDefaultConfig from './createDefaultConfig';

 const logger = new Logger('fes:plugin-unit-jest');
--- a/packages/fes-plugin-jest/src/jestArgs.js
+++ b/packages/fes-plugin-jest/src/jestArgs.js
@ -0,0 +1,622 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export const usage = 'Usage: $0 [--config=<pathToConfigFile>] [TestPathPattern]';
+export const docs = 'Documentation: https://jestjs.io/';
+
+// The default values are all set in jest-config
+export const options = {
+    all: {
+        description:
+       'The opposite of `onlyChanged`. If `onlyChanged` is set by '
+       + 'default, running jest with `--all` will force Jest to run all tests '
+       + 'instead of running only tests related to changed files.',
+        type: 'boolean'
+    },
+    automock: {
+        description: 'Automock all files by default.',
+        type: 'boolean'
+    },
+    bail: {
+        alias: 'b',
+        description:
+       'Exit the test suite immediately after `n` number of failing tests.',
+        type: 'boolean'
+    },
+    browser: {
+        description:
+       'Respect the "browser" field in package.json '
+       + 'when resolving modules. Some packages export different versions '
+       + 'based on whether they are operating in node.js or a browser.',
+        type: 'boolean'
+    },
+    cache: {
+        description:
+       'Whether to use the transform cache. Disable the cache '
+       + 'using --no-cache.',
+        type: 'boolean'
+    },
+    cacheDirectory: {
+        description:
+       'The directory where Jest should store its cached '
+       + ' dependency information.',
+        type: 'string'
+    },
+    changedFilesWithAncestor: {
+        description:
+       'Runs tests related to the current changes and the changes made in the '
+       + 'last commit. Behaves similarly to `--onlyChanged`.',
+        type: 'boolean'
+    },
+    changedSince: {
+        description:
+       'Runs tests related to the changes since the provided branch. If the '
+       + 'current branch has diverged from the given branch, then only changes '
+       + 'made locally will be tested. Behaves similarly to `--onlyChanged`.',
+        nargs: 1,
+        type: 'string'
+    },
+    ci: {
+        description:
+       'Whether to run Jest in continuous integration (CI) mode. '
+       + 'This option is on by default in most popular CI environments. It will '
+       + 'prevent snapshots from being written unless explicitly requested.',
+        type: 'boolean'
+    },
+    clearCache: {
+        description:
+       'Clears the configured Jest cache directory and then exits. '
+       + 'Default directory can be found by calling jest --showConfig',
+        type: 'boolean'
+    },
+    clearMocks: {
+        description:
+       'Automatically clear mock calls and instances between every '
+       + 'test. Equivalent to calling jest.clearAllMocks() between each test.',
+        type: 'boolean'
+    },
+    collectCoverage: {
+        description: 'Alias for --coverage.',
+        type: 'boolean'
+    },
+    collectCoverageFrom: {
+        description:
+       'A glob pattern relative to <rootDir> matching the files that coverage '
+       + 'info needs to be collected from.',
+        type: 'string'
+    },
+    collectCoverageOnlyFrom: {
+        description: 'Explicit list of paths coverage will be restricted to.',
+        string: true,
+        type: 'array'
+    },
+    color: {
+        description:
+       'Forces test results output color highlighting (even if '
+       + 'stdout is not a TTY). Set to false if you would like to have no colors.',
+        type: 'boolean'
+    },
+    colors: {
+        description: 'Alias for `--color`.',
+        type: 'boolean'
+    },
+    config: {
+        alias: 'c',
+        description:
+       'The path to a jest config file specifying how to find '
+       + 'and execute tests. If no rootDir is set in the config, the directory '
+       + 'containing the config file is assumed to be the rootDir for the project.'
+       + 'This can also be a JSON encoded value which Jest will use as configuration.',
+        type: 'string'
+    },
+    coverage: {
+        description:
+       'Indicates that test coverage information should be '
+       + 'collected and reported in the output.',
+        type: 'boolean'
+    },
+    coverageDirectory: {
+        description: 'The directory where Jest should output its coverage files.',
+        type: 'string'
+    },
+    coveragePathIgnorePatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all file paths before executing the test. If the file path'
+       + 'matches any of the patterns, coverage information will be skipped.',
+        string: true,
+        type: 'array'
+    },
+    coverageProvider: {
+        choices: ['babel', 'v8'],
+        description: 'Select between Babel and V8 to collect coverage'
+    },
+    coverageReporters: {
+        description:
+       'A list of reporter names that Jest uses when writing '
+       + 'coverage reports. Any istanbul reporter can be used.',
+        string: true,
+        type: 'array'
+    },
+    coverageThreshold: {
+        description:
+       'A JSON string with which will be used to configure '
+       + 'minimum threshold enforcement for coverage results',
+        type: 'string'
+    },
+    debug: {
+        description: 'Print debugging info about your jest config.',
+        type: 'boolean'
+    },
+    detectLeaks: {
+        description:
+       '**EXPERIMENTAL**: Detect memory leaks in tests. After executing a '
+       + 'test, it will try to garbage collect the global object used, and fail '
+       + 'if it was leaked',
+        type: 'boolean'
+    },
+    detectOpenHandles: {
+        description:
+       'Print out remaining open handles preventing Jest from exiting at the '
+       + 'end of a test run. Implies `runInBand`.',
+        type: 'boolean'
+    },
+    env: {
+        description:
+       'The test environment used for all tests. This can point to '
+       + 'any file or node module. Examples: `jsdom`, `node` or '
+       + '`path/to/my-environment.js`',
+        type: 'string'
+    },
+    errorOnDeprecated: {
+        description: 'Make calling deprecated APIs throw helpful error messages.',
+        type: 'boolean'
+    },
+    expand: {
+        alias: 'e',
+        description: 'Use this flag to show full diffs instead of a patch.',
+        type: 'boolean'
+    },
+    filter: {
+        description:
+       'Path to a module exporting a filtering function. This method receives '
+       + 'a list of tests which can be manipulated to exclude tests from '
+       + 'running. Especially useful when used in conjunction with a testing '
+       + 'infrastructure to filter known broken tests.',
+        type: 'string'
+    },
+    findRelatedTests: {
+        description:
+       'Find related tests for a list of source files that were '
+       + 'passed in as arguments. Useful for pre-commit hook integration to run '
+       + 'the minimal amount of tests necessary.',
+        type: 'boolean'
+    },
+    forceExit: {
+        description:
+       'Force Jest to exit after all tests have completed running. '
+       + 'This is useful when resources set up by test code cannot be '
+       + 'adequately cleaned up.',
+        type: 'boolean'
+    },
+    globalSetup: {
+        description: 'The path to a module that runs before All Tests.',
+        type: 'string'
+    },
+    globalTeardown: {
+        description: 'The path to a module that runs after All Tests.',
+        type: 'string'
+    },
+    globals: {
+        description:
+       'A JSON string with map of global variables that need '
+       + 'to be available in all test environments.',
+        type: 'string'
+    },
+    haste: {
+        description:
+       'A JSON string with map of variables for the haste module system',
+        type: 'string'
+    },
+    init: {
+        description: 'Generate a basic configuration file',
+        type: 'boolean'
+    },
+    injectGlobals: {
+        description: 'Should Jest inject global variables or not',
+        type: 'boolean'
+    },
+    json: {
+        description:
+       'Prints the test results in JSON. This mode will send all '
+       + 'other test output and user messages to stderr.',
+        type: 'boolean'
+    },
+    lastCommit: {
+        description:
+       'Run all tests affected by file changes in the last commit made. '
+       + 'Behaves similarly to `--onlyChanged`.',
+        type: 'boolean'
+    },
+    listTests: {
+        description:
+       'Lists all tests Jest will run given the arguments and '
+       + 'exits. Most useful in a CI system together with `--findRelatedTests` '
+       + 'to determine the tests Jest will run based on specific files',
+        type: 'boolean'
+    },
+    logHeapUsage: {
+        description:
+       'Logs the heap usage after every test. Useful to debug '
+       + 'memory leaks. Use together with `--runInBand` and `--expose-gc` in '
+       + 'node.',
+        type: 'boolean'
+    },
+    maxConcurrency: {
+        description:
+       'Specifies the maximum number of tests that are allowed to run'
+       + 'concurrently. This only affects tests using `test.concurrent`.',
+        type: 'number'
+    },
+    maxWorkers: {
+        alias: 'w',
+        description:
+       'Specifies the maximum number of workers the worker-pool '
+       + 'will spawn for running tests. This defaults to the number of the '
+       + 'cores available on your machine. (its usually best not to override '
+       + 'this default)',
+        type: 'string'
+    },
+    moduleDirectories: {
+        description:
+       'An array of directory names to be searched recursively '
+       + "up from the requiring module's location.",
+        string: true,
+        type: 'array'
+    },
+    moduleFileExtensions: {
+        description:
+       'An array of file extensions your modules use. If you '
+       + 'require modules without specifying a file extension, these are the '
+       + 'extensions Jest will look for. ',
+        string: true,
+        type: 'array'
+    },
+    moduleNameMapper: {
+        description:
+       'A JSON string with a map from regular expressions to '
+       + 'module names or to arrays of module names that allow to stub '
+       + 'out resources, like images or styles with a single module',
+        type: 'string'
+    },
+    modulePathIgnorePatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all module paths before those paths are to be considered '
+       + '"visible" to the module loader.',
+        string: true,
+        type: 'array'
+    },
+    modulePaths: {
+        description:
+       'An alternative API to setting the NODE_PATH env variable, '
+       + 'modulePaths is an array of absolute paths to additional locations to '
+       + 'search when resolving modules.',
+        string: true,
+        type: 'array'
+    },
+    noStackTrace: {
+        description: 'Disables stack trace in test results output',
+        type: 'boolean'
+    },
+    notify: {
+        description: 'Activates notifications for test results.',
+        type: 'boolean'
+    },
+    notifyMode: {
+        description: 'Specifies when notifications will appear for test results.',
+        type: 'string'
+    },
+    onlyChanged: {
+        alias: 'o',
+        description:
+       'Attempts to identify which tests to run based on which '
+       + "files have changed in the current repository. Only works if you're "
+       + 'running tests in a git or hg repository at the moment.',
+        type: 'boolean'
+    },
+    onlyFailures: {
+        alias: 'f',
+        description: 'Run tests that failed in the previous execution.',
+        type: 'boolean'
+    },
+    outputFile: {
+        description:
+       'Write test results to a file when the --json option is '
+       + 'also specified.',
+        type: 'string'
+    },
+    passWithNoTests: {
+        description:
+       'Will not fail if no tests are found (for example while using `--testPathPattern`.)',
+        type: 'boolean'
+    },
+    preset: {
+        description: "A preset that is used as a base for Jest's configuration.",
+        type: 'string'
+    },
+    prettierPath: {
+        description: 'The path to the "prettier" module used for inline snapshots.',
+        type: 'string'
+    },
+    projects: {
+        description:
+       'A list of projects that use Jest to run all tests of all '
+       + 'projects in a single instance of Jest.',
+        string: true,
+        type: 'array'
+    },
+    reporters: {
+        description: 'A list of custom reporters for the test suite.',
+        string: true,
+        type: 'array'
+    },
+    resetMocks: {
+        description:
+       'Automatically reset mock state between every test. '
+       + 'Equivalent to calling jest.resetAllMocks() between each test.',
+        type: 'boolean'
+    },
+    resetModules: {
+        description:
+       'If enabled, the module registry for every test file will '
+       + 'be reset before running each individual test.',
+        type: 'boolean'
+    },
+    resolver: {
+        description: 'A JSON string which allows the use of a custom resolver.',
+        type: 'string'
+    },
+    restoreMocks: {
+        description:
+       'Automatically restore mock state and implementation between every test. '
+       + 'Equivalent to calling jest.restoreAllMocks() between each test.',
+        type: 'boolean'
+    },
+    rootDir: {
+        description:
+       'The root directory that Jest should scan for tests and '
+       + 'modules within.',
+        type: 'string'
+    },
+    roots: {
+        description:
+       'A list of paths to directories that Jest should use to '
+       + 'search for files in.',
+        string: true,
+        type: 'array'
+    },
+    runInBand: {
+        alias: 'i',
+        description:
+       'Run all tests serially in the current process (rather than '
+       + 'creating a worker pool of child processes that run tests). This '
+       + 'is sometimes useful for debugging, but such use cases are pretty '
+       + 'rare.',
+        type: 'boolean'
+    },
+    runTestsByPath: {
+        description:
+       'Used when provided patterns are exact file paths. This avoids '
+       + 'converting them into a regular expression and matching it against '
+       + 'every single file.',
+        type: 'boolean'
+    },
+    runner: {
+        description:
+       "Allows to use a custom runner instead of Jest's default test runner.",
+        type: 'string'
+    },
+    selectProjects: {
+        description:
+       'Run only the tests of the specified projects.'
+       + 'Jest uses the attribute `displayName` in the configuration to identify each project.',
+        string: true,
+        type: 'array'
+    },
+    setupFiles: {
+        description:
+       'A list of paths to modules that run some code to configure or '
+       + 'set up the testing environment before each test. ',
+        string: true,
+        type: 'array'
+    },
+    setupFilesAfterEnv: {
+        description:
+       'A list of paths to modules that run some code to configure or '
+       + 'set up the testing framework before each test ',
+        string: true,
+        type: 'array'
+    },
+    showConfig: {
+        description: 'Print your jest config and then exits.',
+        type: 'boolean'
+    },
+    silent: {
+        description: 'Prevent tests from printing messages through the console.',
+        type: 'boolean'
+    },
+    skipFilter: {
+        description:
+       'Disables the filter provided by --filter. Useful for CI jobs, or '
+       + 'local enforcement when fixing tests.',
+        type: 'boolean'
+    },
+    snapshotSerializers: {
+        description:
+       'A list of paths to snapshot serializer modules Jest should '
+       + 'use for snapshot testing.',
+        string: true,
+        type: 'array'
+    },
+    testEnvironment: {
+        description: 'Alias for --env',
+        type: 'string'
+    },
+    testEnvironmentOptions: {
+        description:
+       'Test environment options that will be passed to the testEnvironment. '
+       + 'The relevant options depend on the environment.',
+        type: 'string' // Object
+    },
+    testFailureExitCode: {
+        description: 'Exit code of `jest` command if the test run failed',
+        type: 'string' // number
+    },
+    testLocationInResults: {
+        description: 'Add `location` information to the test results',
+        type: 'boolean'
+    },
+    testMatch: {
+        description: 'The glob patterns Jest uses to detect test files.',
+        string: true,
+        type: 'array'
+    },
+    testNamePattern: {
+        alias: 't',
+        description: 'Run only tests with a name that matches the regex pattern.',
+        type: 'string'
+    },
+    testPathIgnorePatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all test paths before executing the test. If the test path '
+       + 'matches any of the patterns, it will be skipped.',
+        string: true,
+        type: 'array'
+    },
+    testPathPattern: {
+        description:
+       'A regexp pattern string that is matched against all tests '
+       + 'paths before executing the test.',
+        string: true,
+        type: 'array'
+    },
+    testRegex: {
+        description:
+       'A string or array of string regexp patterns that Jest uses to detect test files.',
+        string: true,
+        type: 'array'
+    },
+    testResultsProcessor: {
+        description:
+       'Allows the use of a custom results processor. '
+       + 'This processor must be a node module that exports '
+       + 'a function expecting as the first argument the result object.',
+        type: 'string'
+    },
+    testRunner: {
+        description:
+       'Allows to specify a custom test runner. The default is'
+       + ' `jest-circus/runner`. A path to a custom test runner can be provided:'
+       + ' `<rootDir>/path/to/testRunner.js`.',
+        type: 'string'
+    },
+    testSequencer: {
+        description:
+       'Allows to specify a custom test sequencer. The default is '
+       + '`@jest/test-sequencer`. A path to a custom test sequencer can be '
+       + 'provided: `<rootDir>/path/to/testSequencer.js`',
+        type: 'string'
+    },
+    testTimeout: {
+        description: 'This option sets the default timeouts of test cases.',
+        type: 'number'
+    },
+    testURL: {
+        description: 'This option sets the URL for the jsdom environment.',
+        type: 'string'
+    },
+    timers: {
+        description:
+       'Setting this value to fake allows the use of fake timers '
+       + 'for functions such as setTimeout.',
+        type: 'string'
+    },
+    transform: {
+        description:
+       'A JSON string which maps from regular expressions to paths '
+       + 'to transformers.',
+        type: 'string'
+    },
+    transformIgnorePatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all source file paths before transformation.',
+        string: true,
+        type: 'array'
+    },
+    unmockedModulePathPatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all modules before the module loader will automatically '
+       + 'return a mock for them.',
+        string: true,
+        type: 'array'
+    },
+    updateSnapshot: {
+        alias: 'u',
+        description:
+       'Use this flag to re-record snapshots. '
+       + 'Can be used together with a test suite pattern or with '
+       + '`--testNamePattern` to re-record snapshot for test matching '
+       + 'the pattern',
+        type: 'boolean'
+    },
+    useStderr: {
+        description: 'Divert all output to stderr.',
+        type: 'boolean'
+    },
+    verbose: {
+        description:
+       'Display individual test results with the test suite hierarchy.',
+        type: 'boolean'
+    },
+    version: {
+        alias: 'v',
+        description: 'Print the version and exit',
+        type: 'boolean'
+    },
+    watch: {
+        description:
+       'Watch files for changes and rerun tests related to '
+       + 'changed files. If you want to re-run all tests when a file has '
+       + 'changed, use the `--watchAll` option.',
+        type: 'boolean'
+    },
+    watchAll: {
+        description:
+       'Watch files for changes and rerun all tests. If you want '
+       + 'to re-run only the tests related to the changed files, use the '
+       + '`--watch` option.',
+        type: 'boolean'
+    },
+    watchPathIgnorePatterns: {
+        description:
+       'An array of regexp pattern strings that are matched '
+       + 'against all paths before trigger test re-run in watch mode. '
+       + 'If the test path matches any of the patterns, it will be skipped.',
+        string: true,
+        type: 'array'
+    },
+    watchman: {
+        description:
+       'Whether to use watchman for file crawling. Disable using '
+       + '--no-watchman.',
+        type: 'boolean'
+    }
+};
--- a/packages/fes-plugin-layout/build.config.js
+++ b/packages/fes-plugin-layout/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-layout/package.json
+++ b/packages/fes-plugin-layout/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-layout",
-  "version": "2.0.0",
+  "version": "2.0.5",
  "description": "@fesjs/plugin-layout",
  "main": "lib/index.js",
  "files": [
@ -27,12 +27,12 @@
    "access": "public"
  },
  "dependencies": {
-    "@umijs/utils": "3.3.3"
+    "@fesjs/utils": "^2.0.2"
  },
  "peerDependencies": {
-    "@ant-design/icons-vue": "^5.1.6",
+    "@ant-design/icons-vue": "^6.0.0",
    "@fesjs/fes": "^2.0.0",
-    "ant-design-vue": "2.0.0",
+    "ant-design-vue": "^2.2.0",
    "vue": "^3.0.5"
  }
 }
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@ -1,6 +1,6 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
-import { winPath } from '@umijs/utils';
+import { winPath } from '@fesjs/utils';

 const namespace = 'plugin-layout';

--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js
@ -1,4 +1,5 @@
 import { unref, computed } from 'vue';
+// eslint-disable-next-line
 import { useAccess } from '../../plugin-access/core';

 if (!useAccess) {
@ -12,7 +13,10 @@ export const hasAccessByMenuItem = (item) => {
    if (item.path && (!item.children || item.children.length === 0)) {
        res = useAccess(item.path);
    } else if (item.children && item.children.length > 0) {
-        res = computed(() => item.children.some(child => hasAccessByMenuItem(child)));
+        res = computed(() => item.children.some((child) => {
+            const rst = hasAccessByMenuItem(child);
+            return rst && rst.value;
+        }));
    }
    return res;
 };
@ -31,5 +35,6 @@ const _addAccessTag = (arr) => {
 export const transform = (menus) => {
    const originData = unref(menus);
    _addAccessTag(originData);
+
    return originData;
 };
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@ -64,8 +64,7 @@
        </a-layout>
    </a-layout>
    <div v-else class="content-wrapper">
-        <MultiTabProvider v-if="multiTabs" />
-        <router-view v-else></router-view>
+        <router-view></router-view>
    </div>
 </template>

--- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/Menu.vue
@ -8,6 +8,9 @@
        <template v-for="(item, index) in fixedMenus" :key="index">
            <template v-if="item.access">
                <a-sub-menu v-if="item.children" :key="index" :title="item.title">
+                    <template v-if="item.icon" #icon>
+                        <MenuIcon :icon="item.icon" />
+                    </template>
                    <template
                        v-for="(item1, index1) in item.children"
                    >
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@ -5,8 +5,9 @@
        hide-add
        type="editable-card"
        @tabClick="switchPage"
+        @edit="onEdit"
    >
-        <a-tab-pane v-for="page in pageList" :key="page.path" closable>
+        <a-tab-pane v-for="page in pageList" :key="page.path" :closable="route.path !== page.path">
            <template #tab>
                {{page.name}}
                <ReloadOutlined
@ -100,6 +101,13 @@ export default {
                });
            }
        };
+        const onEdit = (targetKey, action) => {
+            if (action === 'remove') {
+                const selectedPage = findPage(targetKey);
+                const index = pageList.indexOf(selectedPage);
+                pageList.splice(index, 1);
+            }
+        };
        const reloadPage = (path) => {
            const selectedPage = findPage(path || unref(route.path));
            if (selectedPage) {
@ -119,7 +127,6 @@ export default {
            return '';
        };
        const handlerMore = ({ key }) => {
-            console.log(key);
            switch (key) {
                case 'closeOtherPage':
                    closeOtherPage();
@ -136,7 +143,8 @@ export default {
            getPageKey,
            reloadPage,
            switchPage,
-            handlerMore
+            handlerMore,
+            onEdit
        };
    }
 };
--- a/packages/fes-plugin-locale/.fatherrc.js
+++ b/packages/fes-plugin-locale/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-locale/build.config.js
+++ b/packages/fes-plugin-locale/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-locale/package.json
+++ b/packages/fes-plugin-locale/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-locale",
-  "version": "2.0.0",
+  "version": "2.0.3",
  "description": "@fesjs/plugin-locale",
  "main": "lib/index.js",
  "files": [
@ -27,13 +27,13 @@
    "access": "public"
  },
  "dependencies": {
-    "@umijs/utils": "3.3.3",
+    "@fesjs/utils": "^2.0.2",
    "vue-i18n": "^9.0.0"
  },
  "peerDependencies": {
-    "@ant-design/icons-vue": "^5.1.6",
+    "@ant-design/icons-vue": "^6.0.0",
    "@fesjs/fes": "^2.0.0",
-    "ant-design-vue": "2.0.0",
+    "ant-design-vue": "^2.2.0",
    "vue": "^3.0.5"
  }
 }
--- a/packages/fes-plugin-locale/src/index.js
+++ b/packages/fes-plugin-locale/src/index.js
@ -10,7 +10,7 @@ export default (api) => {
    } = api;

    api.chainWebpack((memo) => {
-        memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js');
+        memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');
    });

    api.describe({
--- a/packages/fes-plugin-locale/src/utils/index.js
+++ b/packages/fes-plugin-locale/src/utils/index.js
@ -1,4 +1,4 @@
-import { glob } from '@umijs/utils';
+import { glob } from '@fesjs/utils';
 import { join, basename } from 'path';

 export function getLocales(cwd) {
--- a/packages/fes-plugin-model/.fatherrc.js
+++ b/packages/fes-plugin-model/.fatherrc.js
@ -1,3 +0,0 @@
-export default {
-  disableTypeCheck: false,
-};
--- a/packages/fes-plugin-model/build.config.js
+++ b/packages/fes-plugin-model/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-model/package.json
+++ b/packages/fes-plugin-model/package.json
@ -1,6 +1,6 @@
 {
  "name": "@fesjs/plugin-model",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "description": "@fesjs/plugin-model",
  "main": "lib/index.js",
  "files": [
@ -27,7 +27,7 @@
    "access": "public"
  },
  "dependencies": {
-    "@umijs/utils": "3.3.3"
+    "@fesjs/utils": "^2.0.2"
  },
  "peerDependencies": {
    "@fesjs/fes": "^2.0.0",
--- a/packages/fes-plugin-model/src/index.js
+++ b/packages/fes-plugin-model/src/index.js
@ -1,7 +1,7 @@

 import { readFileSync } from 'fs';
 import { join } from 'path';
-import { lodash, winPath } from '@umijs/utils';
+import { lodash, winPath } from '@fesjs/utils';
 import { getModels } from './utils/getModels';
 import { getTmpFile } from './utils/getTmpFile';

--- a/packages/fes-plugin-model/src/utils/getModels.js
+++ b/packages/fes-plugin-model/src/utils/getModels.js
@ -1,4 +1,4 @@
-import { glob } from '@umijs/utils';
+import { glob } from '@fesjs/utils';
 import { getValidFiles } from '.';

 export function getModels(cwd, pattern) {
--- a/packages/fes-plugin-model/src/utils/getTmpFile.js
+++ b/packages/fes-plugin-model/src/utils/getTmpFile.js
@ -1,5 +1,5 @@
 import { EOL } from 'os';
-import { winPath } from '@umijs/utils';
+import { winPath } from '@fesjs/utils';
 import {
    genImports, genModels, genExtraModels
 } from './index';
--- a/packages/fes-plugin-model/src/utils/index.js
+++ b/packages/fes-plugin-model/src/utils/index.js
@ -1,7 +1,7 @@
 import path from 'path';
 import { EOL } from 'os';
 import { readFileSync } from 'fs';
-import { parser, traverse, winPath } from '@umijs/utils';
+import { parser, traverse, winPath } from '@fesjs/utils';

 const getFileName = (name) => {
    const fileName = path.basename(name, path.extname(name));
@ -119,7 +119,7 @@ export const genModels = (imports, absSrcPath) => {

        const use = [];

-        traverse.default(ast, {
+        traverse(ast, {
            enter(astPath) {
                if (astPath.isIdentifier({ name: 'useModel' })) {
                    try {
@ -167,7 +167,7 @@ export const isValidHook = (filePath) => {
    });
    let valid = false;
    let identifierName = '';
-    traverse.default(ast, {
+    traverse(ast, {
        enter(p) {
            if (p.isExportDefaultDeclaration()) {
                const { type } = p.node.declaration;
--- a/packages/fes-plugin-monaco-editor/LICENSE
+++ b/packages/fes-plugin-monaco-editor/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-present webank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/packages/fes-plugin-monaco-editor/build.config.js
+++ b/packages/fes-plugin-monaco-editor/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-monaco-editor/package.json
+++ b/packages/fes-plugin-monaco-editor/package.json
@ -0,0 +1,37 @@
+{
+  "name": "@fesjs/plugin-monaco-editor",
+  "version": "2.0.0-beta.4",
+  "description": "@fesjs/plugin-monaco-editor",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-plugin-monaco-editor"
+  },
+  "keywords": [
+    "fes"
+  ],
+  "author": "harrywan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fesjs/utils": "^2.0.2",
+    "lodash-es": "^4.17.15",
+    "monaco-editor": "^0.20.0",
+    "monaco-editor-webpack-plugin": "^1.9.1"
+  },
+  "peerDependencies": {
+    "@fesjs/fes": "^2.0.0",
+    "vue": "^3.0.5"
+  }
+}
--- a/packages/fes-plugin-monaco-editor/src/index.js
+++ b/packages/fes-plugin-monaco-editor/src/index.js
@ -0,0 +1,85 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const namespace = 'plugin-monaco-editor';
+
+export default (api) => {
+    const {
+        utils: { Mustache }
+    } = api;
+
+    api.describe({
+        key: 'monacoEditor',
+        config: {
+            schema(joi) {
+                return joi.object().keys({
+                    filename: joi.string(),
+                    publicPath: joi.string(),
+                    languages: joi.array(),
+                    features: joi.array(),
+                    globalAPI: joi.boolean()
+                });
+            }
+        },
+        default: {
+        }
+    });
+
+    const absoluteFilePath = join(namespace, 'core.js');
+
+    const absRuntimeFilePath = join(namespace, 'runtime.js');
+
+    const absLoaderFilePath = join(namespace, 'loader.js');
+
+    api.onGenerateFiles(() => {
+        // 文件写出
+        api.writeTmpFile({
+            path: absoluteFilePath,
+            content: Mustache.render(
+                readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),
+                {
+                }
+            )
+        });
+
+        api.writeTmpFile({
+            path: absRuntimeFilePath,
+            content: Mustache.render(
+                readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8')
+            )
+        });
+
+        api.writeTmpFile({
+            path: absLoaderFilePath,
+            content: Mustache.render(
+                readFileSync(join(__dirname, 'runtime/loader.tpl'), 'utf-8')
+            )
+        });
+
+        api.copyTmpFiles({
+            namespace,
+            path: join(__dirname, 'runtime'),
+            ignore: ['.tpl']
+        });
+    });
+
+    api.addPluginExports(() => [
+        {
+            specifiers: ['monaco', 'MonacoEditor'],
+            source: absoluteFilePath
+        }
+    ]);
+
+    api.addRuntimePluginKey(() => 'monacoEditor');
+
+    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
+
+    api.chainWebpack((webpackConfig) => {
+        webpackConfig
+            .plugin('monaco-editor')
+            .use(require('monaco-editor-webpack-plugin'), [
+                api.config?.monacoEditor || {}
+            ]);
+        return webpackConfig;
+    });
+};
--- a/packages/fes-plugin-monaco-editor/src/runtime/core.tpl
+++ b/packages/fes-plugin-monaco-editor/src/runtime/core.tpl
@ -0,0 +1,6 @@
+import Editor from './editor';
+import _monaco from './loader';
+
+export const MonacoEditor = Editor;
+
+export const monaco = _monaco;
--- a/packages/fes-plugin-monaco-editor/src/runtime/editor.vue
+++ b/packages/fes-plugin-monaco-editor/src/runtime/editor.vue
@ -0,0 +1,304 @@
+<template>
+    <section ref="containRef" :style="style" class="editor" />
+</template>
+<script>
+import {
+    computed, ref, watch, onMounted, onBeforeUnmount
+} from 'vue';
+import { merge, debounce } from 'lodash-es';
+// eslint-disable-next-line
+import monaco from './loader';
+
+const processSize = function (size) {
+    return !/^\d+$/.test(size) ? size : `${size}px`;
+};
+
+export default {
+    name: 'MonacoEditor',
+    props: {
+        theme: {
+            type: String,
+            default: 'defaultTheme'
+        },
+        language: {
+            type: String,
+            default: ''
+        },
+        height: {
+            type: [String, Number],
+            default: '100%'
+        },
+        width: {
+            type: [String, Number],
+            default: '100%'
+        },
+        modelValue: String,
+        readOnly: Boolean,
+        options: Object,
+        check: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue', 'onload', 'scrollChange'],
+    setup(props, { emit }) {
+        const containRef = ref(null);
+
+        const style = computed(() => {
+            const fixedWidth = processSize(props.width);
+            const fixedHeight = processSize(props.height);
+            return {
+                width: fixedWidth,
+                height: fixedHeight
+            };
+        });
+
+        const currentConfig = computed(() => {
+            const config = merge(
+                {
+                    automaticLayout: true,
+                    scrollBeyondLastLine: false,
+                    minimap: {
+                        enabled: false
+                    },
+                    glyphMargin: true,
+                    fontSize: '14px',
+                    contextmenu: true
+                },
+                props.options,
+                {
+                    readOnly: props.readOnly
+                }
+            );
+            return config;
+        });
+
+        let editor;
+        let editorModel;
+
+        const getValue = () => {
+            if (!editor) {
+                return '';
+            }
+            const text = editor.getValue({
+                lineEnding: '\n',
+                preserveBOM: false
+            });
+            // 如果开启检查
+            if (props.check) {
+                if (props.language === 'json') {
+                    try {
+                        JSON.parse(text);
+                    } catch (e) {
+                        return props.modelValue;
+                    }
+                }
+            }
+            return text;
+        };
+
+        watch(currentConfig, () => {
+            if (editor) {
+                editor.updateOptions(currentConfig.value);
+            }
+        });
+
+        watch(() => props.language, (newVal) => {
+            if (editorModel) {
+                monaco.editor.setModelLanguage(editorModel, newVal);
+            }
+        });
+
+        watch(() => props.theme, (newVal) => {
+            if (editor) {
+                monaco.editor.setTheme(newVal);
+            }
+        });
+
+        watch([() => props.width, () => props.height], () => {
+            if (editor) {
+                editor.layout();
+            }
+        });
+
+        watch(
+            () => props.modelValue,
+            (newValue) => {
+                if (!editor) {
+                    return;
+                }
+                if (newValue === getValue()) {
+                    return;
+                }
+                const readOnly = editor.getRawOptions().readOnly;
+                if (readOnly) {
+                    // editor.setValue 和 model.setValue 都会丢失撤销栈
+                    editor.setValue(newValue);
+                } else {
+                    // 有撤销栈
+                    const range = editorModel.getFullModelRange();
+                    const text = newValue;
+                    const op = {
+                        identifier: {
+                            major: 1,
+                            minor: 1
+                        },
+                        range,
+                        text,
+                        forceMoveMarkers: true
+                    };
+                    editor.executeEdits('insertValue', [op]);
+                }
+            }
+        );
+
+        const initMonaco = () => {
+            if (!containRef.value) {
+                return;
+            }
+            editor = monaco.editor.create(containRef.value, {
+                ...currentConfig.value,
+                language: props.language,
+                theme: props.theme,
+                value: props.modelValue
+            });
+            editorModel = editor.getModel();
+            emit('onload', {
+                monaco,
+                editor,
+                editorModel
+            });
+            editor.onDidScrollChange(
+                debounce((e) => {
+                    emit('scrollChange', e);
+                }),
+                300
+            );
+            // 内容改变
+            editor.onDidChangeModelContent(
+                debounce(() => {
+                    emit('update:modelValue', getValue());
+                }),
+                100
+            );
+            // 焦点离开事件
+            editor.onDidBlurEditorText(() => {
+                // 格式化代码
+                editor.trigger('anyString', 'editor.action.formatDocument');
+            });
+        };
+
+        const undo = () => {
+            if (!editor) return;
+            editor.trigger('anyString', 'undo');
+        };
+
+        const redo = () => {
+            if (!editor) return;
+            editor.trigger('anyString', 'redo');
+        };
+
+        /**
+         * 保存的编辑状态 ViewState
+         *  Yes, editor.saveViewState stores:
+            cursor position
+            scroll location
+            folded sections
+            for a certain model when it is connected to an editor instance.
+            Once the same model is connected to the same or a different editor instance, editor.restoreViewState can be used to restore the above listed state.
+
+            There are very many things that influence how rendering occurs:
+            the current theme
+            the current wrapping settings set on the editor
+            the enablement of a minimap, etc.
+            the current language configured for a model
+            etc.
+         */
+        const saveViewState = () => {
+            if (!editorModel) return;
+            editorModel.viewState = editor.saveViewState();
+        };
+
+        // 重置之前保存的编辑状态 ViewState
+        const restoreViewState = () => {
+            if (editorModel && editorModel.viewState) {
+                editor.restoreViewState(editorModel.viewState);
+            }
+        };
+
+        // 获取选择的内容
+        const getValueInRange = () => {
+            if (!editor) return;
+            const selection = editor.getSelection();
+            return selection.isEmpty()
+                ? null
+                : editorModel.getValueInRange(selection);
+        };
+
+        // 在编辑器选中的范围插入值
+        const insertValueIntoEditor = (value) => {
+            if (!editor) {
+                return;
+            }
+            const SelectedRange = editor.getSelection();
+            let range = null;
+            if (SelectedRange) {
+                range = new monaco.Range(
+                    SelectedRange.startLineNumber,
+                    SelectedRange.startColumn,
+                    SelectedRange.endLineNumber,
+                    SelectedRange.endColumn
+                );
+                const text = value;
+                const op = {
+                    identifier: {
+                        major: 1,
+                        minor: 1
+                    },
+                    range,
+                    text,
+                    forceMoveMarkers: true
+                };
+                editor.executeEdits('insertValue', [op]);
+            }
+        };
+
+        onMounted(() => {
+            initMonaco();
+        });
+
+        onBeforeUnmount(() => {
+            // 销毁 editor，进行gc
+            editor && editor.dispose();
+            editorModel && editorModel.dispose();
+        });
+
+        return {
+            containRef,
+            style,
+            undo,
+            redo,
+            saveViewState,
+            restoreViewState,
+            getValueInRange,
+            insertValueIntoEditor
+        };
+    }
+};
+</script>
+<style lang="less">
+.editor {
+  height: 100%;
+  width: 100%;
+  .monaco-editor.rename-box {
+    left: 0;
+    top: 0;
+  }
+  .glyphMarginErrorClass {
+    background: #ff5500;
+  }
+  .contentErrorClass {
+    background: rgba(#ff5500, 0.2);
+  }
+}
+</style>
--- a/packages/fes-plugin-monaco-editor/src/runtime/loader.tpl
+++ b/packages/fes-plugin-monaco-editor/src/runtime/loader.tpl
@ -0,0 +1,7 @@
+import * as monaco from 'monaco-editor';
+import defaultTheme from './theme/default';
+
+// 默认主题
+defaultTheme.register(monaco);
+
+export default monaco;
--- a/packages/fes-plugin-monaco-editor/src/runtime/runtime.tpl
+++ b/packages/fes-plugin-monaco-editor/src/runtime/runtime.tpl
--- a/packages/fes-plugin-monaco-editor/src/runtime/theme/default.js
+++ b/packages/fes-plugin-monaco-editor/src/runtime/theme/default.js
@ -0,0 +1,111 @@
+/* eslint-disable max-len */
+export default {
+    register(monaco) {
+        monaco.editor.defineTheme('defaultTheme', {
+            base: 'vs',
+            inherit: true,
+            rules: [
+                {
+                    foreground: 'c41a16',
+                    token: 'string'
+                },
+                {
+                    foreground: '1c00cf',
+                    token: 'constant.numeric'
+                },
+                {
+                    foreground: 'aa0d91',
+                    token: 'keyword'
+                },
+                {
+                    foreground: '000000',
+                    token: 'keyword.operator'
+                },
+                {
+                    foreground: 'aa0d91',
+                    token: 'constant.language'
+                },
+                {
+                    foreground: '990000',
+                    token: 'support.class.exception'
+                },
+                {
+                    foreground: '000000',
+                    token: 'entity.name.function'
+                },
+                {
+                    fontStyle: 'bold underline',
+                    token: 'entity.name.type'
+                },
+                {
+                    fontStyle: 'italic',
+                    token: 'variable.parameter'
+                },
+                {
+                    foreground: '007400',
+                    token: 'comment'
+                },
+                {
+                    foreground: 'ff0000',
+                    token: 'invalid'
+                },
+                {
+                    background: 'e71a1100',
+                    token: 'invalid.deprecated.trailing-whitespace'
+                },
+                {
+                    foreground: '000000',
+                    background: 'fafafafc',
+                    token: 'text source'
+                },
+                {
+                    foreground: 'aa0d91',
+                    token: 'meta.tag'
+                },
+                {
+                    foreground: 'aa0d91',
+                    token: 'declaration.tag'
+                },
+                {
+                    foreground: '000000',
+                    fontStyle: 'bold',
+                    token: 'support'
+                },
+                {
+                    foreground: 'aa0d91',
+                    token: 'storage'
+                },
+                {
+                    fontStyle: 'bold underline',
+                    token: 'entity.name.section'
+                },
+                {
+                    foreground: '000000',
+                    fontStyle: 'bold',
+                    token: 'entity.name.function.frame'
+                },
+                {
+                    foreground: '333333',
+                    token: 'meta.tag.preprocessor.xml'
+                },
+                {
+                    foreground: '994500',
+                    fontStyle: 'italic',
+                    token: 'entity.other.attribute-name'
+                },
+                {
+                    foreground: '881280',
+                    token: 'entity.name.tag'
+                }
+            ],
+            colors: {
+                'editor.foreground': '#000000',
+                'editor.background': '#FFFFFF',
+                'editor.selectionBackground': '#BAD6FD',
+                'editor.lineHighlightBackground': '#0000001A',
+                'editorCursor.foreground': '#000000',
+                'editorWhitespace.foreground': '#B3B3B3F4'
+            }
+        });
+    }
+};
--- a/packages/fes-plugin-qiankun/build.config.js
+++ b/packages/fes-plugin-qiankun/build.config.js
@ -0,0 +1,4 @@
+
+module.exports = {
+    copy: ['runtime']
+};
--- a/packages/fes-plugin-qiankun/examples/app1/package.json
+++ b/packages/fes-plugin-qiankun/examples/app1/package.json
@ -43,12 +43,12 @@
    "access": "public"
  },
  "devDependencies": {
-    "@webank/eslint-config-webank": "0.3.0"
+    "@webank/eslint-config-webank": "0.3.1"
  },
  "dependencies": {
    "@fesjs/fes": "^2.0.0",
    "vue": "^3.0.5",
-    "ant-design-vue": "2.0.0"
+    "ant-design-vue": "^2.2.0"
  },
  "private": true
 }
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`jasmine.DEFAULT_TIMEOUT_INTERVAL = 200000; // eslint-disable-line`