feat: 合并master

.github/workflows/docs.yml

@@ -2,7 +2,7 @@ name: Deploy Docs
 on:
   push:
     branches:
-      - master
+      - next
     paths:
       - 'docs/**/**'
       - 'package.json'
@@ -14,11 +14,18 @@ jobs:
       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
+      run: yarn && yarn docs:build
 
-    - name: Build and Deploy
+    - name: Deploy
-      uses: JamesIves/github-pages-deploy-action@4.1.1
+      uses: easingthemes/ssh-deploy@main
-      with:
+      env:
-          branch: master # The branch the action should deploy to.
+        # 本地.ssh文件下的私钥id_rsa，存在secrets的TOKEN中
-          folder: docs/.vuepress/dist # The folder the action should deploy.
+        SSH_PRIVATE_KEY: ${{ secrets.HARRYWAN_PRIVATE_KEY }} 
-          token: ${{ secrets.QLIN_GITEE_TOKEN }}
+        # 源目录，相对于$GITHUB_WORKSPACE根目录的路径
+        SOURCE: docs/.vuepress/dist/
+        # 服务器域名
+        REMOTE_HOST: ${{ secrets.TX_IP }}
+        # 腾讯云默认用户名为root
+        REMOTE_USER: root 
+        # 目标目录
+        TARGET: /data/web-packages/p/fesjs/next

README.en-US.md

@@ -17,7 +17,7 @@ An excellent front-end solution
 
 </div>
 
-- document - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/)
+- document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
 - changelog - [CHANGELOG.md](./CHANGELOG.md)
 
 # Pain points
@@ -52,19 +52,20 @@ It mainly has the following functions:
 
 |  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-access](http://fesjs.mumblefe.cn/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-enums](http://fesjs.mumblefe.cn/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-icon](http://fesjs.mumblefe.cn/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-jest](http://fesjs.mumblefe.cn/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-layout](http://fesjs.mumblefe.cn/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-locale](http://fesjs.mumblefe.cn/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-model](http://fesjs.mumblefe.cn/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-request](http://fesjs.mumblefe.cn/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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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) |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/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) |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | state manager |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | watermark |
 
 ## As easy as counting 1, 2, 3
 use `yarn`：

README.md

@@ -16,7 +16,7 @@
 
 </div>
 
-- 使用文档 - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/)
+- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
 - 更新日志 - [CHANGELOG.md](./CHANGELOG.md)
 
 # 痛点
@@ -51,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：

build.config.js

@@ -22,6 +22,7 @@ module.exports = {
         'fes-plugin-vuex',
         'fes-plugin-pinia',
         'fes-plugin-windicss',
+        'fes-plugin-watermark',
     ],
     copy: [],
 };

docs/.vuepress/config.ts

@@ -3,20 +3,14 @@ import type { DefaultThemeOptions } from '@vuepress/theme-default'
 import { navbar, sidebar } from './configs'
 
 const config: UserConfig<DefaultThemeOptions> = {
-  base: '/fesjs/',
 
-  // evergreen: process.env.NODE_ENV !== 'production',
+  base: '/',
 
-  head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]],
+  head: [['link', { rel: 'manifest', href: '/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/logo.png` }]],
 
   // site-level locales config
   locales: {
     '/': {
-      lang: 'en-US',
-      title: 'Fes.js',
-      description: 'A Good Front-end Application Solution',
-    },
-    '/zh/': {
       lang: 'zh-CN',
       title: 'Fes.js',
       description: '一个好用的前端应用解决方案',
@@ -30,7 +24,7 @@ const config: UserConfig<DefaultThemeOptions> = {
 
     docsDir: 'docs',
 
-    docsBranch: 'vue3',
+    docsBranch: 'next',
 
     // theme-level locales config
     locales: {
@@ -41,21 +35,6 @@ const config: UserConfig<DefaultThemeOptions> = {
        * we don't need to set all of the locale fields
        */
       '/': {
-        // navbar
-        navbar: navbar.en,
-
-        // sidebar
-        sidebar: sidebar.en,
-
-        // page meta
-        editLinkText: 'Edit this page on GitHub',
-      },
-
-      /**
-       * Chinese locale config
-       */
-      '/zh/': {
-        // navbar
         navbar: navbar.zh,
         selectLanguageName: '简体中文',
         selectLanguageText: '选择语言',
@@ -86,35 +65,17 @@ const config: UserConfig<DefaultThemeOptions> = {
         // other
         openInNewWindow: '在新窗口打开',
       },
+
     },
   },
 
   plugins: [
-    // [
-    //   '@vuepress/plugin-docsearch',
-    //   {
-    //     apiKey: '<API_KEY>',
-    //     indexName: '<INDEX_NAME>',
-    //     locales: {
-    //       '/': {
-    //         placeholder: 'Search Documentation',
-    //       },
-    //       '/zh/': {
-    //         placeholder: '搜索文档',
-    //       },
-    //     },
-    //   },
-    // ],
     ['@vuepress/plugin-pwa'],
     [
       '@vuepress/plugin-pwa-popup',
       {
         locales: {
           '/': {
-            message: 'New content is available.',
-            buttonText: 'Refresh',
-          },
-          '/zh/': {
             message: '发现新内容可用',
             buttonText: '刷新',
           },

docs/.vuepress/configs/navbar/en.ts

@@ -1,38 +0,0 @@
-import type { NavbarConfig } from '@vuepress/theme-default'
-
-export const en: NavbarConfig = [
-  {
-    text: 'Guide',
-    link: '/guide/',
-  },
-  {
-    text: 'Config',
-    link: '/reference/config/',
-  },
-  {
-    text: 'API',
-    link: '/reference/api/',
-  },
-  {
-    text: 'Plugin',
-    link: '/reference/plugin/',
-  },
-  {
-    text: 'CLI',
-    link: '/reference/cli/',
-  },
-  {
-    text: 'More',
-    children: [
-      {
-        text: '更新日志',
-        link:
-          'https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md',
-      },
-      {
-        text: 'v1 文档',
-        link: 'https://webank.gitee.io/fes.js/',
-      },
-    ],
-  },
-]

docs/.vuepress/configs/navbar/index.ts

@@ -1,2 +1 @@
-export * from './en'
 export * from './zh'

docs/.vuepress/configs/navbar/zh.ts

@@ -3,23 +3,23 @@ import type { NavbarConfig } from '@vuepress/theme-default'
 export const zh: NavbarConfig = [
   {
     text: '指南',
-    link: '/zh/guide/',
+    link: '/guide/',
   },
   {
     text: '编译时配置',
-    link: '/zh/reference/config/',
+    link: '/reference/config/',
   },
   {
     text: 'API',
-    link: '/zh/reference/api/',
+    link: '/reference/api/',
   },
   {
     text: '插件',
-    link: '/zh/reference/plugin/',
+    link: '/reference/plugin/',
   },
   {
     text: 'CLI',
-    link: '/zh/reference/cli/',
+    link: '/reference/cli/',
   },
   {
     text: '了解更多',
@@ -33,6 +33,11 @@ export const zh: NavbarConfig = [
         text: 'v1 文档',
         link: 'https://webank.gitee.io/fes.js/',
       },
+      {
+        text: 'fes-design',
+        link:
+          'http://fes-design.mumblefe.cn/',
+      },
     ],
   },
 ]

docs/.vuepress/configs/sidebar/en.ts

@@ -1,80 +0,0 @@
-import type { SidebarConfig } from '@vuepress/theme-default'
-
-export const en: SidebarConfig = {
-  '/guide/': [
-    {
-      // isGroup: true,
-      text: '介绍',
-      children: [
-        '/guide/README.md',
-        '/guide/getting-started.md',
-      ],
-    },
-    {
-      // isGroup: true,
-      text: '基础',
-      children: [
-        '/guide/directory-structure.md',
-        '/guide/builder.md',
-        '/guide/config.md',
-        '/guide/runtime-config.md',
-        '/guide/env.md',
-        '/guide/route.md',
-        '/guide/plugin.md',
-        '/guide/template.md',
-        '/guide/mock.md',
-      ]
-    },
-    {
-      // isGroup: true,
-      text: '样式和资源文件',
-      children: [
-        '/guide/image.md',
-        '/guide/css.md',
-        '/guide/public.md',
-      ]
-    },
-    "/guide/contributing.md",
-    "/guide/faq.md"
-  ],
-  '/reference/config/': [
-    '/reference/config/README.md'
-  ],
-  '/reference/api/': [
-    '/reference/api/README.md'
-  ],
-  '/reference/plugin/': [
-    '/reference/plugin/README.md',
-    {
-      // isGroup: true,
-      text: 'Plugins',
-      children: [
-        '/reference/plugin/plugins/access.md',
-        '/reference/plugin/plugins/enums.md',
-        '/reference/plugin/plugins/icon.md',
-        '/reference/plugin/plugins/jest.md',
-        '/reference/plugin/plugins/layout.md',
-        '/reference/plugin/plugins/locale.md',
-        '/reference/plugin/plugins/model.md',
-        '/reference/plugin/plugins/request.md',
-        '/reference/plugin/plugins/vuex.md',
-        '/reference/plugin/plugins/qiankun.md',
-        '/reference/plugin/plugins/windicss.md',
-        '/reference/plugin/plugins/sass.md',
-        '/reference/plugin/plugins/editor.md',
-        '/reference/plugin/plugins/pinia.md',
-      ],
-    },
-    {
-      // isGroup: true,
-      text: '插件开发',
-      children: [
-        '/reference/plugin/dev/README.md',
-        '/reference/plugin/dev/api.md'
-      ],
-    },
-  ],
-  '/reference/cli/': [
-    '/reference/cli/README.md',
-  ],
-}

docs/.vuepress/configs/sidebar/index.ts

@@ -1,2 +1 @@
-export * from './en'
 export * from './zh'

docs/.vuepress/configs/sidebar/zh.ts

@@ -1,81 +1,82 @@
 import type { SidebarConfig } from '@vuepress/theme-default'
 
 export const zh: SidebarConfig = {
-  '/zh/guide/': [
+  '/guide/': [
     {
       // isGroup: true,
       text: '介绍',
       children: [
-        '/zh/guide/README.md',
+        '/guide/README.md',
-        '/zh/guide/getting-started.md',
+        '/guide/getting-started.md',
       ],
     },
     {
       // isGroup: true,
       text: '基础',
       children: [
-        '/zh/guide/directory-structure.md',
+        '/guide/directory-structure.md',
-        '/zh/guide/builder.md',
+        '/guide/builder.md',
-        '/zh/guide/config.md',
+        '/guide/config.md',
-        '/zh/guide/runtime-config.md',
+        '/guide/runtime-config.md',
-        '/zh/guide/env.md',
+        '/guide/env.md',
-        '/zh/guide/route.md',
+        '/guide/route.md',
-        '/zh/guide/plugin.md',
+        '/guide/plugin.md',
-        '/zh/guide/template.md',
+        '/guide/template.md',
-        '/zh/guide/mock.md',
+        '/guide/mock.md',
-        '/zh/guide/upgrade2.1.md',
+        '/guide/upgrade3.md',
       ]
     },
     {
       // isGroup: true,
       text: '样式和资源文件',
       children: [
-        '/zh/guide/image.md',
+        '/guide/image.md',
-        '/zh/guide/css.md',
+        '/guide/css.md',
-        '/zh/guide/public.md',
+        '/guide/public.md',
       ]
     },
-    "/zh/guide/contributing.md",
+    "/guide/contributing.md",
-    "/zh/guide/faq.md"
+    "/guide/faq.md"
   ],
-  '/zh/reference/config/': [
+  '/reference/config/': [
-    '/zh/reference/config/README.md'
+    '/reference/config/README.md'
   ],
-  '/zh/reference/api/': [
+  '/reference/api/': [
-    '/zh/reference/api/README.md'
+    '/reference/api/README.md'
   ],
-  '/zh/reference/plugin/': [
+  '/reference/plugin/': [
-    '/zh/reference/plugin/README.md',
+    '/reference/plugin/README.md',
     {
       // isGroup: true,
       text: 'Plugins',
       children: [
-        '/zh/reference/plugin/plugins/access.md',
+        '/reference/plugin/plugins/access.md',
-        '/zh/reference/plugin/plugins/enums.md',
+        '/reference/plugin/plugins/enums.md',
-        '/zh/reference/plugin/plugins/icon.md',
+        '/reference/plugin/plugins/icon.md',
-        '/zh/reference/plugin/plugins/jest.md',
+        '/reference/plugin/plugins/jest.md',
-        '/zh/reference/plugin/plugins/layout.md',
+        '/reference/plugin/plugins/layout.md',
-        '/zh/reference/plugin/plugins/locale.md',
+        '/reference/plugin/plugins/locale.md',
-        '/zh/reference/plugin/plugins/model.md',
+        '/reference/plugin/plugins/model.md',
-        '/zh/reference/plugin/plugins/request.md',
+        '/reference/plugin/plugins/request.md',
-        '/zh/reference/plugin/plugins/vuex.md',
+        '/reference/plugin/plugins/vuex.md',
-        '/zh/reference/plugin/plugins/qiankun.md',
+        '/reference/plugin/plugins/qiankun.md',
-        '/zh/reference/plugin/plugins/windicss.md',
+        '/reference/plugin/plugins/windicss.md',
-        '/zh/reference/plugin/plugins/sass.md',
+        '/reference/plugin/plugins/sass.md',
-        '/zh/reference/plugin/plugins/editor.md',
+        '/reference/plugin/plugins/editor.md',
-        '/zh/reference/plugin/plugins/pinia.md',
+        '/reference/plugin/plugins/pinia.md',
+        '/reference/plugin/plugins/watermark.md',
       ],
     },
     {
       // isGroup: true,
       text: '插件开发',
       children: [
-        '/zh/reference/plugin/dev/README.md',
+        '/reference/plugin/dev/README.md',
-        '/zh/reference/plugin/dev/api.md'
+        '/reference/plugin/dev/api.md'
       ],
     },
   ],
-  '/zh/reference/cli/': [
+  '/reference/cli/': [
-    '/zh/reference/cli/README.md',
+    '/reference/cli/README.md',
   ],
 }

docs/README.md

@@ -4,10 +4,10 @@ title: 首页
 heroImage: /logo.png
 actions:
   - text: 快速上手
-    link: /zh/guide/getting-started.html
+    link: /guide/getting-started.html
     type: primary
   - text: 项目简介
-    link: /zh/guide/
+    link: /guide/
     type: secondary
 features:
   - title: Fast
@@ -52,7 +52,7 @@ npx @fesjs/create-fes-app myapp
 # 安装依赖
 npm install 
 
-# 运行  
+# 运行
 npm run dev
 ```
 
@@ -65,3 +65,6 @@ 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"/> |
 
+
+
+

docs/guide/config.md

@@ -1,87 +1,104 @@
-# 配置
+# 编译时配置
 
-Fes.js 约定 `.fes.js` 文件为项目编译需要配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
+Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
 
-
+一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))：
-一份常见的配置示例如下：
 
 ```js
-export default {
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineBuildConfig({
     base: '/foo/',
     publicPath: '/',
     devServer: {
-        port: 8080
+        port: 8080,
     },
     mock: {
-        prefix: '/v2'
+        prefix: '/v2',
     },
     proxy: {
         '/v2': {
-            'target': 'https://api.douban.com/',
+            target: 'https://api.douban.com/',
-            'changeOrigin': true, 
+            changeOrigin: true,
         },
     },
     layout: {
-        title: "Fes.js",
+        title: 'Fes.js',
         footer: 'Created by MumbelFe',
         multiTabs: false,
-        menus: [{
+        menus: [
-            name: 'index'
+            {
-        }, {
+                name: 'index',
-            name: 'onepiece'
+            },
-        }, {
+            {
-            name: 'store'
+                name: 'onepiece',
-        }, {
+            },
-            name: 'simpleList'
+            {
-        }]
+                name: 'store',
-    }
+            },
-}
+            {
+                name: 'simpleList',
+            },
+        ],
+    },
+});
 ```
 
 ## 本地临时配置文件
+
 可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。
+
 ```js
 // .fes.js
 export default { mock: false };
 
 // .fes.local.js
-export default { 
+export default {
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 最终的配置是：
+
 ```js
-{ 
+{
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 ::: warning
-`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，务必不要提交到 `git` 仓库中。
+`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。
 :::
 
 ## 多环境多份配置
+
 可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。
 
 比如配置如下：
+
 ```js
 // .fes.js
 export default { mock: false };
 
 // .fes.uat.js
-export default { 
+export default {
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 当我们运行：
+
 ```bash
 FES_ENV=uat fes dev
 ```
+
 这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是：
+
 ```js
-{ 
+{
     mock: true,
     devServer: { port: 8080 }
 };
@@ -89,8 +106,8 @@ FES_ENV=uat fes dev
 
 ## 优先级
 
-本地临时配置  >  环境配置  >  基础配置
+本地临时配置 > 环境配置 > 基础配置
 
 ::: tip
 如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
-::: 
+:::

docs/guide/directory-structure.md

@@ -1,6 +1,7 @@
 # 目录结构
 
 在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的：
+
 ```
 fes-template
 ├── package.json
@@ -8,9 +9,10 @@ fes-template
 ├── mock.js
 ├── .fes.js
 ├── .env
+├── index.html
 ├── dist
 ├── public
-│   └── index.html
+│   └── logo.png
 └── src
     ├── .fes
     └── pages
@@ -19,113 +21,109 @@ fes-template
 ```
 
 ### package.json
+
 ```json
 {
-  "name": "@fesjs/template",
+    "name": "@fesjs/template",
-  "version": "2.0.0",
+    "version": "2.0.0",
-  "description": "fes项目模版",
+    "description": "fes项目模版",
-  "scripts": {
+    "scripts": {
-    "build": "fes build",
+        "build": "fes build",
-    "prod": "FES_ENV=prod fes build",
+        "prod": "FES_ENV=prod fes build",
-    "analyze": "ANALYZE=1 fes build",
+        "analyze": "ANALYZE=1 fes build",
-    "dev": "fes dev",
+        "dev": "fes dev",
-    "test": "fes test"
+        "test": "fes test"
-  },
+    },
-  "keywords": [
+    "keywords": ["管理端", "fes", "fast", "easy", "strong"],
-    "管理端",
+    "files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"],
-    "fes",
+    "repository": {
-    "fast",
+        "type": "git",
-    "easy",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "strong"
+        "directory": "packages/fes-template"
-  ],
+    },
-  "files": [
+    "author": "harrywan",
-    ".eslintrc.js",
+    "license": "MIT",
-    ".gitignore",
+    "bugs": {
-    ".fes.js",
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
-    ".fes.prod.js",
+    },
-    "mock.js",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-    "package.json",
+    "publishConfig": {
-    "README.md",
+        "access": "public"
-    "tsconfig.json",
+    },
-    "/src",
+    "devDependencies": {
-    "/config"
+        "@webank/eslint-config-webank": "0.3.1"
-  ],
+    },
-  "repository": {
+    "dependencies": {
-    "type": "git",
+        "@fesjs/fes": "^2.0.0",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "@fesjs/builder-webpack": "^2.0.0",
-    "directory": "packages/fes-template"
+        "@fesjs/plugin-access": "^2.0.0",
-  },
+        "@fesjs/plugin-layout": "^3.0.0",
-  "author": "harrywan",
+        "@fesjs/plugin-locale": "^3.0.0",
-  "license": "MIT",
+        "@fesjs/plugin-model": "^2.0.0",
-  "bugs": {
+        "@fesjs/plugin-enums": "^2.0.0",
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+        "@fesjs/plugin-jest": "^2.0.0",
-  },
+        "@fesjs/plugin-vuex": "^2.0.0",
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+        "@fesjs/plugin-request": "^2.0.0",
-  "publishConfig": {
+        "@fesjs/plugin-qiankun": "^2.0.0",
-    "access": "public"
+        "@fesjs/plugin-sass": "^2.0.0",
-  },
+        "@fesjs/plugin-monaco-editor": "^2.0.0",
-  "devDependencies": {
+        "@fesjs/plugin-windicss": "^2.0.0",
-    "@webank/eslint-config-webank": "0.3.1"
+        "@fesjs/fes-design": "^0.5.0",
-  },
+        "vue": "^3.0.5",
-  "dependencies": {
+        "vuex": "^4.0.0"
-    "@fesjs/fes": "^2.0.0",
+    },
-    "@fesjs/plugin-access": "^2.0.0",
+    "private": true
-    "@fesjs/plugin-layout": "^3.0.0",
-    "@fesjs/plugin-locale": "^3.0.0",
-    "@fesjs/plugin-model": "^2.0.0",
-    "@fesjs/plugin-enums": "^2.0.0",
-    "@fesjs/plugin-jest": "^2.0.0",
-    "@fesjs/plugin-vuex": "^2.0.0",
-    "@fesjs/plugin-request": "^2.0.0",
-    "@fesjs/plugin-qiankun": "^2.0.0",
-    "@fesjs/plugin-sass": "^2.0.0",
-    "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
-    "@fesjs/plugin-windicss": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.10",
-    "vue": "^3.0.5",
-    "vuex": "^4.0.0"
-  },
-  "private": true
 }
 ```
-其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
+
+其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。`@fesjs/builder-` 开头的会被注册为构建器。
 
 ### tsconfig.json
+
 解决 `@fesjs/fes` 和使用 `@` 的 API 提示
 
 ### .fes.js
+
 配置文件，包含 Fes.js 内置功能和安装的其他插件配置。
 
 ### mock.js
+
 `mock` 数据的配置文件。
 
 ### .env
+
 定义环境变量。
 
 比如 `.env` 文件内容如下：
+
 ```
 PORT=8888
 FES_ENV=prod
 ```
+
 等同于 node 端运行时，设置如下：
+
 ```
 process.env.PORT = '8888';
 process.env.FES_ENV = 'prod';
 ```
 
-
 ### dist 目录
+
 执行 `fes build` 后，产物默认会存放在这里。
 
 ## public 目录
+
 此目录下所有文件为静态资源，会被复制到输出路径。
 
-### index.html
+## index.html
+
 默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
 
 ## src 目录
 
 ### .fes 目录
+
 临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
 
 :::warning
@@ -133,7 +131,9 @@ process.env.FES_ENV = 'prod';
 :::
 
 ### pages 目录
+
 所有路由组件文件存放在这里。
 
 ### app.js
-运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。
+
+运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。

docs/guide/faq.md

@@ -1,2 +1 @@
-# 常见问题
+# 常见问题
-

docs/guide/getting-started.md

@@ -1,13 +1,17 @@
 # 快速上手
 
 ## 依赖环境
-首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
+
+首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
+
 ```bash
 # 打印 node 版本
 node -v
-v10.13.0
+v12.13.0
 ```
+
 推荐使用 yarn 管理 npm 依赖
+
 ```bash
 # 全局安装 yarn
 npm i yarn -g
@@ -17,21 +21,26 @@ npm i yarn -g
 
 这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
 
-##### 步骤1 创建工作空间     
+##### 步骤 1 创建工作空间
+
 如果工作空间不存在，则先创建：
+
 ```bash
 # 创建目录 workspace
 mkdir workspace
 # 进入目录 workspace
 cd workspace
 ```
+
 如果工作空间已存在，则直接进入
+
 ```bash
 # 进入目录 workspace
 cd workspace
 ```
 
-##### 步骤2 在工作空间创建项目
+##### 步骤 2 在工作空间创建项目
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -52,22 +61,22 @@ npx @fesjs/create-fes-app myapp
   </CodeGroupItem>
 </CodeGroup>
 
-
 如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
 
 <img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
 
 你可以选择：
-- `Overwrite` 删除项目文件夹，重新创建项目。
+
-- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。      
+-   `Overwrite` 删除项目文件夹，重新创建项目。
+-   `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
 
 当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
 <img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
 
-你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。      
+你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
 
+##### 步骤 3 安装依赖
 
-##### 步骤3 安装依赖
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -75,7 +84,7 @@ npx @fesjs/create-fes-app myapp
 # 进入项目目录
 cd myapp
 # 安装依赖
-yarn 
+yarn
 ```
 
   </CodeGroupItem>
@@ -86,13 +95,14 @@ yarn
 # 进入项目目录
 cd myapp
 # 安装依赖
-npm i 
+npm i
 ```
 
   </CodeGroupItem>
 </CodeGroup>
 
-##  启动项目
+## 启动项目
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -130,15 +140,14 @@ Starting the development server http://localhost:8080 ...
   </CodeGroupItem>
 </CodeGroup>
 
-
 Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
 
-
 <img :src="$withBase('home.png')" alt="home">
 
 ## 部署发布
 
 ### 构建
+
 <CodeGroup>
   <CodeGroupItem title="YARN" active>
 
@@ -173,6 +182,7 @@ npm run build
 </CodeGroup>
 
 构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。
+
 ```base
 tree ./dist
 
@@ -188,8 +198,9 @@ dist
 ```
 
 ### 本地验证
+
 发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
 
-
 ### 部署
-本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。
+
+本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

docs/guide/runtime-config.md

@@ -8,20 +8,75 @@ Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写
 
 例如：
 
-plugin-acess插件定义运行时配置项：
+plugin-access 插件定义运行时配置项：
+
 ```js
 api.addRuntimePluginKey(() => 'access');
 ```
-plugin-acess插件读取配置项：
+
+plugin-access 插件读取配置项：
+
 ```js
 const runtimeConfig = plugin.applyPlugins({
     key: 'access',
     type: ApplyPluginsType.modify,
-    initialValue: {}
+    initialValue: {},
 });
 ```
 
 而用户则只需要配置：
+
+```js
+// app.js
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    access: memo => ({
+        ...memo
+        unAccessHandler({
+            router, to, from, next
+        }) {
+            // 处理逻辑
+        },
+        noFoundHandler({
+            router, to, from, next
+        }) {
+            // 处理逻辑
+        },
+    }),
+});
+```
+
+## 配置智能提示
+
+配置可以单独导出，也可以通过 `defineRuntimeConfig` 工具函数获取类型提示。
+
+方式一（推荐，有类型提示）：
+
+```js
+// app.js
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    access: memo => ({
+        ...memo
+        unAccessHandler({
+            router, to, from, next
+        }) {
+            // 处理逻辑
+        },
+        noFoundHandler({
+            router, to, from, next
+        }) {
+            // 处理逻辑
+        },
+    }),
+    // ...其他配置项
+});
+```
+
+方式二：
+
 ```js
 // app.js
 export const access = memo => ({
@@ -37,7 +92,6 @@ export const access = memo => ({
         // 处理逻辑
     },
 });
-
 ```
 
 ## 配置项
@@ -49,6 +103,7 @@ beforeRender(lastOpts)
 在渲染之前执行，执行`action`过程中显示 `loading` 配置的组件，执行结果作为参数 `initialState` 传给 `modifyClientRenderOpts`。
 
 示例：
+
 ```js
 // app.js
 import { access } from '@fesjs/fes';
@@ -65,31 +120,32 @@ export function beforeRender(lastOpts) {
                 setTimeout(() => {
                     setRole('admin');
                     resolve({
-                        userName: 'harrywan'
+                        userName: 'harrywan',
                     });
                 }, 1000);
             });
-        }
+        },
-    }
+    };
-};
+}
 ```
 
 ### patchRoutes
 
 patchRoutes({routes })
 
-
 修改路由。
 
 比如在最前面添加一个 /foo 路由：
-```
+
+```js
 export function patchRoutes({ routes }) {
-  routes.unshift({
+    routes.unshift({
-    path: '/foo',
+        path: '/foo',
-    component: require('@/extraRoutes/foo').default,
+        component: require('@/extraRoutes/foo').default,
-  });
+    });
 }
 ```
+
 :::tip
 直接修改 `routes`, 不需要返回
 :::
@@ -99,18 +155,20 @@ export function patchRoutes({ routes }) {
 modifyClientRenderOpts(lastOpts)
 
 修改 `clientRender` 参数。参数是一个对象：
-- routes，路由配置信息
+
-- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
+-   routes，路由配置信息
-- initialState， 初始化数据，`beforeRender` 运行得到的数据。
+-   rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
+-   initialState， 初始化数据，`beforeRender` 运行得到的数据。
 
 比如在微前端里动态修改渲染根节点：
+
 ```js
 let isSubApp = false;
 export function modifyClientRenderOpts(lastOpts) {
-  return {
+    return {
-    ...lastOpts,
+        ...lastOpts,
-    rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,    
+        rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,
-  };
+    };
 }
 ```
 
@@ -120,12 +178,13 @@ rootContainer(LastRootContainer, args)
 
 修改交给 Vue 渲染时的根组件，默认是 `<RouterView></RouterView>`。
 
-- LastRootContainer，上一个插件修改后的结果。
+-   LastRootContainer，上一个插件修改后的结果。
-- args，包含：
+-   args，包含：
-    - routes，全量路由配置
+    -   routes，全量路由配置
-    - plugin，运行时插件机制
+    -   plugin，运行时插件机制
+
+比如在可以包一层 DIV：
 
-比如在可以包一层DIV：
 ```js
 export function rootContainer(container) {
     return () => {
@@ -133,8 +192,8 @@ export function rootContainer(container) {
             <div>
                 <RouterView></RouterView>
             </div>
-        )
+        );
-  }
+    };
 }
 ```
 
@@ -145,14 +204,14 @@ onAppCreated({app})
 创建 app 实例后触发。
 
 比如用于安装 Vue 插件：
+
 ```js
-import { createRouter } from "vue-router";
+import { createRouter } from 'vue-router';
 
 export function onAppCreated({ app }) {
     const router = createRouter();
     app.use(router);
 }
-
 ```
 
 ### render
@@ -163,22 +222,22 @@ render(oldRender: Function)
 
 比如用于渲染之前做权限校验。
 
-
-
 ### onRouterCreated
 
 onRouterCreated({router})
 
-生成router时触发。
+生成 router 时触发。
 
 比如用于收集切换路由的记录：
+
 ```js
 export function onRouterCreated({ router }) {
     router.afterEach((to, from) => {
-        console.log(to)
+        console.log(to);
     });
 }
 ```
 
 ## 更多配置项
-Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。
+
+Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

docs/guide/template.md

@@ -1,56 +1,52 @@
 # HTML 模板
 
-Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认模板内容是：
+Fes.js 默认模板内容是：
+
 ```html
 <!DOCTYPE html>
 <html>
-  <head>
+    <head>
-    <meta charset="utf-8">
+        <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
+        <title><%= title %></title>
-  </head>
+    </head>
-  <body>
+    <body>
-    <div id="app"></div>
+        <div id="<%= mountElementId %>"></div>
-  </body>
+    </body>
 </html>
 ```
 
-## 自定义模板
+## 修改页面标题
-在 `src/public` 文件夹中创建`index.html`，Fes.js 约定如果这个文件存在，则会替换默认模板。
 
-## 模板配置
-在配置文件（`.fes.js`）中配置 `html`，把[配置](https://github.com/jantimon/html-webpack-plugin#options)的对象作为参数传入 `html-webpack-plugin` 实例。
-
-举个 :chestnut: ：
 ```js
+// .fes.js
 export default {
-    html: {
+    title: '这是页面标题',
-        title: '海贼王'
+};
-    }
-}
 ```
-页面的标题会设置成'海贼王'。
+
+页面的标题会设置成 `这是页面标题`。
 
 ## 模板变量
-当然我们也可以手动编写模板，在模板中添加`link`、`link`、`meta`等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：
 
-- **htmlWebpackPlugin**，特定于此插件的数据
+模版中可以使用的变量：
-- **webpackConfig**，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
+
-- **compilation**，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()
+-   `NODE_ENV`: Node.js 环境变量
+-   `FES_ENV`: Fes.js 环境变量
+-   `BASE_URL`: publicPath
+-   `.env.**`: 文件中以 `FES_APP_` 开头的变量
 
 举个 🌰 ：
-```html
+
-<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
+```env
+# .env
+FES_APP_HELLO_WORLD=hello world
 ```
 
-除上述 `html-webpack-plugin` 插件提供的变量外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
-- `NODE_ENV`
-- `FES_ENV`
-- `.env` 文件中以 `FES_APP_` 开头的变量
-
-举个 🌰 ：
-
 ```html
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-```
+<body>
+    <div><%= FES_APP_HELLO_WORLD %></div>
+</body>
+```

docs/guide/upgrade3.md

@@ -1,6 +1,6 @@
-# 从 2.0.x 迁移到 2.1.x
+# 从 2.0.x 迁移到 3.0.x
 
-## 版本 2.1.x 的 break
+## 版本 3.0.x 的 break
 
 1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下。
 2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。

docs/reference/config/README.md

@@ -2,9 +2,36 @@
 sidebar: auto
 ---
 
-# 配置
+## 配置文件
 
-## alias
+Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
+
+### 配置文件解析
+
+Fes.js 会自动解析项目根目录下的 `.fes.js` 文件。
+
+最基础的配置文件是这样的：
+
+```js
+// .fes.js
+export default {};
+```
+
+可以通过环境变量 `FES_ENV` 进行环境差异化配置，当我们运行 `FES_ENV=prod fes dev` 时，Fes.js 会找到 `.fes.js` 和 `.fes.prod.js`(可选) 的配置文件进行 `deepmerge`。
+
+### 配置智能提示
+
+可以通过 `defineBuildConfig` 工具函数获取类型提示：
+
+```js
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineBuildConfig({});
+```
+
+## 共享配置
+
+### alias
 
 -   类型： `object`
 -   默认值： `{}`
@@ -24,29 +51,7 @@ export default {
 
 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
 
-## analyze
+### autoprefixer
-
--   类型： `object`
--   默认值：
-
-```js
-{
-    analyzerMode: process.env.ANALYZE_MODE || 'server',
-    analyzerPort: process.env.ANALYZE_PORT || 8888,
-    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
-    // generate stats file while ANALYZE_DUMP exist
-    generateStatsFile: !!process.env.ANALYZE_DUMP,
-    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
-    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
-    defaultSizes: 'parsed' // stat  // gzip
-}
-```
-
--   详情：
-
-    构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
-
-## autoprefixer
 
 -   类型： `object`
 -   默认值：
@@ -61,7 +66,7 @@ export default {
 
     [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
 
-## base
+### base
 
 -   类型： `string`
 -   默认值： `''`
@@ -69,57 +74,11 @@ export default {
 
     设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
 
-## chainWebpack
+::: warning 2.1.x 已废弃
+2.1.x 版本请使用 router.base 代替
+:::
 
--   类型：`function`
+### define
--   默认值：`null`
--   详情：
-
-    通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
-
-示例：
-
-```js
-export default {
-    chainWebpack(memo, { env, webpack }) {
-        // 删除 fes 内置插件
-        memo.plugins.delete('copy');
-    },
-};
-```
-
-## cssLoader
-
--   类型： `object`
--   默认值： `''`
--   详情：
-
-    设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
-
-## copy
-
--   类型： `Array(string) || Array(object)`
--   默认值： `[]`
--   详情：
-
-    设置要复制到输出目录的文件、文件夹。
-
-    配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
-
--   示例：
-
-```js
-export default {
-    copy: {
-        from: '/src/assets/images',
-        to: 'assets/images',
-    },
-};
-```
-
-上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
-
-## define
 
 -   类型： `object`
 -   默认值： `{}`
@@ -137,29 +96,7 @@ export default {
 
 然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。
 
-## devServer
+### dynamicImport
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    配置开发服务器。支持以下子配置项：
-
-    -   port，端口号，默认 `8000`
-    -   host，默认 `localhost`
-    -   https，是否启用 https server，同时也会开启 HTTP/2
-
-    启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
-
-## devtool
-
--   类型： `string`
--   默认值： `cheap-module-source-map` in dev, `undefined` in build
--   详情：
-
-    用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
-
-## dynamicImport
 
 -   类型： `boolean`
 -   默认值： false
@@ -167,97 +104,7 @@ export default {
 
     路由是否按需加载
 
-## exportStatic
+### inlineLimit
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-配置 `html` 的输出形式，默认只输出 `index.html`。
-
-如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
-
-比如以下路由，
-
-```
-/
-/users
-/list
-```
-
-不开启 `exportStatic` 时，输出，
-
-```
-- index.html
-```
-
-设置 `exportStatic: {}` 后，输出，
-
-```
-- index.html
-- users.html
-- list.html
-```
-
-## externals
-
--   类型：`object`
--   默认值：`{}`
--   详情：
-
-    设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
-
-示例：
-
-```js
-export default {
-    externals: {
-        vue: 'window.Vue',
-    },
-};
-```
-
-## extraBabelPlugins
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-配置额外的 `babel` 插件。
-
--   示例：
-
-```js
-export default {
-    extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
-};
-```
-
-## extraBabelPresets
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-配置额外的 `babel` 插件集。
-
-## extraPostCSSPlugins
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-    设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
-
-## html
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
-
-## inlineLimit
 
 -   类型： `number`
 -   默认值： `8192`(8k)
@@ -265,15 +112,7 @@ export default {
 
     配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
 
-## lessLoader
+### mock
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
-
-## mock
 
 -   类型： `object || boolean`
 -   默认值： `{}`
@@ -296,7 +135,7 @@ export default {
 
 然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。
 
-## mountElementId
+### mountElementId
 
 -   类型： `string`
 -   默认值： `app`
@@ -304,15 +143,7 @@ export default {
 
     指定渲染到的 HTML 元素 id。
 
-## nodeModulesTransform
+### outputPath
-
--   类型： `object`
--   默认值： `{ exclude: [] }`
--   详情：
-
-    默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
-
-## outputPath
 
 -   类型： `string`
 -   默认值： `dist`
@@ -324,7 +155,7 @@ export default {
 不允许设定为 `src`、`public`、`pages` 等约定目录。
 :::
 
-## plugins
+### plugins
 
 -   类型： `Array(string)`
 -   默认值： `[]`
@@ -348,15 +179,7 @@ export default {
 };
 ```
 
-## postcssLoader
+### proxy
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
-
-## proxy
 
 -   类型： `object`
 -   默认值： `{}`
@@ -379,23 +202,23 @@ export default {
 
 然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。
 
-## publicPath
+### publicPath
 
 -   类型： `string`
 -   默认值： `/`
 -   详情：
 
-    配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
+    静态资源 publicPath。当打包的时候在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
 
-## router
+### router
 
 -   类型： `object`
--   默认值： `{ mode: 'hash' }`
+-   默认值： `{ mode: 'hash', base: '/' }`
 -   详情：
 
     配置路由，具体请查看指南中关于路由的介绍
 
-## singular
+### singular
 
 -   类型： `boolean`
 -   默认值： `false`
@@ -403,7 +226,7 @@ export default {
 
     配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。
 
-## targets
+### targets
 
 -   类型： `object`
 -   默认值： `{}`
@@ -411,7 +234,7 @@ export default {
 
     配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
 
-## terserOptions
+### terserOptions
 
 -   类型： `object`
 -   默认值：
@@ -459,10 +282,268 @@ const defaultTerserOptions = {
 
     配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
 
-## vueLoader
+### title
+
+-   类型： `string`
+-   详情：
+
+    html 页面标题
+
+## webpack 专属配置
+
+### analyze
+
+-   类型： `object`
+-   默认值：
+
+```js
+{
+    analyzerMode: process.env.ANALYZE_MODE || 'server',
+    analyzerPort: process.env.ANALYZE_PORT || 8888,
+    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
+    // generate stats file while ANALYZE_DUMP exist
+    generateStatsFile: !!process.env.ANALYZE_DUMP,
+    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
+    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
+    defaultSizes: 'parsed' // stat  // gzip
+}
+```
+
+-   详情：
+
+    构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
+
+### chainWebpack
+
+-   类型：`function`
+-   默认值：`null`
+-   详情：
+
+    通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
+
+示例：
+
+```js
+export default {
+    chainWebpack(memo, { env, webpack }) {
+        // 删除 fes 内置插件
+        memo.plugins.delete('copy');
+    },
+};
+```
+
+### cssLoader
+
+-   类型： `object`
+-   默认值： `''`
+-   详情：
+
+    设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
+
+### copy
+
+-   类型： `Array(string) || Array(object)`
+-   默认值： `[]`
+-   详情：
+
+    设置要复制到输出目录的文件、文件夹。
+
+    配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
+
+-   示例：
+
+```js
+export default {
+    copy: {
+        from: '/src/assets/images',
+        to: 'assets/images',
+    },
+};
+```
+
+上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
+
+### devServer
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+    配置开发服务器。支持以下子配置项：
+
+    -   port，端口号，默认 `8000`
+    -   host，默认 `localhost`
+    -   https，是否启用 https server，同时也会开启 HTTP/2
+
+    启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
+
+### devtool
+
+-   类型： `string`
+-   默认值： `cheap-module-source-map` in dev, `undefined` in build
+-   详情：
+
+    用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
+
+### exportStatic
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+配置 `html` 的输出形式，默认只输出 `index.html`。
+
+如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
+
+比如以下路由，
+
+```
+/
+/users
+/list
+```
+
+不开启 `exportStatic` 时，输出，
+
+```
+- index.html
+```
+
+设置 `exportStatic: {}` 后，输出，
+
+```
+- index.html
+- users.html
+- list.html
+```
+
+### externals
+
+-   类型：`object`
+-   默认值：`{}`
+-   详情：
+
+    设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
+
+示例：
+
+```js
+export default {
+    externals: {
+        vue: 'window.Vue',
+    },
+};
+```
+
+### extraBabelPlugins
+
+-   类型： `array`
+-   默认值： `[]`
+-   详情：
+
+配置额外的 `babel` 插件。
+
+-   示例：
+
+```js
+export default {
+    extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
+};
+```
+
+### extraBabelPresets
+
+-   类型： `array`
+-   默认值： `[]`
+-   详情：
+
+配置额外的 `babel` 插件集。
+
+### extraPostCSSPlugins
+
+-   类型： `array`
+-   默认值： `[]`
+-   详情：
+
+    设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
+
+### html
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+    设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
+
+### lessLoader
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+    设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
+
+### nodeModulesTransform
+
+-   类型： `object`
+-   默认值： `{ exclude: [] }`
+-   详情：
+
+    默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
+
+### postcssLoader
+
+-   类型： `object`
+-   默认值： `{}`
+-   详情：
+
+    设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
+
+### vueLoader
 
 -   类型： `object`
 -   默认值：`{}`
 -   详情：
 
     配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)
+
+## Vite 专属配置
+
+### viteOption
+
+-   类型： `object`
+-   详情：
+
+    Vite 的配置，详情请看 [Vite Config](https://cn.vitejs.dev/config/)
+
+### viteVuePlugin
+
+-   类型： `object`
+-   详情：
+
+    自定义 [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) 的配置。
+
+### viteVueJsx
+
+-   类型： `object`
+-   详情：
+
+    自定义 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 的配置。
+
+### viteLegacy
+
+-   类型： `object`
+-   详情：
+
+    自定义 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 的配置。
+
+### viteHtml
+
+-   类型： `object`
+-   详情：
+
+    自定义 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的配置。
+
+## 更多配置项
+
+Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

docs/reference/plugin/README.md

@@ -17,6 +17,7 @@
 | [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
 | [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
 | [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
+| [@fesjs/plugin-watermark](./plugins/watermark.md) | 水印 |
 
 ## 架构
 

docs/reference/plugin/dev/api.md

@@ -420,7 +420,7 @@ api.addBeforeMiddlewares(() => {
 
 
 ### addTmpGenerateWatcherPaths
-添加重新临时文件生成的监听路径。
+添加重新生成临时文件的监听路径。
 
 例如：
 ```js

docs/reference/plugin/plugins/access.md

@@ -1,15 +1,13 @@
 # @fesjs/plugin-access
 
-
-
 ## 介绍
 对于前端应用来说，权限就是页面、页面元素是否可见。
 
 ### 资源
-Fes.js 把页面、页面元素统一叫做资源，每个资源都有 `accessId`：
+Fes.js 把页面、页面元素统一叫做资源，用资源 ID 来识别区分他们：
-- 页面的 `accessId` 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
+- 页面的资源 ID 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
   
-- 页面元素的 `accessId` 没有默认值，由我们自定义。
+- 页面元素的资源 ID 没有默认值，需要自定义。
 ```vue
 <template>
     <access :id="accessId"> accessOnepicess1 <input /> </access>
@@ -71,9 +69,7 @@ export default {
 }
 ```
 
-## 配置
+## 编译时配置
-
-### 编译时配置
 在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
 ```js
 export default {
@@ -85,7 +81,7 @@ export default {
 }
 ```
 
-#### roles
+### roles
 - **类型**：对象
   
 - **默认值**：`{}`
@@ -95,10 +91,10 @@ export default {
   角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
 
 
-### 运行时配置
+## 运行时配置
 在 `app.js` 中配置
 
-#### unAccessHandler
+### unAccessHandler
 - **类型**：`Function`
   
 - **默认值**：`null`
@@ -130,7 +126,7 @@ export const access = {
 
 ```
 
-#### noFoundHandler
+### noFoundHandler
 - **类型**：`Function`
   
 - **默认值**：`null`
@@ -167,15 +163,15 @@ import { access } from '@fesjs/fes'
 ```
 
 #### access.hasAccess
-- **类型**：函数
+- **类型**：( accessId: string | number ) => Promise<boolean>
   
 - **详情**: 判断某个资源是否可见。
 - **参数**：
   - accessId，资源Id
-- **返回值**：Boolean
+- **返回值**：是否有权限
 
 #### access.isDataReady
-- **类型**：函数
+- **类型**：() => boolean
   
 - **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
 - **参数**：null

docs/reference/plugin/plugins/editor.md

@@ -15,9 +15,8 @@
 }
 ```
 
-## 配置
 
-### 编译时配置
+## 编译时配置
 在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
 ```js
 export default {
@@ -29,17 +28,17 @@ export default {
 我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
 
 
-#### filename
+### filename
 - **类型**：自定义worker脚本名称
   
 - **默认值**：`'[name].worker.js'`
 
-#### publicPath
+### publicPath
 - **类型**：自定义worker脚本的路径
   
 - **默认值**：`''`
 
-#### languages
+### 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']`

docs/reference/plugin/plugins/layout.md

@@ -20,7 +20,7 @@
 {
     "dependencies": {
         "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-layout": "^2.0.0"
+        "@fesjs/plugin-layout": "^4.0.0"
     },
 }
 ```
@@ -74,9 +74,8 @@ export default {
 
 - **logo**：logo和标题区域。
 
-## 配置
 
-### keep-alive
+## keep-alive
 从 4.0.7 开始支持配置路由页面缓存：
 ```
 <config lang="json">
@@ -86,7 +85,7 @@ export default {
 </config>
 ```
 
-### 编译时配置
+## 编译时配置
 在 `.fes.js` 中配置：
 ```js
 export default {
@@ -115,74 +114,73 @@ export default {
             name: 'store'
         }, {
             name: 'simpleList'
-        }]
+        }],
+        menuConfig: {
+            defaultExpandAll: false,
+            expandedKeys: [],
+            accordion: false
+        }
     },
 ```
 
-#### footer
+### footer
 - **类型**：`String`
   
 - **默认值**：`null`
 
 - **详情**：页面底部的文字。
 
-#### theme
+### theme
 - **类型**：`String`
   
 - **默认值**：`dark`
 
 - **详情**：主题，可选有 `dark`、`light`
 
-#### navigation
+### navigation
 - **类型**：`String`
   
 - **默认值**：`side`
 
 - **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin` 
 
-#### fixedHeader
+### fixedHeader
 - **类型**：`Boolean`
   
 - **默认值**：`false`
 
 - **详情**：是否固定头部，不跟随页面滚动。
 
-#### fixedSideBar
+### fixedSideBar
 - **类型**：`Boolean`
   
 - **默认值**：`true`
 
 - **详情**：是否固定sidebar，不跟随页面滚动。
 
-#### title
+### title
 - **类型**：`String`
   
 - **默认值**：`name` in package.json
 
 - **详情**：产品名，会显示在 Logo 旁边。   
 
-#### logo
+### logo
 - **类型**：`String`
   
 - **默认值**：默认提供 fes.js 的 Logo
 
-- **详情**：Logo，会显示在布局上。
+- **详情**：Logo的链接
 
-#### locale
-- **类型**：`boolean`
-  
-- **默认值**：`false`
 
-- **详情**：是否显示语言选择框。
+### multiTabs
-
-#### multiTabs
 - **类型**：`boolean`
   
 - **默认值**：`false`
 
 - **详情**：是否开启多页。
 
-#### menus
+### menus
 - **类型**：`Array`
   
 - **默认值**：`[]`
@@ -219,9 +217,21 @@ export default {
 ```
   
   - **children**：子菜单配置。
+
+### menusConfig
+- **类型**：`Object`
   
+- **默认值**：`{}`
+
+- **详情**：菜单的配置：
   
-### 运行时配置
+  - **defaultExpandAll**：是否默认展开全部菜单。
+  
+  - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+
+  - **accordion**：是否只保持一个子菜单的展开。
+  
+## 运行时配置
 在 `app.js` 中配置：
 ```js
 import UserCenter from '@/components/UserCenter';
@@ -231,35 +241,67 @@ export const layout = {
 
 ```
 
-#### header
+### menus
+- **类型**：`(defaultMenus: [] )=> Ref | []`
+  
+- **详情**：运行时修改菜单，入参是默认菜单配置（.fes.js中的menu配置），需要返回一个`Ref`或者数组。
+
+```js
+import { ClusterOutlined } from '@fesjs/fes-design/icon'
+export const layout = layoutConfig => ({
+    ...layoutConfig,
+    customHeader: <UserCenter />,
+    menus: (defaultMenuData) => {
+        const menusRef = ref(defaultMenuData);
+        watch(() => layoutConfig.initialState.userName, () => {
+            menusRef.value = [{
+                name: 'store',
+                icon: <ClusterOutlined />
+            }];
+        });
+        return menusRef;
+    }
+});
+
+```
+`layoutConfig.initialState` 是 `beforeRender.action`执行后创建的应用初始状态数据。         
+
+如果菜单需要根据某些状态动态改变，则返回`Ref`，否则只需要返回数组。
+
+:::tip
+在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。
+:::
+
+
+### header
 - **类型**：`String`
   
 - **默认值**：`true`
 
 - **详情**：是否显示 header 区域。
 
-#### sidebar
+### sidebar
 - **类型**：`String`
   
 - **默认值**：`true`
 
 - **详情**：是否显示 sidebar 区域。
 
-#### logo
+### logo
 - **类型**：`String`
   
 - **默认值**：`true`
 
 - **详情**：是否显示 logo 区域。
 
-#### customHeader
+### customHeader
 - **类型**：Vue Component
   
 - **默认值**：`null`
 
 - **详情**：top的区域部分位置提供组件自定义功能。
 
-#### unAccessHandler
+### unAccessHandler
 - **类型**：`Function`
   
 - **默认值**：`null`
@@ -291,7 +333,7 @@ export const access = {
 
 ```
 
-#### noFoundHandler
+### noFoundHandler
 - **类型**：函数
   
 - **默认值**：null
@@ -318,3 +360,14 @@ export const access = {
 };
 
 ```
+
+### logoUrl
+- **类型**：`String`
+  
+- **默认值**：默认提供 fes.js 的 Logo
+
+- **详情**：Logo的链接。
+
+
+### 其他运行时配置 (> 4.1.0)
+编译时配置的内容同样支持在运行时配置，但是`logo`除外，用`logoUrl`替代。

docs/reference/plugin/plugins/request.md

@@ -42,12 +42,15 @@ export default {
 ```js
 export const request = {
     // 格式化 response.data (只有 response.data 类型为 object 才会调用)
-    responseDataAdaptor: (data) => {},
+    responseDataAdaptor: (data) => {
+        data.code = data.code === '200' ? '0' : data.code;
+        return data;
+    },
     // 关闭 response data 校验（只判断 xhr status）
     closeResDataCheck: false,
     // 请求拦截器
     requestInterceptors: [],
-    // 相应拦截器
+    // 响应拦截器
     responseInterceptors: [],
     // 错误处理
     // 内部以 reponse.data.code === '0' 判断请求是否成功

docs/reference/plugin/plugins/sass.md

@@ -3,7 +3,11 @@
 
 
 ## 介绍
-Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`
+Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。
+
+::: tip webpack 构建 sass 插件
+如果使用 Vite 构建，直接装 `sass` 依赖即可，不需要安装此插件。
+:::
 
 ## 启用方式
 在 `package.json` 中引入依赖：

docs/reference/plugin/plugins/vuex.md

@@ -2,12 +2,26 @@
 ## 介绍
 集成vuex插件
 
-增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示
+增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示
-
-约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
 
+约定模式，module和plugin定义放在stores目录下，文件名包含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都是通过传入字符路径，如：
+先定义在stores下定义user模块，包含嵌套模块
-```js
-import { useStore } from 'vuex';
-const store = useStore();
-store.getters['user/address']
-store.commit('counter/increment')
-store.dispatch('user/login')
-```
 
-使用该插件，可以利用导出的事件类型，如：
+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';
-const store = useStore();
+
-store.getters[GETTER_TYPES.user.address]
+export default {
-store.commit(MUTATION_TYPES.counter.increment)
+    setup() {
-store.dispatch(ACTION_TYPES.user.login)
+        const store = useStore();
+        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的所有事件类型

docs/reference/plugin/plugins/watermark.md

@@ -0,0 +1,72 @@
+# @fesjs/plugin-watermark
+
+## 介绍
+给页面添加水印效果
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@fesjs/fes": "^2.0.0",
+        "@fesjs/plugin-watermark": "^2.0.0"
+    }
+}
+```
+
+## 编译时配置
+
+```js
+export default {
+    watermark: {
+        disabled: false
+    },
+}
+```
+
+### disabled
+
+是否禁用水印，默认是`false`。
+
+可以在开发环境关闭水印：
+
+```js
+export default {
+    watermark: {
+        disabled: true
+    },
+}
+```
+
+## API
+
+### createWatermark
+
+创建水印功能，通过 `@fesjs/fes` 导入 API：
+
+```js
+import { createWatermark, destroyWatermark } from '@fesjs/fes';
+
+createWatermark({ content: '我是水印' }); // 生成水印
+destroyWatermark(); // 销毁水印
+```
+
+默认参数是：
+```js
+{
+    content = '请勿外传',
+    container = document.body,
+    width = 300,
+    height = 300,
+    textAlign = 'center',
+    textBaseline = 'middle',
+    fontSize = '14px',
+    fontFamily = 'Microsoft Yahei',
+    fillStyle = 'rgba(184, 184, 184, 0.3)',
+    rotate = 25,
+    zIndex = 99999,
+    timestamp = 'YYYY-MM-DD HH:mm'
+}
+```
+
+如果不需要时间戳，则可以设置`timestamp`为`false`。

docs/reference/plugin/plugins/windicss.md

@@ -19,8 +19,8 @@
 
 在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)：
 
-```
+```js
-{
+export default {
     windicss: {
         root: './',
     }

docs/zh/README.md

@@ -1,67 +0,0 @@
----
-home: true
-title: 首页
-heroImage: /logo.png
-actions:
-  - text: 快速上手
-    link: /zh/guide/getting-started.html
-    type: primary
-  - text: 项目简介
-    link: /zh/guide/
-    type: secondary
-features:
-  - title: Fast
-    details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件，可以满足大部分日常开发需求。
-  - title: Easy
-    details: 基于Vue.js 3.0，上手简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
-  - title: Strong
-    details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。
-  - title: 可扩展
-    details: 借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
-  - title: 面向未来
-    details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
-  - title: 令人愉悦
-    details: 我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
-footer: MIT Licensed | Copyright © 2020-present Webank
----
-
-## 像数 1, 2, 3 一样容易
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 创建模板
-yarn create @fesjs/fes-app myapp
-
-# 安装依赖
-yarn 
-
-# 运行
-yarn dev
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 创建模板
-npx @fesjs/create-fes-app myapp
-
-# 安装依赖
-npm install 
-
-# 运行
-npm run dev
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## 反馈
-
-| Github Issue  | 微信群 | 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"/> |
-

docs/zh/guide/README.md

@@ -1,76 +0,0 @@
-
-# 介绍
-
-
-
-## 痛点
-
-在开发一个前端项目之前，我们可能需要做如下准备工作：
-- 搭建开发环境
-- 约定代码规范
-- 封装API请求
-- 配置路由
-- 实现布局、菜单、导航
-- 实现登录
-- 权限管理
-- ...
-
-除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
-
-## Fes.js 是什么？
-
-Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。     
-
-它主要具备以下特点：
-- 🚀  __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。  
-  
-- 🧨  __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
-
-- 💪  __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
-
-- 📦  __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
-
-- 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
-
-
-## Fes.js 如何工作？
-
-### 架构
-<!-- ![架构](/framework.png "架构") -->
-<img :src="$withBase('framework.png')" alt="架构">
-
-Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
-
-### 插件和插件集
-<p>
-    <img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
-</p>
-Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。
-
-### .fes 临时文件
-.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。
-
-你通常会在 .fes 下看到以下目录
-```
-+ .fes
-  + core     # 内部插件生成
-  + pluginA  # 外部插件生成
-  + presetB  # 外部插件生成
-  + fes.js   # 入口文件
-```
-
-临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。
-
-你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。
-
-
-
-## 为什么不是 ...?
-
-### Vue CLI
-
-Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。
-
-### UMI
-
-UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架，贯彻着函数式编程的思维。而 Vue 有所不同，虽然 Vue 3.0 向函数式迈了一大步，但大家可能依然喜欢编写 `.vue`文件，而非 `.jsx` 文件。两种思维方式会导致部分API设计上有所差异，虽然 UMI 有 `plugin-vue` ，但不太 "vue"。推荐喜欢 React 的同学使用 UMI。

docs/zh/guide/config.md

@@ -1,113 +0,0 @@
-# 编译时配置
-
-Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
-
-一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))：
-
-```js
-import { defineBuildConfig } from '@fesjs/fes';
-
-export default defineBuildConfig({
-    base: '/foo/',
-    publicPath: '/',
-    devServer: {
-        port: 8080,
-    },
-    mock: {
-        prefix: '/v2',
-    },
-    proxy: {
-        '/v2': {
-            target: 'https://api.douban.com/',
-            changeOrigin: true,
-        },
-    },
-    layout: {
-        title: 'Fes.js',
-        footer: 'Created by MumbelFe',
-        multiTabs: false,
-        menus: [
-            {
-                name: 'index',
-            },
-            {
-                name: 'onepiece',
-            },
-            {
-                name: 'store',
-            },
-            {
-                name: 'simpleList',
-            },
-        ],
-    },
-});
-```
-
-## 本地临时配置文件
-
-可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。
-
-```js
-// .fes.js
-export default { mock: false };
-
-// .fes.local.js
-export default {
-    mock: true,
-    devServer: { port: 8080 }
-};
-```
-
-最终的配置是：
-
-```js
-{
-    mock: true,
-    devServer: { port: 8080 }
-};
-```
-
-::: warning
-`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。
-:::
-
-## 多环境多份配置
-
-可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。
-
-比如配置如下：
-
-```js
-// .fes.js
-export default { mock: false };
-
-// .fes.uat.js
-export default {
-    mock: true,
-    devServer: { port: 8080 }
-};
-```
-
-当我们运行：
-
-```bash
-FES_ENV=uat fes dev
-```
-
-这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是：
-
-```js
-{
-    mock: true,
-    devServer: { port: 8080 }
-};
-```
-
-## 优先级
-
-本地临时配置 > 环境配置 > 基础配置
-
-::: tip
-如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
-:::

docs/zh/guide/contributing.md

@@ -1,70 +0,0 @@
-# 贡献指南
-
-## 概览
-
-项目仓库借助于 [Yarn Classic 工作区](https://classic.yarnpkg.com/zh-Hans/docs/workspaces) 来实现 [Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，在 `packages` 目录下存放了多个互相关联的独立 Package 。
-
-- `@fesjs/create-fes-app`: 创建项目模板模块。提供`create-fes-app`命令，提供创建多种类型项目模板的能力。
-  
-- `@fesjs/fes`: 入口模块。提供`fes`命令和 API 入口。 
-
-- `@fesjs/compiler`: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。
-
-- `@fesjs/runtime`: 运行时插件模块。集成了vue-router，定义运行时插件生命周期、插件通讯机制。
-
-- `@fesjs/preset-build-in`: 内置插件集。包含`dev`、`build`等命令，集成webpack5+babel，提供方便编写插件的API，入口文件处理，路由处理等能力。
-
-- `@fesjs/fes-template`: 适用于PC类型的模板项目。
-
-- `@fesjs/fes-template-h5`: 适用于H5类型的模板项目。
-
-- `@fesjs/plugin-${name}`: 官方插件。
-
-- `@fesjs/fes`: 是 `@fesjs/compiler` + `@fesjs/runtime` + `@fesjs/preset-build-in` 的封装。用户只需要安装此依赖和额外的插件或者插件集。
-
-## 开发配置
-
-开发要求：
-
-- [Node.js](http://nodejs.org) **version 12+**
-- [Yarn v1 classic](https://classic.yarnpkg.com/zh-Hans/docs/install)
-
-克隆代码仓库，并安装依赖：
-
-```bash
-yarn
-```
-
-监听源文件修改：
-
-```bash
-yarn build
-```
-
-打开另一个终端，开始开发项目文档网站：
-
-```bash
-yarn docs:dev
-```
-
-本项目开发使用的一些主要工具：
-
-- [Jest](https://jestjs.io/) 用于单元测试
-- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) 用于代码检查和格式化
-- [@umi/father](https://github.com/umijs/father) 用于将ES6语法编译成ES5或者CommonJS
-
-## 开发脚本
-
-### `yarn build`
-
-`build` 命令会使用 `father-build` 将 ES6 编译为 CommonJS。
-
-本项目在编写Node端的代码时也用ES6，所以你在克隆代码仓库后，可能需要先执行该命令来确保项目代码可以顺利运行，因为编译后的 JS 文件被 `.gitignore` 排除在仓库以外了。
-### `yarn docs:dev`
-`docs:` 前缀表明，这些命令是针对文档 (documentation) 进行操作的，即 `docs` 目录。      
-使用 Vue Press在本地启动文档网站服务器，用于实时查看文档效果。
-
-### 调试功能
-在开发完插件代码后，需要在template项目中验证功能
-- 进入`packages/template`目录
-- 执行`yarn dev`

docs/zh/guide/css.md

@@ -1,48 +0,0 @@
-# 使用 css
-
-:::tip
-本文档以 css 为示例，把后缀换成 `.less` 同样适用。
-:::
-
-## 全局样式
-Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。
-
-比如用于覆盖样式，
-```css
-.layout-content {
-  max-width: 1000px;
-}
-```
-
-## 组件内样式
-```vue
-<style>
-.layout-content {
-  max-width: 1000px;
-}
-</style>
-```
-
-## 引入第三方样式
-可以直接通过 `import` 引入第三方组件，当然最好在入口文件`app.js`中引入
-``` js
-// src/app.js
-import 'bootstrap/dist/css/bootstrap.css'
-```
-
-## 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` 插件的形式支持。

docs/zh/guide/directory-structure.md

@@ -1,138 +0,0 @@
-# 目录结构
-
-在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的：
-
-```
-fes-template
-├── package.json
-├── tsconfig.json
-├── mock.js
-├── .fes.js
-├── .env
-├── index.html
-├── dist
-├── public
-│   └── logo.png
-└── src
-    ├── .fes
-    └── pages
-    │    └── index.vue
-    └── app.js
-```
-
-### package.json
-
-```json
-{
-    "name": "@fesjs/template",
-    "version": "2.0.0",
-    "description": "fes项目模版",
-    "scripts": {
-        "build": "fes build",
-        "prod": "FES_ENV=prod fes build",
-        "analyze": "ANALYZE=1 fes build",
-        "dev": "fes dev",
-        "test": "fes test"
-    },
-    "keywords": ["管理端", "fes", "fast", "easy", "strong"],
-    "files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"],
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-        "directory": "packages/fes-template"
-    },
-    "author": "harrywan",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/WeBankFinTech/fes.js/issues"
-    },
-    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-    "publishConfig": {
-        "access": "public"
-    },
-    "devDependencies": {
-        "@webank/eslint-config-webank": "0.3.1"
-    },
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-access": "^2.0.0",
-        "@fesjs/plugin-layout": "^3.0.0",
-        "@fesjs/plugin-locale": "^3.0.0",
-        "@fesjs/plugin-model": "^2.0.0",
-        "@fesjs/plugin-enums": "^2.0.0",
-        "@fesjs/plugin-jest": "^2.0.0",
-        "@fesjs/plugin-vuex": "^2.0.0",
-        "@fesjs/plugin-request": "^2.0.0",
-        "@fesjs/plugin-qiankun": "^2.0.0",
-        "@fesjs/plugin-sass": "^2.0.0",
-        "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
-        "@fesjs/plugin-windicss": "^2.0.0",
-        "@fesjs/fes-design": "^0.1.10",
-        "vue": "^3.0.5",
-        "vuex": "^4.0.0"
-    },
-    "private": true
-}
-```
-
-其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
-
-### tsconfig.json
-
-解决 `@fesjs/fes` 和使用 `@` 的 API 提示
-
-### .fes.js
-
-配置文件，包含 Fes.js 内置功能和安装的其他插件配置。
-
-### mock.js
-
-`mock` 数据的配置文件。
-
-### .env
-
-定义环境变量。
-
-比如 `.env` 文件内容如下：
-
-```
-PORT=8888
-FES_ENV=prod
-```
-
-等同于 node 端运行时，设置如下：
-
-```
-process.env.PORT = '8888';
-process.env.FES_ENV = 'prod';
-```
-
-### dist 目录
-
-执行 `fes build` 后，产物默认会存放在这里。
-
-## public 目录
-
-此目录下所有文件为静态资源，会被复制到输出路径。
-
-## index.html
-
-默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。
-
-## src 目录
-
-### .fes 目录
-
-临时文件目录，比如入口文件、路由等，都会被临时生成到这里。
-
-:::warning
-不要提交 `.fes` 目录到 `git` 仓库，他们会在 `fes dev` 和 `fes build` 时被删除并重新生成。
-:::
-
-### pages 目录
-
-所有路由组件文件存放在这里。
-
-### app.js
-
-运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。

docs/zh/guide/env.md

@@ -1,139 +0,0 @@
-# 环境变量
-在构建或者代码在端上运行中需要一些跟区分于环境的变量，用于配置构建流程或者运行时过程，这时候我们可以配置环境变量。
-
-
-## 配置环境变量
-
-### 命令行添加
-比如：
-```bash
-# OS X, Linux
-PORT=3000 fes dev
-
-# Windows (cmd.exe)
-set PORT=3000 && fes dev
-```
-如果要同时考虑 OS X 和 Windows，可借助三方工具 [cross-env](https://github.com/kentcdodds/cross-env)
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-yarn add cross-env --dev
-cross-env PORT=3000 fes dev
-```
-
-  </CodeGroupItem>
-  <CodeGroupItem title="NPM">
-
-```bash
-npm i cross-env --save-dev
-cross-env PORT=3000 fes dev
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-### `.env` 文件配置
-Fes.js 中约定根目录下以 `.env` 开头的文件为环境变量配置文件。
-
-比如：
-```bash
-PORT=3000
-```
-然后执行
-```bash
-fes dev
-```
-会以 3000 端口启动 dev server。
-
-#### 本地临时配置
-可以新建 `.env.local`，这份配置会和 `.env` 做合并后形成最终配置。
-
-#### 环境配置
-可以通过环境变量 `FES_ENV` 区分不同环境来指定配置，这时候必须在执行命令前添加 `FES_ENV` 保证执行加载环境变量配置文件逻辑前 `FES_ENV` 已设置。
-
-举个 🌰 ：
-```bash
-FES_ENV=sit fes dev
-```
-如果存在 `.env.sit` 文件，则会将 `.env.sit` 的配置和 `.env` 做合并后形成最终配置。
-
-#### 配置优先级
-
-本地临时配置  >  环境配置  >  基础配置
-
-::: tip
-如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
-::: 
-
-## 编译时配置列表
-编译时配置是在构建过程需要的变量，开放给用户配置。
-
-### FES_ENV
-指定当前的环境，不同环境各自的配置文件。
-::: tip
-`FES_ENV` 在会在加载`.env`前使用，所以只能用命令行方式配置。
-::: 
-
-### FES_PRESETS
-添加额外的插件集入口
-
-### FES_PLUGINS
-添加额外的插件入口
-
-### PORT
-`fes dev` 时服务指定的端口号，默认是 `8080`
-
-### HOST
-默认是 `localhost`。
-
-### HTTPS
-默认是 `false`。
-
-### WATCH
-设为 none 时不监听文件变更。比如：
-```
-WATCH=none fes dev
-```
-
-### BABEL_CACHE
-默认开启 Babel 编译缓存，值为 none 时禁用缓存。
-
-### ANALYZE
-用于分析 bundle 构成，默认关闭。
-
-比如：
-```
-ANALYZE=1 fes build
-```
-
-### ANALYZE_MODE
-默认是`server`
-
-### ANALYZE_PORT
-默认是`8888`
-
-### CLEAR_OUTPUT
-仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建前清除 `Output` 文件内容。
-
-### RM_TMPDIR
-仅仅在 `build` 时生效。如果设置为 `none`，就不会在构建后清除 `.fes` 临时文件内容。
-
-## process.env
-运行时配置需要以 `FES_APP_` 开头，比如在 `.env` 中配置：
-```
-FES_APP_KEY=123456789
-```
-在代码中使用：
-```js
-console.log(process.env.FES_APP_KEY)
-// 输出 123456789
-```
-
-除了用户自定义的以`FES_APP_`开头的变量，还提供如下配置：
-
-- **NODE_ENV**：Node 环境变量
-
-- **FES_ENV**：Fes.js 环境变量
-
-- **BASE_URL**：等同于 publicPath

docs/zh/guide/faq.md

@@ -1 +0,0 @@
-# 常见问题

docs/zh/guide/getting-started.md

@@ -1,206 +0,0 @@
-# 快速上手
-
-## 依赖环境
-
-首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
-
-```bash
-# 打印 node 版本
-node -v
-v12.13.0
-```
-
-推荐使用 yarn 管理 npm 依赖
-
-```bash
-# 全局安装 yarn
-npm i yarn -g
-```
-
-## 创建项目
-
-这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
-
-##### 步骤 1 创建工作空间
-
-如果工作空间不存在，则先创建：
-
-```bash
-# 创建目录 workspace
-mkdir workspace
-# 进入目录 workspace
-cd workspace
-```
-
-如果工作空间已存在，则直接进入
-
-```bash
-# 进入目录 workspace
-cd workspace
-```
-
-##### 步骤 2 在工作空间创建项目
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 创建模板
-yarn create @fesjs/fes-app myapp
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 创建模板
-npx @fesjs/create-fes-app myapp
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
-
-<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
-
-你可以选择：
-
--   `Overwrite` 删除项目文件夹，重新创建项目。
--   `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
-
-当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
-<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
-
-你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
-
-##### 步骤 3 安装依赖
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 进入项目目录
-cd myapp
-# 安装依赖
-yarn
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 进入项目目录
-cd myapp
-# 安装依赖
-npm i
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-## 启动项目
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 开发调试
-yarn dev
-
-yarn run v1.22.4
-$ fes dev
-Starting the development server http://localhost:8080 ...
-
-✔ Webpack
-  Compiled successfully in 15.91s
-
- DONE  Compiled successfully in 15917ms                               11:17:08 AM
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 开发调试
-npm run dev
-
-> fes dev
-Starting the development server http://localhost:8080 ...
-
-✔ Webpack
-  Compiled successfully in 3.66s
-
- DONE  Compiled successfully in 3662ms                                11:17:46 AM
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
-
-<img :src="$withBase('home.png')" alt="home">
-
-## 部署发布
-
-### 构建
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 构建
-yarn build
-
-yarn run v1.22.4
-$ fes build
-
-✔ Webpack
-  Compiled successfully in 45.37s
-
-✨  Done in 48.87s.
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 构建
-npm run build
-
-> fes build
-
-✔ Webpack
-  Compiled successfully in 45.37s
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。
-
-```base
-tree ./dist
-
-dist
-├── chunk-vendors.27cd4686.js
-├── chunk-vendors.a5f5de67.css
-├── index.11411d43.css
-├── index.d72f1ba2.js
-├── index.html
-├── logo.png
-└── static
-    └── logo.0f85bba0.png
-```
-
-### 本地验证
-
-发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
-
-### 部署
-
-本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。

docs/zh/guide/image.md

@@ -1,61 +0,0 @@
-# 使用图片
-
-## 使用图片
-
-假设在 `src/images` 目录下有 `logo.png`。
-
-### Vue 里使用图片
-
-```vue
-<template>
-  <img src="@/images/logo.png`">
-</template>
-```
-
-### JS 里使用图片
-```js
-import imageUrl from '@/images/logo.png`'
-```
-
-### CSS 里使用图片
-```css
-.logo {
-    background: url('@/images/logo.png')
-}
-```
-注意：
-
-1. 这是 `webpack` 的规则，如果切到其他打包工具，可能会有变化
-2. `less` 中同样适用
-
-
-## `public` 文件夹 
-
-有些内容不需要经过 `webpack` 模块化处理，则可以将这些内容放在 `public` 文件夹，构建后会直接复制到 `dist` 目录，所以你需要通过`BASE_URL`来引入它们。
-
-### 在HTML模板中使用
-
-
-在 `public/index.html` 中需要设置：
-
-```html
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-```
-
-### 在.vue 文件中使用
-
-```vue
-<template>
-  <img :src="`${publicPath}my-image.png`">
-</template>
-<script>
-export default {
-  setup() {
-    return {
-      publicPath: process.env.BASE_URL
-    }
-  }
-}
-</script>
-```
-

docs/zh/guide/mock.md

@@ -1,183 +0,0 @@
-# Mock 数据
-
-Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发所阻塞。
-
-## 约定式 Mock 文件
-
-Fes.js 约定 `./mock.js` 为 mock 文件。
-
-比如：
-```
-.
-├── mock.js
-└── src
-    └── pages
-        └── index.vue
-```
-
-## 编写 Mock 文件
-
-可以参考如下 🌰：
-``` js
-export default function ({ cgiMock, mockjs, utils }) {
-    const { Random } = mockjs;
-
-    // 测试 proxy 与 mock 用例集合
-    cgiMock('/movie/in_theaters_mock', (req, res) => {
-        res.send(JSON.stringify({
-            code: '0',
-            msg: '',
-            result: {
-                text: 'movie:  movie/in_theaters_mock ~~~~~'
-            }
-        }));
-    });
-    cgiMock('/movie/test_mock', (req, res) => {
-        res.send(JSON.stringify({
-            code: '0',
-            msg: '',
-            result: {
-                text: 'mock:  movie/test_mock'
-            }
-        }));
-    });
-
-    // 测试用例: mock.js change，重现请求，需要能拉最新的数据
-    cgiMock('/watchtest', (req, res) => {
-        res.send(JSON.stringify({
-            code: '0',
-            msg: '',
-            result: {
-                text: '通过 register 测试 mock watch: 初始状态'
-            }
-        }));
-    });
-
-    // 返回一个数字
-    // cgiMock('/number', 666);
-    cgiMock('/number', 999);
-
-    // 返回一个json
-    cgiMock({
-        url: '/json',
-        result: {
-            code: '400101', msg: "不合法的请求:Missing cookie 'wb_app_id' for method parameter of type String", transactionTime: '20170309171146', success: false
-        }
-    });
-
-    // 利用 mock.js 产生随机文本
-    cgiMock('/text', Random.cparagraph());
-
-    // 返回一个字符串 利用 mock.js 产生随机字符
-    cgiMock('/random', mockjs.mock({
-        'string|1-10': '★'
-    }));
-
-    // 正则匹配url, 返回一个字符串
-    cgiMock(/\/abc|\/xyz/, 'regexp test!');
-
-    // option.result 参数如果是一个函数, 可以实现自定义返回内容, 接收的参数是是经过 express 封装的 req 和 res 对象.
-    cgiMock(/\/function$/, (req, res) => {
-        res.send('function test');
-    });
-
-    // 返回文本 readFileSync
-    cgiMock('/file', utils.file('./package.json'));
-
-    // 更复杂的规则配置
-    cgiMock({
-        url: /\/who/,
-        method: 'GET',
-        result(req, res) {
-            if (req.query.name === 'kwan') {
-                res.json({ kwan: '孤独患者' });
-            } else {
-                res.send('Nooooooooooo');
-            }
-        },
-        headers: {
-            'Content-Type': 'text/plain',
-            'Content-Length': '123',
-            ETag: '12345'
-        },
-        cookies: [
-            {
-                name: 'myname', value: 'kwan', maxAge: 900000, httpOnly: true
-            }
-        ]
-    });
-
-    // 携带参数的请求
-    cgiMock('/v2/audit/list', (req, res) => {
-        const {
-            currentPage, pageSize, isAudited
-        } = req.body;
-        res.send({
-            code: '0',
-            msg: '',
-            data: {
-                currentPage,
-                pageSize,
-                totalPage: 2,
-                totalCount: 12,
-                pageData: Array.from({ length: pageSize }, () => ({
-                    title: Random.title(),
-                    authorName: Random.cname(),
-                    authorId: Random.name(),
-                    createTime: Date.now(),
-                    updateTime: Date.now(),
-                    readCount: Random.integer(60, 1000),
-                    favoriteCount: Random.integer(1, 50),
-                    postId: '12323',
-                    serviceTag: '业务类型',
-                    productTag: '产品类型',
-                    requestTag: '需求类型',
-                    handleTag: '已采纳',
-                    postType: 'voice',
-                    postStatus: isAudited ? 'pass' : 'auditing',
-                    auditStatus: 'audit1'
-                }))
-            }
-        });
-    });
-
-    // multipart/form-data 类型
-    cgiMock('/v2/upload', (req, res) => {
-        res.send({
-            code: '0',
-            msg: '文件上传成功'
-        });
-    });
-};
-```
-
-### cgiMock 参数
-创建一个 mock 接口，参数非常灵活，参考上面的 demo 即可。
-
-
-### mockjs 参数
-[Mock.js](http://mockjs.com/) 是常用的辅助生成模拟数据的三方库，借助他可以提升我们的 mock 数据能力。
-
-比如：
-```js
-export default function ({ cgiMock, mockjs, utils }) {
-    cgiMock('/random', mockjs.mock({
-        'string|1-10': '★'
-    }));
-}
-```
-
-### utils 参数
-工具函数：
-- utils.file(path)，从项目根目录根据path寻找文件，返回文件流。
-
-## 配置 Mock
-详见配置 [mock](../reference/config/#mock)。
-
-## 关闭 Mock
-可以通过配置关闭。
-```js
-export default {
-    mock: false,
-};
-```

docs/zh/guide/plugin.md

@@ -1,71 +0,0 @@
-# 插件
-
-## 插件的 id 和 key
-每个插件都会对应一个 `id` 和一个 `key`，**`id` 是路径的简写，`key` 是进一步简化后用于配置的唯一值**。
-
-比如插件 `/node_modules/@fesjs/plugin-foo/index.js`，通常来说，其 `id` 为 `@fesjs/plugin-foo`，`key` 为 `foo`。
-
-::: tip
-id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。 
-:::
-
-## 启动插件
-有多种方式引入插件
-
-### package.json 依赖
-Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如：
-```json
-{
-  "dependencies": {
-    "@fesjs/plugin-request": "^2.0.0"
-  }
-}
-```
-那么 `@fesjs/plugin-request` 会自动被注册，无需在配置里重复声明。
-
-### 配置
-在配置里可通过 `presets` 和 `plugins` 配置插件，比如：
-```js
-export default {
-    presets: ['./preset', 'foo/presets'],
-    plugins: ['./plugin'],
-}
-```
-通常用于几种情况：
-
-1. 项目相对路径的插件
-2. 非 npm 包入口文件的插件
-
-::: warning
-请不要配置 npm 包的插件，否则会报重复注册的错误
-:::
-
-### 环境变量
-还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
-
-比如：
-```bash
-FES_PRESETS=/a/b/preset.js fes dev
-```
-
-## 禁用插件
-
-通过配置插件的 `key` 为 `false`，比如：
-```js
-export default {
-    mock: false,
-}
-```
-Mock 插件的 `key` 是 `mock`，我们在配置文件中配置 `mock` 为 `false`，则会禁用 Mock 插件及其功能。
-
-## 配置插件
-
-通过插件的 `key` 来配置插件，比如：
-```js
-export default {
-    mock: { 
-        prefix: '/v2'
-    }
-}
-```
-这里的 `mock` 是 Mock插件 的 key。

docs/zh/guide/public.md

@@ -1,30 +0,0 @@
-# 静态资源
-
-有些内容不需要经过 `webpack` 模块化处理，则可以将这些内容放在 `public` 文件夹，构建后会直接复制到 `dist` 目录，所以你需要通过`BASE_URL`来引入它们。
-
-### 在HTML模板中使用
-
-
-在 `public/index.html` 中需要设置：
-
-```html
-<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-```
-
-### 在.vue 和 js 文件中使用
-
-```vue
-<template>
-  <img :src="`${publicPath}my-image.png`">
-</template>
-<script>
-export default {
-  setup() {
-    return {
-      publicPath: process.env.BASE_URL
-    }
-  }
-}
-</script>
-```
-

docs/zh/guide/route.md

@@ -1,293 +0,0 @@
-# 路由
-
-像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 `Vue Router` 实现的路由，想了解更多的同学可以看看[官方文档](https://next.router.vuejs.org/)。
-
-## 路由配置
-
-在配置文件 `.fes.js`中通过 `router` 进行配置。
-```js
-export default {
-    router: {
-        routes: [],
-        mode: 'hash'
-    }
-}
-```
-
-### routes
-`routes` 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/) 中关于路由配置、路由匹配相关内容。
-
-
-### mode 
-创建历史记录的类型：
-- **history**，对应 [createWebHistory](https://next.router.vuejs.org/zh/api/#createwebhistory)
-- **hash**，对应 [createWebHashHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory)
-- **memory**，对应 [createMemoryHistory](https://next.router.vuejs.org/zh/api/#createWebHashHistory)
-
-默认是`hash`模式。
-
-## 约定式路由
-约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。      
-
-### 约定规范
-比如以下文件结构：
-```
-pages
-├── index.vue         # 根路由页面 路径为 /
-├── *.vue             # 模糊匹配 路径为 *
-├── a.vue             # 路径 /a
-├── b                 # 文件夹b
-│   ├── index.vue     # 路径 /b
-│   ├── @id.vue       # 动态路由 /b/:id
-│   ├── c.vue         # 路径 /b/c
-│   └── layout.vue    # /b 路径下所有页面公共的布局组件
-└── layout.vue        # 根路由下所有页面共用的布局组件
-```
-编译后会得到以下路由配置：
-```js
-[
-    {
-        "path": "/",
-        "component": require('@/pages/layout').default,
-        "count": 5,
-        "children": [
-            {
-                "path": "/a",
-                "component": require('@/pages/a').default,
-                "name": "a",
-                "meta": {},
-                "count": 7
-            },
-            {
-                "path": "/b",
-                "component": require('@/pages/b/layout').default,
-                "count": 7,
-                "children": [
-                    {
-                        "path": "/b/c",
-                        "component": require('@/pages/b/c').default,
-                        "name": "b_c",
-                        "meta": {},
-                        "count": 14
-                    },
-                    {
-                        "path": "/b/:id",
-                        "component": require('@/pages/b/@id').default,
-                        "name": "b__id",
-                        "meta": {},
-                        "count": 13
-                    },
-                    {
-                        "path": "/b",
-                        "component": require('@/pages/b/index').default,
-                        "name": "b_index",
-                        "meta": {},
-                        "count": 7
-                    }
-                ]
-            },
-            {
-                "path": "/",
-                "component": require('@/pages/index').default,
-                "name": "index",
-                "meta": {},
-                "count": 5
-            },
-            {
-                "path": "/:pathMatch(.*)",
-                "component": require('@/pages/*').default,
-                "name": "FUZZYMATCH",
-                "meta": {},
-                "count": 3
-            }
-        ]
-    }
-]
-```
-
-**需要注意的是，满足以下任意规则的文件不会被注册为路由**：
-- 不是 `.vue .jsx` 文件
-- `components` 目录中的文件
-
-
-### 动态路由
-Fes.js 里约定以 `@` 开头的文件或文件夹映射为动态路由。
-比如：
-
-- `src/pages/users/@id.vue` 会成为 `/users/:id`
-- `src/pages/users/@id/settings.vue` 会成为 `/users/:id/settings`
-
-### 嵌套路由
-Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，`layout.vue` 中必须实现 `RouterView`
-
-比如以下目录结构：
-```
-pages
-└── users
-    ├── layout.vue
-    ├── index.vue
-    └── list.vue
-```
-会生成路由：
-```js
-[
-    { 
-        path: '/users', component: require('@/pages/users/layout').default,
-        children: [
-            { path: '/users', component: require('@/pages/users/index').default },
-            { path: '/users/list', component: require('@/pages/users/list').default },
-        ]
-    }
-]
-```
-
-### 模糊匹配
-Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现 [404 路由](https://next.router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E6%8D%95%E8%8E%B7%E6%89%80%E6%9C%89%E8%B7%AF%E7%94%B1%E6%88%96-404-not-found-%E8%B7%AF%E7%94%B1)。     
-
-比如以下目录结构：
-
-```
-pages
-├── index.vue         # 根路由页面 路径为 /
-└── *.vue             # 模糊匹配 路径为 *
-```
-会生成路由：
-```js
-[
-    { 
-        path: '/', component: require('@/pages/index').default, count: 5
-    },
-    {
-        path: '/:pathMatch(.*)', component: require('@/pages/**').default, count: 3
-    }
-]
-```
-这样，如果访问 `/foo`，`/` 不能匹配，会 fallback 到 `*` 路由，通过 `src/pages/*.vue` 进行渲染。
-
-### 扩展路由元信息
-我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息：
-```js
-const router = new VueRouter({
-  routes: [
-    {
-      path: '/foo',
-      component: Foo,
-      children: [
-        {
-          path: 'bar',
-          component: Bar,
-          // a meta field
-          meta: { requiresAuth: true }
-        }
-      ]
-    }
-  ]
-})
-```
-
-接下来我们来配置 `meta`：
-
-<CodeGroup>
-  <CodeGroupItem title="vue" active>
-
-```vue
-<config>
-{
-    "name": "store",
-    "title": "vuex测试"
-}
-</config>
-```
-
-  </CodeGroupItem>
-  <CodeGroupItem title="jsx">
-
-```jsx
-import { defineRouteMeta, useRoute } from '@fesjs/fes';
-defineRouteMeta({
-    name: "store",
-    title: "vuex测试"
-})
-```
-
-  </CodeGroupItem>
-    <CodeGroupItem title="tsx">
-
-```tsx
-import { defineRouteMeta, useRoute } from '@fesjs/fes';
-defineRouteMeta({
-    name: "store",
-    title: "vuex测试"
-})
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-
-则编译后的路由配置为：
-```js{5-8}
-[
-    { 
-        path: '/a', 
-        component: require('@/pages/a').default, 
-        meta: {
-            "name": "store",
-            "title": "vuex测试"
-        }
-    },
-]
-```
-
-### 智能路由
-可以看到，编译后路由都会有 `count` 属性，这是我们根据精准匹配优先算法原则设计出路由排名算法，对匹配到的路由打分：
-- 路由的路径每个子项得到4分
-- 子项为静态细分(`/list`)再加3分
-- 子项为动态细分（`/:orderId`）再加2分
-- 根段(`/`)再1分
-- 通配符(`*`)匹配到的减去1分
-
-当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
-
-## 路由跳转
-想学习更多，可以查看 [Vue Router 官方文档](https://next.router.vuejs.org/zh/guide/essentials/navigation.html#%E6%9B%BF%E6%8D%A2%E5%BD%93%E5%89%8D%E4%BD%8D%E7%BD%AE)。
-
-### 声明式
-```vue
-<template>
-    <router-link to="/home">Home</router-link>
-</template>
-```
-
-### 命令式
-页面跳转 API 由 `router` 实例提供，查看 [Vue Rouer 文档](https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95)了解更多。
-
-```js
-import { useRouter } from '@fesjs/fes';
-
-export default {
-    setup(){
-        const router = useRouter();
-        // 这三种形式是等价的
-        router.push('/users/posva#bio')
-        router.push({ path: '/users/posva', hash: '#bio' })
-        router.push({ name: 'users', params: { username: 'posva' }, hash: '#bio' })
-        // 只改变 hash
-        router.push({ hash: '#bio' })
-        // 只改变 query
-        router.push({ query: { page: '2' } })
-        // 只改变 param
-        router.push({ params: { username: 'jolyne' } })
-
-        // 跳转到上一个路由
-        router.goBack();
-
-        // 跳转到前一个历史记录
-        router.go(1);
-
-        // 替换历史堆栈中的记录
-        router.replace('/new');
-    }
-}
-
-```

docs/zh/guide/runtime-config.md

@@ -1,243 +0,0 @@
-# 运行时配置
-
-Fes.js 约定 `src/app.js` 为运行时配置文件。运行时配置和配置的区别是他跑在浏览器端，因此我们可以在这里写函数、引入浏览器端依赖项等等，注意不要引入 node 端依赖项。
-
-## 运行时为啥需要配置？
-
-Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 entry 文件，而 Fes.js 中 entry 文件由框架生成，用户就不必要编写胶水代码。内置插件和其他插件提供的一些运行时功能提供用户或者其他插件自定义。
-
-例如：
-
-plugin-acess 插件定义运行时配置项：
-
-```js
-api.addRuntimePluginKey(() => 'access');
-```
-
-plugin-acess 插件读取配置项：
-
-```js
-const runtimeConfig = plugin.applyPlugins({
-    key: 'access',
-    type: ApplyPluginsType.modify,
-    initialValue: {},
-});
-```
-
-而用户则只需要配置：
-
-```js
-// app.js
-import { defineBuildConfig } from '@fesjs/fes';
-
-export default defineRuntimeConfig({
-    access: memo => ({
-        ...memo
-        unAccessHandler({
-            router, to, from, next
-        }) {
-            // 处理逻辑
-        },
-        noFoundHandler({
-            router, to, from, next
-        }) {
-            // 处理逻辑
-        },
-    }),
-});
-```
-
-## 配置智能提示
-
-配置可以单独导出，也可以通过 `defineRuntimeConfig` 工具函数获取类型提示。
-
-方式一（推荐，有类型提示）：
-
-```js
-// app.js
-import { defineBuildConfig } from '@fesjs/fes';
-
-export default defineRuntimeConfig({
-    access: memo => ({
-        ...memo
-        unAccessHandler({
-            router, to, from, next
-        }) {
-            // 处理逻辑
-        },
-        noFoundHandler({
-            router, to, from, next
-        }) {
-            // 处理逻辑
-        },
-    }),
-    // ...其他配置项
-});
-```
-
-方式二：
-
-```js
-// app.js
-export const access = memo => ({
-    ...memo
-    unAccessHandler({
-        router, to, from, next
-    }) {
-        // 处理逻辑
-    },
-    noFoundHandler({
-        router, to, from, next
-    }) {
-        // 处理逻辑
-    },
-});
-```
-
-## 配置项
-
-### beforeRender
-
-beforeRender(lastOpts)
-
-在渲染之前执行，执行`action`过程中显示 `loading` 配置的组件，执行结果作为参数 `initialState` 传给 `modifyClientRenderOpts`。
-
-示例：
-
-```js
-// app.js
-import { access } from '@fesjs/fes';
-import PageLoading from '@/components/PageLoading';
-import UserCenter from '@/components/UserCenter';
-
-export function beforeRender(lastOpts) {
-    return {
-        ...lastOpts,
-        loading: <PageLoading />,
-        action() {
-            const { setRole } = access;
-            return new Promise((resolve) => {
-                setTimeout(() => {
-                    setRole('admin');
-                    resolve({
-                        userName: 'harrywan',
-                    });
-                }, 1000);
-            });
-        },
-    };
-}
-```
-
-### patchRoutes
-
-patchRoutes({routes })
-
-修改路由。
-
-比如在最前面添加一个 /foo 路由：
-
-```js
-export function patchRoutes({ routes }) {
-    routes.unshift({
-        path: '/foo',
-        component: require('@/extraRoutes/foo').default,
-    });
-}
-```
-
-:::tip
-直接修改 `routes`, 不需要返回
-:::
-
-### modifyClientRenderOpts
-
-modifyClientRenderOpts(lastOpts)
-
-修改 `clientRender` 参数。参数是一个对象：
-
--   routes，路由配置信息
--   rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。
--   initialState， 初始化数据，`beforeRender` 运行得到的数据。
-
-比如在微前端里动态修改渲染根节点：
-
-```js
-let isSubApp = false;
-export function modifyClientRenderOpts(lastOpts) {
-    return {
-        ...lastOpts,
-        rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement,
-    };
-}
-```
-
-### rootContainer
-
-rootContainer(LastRootContainer, args)
-
-修改交给 Vue 渲染时的根组件，默认是 `<RouterView></RouterView>`。
-
--   LastRootContainer，上一个插件修改后的结果。
--   args，包含：
-    -   routes，全量路由配置
-    -   plugin，运行时插件机制
-
-比如在可以包一层 DIV：
-
-```js
-export function rootContainer(container) {
-    return () => {
-        return (
-            <div>
-                <RouterView></RouterView>
-            </div>
-        );
-    };
-}
-```
-
-### onAppCreated
-
-onAppCreated({app})
-
-创建 app 实例后触发。
-
-比如用于安装 Vue 插件：
-
-```js
-import { createRouter } from 'vue-router';
-
-export function onAppCreated({ app }) {
-    const router = createRouter();
-    app.use(router);
-}
-```
-
-### render
-
-render(oldRender: Function)
-
-覆写 render。
-
-比如用于渲染之前做权限校验。
-
-### onRouterCreated
-
-onRouterCreated({router})
-
-生成 router 时触发。
-
-比如用于收集切换路由的记录：
-
-```js
-export function onRouterCreated({ router }) {
-    router.afterEach((to, from) => {
-        console.log(to);
-    });
-}
-```
-
-## 更多配置项
-
-Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。

docs/zh/guide/template.md

@@ -1,52 +0,0 @@
-# HTML 模板
-
-Fes.js 默认模板内容是：
-
-```html
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <title><%= title %></title>
-    </head>
-    <body>
-        <div id="<%= mountElementId %>"></div>
-    </body>
-</html>
-```
-
-## 修改页面标题
-
-```js
-// .fes.js
-export default {
-    title: '这是页面标题',
-};
-```
-
-页面的标题会设置成 `这是页面标题`。
-
-## 模板变量
-
-模版中可以使用的变量：
-
--   `NODE_ENV`: Node.js 环境变量
--   `FES_ENV`: Fes.js 环境变量
--   `BASE_URL`: publicPath
--   `.env.**`: 文件中以 `FES_APP_` 开头的变量
-
-举个 🌰 ：
-
-```env
-# .env
-FES_APP_HELLO_WORLD=hello world
-```
-
-```html
-<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-<body>
-    <div><%= FES_APP_HELLO_WORLD %></div>
-</body>
-```

docs/zh/reference/api.md

@@ -1 +0,0 @@
-# API

docs/zh/reference/api/README.md

@@ -1,191 +0,0 @@
----
-sidebar: auto
----
-
-# API
-Fes.js 统一了API的出口，所有运行时API（包含Fes.js内置API和插件提供的API）全部通过`@fesjs/fes`导出。
-```js
-import { someApi  } from "@fesjs/fes"
-```
-
-## 基础API
-
-### plugin
-::: tip
-主要在插件里面使用，项目代码中一般用不到。
-:::
-
-运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。
-```js
-import { plugin, ApplyPluginsType } from '@fesjs/fes';
-
-// 注册插件
-plugin.register({
-  apply: { dva: { foo: 1 } },
-  path: 'foo',
-});
-plugin.register({
-  apply: { dva: { bar: 1 } },
-  path: 'bar',
-});
-
-// 执行插件
-// 得到 { foo: 1, bar: 1 }
-plugin.applyPlugins({
-  key: 'dva',
-  type: ApplyPluginsType.modify,
-  initialValue: {},
-  args: {},
-  async: false,
-});
-
-```
-
-#### **plugin.register** 参数包含:     
-- apply   插件文件导出的内容
-- path    插件文件路径
-
-
-
-
-#### **plugin.applyPlugins** 参数包含:     
-- key，坑位的 key
-- type，执行方式类型，详见 [ApplyPluginsType](#applypluginstype)
-- initialValue，初始值
-- args，参数
-- async，是否异步执行且返回 Promise
-
-### ApplyPluginsType
-::: tip
-主要在插件里面使用，项目代码中一般用不到。
-:::
-
-运行时插件执行类型，enum 类型，包含三个属性：
-- compose，用于合并执行多个函数，函数可决定前序函数的执行时机
-- modify，用于修改值
-- event，用于执行事件，前面没有依赖关系
-
-
-## 路由API
-
-Fes.js 路由基于 [Vue Router 4.0](https://next.router.vuejs.org/introduction.html)，想了解更多的同学可以看看官方文档。
-
-### getRouter
-返回当前 `router` 实例。
-```js
-import { getRouter } from "@fesjs/fes";
-
-const router = getRouter();
-router.push();
-```
-
-### useRoute
-返回当前 `route` 实例，相当于在模板内使用 `$route`。必须在 `setup` 函数内调用。
-```js
-import { useRoute } from "@fesjs/fes";
-export default {
-    setup(){
-        const route = useRoute()
-    }
-}
-```
-
-### useRouter
-返回 `router` 实例，相当于在模板语法中使用 `$router`。必须在 `setup` 函数内调用。
-```js
-import { useRouter } from "@fesjs/fes";
-export default {
-    setup(){
-        const router = useRouter()
-    }
-}
-```
-
-### onBeforeRouteUpdate
-添加导航守卫，在当前路由即将更新时触发。类似于之前的`beforeRouteUpdate`，但是可用于任何组件。卸载组件时，将移除守卫。
-```js
-import { onBeforeRouteUpdate } from "@fesjs/fes";
-export default {
-    setup(){
-        onBeforeRouteUpdate((to, from, next)=>{
-        })
-    }
-}
-```
-### onBeforeRouteLeave
-添加导航守卫，在当前路由即将离开时触发。类似于之前的`beforeRouteLeave`，但可用于任何组件。卸载组件时，将移除守卫。
-```js
-import { onBeforeRouteLeave } from "@fesjs/fes";
-export default {
-    setup(){
-        onBeforeRouteLeave((to, from, next)=>{
-        })
-    }
-}
-```
-
-### createWebHashHistory
-::: tip
-在开发插件时可能用上，平时一般用不上
-:::
-创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意URL时这非常有用。注意：如果 SEO 对你很重要，你应该使用 `createWebHistory`。
-
-### createWebHistory
-::: tip
-在开发插件时可能用上，平时一般用不上
-:::
-创建HTML5历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。
-
-### createMemoryHistory
-::: tip
-在开发插件时可能用上，平时一般用不上
-:::
-创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。
-
-### createRouter
-创建一个路由器实例，该实例可用于 Vue 应用程序。查看[路由器选项](https://next.router.vuejs.org/api/#routeroptions)，了解可以传递的所有属性的列表。
-
-### RouterLink
-使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。
-```html
-<router-link to="/about">Go to About</router-link>
-```
-可以查看[官方文档](https://next.router.vuejs.org/api/#router-link-props)了解更多 RouterLink 的 Porps。查看[官方文档](https://next.router.vuejs.org/api/#router-link-s-v-slot)了解 RouterLink 的作用域插槽。
-
-### useLink
-返回的结果跟 RouterLink 的作用域插槽的属性一致，查看[官方API](https://next.router.vuejs.org/api/#router-link-s-v-slot)了解更多。
-```js
-import { RouterLink, useLink } from '@fesjs/fes'
-
-export default {
-  name: 'AppLink',
-
-  props: {
-    // add @ts-ignore if using TypeScript
-    ...RouterLink.props,
-    inactiveClass: String,
-  },
-
-  setup(props) {
-    // `props` contains `to` and any other prop that can be passed to <router-link>
-    const { navigate, href, route, isActive, isExactActive } = useLink(props)
-
-    // profit!
-
-    return { isExternalLink }
-  },
-}
-```
-
-### RouterView
-router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。
-```html
-<router-view></router-view>
-<router-view v-slot="{ Component, route }">
-  <component :is="Component" />
-</router-view>
-```
-可以查看[官方文档](https://next.router.vuejs.org/api/#router-view-props)了解更多 RouterView 的 Porps。查看[官方文档](https://next.router.vuejs.org/api/#router-view-s-v-slot)了解 RouterView 的作用域插槽。
-
-### Router Methods
-查看[官方文档](https://next.router.vuejs.org/api/#router-methods)了解更多

docs/zh/reference/cli.md

@@ -1,81 +0,0 @@
-# 命令行接口
-
-VuePress 命令行接口是由 [@vuepress/cli](https://www.npmjs.com/package/@vuepress/cli) 包提供的。它是 [vuepress](https://www.npmjs.com/package/vuepress) 包的依赖之一，当然你也可以单独安装它。
-
-执行 `vuepress --help` 来获取下列帮助信息：
-
-```bash
-Usage:
-  $ vuepress <command> [options]
-
-Commands:
-  dev [sourceDir]    Start development server
-  build [sourceDir]  Build to static site
-  info               Display environment information
-
-For more info, run any command with the `--help` flag:
-  $ vuepress dev --help
-  $ vuepress build --help
-  $ vuepress info --help
-
-Options:
-  -v, --version  Display version number 
-  -h, --help     Display this message 
-```
-
-## dev
-
-启动一个开发服务器，在本地开发你的 VuePress 站点。
-
-```bash
-Usage:
-  $ vuepress dev [sourceDir]
-
-Options:
-  -c, --config <config>  Set path to config file 
-  -p, --port <port>      Use specified port (default: 8080) 
-  -t, --temp <temp>      Set the directory of the temporary files 
-  --host <host>          Use specified host (default: 0.0.0.0) 
-  --cache <cache>        Set the directory of the cache files 
-  --clean-temp           Clean the temporary files before dev 
-  --clean-cache          Clean the cache files before dev 
-  --open                 Open browser when ready 
-  --debug                Enable debug mode 
-  --no-watch             Disable watching page and config files (default: true)
-  -v, --version          Display version number 
-  -h, --help             Display this message
-```
-
-::: tip
-通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。
-:::
-
-## build
-
-将你的 VuePress 站点构建成静态文件，以便你进行后续[部署](../guide/deployment.md)。
-
-```bash
-Usage:
-  $ vuepress build [sourceDir]
-
-Options:
-  -c, --config <config>  Set path to config file 
-  -d, --dest <dest>      Set the directory build output (default: .vuepress/dist) 
-  -t, --temp <temp>      Set the directory of the temporary files 
-  --cache <cache>        Set the directory of the cache files 
-  --clean-temp           Clean the temporary files before build 
-  --clean-cache          Clean the cache files before build 
-  --debug                Enable debug mode 
-  -v, --version          Display version number 
-  -h, --help             Display this message
-```
-
-::: tip
-通过命令行设置的配置项，会覆盖你配置文件中的同名配置项。
-:::
-
-## info
-
-输出当前系统和依赖相关的信息。
-
-在你想要检查你的环境，或者提交 Issue 时候，可以使用该命令。

docs/zh/reference/cli/README.md

@@ -1,175 +0,0 @@
----
-sidebar: auto
----
-
-# 命令行工具
-
-## create-fes-app
-通过 `create-fes-app` 命令创建项目模板，输入`create-fes-app -h`则可以看到如下信息：
-```
-Usage: create-fes-app <name>
-
-Options:
-    -v, --version            Output the current version
-    -h, --help               Display help for command   
-    -f, --force              Overwrite target directory if it exists
-    -m, --merge              Merge target directory if it exists
-```
-
-可以在本机安装后使用：
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 全局安装
-yarn global add @fesjs/create-fes-app
-
-# 创建模板
-create-fes-app fes-app
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 全局安装
-npm i -g @fesjs/create-fes-app
-
-# 创建模板
-create-fes-app fes-app
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-推荐使用 `yarn create` 和 `npx` 方式创建模板，一直使用最新的模板：
-
-<CodeGroup>
-  <CodeGroupItem title="YARN" active>
-
-```bash
-# 创建模板
-yarn create @fesjs/fes-app myapp
-
-# 安装依赖
-yarn 
-
-# 运行
-yarn dev
-```
-
-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
-# 创建模板
-npx @fesjs/create-fes-app myapp
-
-# 安装依赖
-npm install 
-
-# 运行
-npm run dev
-```
-
-  </CodeGroupItem>
-</CodeGroup>
-
-
-## fes
-需要在项目根目录执行 `fes` 命令，输入`fes -h`则可以看到如下信息：
-
-```
-Usage: fes <command> [options]
-
-一个好用的前端应用解决方案
-
-Options:
-  -v, --vers         output the current version
-  -h, --help         display help for command
-
-Commands:
-  build              build application for production
-  dev [options]      start a local http service for development
-  help               show command helps
-  info               print debugging information about your environment
-  webpack [options]  inspect webpack configurations
-
-  Run fes <command> --help for detailed usage of given command.
-```
-
-### fes dev
-启动本地开发服务器进行项目的开发调试。
-```
-Usage: fes dev [options]
-
-start a local http service for development
-
-Options:
-  --port      http service port, like 8080
-  --https     whether to turn on the https service
-  -h, --help  display help for command
-```
-比如：
-```bash
-fes dev --port=8080
-```
-
-### fes build
-编译构建 web 产物。
-```
-Usage: fes build [options]
-
-build application for production
-
-Options:
-  -h, --help  display help for command
-```
-比如：
-```
-fes build
-```
-### fes help
-打印帮助文档。
-比如：
-```bash
-fes help
-```
-
-### fes info
-打印当前项目的有用的环境信息，用来帮助定位问题。
-```
-Usage: fes info [options]
-
-print debugging information about your environment
-
-Options:
-  -h, --help  display help for command
-```
-比如：
-```bash
-fes info
-```
-
-### fes webpack
-查看项目使用的 webpack 配置。
-```
-Usage: fes webpack [options]
-
-inspect webpack configurations
-
-Options:
-  --rule <ruleName>      inspect a specific module rule
-  --plugin <pluginName>  inspect a specific plugin
-  --rules                list all module rule names
-  --plugins              list all plugin names
-  --verbose              show full function definitions in output
-  -h, --help             display help for command
-```
-
-比如：
-```bash
-fes webpack
-```

docs/zh/reference/config/README.md

@@ -1,549 +0,0 @@
----
-sidebar: auto
----
-
-## 配置文件
-
-Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。
-
-### 配置文件解析
-
-Fes.js 会自动解析项目根目录下的 `.fes.js` 文件。
-
-最基础的配置文件是这样的：
-
-```js
-// .fes.js
-export default {};
-```
-
-可以通过环境变量 `FES_ENV` 进行环境差异化配置，当我们运行 `FES_ENV=prod fes dev` 时，Fes.js 会找到 `.fes.js` 和 `.fes.prod.js`(可选) 的配置文件进行 `deepmerge`。
-
-### 配置智能提示
-
-可以通过 `defineBuildConfig` 工具函数获取类型提示：
-
-```js
-import { defineBuildConfig } from '@fesjs/fes';
-
-export default defineBuildConfig({});
-```
-
-## 共享配置
-
-### alias
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    配置别名，对引用路径进行映射。
-
--   示例：
-
-```js
-export default {
-    alias: {
-        main: 'src/assets/styles/main',
-    },
-};
-```
-
-然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。
-
-### autoprefixer
-
--   类型： `object`
--   默认值：
-
-```js
-{
-    flexbox: 'no-2009';
-}
-```
-
--   详情：
-
-    [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。
-
-### base
-
--   类型： `string`
--   默认值： `''`
--   详情：
-
-    设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。
-
-::: warning 2.1.x 已废弃
-2.1.x 版本请使用 router.base 代替
-:::
-
-### define
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-    用于提供给代码中可用的变量。
--   示例：
-
-```js
-export default {
-    define: {
-        __DEV__: 'development',
-    },
-};
-```
-
-然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。
-
-### dynamicImport
-
--   类型： `boolean`
--   默认值： false
--   详情：
-
-    路由是否按需加载
-
-### inlineLimit
-
--   类型： `number`
--   默认值： `8192`(8k)
--   详情：
-
-    配置图片文件是否走 base64 编译的阈值。默认是 `8192` 字节，小于它会被编译为 base64 编码，否则会生成单独的文件。
-
-### mock
-
--   类型： `object || boolean`
--   默认值： `{}`
--   详情：
-
-    配置 mock 属性。
-
-    -   当 mock 为 `boolean` 类型时，`true` 表示打开 mock，`false` 表示关闭 mock。
-    -   当 mock 为 `object` 类型时，默认打开 mock。也可以通过子属性 `prefix` 添加过滤条件，满足条件的走 mock 文件。
-
--   示例：
-
-```js
-export default {
-    mock: {
-        prefix: '/api/auth',
-    },
-};
-```
-
-然后所有以 `/api/users` 开始的请求，就能进入 mock.js 文件处理。
-
-### mountElementId
-
--   类型： `string`
--   默认值： `app`
--   详情：
-
-    指定渲染到的 HTML 元素 id。
-
-### outputPath
-
--   类型： `string`
--   默认值： `dist`
--   详情：
-
-    指定输出路径。
-
-::: tip
-不允许设定为 `src`、`public`、`pages` 等约定目录。
-:::
-
-### plugins
-
--   类型： `Array(string)`
--   默认值： `[]`
--   详情：
-
-    配置额外的 `fes` 插件。
-    数组项为指向插件的路径，可以是 npm 依赖、相对路径或绝对路径。如果是相对路径，则会从项目根目录开始找。
-
--   示例：
-
-```js
-export default {
-    plugins: [
-        // npm 依赖
-        'fes-plugin-hello',
-        // 相对路径
-        './plugin',
-        // 绝对路径
-        `${__dirname}/plugin.js`,
-    ],
-};
-```
-
-### proxy
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    配置代理能力。
-
--   示例：
-
-```js
-export default {
-    proxy: {
-        '/v2': {
-            target: 'https://api.douban.com/',
-            changeOrigin: true,
-        },
-    },
-};
-```
-
-然后访问 `/v2/movie/in_theaters_proxy` 就能访问到 [http://api.douban.com/v2/movie/in_theaters_proxy](http://api.douban.com/v2/movie/in_theaters_proxy) 的数据。
-
-### publicPath
-
--   类型： `string`
--   默认值： `/`
--   详情：
-
-    静态资源 publicPath。当打包的时候在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
-
-### router
-
--   类型： `object`
--   默认值： `{ mode: 'hash', base: '/' }`
--   详情：
-
-    配置路由，具体请查看指南中关于路由的介绍
-
-### singular
-
--   类型： `boolean`
--   默认值： `false`
--   详情：
-
-    配置是否启用单数模式的目录。 比如 `src/pages` 的约定在开启后为 `src/page` 目录，@fesjs/fes-plugins 插件也遵照此配置的约定。
-
-### targets
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换。
-
-### terserOptions
-
--   类型： `object`
--   默认值：
-
-```js
-const defaultTerserOptions = {
-    compress: {
-        // turn off flags with small gains to speed up minification
-        arrows: false,
-        collapse_vars: false, // 0.3kb
-        comparisons: false,
-        computed_props: false,
-        hoist_funs: false,
-        hoist_props: false,
-        hoist_vars: false,
-        inline: false,
-        loops: false,
-        negate_iife: false,
-        properties: false,
-        reduce_funcs: false,
-        reduce_vars: false,
-        switches: false,
-        toplevel: false,
-        typeofs: false,
-
-        // a few flags with noticeable gains/speed ratio
-        // numbers based on out of the box vendor bundle
-        booleans: true, // 0.7kb
-        if_return: true, // 0.4kb
-        sequences: true, // 0.7kb
-        unused: true, // 2.3kb
-
-        // required features to drop conditional branches
-        conditionals: true,
-        dead_code: true,
-        evaluate: true,
-    },
-    mangle: {
-        safari10: true,
-    },
-};
-```
-
--   详情：
-
-    配置 [压缩器 terser 的配置项](https://github.com/terser/terser#minify-options)
-
-### title
-
--   类型： `string`
--   详情：
-
-    html 页面标题
-
-## webpack 专属配置
-
-### analyze
-
--   类型： `object`
--   默认值：
-
-```js
-{
-    analyzerMode: process.env.ANALYZE_MODE || 'server',
-    analyzerPort: process.env.ANALYZE_PORT || 8888,
-    openAnalyzer: process.env.ANALYZE_OPEN !== 'none',
-    // generate stats file while ANALYZE_DUMP exist
-    generateStatsFile: !!process.env.ANALYZE_DUMP,
-    statsFilename: process.env.ANALYZE_DUMP || 'stats.json',
-    logLevel: process.env.ANALYZE_LOG_LEVEL || 'info',
-    defaultSizes: 'parsed' // stat  // gzip
-}
-```
-
--   详情：
-
-    构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build`
-
-### chainWebpack
-
--   类型：`function`
--   默认值：`null`
--   详情：
-
-    通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。
-
-示例：
-
-```js
-export default {
-    chainWebpack(memo, { env, webpack }) {
-        // 删除 fes 内置插件
-        memo.plugins.delete('copy');
-    },
-};
-```
-
-### cssLoader
-
--   类型： `object`
--   默认值： `''`
--   详情：
-
-    设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。
-
-### copy
-
--   类型： `Array(string) || Array(object)`
--   默认值： `[]`
--   详情：
-
-    设置要复制到输出目录的文件、文件夹。
-
-    配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。
-
--   示例：
-
-```js
-export default {
-    copy: {
-        from: '/src/assets/images',
-        to: 'assets/images',
-    },
-};
-```
-
-上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。
-
-### devServer
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    配置开发服务器。支持以下子配置项：
-
-    -   port，端口号，默认 `8000`
-    -   host，默认 `localhost`
-    -   https，是否启用 https server，同时也会开启 HTTP/2
-
-    启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。
-
-### devtool
-
--   类型： `string`
--   默认值： `cheap-module-source-map` in dev, `undefined` in build
--   详情：
-
-    用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。
-
-### exportStatic
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-配置 `html` 的输出形式，默认只输出 `index.html`。
-
-如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。
-
-比如以下路由，
-
-```
-/
-/users
-/list
-```
-
-不开启 `exportStatic` 时，输出，
-
-```
-- index.html
-```
-
-设置 `exportStatic: {}` 后，输出，
-
-```
-- index.html
-- users.html
-- list.html
-```
-
-### externals
-
--   类型：`object`
--   默认值：`{}`
--   详情：
-
-    设置哪些模块可以不被打包，通过 `<script>` 或其他方式引入。
-
-示例：
-
-```js
-export default {
-    externals: {
-        vue: 'window.Vue',
-    },
-};
-```
-
-### extraBabelPlugins
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-配置额外的 `babel` 插件。
-
--   示例：
-
-```js
-export default {
-    extraBabelPlugins: [['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]],
-};
-```
-
-### extraBabelPresets
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-配置额外的 `babel` 插件集。
-
-### extraPostCSSPlugins
-
--   类型： `array`
--   默认值： `[]`
--   详情：
-
-    设置额外的 [postcss 插件](https://github.com/postcss/postcss/blob/master/docs/plugins.md)。
-
-### html
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options)。
-
-### lessLoader
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置 [less-loader 配置项](https://github.com/webpack-contrib/less-loader)。
-
-### nodeModulesTransform
-
--   类型： `object`
--   默认值： `{ exclude: [] }`
--   详情：
-
-    默认编译所有 `node_modules` 下的包，可以通过配置 `exclude` 来跳过某些包，以提高编译速度。
-
-### postcssLoader
-
--   类型： `object`
--   默认值： `{}`
--   详情：
-
-    设置 [postcss-loader 配置项](https://github.com/postcss/postcss-loader#options)。
-
-### vueLoader
-
--   类型： `object`
--   默认值：`{}`
--   详情：
-
-    配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html)
-
-## Vite 专属配置
-
-### viteOption
-
--   类型： `object`
--   详情：
-
-    Vite 的配置，详情请看 [Vite Config](https://cn.vitejs.dev/config/)
-
-### viteVuePlugin
-
--   类型： `object`
--   详情：
-
-    自定义 [@vitejs/plugin-vue](https://github.com/vitejs/vite/tree/main/packages/plugin-vue) 的配置。
-
-### viteVueJsx
-
--   类型： `object`
--   详情：
-
-    自定义 [@vitejs/plugin-vue-jsx](https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx) 的配置。
-
-### viteLegacy
-
--   类型： `object`
--   详情：
-
-    自定义 [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) 的配置。
-
-### viteHtml
-
--   类型： `object`
--   详情：
-
-    自定义 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的配置。
-
-## 更多配置项
-
-Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。

docs/zh/reference/plugin/README.md

@@ -1,26 +0,0 @@
-# 介绍
-## 插件列表
- 
-|  插件   | 介绍  | 
-|  ----  | ----  |
-| [@fesjs/plugin-access](./plugins/access.md)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](./plugins/enums.md)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](./plugins/icon.md)  | svg 文件自动注册为组件 |  
-| [@fesjs/plugin-jest](./plugins/jest.md)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](./plugins/layout.md) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](./plugins/locale.md) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](./plugins/model.md) |  简易的数据管理方案 |
-| [@fesjs/plugin-request](./plugins/request.md) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@fesjs/plugin-vuex](./plugins/vuex.md) |  基于 `Vuex`, 提供状态管理能力 |
-| [@fesjs/plugin-qiankun](./plugins/qiankun.md) |  基于 `qiankun`，提供微服务能力 |
-| [@fesjs/plugin-sass](./plugins/sass.md) |  样式支持sass |
-| [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
-
-## 架构
-
-<!-- ![架构](/framework.png "架构") -->
-<img :src="$withBase('framework.png')" alt="架构">
-
-Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。

docs/zh/reference/plugin/dev/README.md

@@ -1,43 +0,0 @@
-# 插件介绍
-
-## 开始
-一个插件是一个 `npm` 包，它能够为 Fes.js 创建的项目添加额外的功能，这些功能包括：
-
-- 项目的 webpack 配置。
-- 修改项目的 babel 配置。
-- 添加新的 fes 命令 - 例如 `@fes/plugin-jest` 添加了 `fes test` 命令，允许开发者运行单元测试。
-- 集成 Vue 的插件。
-- 修改路由配置
-- 提供运行时 API
-- ...
-
-插件的入口是一个函数，函数会以 API 对象作为第一个参数：
-```js
-export default (api)=>{
-    api.describe({
-        key: 'esbuild',
-        config: {
-            schema(joi) {
-                return joi.object();
-            },
-            default: {}
-        },
-        enableBy: api.EnableBy.config,
-    });
-}
-```
-API 对象是构建流程管理 Service 类的实例，api 提供一些有用的方法帮助你开发插件。
-
-`api.describe`用来描述插件：
-- **key**， 插件的 `key`，可以理解为插件的名称，在 `.fes.js` 中用 `key` 配置此插件。
-- **config**，插件的配置信息：
-  - schema，定义配置的类型
-  - default，默认配置
-- **enableBy**， 是否开启插件，可配置某些场景下禁用插件。
-
-
-## 发布到 npm
- 
-以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被 Fes.js 自动注册为插件或插件集。 
-
-所以编写好的插件想发布到 npm 供其他人使用，包名必须是 `fes-preset-` 和 `fes-plugin-` 开头。

docs/zh/reference/plugin/dev/api.md

@@ -1,634 +0,0 @@
-# 插件 API
-
-## 属性
-
-### api.paths
-
-一些关键的路径：
-- cwd，执行命令的绝对路径
-- absNodeModulesPath，nodeModule的绝对路径
-- absOutputPath，输出 `build` 产物的绝对路径
-- absSrcPath，`src` 目录的绝对路径
-- absPagesPath，`pages`目录的绝对路径
-- absTmpPath，`.fes`临时文件目录的绝对路径
-
-### api.cwd
-执行命令的绝对路径
-
-### api.pkg
-`package.json`的内容
-
-### api.configInstance
-`config`实例
-
-### userConfig
-用户配置
-                        
-### config
-插件配置可被修改，此为最终的配置
-
-### env
-process.env
-
-### args
-环境变量
-
-## 核心方法
-
-### describe
-注册阶段执行，用于描述插件或插件集的 id、key、配置信息、启用方式等。
-
-用法：**describe({ id?: string, key?: string, config?: { default, schema, onChange } }, enableBy?)**
-
-例如：
-```js
- api.describe({
-    key: 'esbuild',
-    config: {
-        schema(joi) {
-            return joi.object();
-        },
-        default: {}
-    },
-    enableBy: api.EnableBy.config,
-});
-```
-注：
-
-- `config.default` 为配置的默认值，用户没有配置时取这个
-- `config.schema` 用于声明配置的类型，基于 [joi](https://hapi.dev/module/joi)，如果你希望用户进行配置，这个是必须的，否则用户的配置无效
-- `config.onChange` 是 `dev` 阶段配置被修改后的处理机制，默认会重启 dev 进程，也可以修改为 api.ConfigChangeType.regenerateTmpFiles 只重新生成临时文件，还可以通过函数的格式自定义
-- `enableBy` 为启用方式，默认是注册启用，可更改为 `api.EnableBy.config`，还可以用自定义函数的方式决定其启用时机（动态生效）
-
-
-### register
-为 api.applyPlugins 注册可供其使用的 hook。
-
-用法：**register({ key: string, fn: Function, pluginId?: string, before?: string, stage?: number })**
-
-参数：
-- key：唯一id
-- fn：hook函数，当执行`api.applyPlugins`时，此函数被执行。
-- pluginId：插件id，如果配置了插件id，则只有此插件未被禁用时，才会执行。
-
-```js
-// 可同步
-api.register({
-  key: 'foo',
-  fn() {
-    return 'a';
-  },
-});
-
-// 可异步
-api.register({
-  key: 'foo',
-  async fn() {
-    await delay(100);
-    return 'b';
-  },
-});
-```
-
-注意：
-- fn 支持同步和异步，异步通过 Promise，返回值为 Promise 即为异步
-- fn 里的内容需结合 `api.appyPlugins` 的 `type` 参数来看,如果是 `api.ApplyPluginsType.add`，需有返回值，这些返回值最终会被合成一个数组。如果是 `api.ApplyPluginsType.modify`，需对第一个参数做修改，并返回它，它会作为下个hook的参数。 如果是 `api.ApplyPluginsType.event`，无需返回值
-- stage 和 before 都是用于调整执行顺序的，参考 tapable
-- stage 默认是 0，设为 -1 或更少会提前执行，设为 1 或更多会后置执行
-
-### applyPlugins
-
-取得 register 注册的 hooks 执行后的数据。
-
-用法：**applyPlugins({ key: string, type: api.ApplyPluginsType, initialValue?: any, args?: any })**
-
-参数：
-- key：唯一id
-- type：hook的类型。
-- initialValue：初始值。
-- args：参数，hook函数执行时，args会作为参数传入。
-
-例如：
-```js
-const foo = await api.applyPlugins({
-  key: 'foo',
-  type: api.ApplyPluginsType.add,
-  initialValue: [],
-});
-console.log(foo); // ['a', 'b']
-```
-
-#### api.ApplyPluginsType
-
-编译时插件hook执行类型，enum 类型，包含三个属性：
-
-- compose，用于合并执行多个函数，函数可决定前序函数的执行时机
-- modify，用于修改值
-- event，用于执行事件，前面没有依赖关系
-
-### registerMethod
-
-往 `api` 上注册方法。如果有提供 `fn`，则执行 `fn` 定义的函数。
-
-用法：**registerMethod({ name: string, fn?: Function, exitsError?: boolean })**
-
-例如：
-```js
- api.registerMethod({
-    name: 'writeTmpFile',
-    fn({
-        path,
-        content
-    }) {
-        assert(
-            api.stage >= api.ServiceStage.pluginReady,
-            'api.writeTmpFile() should not execute in register stage.'
-        );
-        const absPath = join(api.paths.absTmpPath, path);
-        api.utils.mkdirp.sync(dirname(absPath));
-        if (!existsSync(absPath) || readFileSync(absPath, 'utf-8') !== content) {
-            writeFileSync(absPath, content, 'utf-8');
-        }
-    }
-});
-```
-然后在插件中可以使用：
-```js
-api.writeTmpFile()
-```
-
-
-### registerCommand
-
-注册命令，基于 [commander](https://github.com/tj/commander.js/) 实现的机制。
-
-用法：**registerCommand({ command: string, description: string, fn: Function, options?: Object })**
-
-参数：
-- command
-- description，描述文字，输入 `--help` 会打印
-- fn，命令执行的函数，参数有：
-  - rawArgv，原始参数
-  - args，参数
-  - options，执行命令时附带的的参数配置
-  - program，commander对象
-- options，参数配置，基于 [commander](https://github.com/tj/commander.js/) 。
-
-例如：
-```js
-api.registerCommand({
-    command: 'webpack',
-    description: 'inspect webpack configurations',
-    options: [{
-        name: '--rule <ruleName>',
-        description: 'inspect a specific module rule'
-    }, {
-        name: '--plugin <pluginName>',
-        description: 'inspect a specific plugin'
-    }, {
-        name: '--rules',
-        description: 'list all module rule names'
-    }, {
-        name: '--plugins',
-        description: 'list all plugin names'
-    }, {
-        name: '--verbose',
-        description: 'show full function definitions in output'
-    }],
-    async fn({ rawArgv, args, options, program}) {
-    }
-})
-```
-当项目引入此插件后，使用：
-```bash
-fes webpack
-```
-
-### registerPresets
-
-注册插件集，参数为路径数组。
-
-用法：**registerPresets(presets: string[])**
-
-例如：
-```js
-api.registerPresets([
-    { id: 'preset_2', key: 'preset2', apply: () => () => {} },
-    require.resolve('./preset_3'),
-]);
-```
-
-### registerPlugins
-
-注册插件，参数为路径数组。
-
-用法：**registerPlugins(plugins: string[])**
-
-例如：
-```js
-api.registerPlugins([
-    { id: 'preset_2', key: 'preset2', apply: () => () => {} },
-    require.resolve('./preset_3'),
-]);
-```
-
-### hasPlugins
-判断是否有注册某个插件，插件的 id 规则：
-- id 默认为包名
-- 内置插件以 `@@` 为前缀，比如 `@@/registerMethod`
-
-用法：**hasPlugins(pluginIds: string[])**
-
-例如
-```js
-// 判断是否有注册 @fesjs/plugin-locale
-api.hasPlugins(['@fesjs/plugin-locale']);
-```
-
-::: tip
-如果在注册阶段使用，只能判断在他之前是否有注册某个插件。
-:::
-
-### hasPresets
-判断是否有注册某个插件集。
-
-用法：**hasPresets(presetIds: string[])**
-
-例如
-```js
-// 判断是否有注册
-api.hasPlugins(['@fesjs/preset-xxx']);
-```
-
-::: tip
-如果在注册阶段使用，只能判断在他之前是否有注册某个插件集。
-:::
-
-### skipPlugins
-声明哪些插件需要被禁用，参数为插件 id 的数组。
-
-用法：**hasPresets(presetIds: string[])**
-
-例如：
-```js
-// 禁用 plugin-model 插件
-api.skipPlugins(['@fesjs/plugin-model']);
-```
-
-## 扩展方法
-
-通过 api.registerMethod() 扩展的方法。
-
-
-
-### addPluginExports
-把插件需要导出的运行时 API 写入`@fesjs/fes`。
-```js
-api.addPluginExports(() => [
-    {
-        specifiers: ['access', 'useAccess'],
-        source: absoluteFilePath
-    }
-]);
-```
-这样用户使用时：
-```js
-import { access, useAccess } from '@fesjs/fes';
-```
-
-### addCoreExports
-提供给其他插件运行时需要的 API。
-```js
-api.addCoreExports(() => [
-    {
-        specifiers: ['getRoutes', 'getRouter', 'getHistory', 'destroyRouter'],
-        source: absCoreFilePath
-    }
-]);
-```
-使用：
-```js
-import { getHistory, destroyRouter } from '@@/core/coreExports';
-```
-
-### addRuntimePlugin
-添加运行时插件，返回值格式为表示文件路径的字符串。
-
-例如：
-```js
-api.addRuntimePlugin(() => join(__dirname, './runtime'));
-```
-
-### addRuntimePluginKey
-添加插件提供的运行时配置的 key，返回值格式为字符串。
-
-例如：
-```js
-api.addRuntimePluginKey(() => 'some');
-```
-则用户可以：
-```js
-// app.js
-const some = function(){
-    return {
-
-    }
-}
-
-```
-
-### addEntryImportsAhead
-在入口文件现有 import 的前面添加 import。
-
-例如：
-```js
-api.addEntryImportsAhead(() => [{ source: 'anypackage' }]);
-```
-
-### addEntryImports
-在入口文件现有 import 的后面添加 import。
-
-例如：
-```js
-api.addEntryImport(() => {
-  return [
-    {
-      source: '/modulePath/xxx.js',
-      specifier: 'moduleName',
-    }
-  ]
-});
-```
-
-### addEntryCodeAhead
-在入口文件最前面（import 之后）添加代码。
-
-例如：
-```js
-api.addEntryCodeAhead(
-    () => `${globalCSSFile
-        .map(file => `require('${winPath(relative(absTmpPath, file))}');`)
-        .join('')}`
-
-```
-    
-### addEntryCode
-在入口文件最后添加代码。
-
-例如：
-```js
-api.addEntryCode(() => {
-  return `console.log('works!')`
-})
-```
-
-### addHTMLHeadScripts
-在 HTML 头部添加脚本。
-
-例如：
-```js
-api.addHTMLHeadScripts(() => {
-  return [
-    {
-      content: '',
-      src: '',
-      // ...attrs
-    },
-  ];
-});
-```
-
-### addBeforeMiddlewares
-添加在 `webpack compiler` 中间件之前的中间件，返回值格式为 `express` 中间件。
-
-例如：
-```js
-api.addBeforeMiddlewares(() => {
-  return (req, res, next) => {
-    if (false) {
-      res.end('end');
-    } else {
-      next();
-    }
-  };
-});
-```
-
-### addMiddlewares
-添加在 `webpack compiler` 中间件之后的中间件，返回值格式为 `express` 中间件。
-
-
-
-### addTmpGenerateWatcherPaths
-添加重新生成临时文件的监听路径。
-
-例如：
-```js
-api.addTmpGenerateWatcherPaths(() => [
-    './app.js',
-]);
-```
-
-### chainWebpack
-通过 [webpack-chain] 的方式修改 webpack 配置。
-
-例如：
-```js
-api.chainWebpack((memo) => {
-    memo.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.esm-bundler.js');
-});
-```
-
-### copyTmpFiles
-批量写临时文件。
-
-例如：
-```js
- api.copyTmpFiles({
-    namespace,
-    path: join(__dirname, 'runtime'),
-    ignore: ['.tpl']
-});
-```
-
-参数：
-
-- namespace：复制到临时文件夹下的目标目录
-- path：需要复制的文件目录
-- ignore：需要排除的文件
-
-::: tip
-不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件
-临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 `webpack` 的重新编译
-:::
-
-
-### getPort
-获取端口号，dev 时有效。
-
-### getHostname
-获取 hostname，dev 时有效。
-
-### getServer
-获取 devServer，dev 时有效。
-
-### getRoutes
-获取 `api.modifyRoutes` 修改过后的路由信息。
-
-### getRoutesJSON
-获取格式化后的路由信息
-
-### modifyRoutes
-
-修改路由。
-
-例如：
-```js
-// 把BaseLayout插入到路由配置中，作为根路由
-api.modifyRoutes(routes => [
-    {
-        path: '/',
-        component: winPath(
-            join(api.paths.absTmpPath || '', absFilePath)
-        ),
-        children: routes
-    }
-]);
-```
-
-### modifyBundleConfigOpts
-修改获取 bundleConfig 的函数参数。
-
-例如：
-```js
-api.modifyBundleConfigOpts(memo => {
-    memo.miniCSSExtractPluginPath = require.resolve('mini-css-extract-plugin');
-    memo.miniCSSExtractPluginLoaderPath = require.resolve(
-    'mini-css-extract-plugin/dist/loader',
-    );
-    return memo;
-});
-
-```
-
-### modifyBundleConfig
-修改 bundle 配置。
-
-```js
-api.modifyBundleConfig((bundleConfig) => {
-    // do something
-    return bundleConfig;
-});
-```
-
-### modifyBabelOpts
-修改 babel 配置项。
-
-例如：
-```js
-api.modifyBabelOpts((babelOpts) => {
-    if (api.config.babelPluginImport) {
-        api.config.babelPluginImport.forEach((config) => {
-            babelOpts.plugins.push(['import', config]);
-        });
-    }
-    return babelOpts;
-});
-```    
-
-### modifyBabelPresetOpts
-修改 babel 插件的配置。
-
-例如：
-```js
-api.modifyBabelPresetOpts(opts => {
-    return {
-      ...opts,
-      import: (opts.import || []).concat([
-        { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
-      ]),
-    };
-});
-```
-
-### modifyPaths
-修改 paths 对象。
-
-
-### modifyDefaultConfig
-修改默认配置。
-例如：
-```js
-api.modifyDefaultConfig((memo) => {
-  return {
-    ...memo,
-    ...defaultOptions,
-  };
-});
-```
-
-### modifyConfig
-修改最终配置。
-
-例如：
-```js
-api.modifyConfig((memo) => {
-  return {
-    ...memo,
-    ...defaultOptions,
-  };
-});
-
-```
-
-### modifyPublicPathStr
-修改 publicPath 字符串。
-
-例如：
-```js
-api.modifyPublicPathStr(() => {
-  return api.config.publicPath || '/';
-});
-```
-
-### onPluginReady
-在插件初始化完成触发。在 onStart 之前，此时还没有 config 和 paths，他们尚未解析好。
-
-### onStart
-在命令注册函数执行前触发。可以使用 config 和 paths。
-
-### onExit
-dev 退出时触发。
-
-### onGenerateFiles
-生成临时文件，触发时机在 webpack 编译之前。
-
-### restartServer
-重启 devServer，dev 时有效。
-
-### writeTmpFile
-写临时文件。
-
-例如：
-```js
-api.writeTmpFile({
-    path: absoluteFilePath,
-    content: Mustache.render(
-        readFileSync(join(__dirname, 'runtime/core.tpl'), 'utf-8'),
-        {
-            REPLACE_ROLES: JSON.stringify(roles)
-        }
-    )
-});
-```
-
-参数：
-
-- path：相对于临时文件夹的路径
-- content：文件内容
-
-::: tip
-不能在注册阶段使用，通常放在 api.onGenerateFiles() 里，这样能在需要时重新生成临时文件
-临时文件的写入做了缓存处理，如果内容一致，不会做写的操作，以减少触发 webpack 的重新编译
-:::
-

docs/zh/reference/plugin/plugins/access.md

@@ -1,279 +0,0 @@
-# @fesjs/plugin-access
-
-## 介绍
-对于前端应用来说，权限就是页面、页面元素是否可见。
-
-### 资源
-Fes.js 把页面、页面元素统一叫做资源，每个资源都有 `accessId`：
-- 页面的 `accessId` 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。
-  
-- 页面元素的 `accessId` 没有默认值，由我们自定义。
-```vue
-<template>
-    <access :id="accessId"> accessOnepicess1 <input /> </access>
-    <div v-access="accessId"> accessOnepicess2 </div>
-</template>
-<script>
-export default {
-    setup(){
-        return {
-            accessId: 'accessOnepicess'
-        }
-    }
-}
-</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 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
-
-
-当然有时候业务比较复杂，角色对应的权限是动态的。不要怕！插件提供粒度更细的 API 来设置当前用户能访问的资源。
-
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-access": "^2.0.0"
-    },
-}
-```
-
-## 配置
-
-### 编译时配置
-在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
-```js
-export default {
-    access: {
-        roles: {
-            admin: ["/", "/onepiece", '/store']
-        }
-    }
-}
-```
-
-#### roles
-- **类型**：对象
-  
-- **默认值**：`{}`
-
-- **详情**：     
-  
-  角色预定义列表。`key` 是角色 Id ，`value`是角色 Id 对应的资源列表。
-
-
-### 运行时配置
-在 `app.js` 中配置
-
-#### unAccessHandler
-- **类型**：`Function`
-  
-- **默认值**：`null`
-
-- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
-- **参数**
-  - router：createRouter 创建的路由实例
-  - to： 准备进入的路由
-  - from：离开的路由
-  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
-
-比如：
-```js
-export const access = {
-    unAccessHandler({ to, next }) {
-        const accesssIds = accessApi.getAccess();
-        if (to.path === '/404') {
-            accessApi.setAccess(accesssIds.concat(['/404']));
-            return next('/404');
-        }
-        if (!accesssIds.includes('/403')) {
-            accessApi.setAccess(accesssIds.concat(['/403']));
-        }
-        next('/403');
-    }
-};
-
-```
-
-#### noFoundHandler
-- **类型**：`Function`
-  
-- **默认值**：`null`
-
-- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
-- **参数**
-  - router：createRouter 创建的路由实例
-  - to： 准备进入的路由
-  - from：离开的路由
-  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
-
-比如：
-```js
-export const access = {
-    noFoundHandler({ next }) {
-        const accesssIds = accessApi.getAccess();
-        if (!accesssIds.includes('/404')) {
-            accessApi.setAccess(accesssIds.concat(['/404']));
-        }
-        next('/404');
-    }
-};
-
-```
-
-## API
-
-### access
-插件 API 通过 `@fesjs/fes` 导出：
-```js
-import { access } from '@fesjs/fes'
-```
-
-#### access.hasAccess
-- **类型**：函数
-  
-- **详情**: 判断某个资源是否可见。
-- **参数**：
-  - accessId，资源Id
-- **返回值**：Boolean
-
-#### access.isDataReady
-- **类型**：函数
-  
-- **详情**：可以用异步数据来设置权限，`isDataReady` 用来判断异步数据是否已经加载完毕。
-- **参数**：null
-- **返回值**：Boolean
-```js
-import { access } from '@fesjs/fes';
-console.log(access.isDataReady())
-```
-
-#### access.setRole
-- **类型**：函数
-  
-- **详情**：设置当前的角色。
-- **参数**：
-  - roleId，角色Id，有两种类型：
-    - String，对应着 `roles` 配置对象中的 `key`。
-    - Promise，Promise resolve 的结果应对应着 `roles` 配置对象中的 `key`。
-```js
-import { access } from '@fesjs/fes';
-access.setRole('admin')
-```
-
-#### access.setAccess
-- **类型**：函数
-  
-- **详情**：设置当前的角色。
-- **参数**：
-  - accessIds，资源Id数组，有两种类型：
-    - Array，数组项对应着 `roles` 配置对象中的 `key`。
-    - Promise，Promise resolve 的结果应该是`Array<accessId>`。
-```js
-import { access } from '@fesjs/fes';
-access.setAccess(['/a', '/b', '/c'])
-```
-
-#### access.getAccess
-- **类型**：函数
-  
-- **详情**：返回当前可见的资源列表。
-- **参数**：null
-
-```js
-import { access } from '@fesjs/fes';
-access.getAccess();
-```
-
-### useAccess
-- **类型**：[composition]((https://v3.cn.vuejs.org/guide/composition-api-introduction.html)) 函数
-  
-- **详情**：判断某个资源是否可见。
-- **参数**：
-  - accessId，资源Id
-- **返回值**：`ref`
-  
-```vue
-<template>
-    <div v-if="accessOnepicess">accessOnepicess</div>
-</template>
-<script>
-import { useAccess } from '@fesjs/fes';
-export default {
-    setup(){
-        const accessOnepicess = useAccess('/onepiece1');
-        return {
-            accessOnepicess
-        }
-    }
-}
-</script>
-```
-### v-access
-在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时显示DOM，当没有权限时隐藏此DOM。
-```vue
-<template>
-    <div v-access="accessId"> accessOnepicess </div>
-</template>
-<script>
-export default {
-    setup(){
-        return {
-            accessId: 'accessOnepicess'
-        }
-    }
-}
-</script>
-```
-
-### 组件 Access
-组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
-```vue
-<template>
-    <access :id="accessId"> accessOnepicess </access>
-</template>
-<script>
-export default {
-    setup(){
-        return {
-            accessId: 'accessOnepicess'
-        }
-    }
-}
-</script>
-```

docs/zh/reference/plugin/plugins/editor.md

@@ -1,120 +0,0 @@
-# @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 |

docs/zh/reference/plugin/plugins/enums.md

@@ -1,226 +0,0 @@
-# @fesjs/plugin-enums
-## 介绍
-日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。
-
-该插件提供统一的枚举存取及丰富的函数来处理枚举。
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-enums": "^2.0.0"
-    }
-}
-```
-
-## 配置
-
-### 静态配置
-在 `.fes.js` 中配置：
-```js
-// 配置格式：[[key, value], ...]
-export default {
-    enums: {
-        status: [['0', '无效的'], ['1', '有效的']]
-    }
-}
-```
-
-### 动态配置
-在业务代码中
-```js
-import { enums } from '@fesjs/fes';
-// 动态添加
-enums.push('status', [['0', '无效的'], ['1', '有效的']]
-enums.get('status', '1') // 有效的
-```
-
-## 场景使用
-- 动态添加的枚举项支持数组和对象
-
-- 枚举项为对象时，可以指定keyName和valueName属性名
-
-- 导出枚举值，可指定取值的路径
-
-- 导出枚举可扩展属性
-```vue
-<template>
-    <div>
-        <!-- 遍历枚举status -->
-        <div v-for="item in enumsGet('status')" :key="item.key">
-            {{item.value}}：{{item.key}}
-        </div>
-        <!-- 遍历枚举扩展后的roles -->
-        <div v-for="item in roles" :key="item.key">
-            {{item.name}}：{{item.disabled}}
-        </div>
-        <!-- 获取枚举roles为2的英文名 -->
-        <div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
-    </div>
-</template>
-<script>
-import { enums } from '@fesjs/fes';
-
-export default {
-    setup() {
-        // 动态添加枚举，枚举项是对象，并指定key的属性名为id
-        enums.push('roles', [
-            {
-                id: '1',
-                cName: '系统管理员',
-                eName: 'System',
-                perm: ['1', '2', '3']
-            },
-            {
-                id: '2',
-                cName: '业务管理员',
-                eName: 'Business',
-                perm: ['1', '2']
-            },
-            {
-                id: '3',
-                cName: '普通用户',
-                eName: 'User',
-                perm: ['1']
-            }
-        ], { keyName: 'id' });
-        // 导出定制格式的roles，扩展枚举项新的属性name、disabled
-        const roles = enums.get('roles', {
-            extend: [
-                {
-                    key: 'name',
-                    dir: 'cName' // 指定取值路径，取属性cName的值
-                },
-                {
-                    key: 'disabled',
-                    // 传入函数，获取结果值
-                    transfer: item => item.value.perm.some(i => i >= 2)
-                }
-            ]
-        });
-        console.log(roles);
-        // [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
-        return {
-            enumsGet: enums.get,
-            roles
-        };
-    }
-};
-</script>
-
-```
-## API
-### get
-* `get(name: string)` 获取指定名字的枚举
-
-* `get(name: string, key: string)` 获取指定名字及键枚举默认值
-
-* `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举，[查看extend配置](#extend配置)
-
-* `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir规则](#dir规则)的值
-
-```js
-get('status')
-get('status', '1')
-get('status', {
-    extend: [
-        {
-            key: 'name',
-            dir: 'value',
-        },
-        {
-            key: 'disabled',
-            transfer: item => item === '0'
-        }
-    ]
-})
-get('status', '1', {dir: 'value'})
-```
-
-### push
-动态添加枚举，重复添加会覆盖
-* `push(name: string, _enum: Array<Array>)`
-* `push(name: string, _enum: Array<Object>, opt?: Object)`
-    * opt.keyName 指定key的取值属性，默认是key
-    * opt.valueName 指定value的取值属性
-
-枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value
-
-枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，`如果valueName未设置则value就是枚举项`
-
-### remove
-* remove(name: string)
-
-移除指定的枚举
-### concat
-基于现有的枚举，连接上新的枚举后返回新的枚举
-* `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
-    * opt.keyName 指定key的取值属性，默认是key
-    * opt.valueName 指定value的取值属性
-    * opt.before 是否添加在现有的之前，默认是false
-    * opt.extend：返回的枚举[extend配置](#extend配置)
-
-### convert
-将传入的枚举格式转换为{key, value}的形式
-* `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
-    * opt.keyName 指定key的取值属性，默认是key
-    * opt.valueName 指定value的取值属性
-
-### extend配置
-扩展枚举项属性的配置
-* `extend: Array<Object>`
-    * `key` 指定扩展的属性名
-    * `dir` 指定该属性的取值路径
-    * `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值
-::: tip
-同时设置[dir](#dir规则)和transfer，transfer优先
-:::
-
-```js
-get('status', {
-    extend: [
-        {
-            key: 'name',
-            dir: 'value',
-        },
-        {
-            key: 'disabled',
-            transfer: item => item.key === '0'
-        }
-    ]
-})
-```
-
-
-### dir规则
-dir是指定枚举项value的取值方式，规则如下：
-* 对象属性 `A`、`A.B`
-* 数组 `[0]`、`[0][1]`
-* 混合 `A[0]`、`[0].A`、`A[0].B`
-
-```js
-// 假如枚举项value的结构如下
-const user = {
-    age: 18,
-    name: 'aring',
-    role: [
-        {
-            id: 1,
-            name: '管理员'
-        },
-                    {
-            id: 2,
-            name: '业务操作员'
-        }
-    ]
-}
-// 那么规则解析是：
-dir              value
-'age'        =>  18
-'role[0]'    =>  {id: 1, name: '管理员'}
-'role[1].id' =>  2
-```
-::: tip
-枚举项value如果是基本类型，则规则不生效，value就是当前值
-:::

docs/zh/reference/plugin/plugins/icon.md

@@ -1,32 +0,0 @@
-# @fesjs/plugin-icon
-
-## 介绍
-
-提供以 `component` 的方式，直接使用 svg icon 的能力。
-## 启用方式
-
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-icon": "^2.0.0"
-    },
-}
-```
-
-## 使用
-
-新建 `src/icons` 目录，将 svg 文件放入其中，在 `component` 中引用：
-
-```jsx
-<fes-icon type="iconName" />
-```
-
-### 属性
-
-| 属性 | 说明 | 类型 |
-| :-----| :---- | :---- |
-| type | svg 文件名 | `string` |
-| spin | 是否无限旋转 | `boolean` |
-| rotate | 旋转角度 | `number` |

docs/zh/reference/plugin/plugins/jest.md

@@ -1,355 +0,0 @@
-# @fesjs/plugin-jest
-
-集成 [Jest](https://www.jestjs.cn/) 测试框架，目前只支持单元测试和覆盖测试。
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-jest": "^2.0.0"
-    },
-}
-```
-
-## 约定
-
-- 项目根目录下 `tests` 和 `__tests__` 文件夹中的 `js` 或者 `jsx` 文件为测试文件。
-- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}`
-
-例如测试文件 `add.js`：
-```
-fes-template
-├── __tests__
-│   └── add.js
-└── src
-    ├── .fes
-    └── utils
-        └── sum.js
-```
-内容如下：
-```js
-import sum from '@/utils/sum';
-test('adds 1 + 2 to equal 3', () => {
-    expect(sum(1, 2)).toBe(3);
-});
-
-```
-
-## 命令 
-在 `fes` 上注册 `test` 命令：
-```bash
-$ fes test
-```
-
-## 配置
-插件实现 Jest 的全部配置，具体请查看 [文档-configuration](https://www.jestjs.cn/docs/configuration#reference)。 也可以使用 `-h` 打印配置帮助信息：
-
-### args 变量
-
-```bash
-$ fes test -h
-```
-打印配置帮助信息:
-```
-$ fes test -h
-Usage: fes test [options]
-
-run unit tests with jest
-
-Options:
-  --all                         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.
-  --automock                    Automock all files by default.
-  -b --bail                     Exit the test suite immediately after `n`
-                                number of failing tests.
-  --browser                     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.
-  --cache                       Whether to use the transform cache. Disable the
-                                cache using --no-cache.
-  --cacheDirectory              The directory where Jest should store its
-                                cached  dependency information.
-  --changedFilesWithAncestor    Runs tests related to the current changes and
-                                the changes made in the last commit. Behaves
-                                similarly to `--onlyChanged`.
-  --changedSince                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`.
-  --ci                          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.
-  --clearCache                  Clears the configured Jest cache directory and
-                                then exits. Default directory can be found by
-                                calling jest --showConfig
-  --clearMocks                  Automatically clear mock calls and instances
-                                between every test. Equivalent to calling
-                                jest.clearAllMocks() between each test.
-  --collectCoverage             Alias for --coverage.
-  --collectCoverageFrom         A glob pattern relative to <rootDir> matching
-                                the files that coverage info needs to be
-                                collected from.
-  --collectCoverageOnlyFrom     Explicit list of paths coverage will be
-                                restricted to.
-  --color                       Forces test results output color highlighting
-                                (even if stdout is not a TTY). Set to false if
-                                you would like to have no colors.
-  --colors                      Alias for `--color`.
-  -c --config                   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.
-  --coverage                    Indicates that test coverage information should
-                                be collected and reported in the output.
-  --coverageDirectory           The directory where Jest should output its
-                                coverage files.
-  --coveragePathIgnorePatterns  An array of regexp pattern strings that are
-                                matched against all file paths before executing
-                                the test. If the file pathmatches any of the
-                                patterns, coverage information will be skipped.
-  --coverageProvider            Select between Babel and V8 to collect coverage
-  --coverageReporters           A list of reporter names that Jest uses when
-                                writing coverage reports. Any istanbul reporter
-                                can be used.
-  --coverageThreshold           A JSON string with which will be used to
-                                configure minimum threshold enforcement for
-                                coverage results
-  --debug                       Print debugging info about your jest config.
-  --detectLeaks                 **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
-  --detectOpenHandles           Print out remaining open handles preventing
-                                Jest from exiting at the end of a test run.
-                                Implies `runInBand`.
-  --env                         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`
-  --errorOnDeprecated           Make calling deprecated APIs throw helpful
-                                error messages.
-  -e --expand                   Use this flag to show full diffs instead of a
-                                patch.
-  --filter                      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.
-  --findRelatedTests            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.
-  --forceExit                   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.
-  --globalSetup                 The path to a module that runs before All
-                                Tests.
-  --globalTeardown              The path to a module that runs after All Tests.
-  --globals                     A JSON string with map of global variables that
-                                need to be available in all test environments.
-  --haste                       A JSON string with map of variables for the
-                                haste module system
-  --init                        Generate a basic configuration file
-  --injectGlobals               Should Jest inject global variables or not
-  --json                        Prints the test results in JSON. This mode will
-                                send all other test output and user messages to
-                                stderr.
-  --lastCommit                  Run all tests affected by file changes in the
-                                last commit made. Behaves similarly to
-                                `--onlyChanged`.
-  --listTests                   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
-  --logHeapUsage                Logs the heap usage after every test. Useful to
-                                debug memory leaks. Use together with
-                                `--runInBand` and `--expose-gc` in node.
-  --mapCoverage                 Maps code coverage reports against original source code when transformers supply source maps.
-
-  DEPRECATED
-  --maxConcurrency              Specifies the maximum number of tests that are
-                                allowed to runconcurrently. This only affects
-                                tests using `test.concurrent`.
-  -w --maxWorkers               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)
-  --moduleDirectories           An array of directory names to be searched
-                                recursively up from the requiring module's
-                                location.
-  --moduleFileExtensions        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.
-  --moduleNameMapper            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
-  --modulePathIgnorePatterns    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.
-  --modulePaths                 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.
-  --noStackTrace                Disables stack trace in test results output
-  --notify                      Activates notifications for test results.
-  --notifyMode                  Specifies when notifications will appear for
-                                test results.
-  -o --onlyChanged              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.
-  -f --onlyFailures             Run tests that failed in the previous
-                                execution.
-  --outputFile                  Write test results to a file when the --json
-                                option is also specified.
-  --passWithNoTests             Will not fail if no tests are found (for
-                                example while using `--testPathPattern`.)
-  --preset                      A preset that is used as a base for Jest's
-                                configuration.
-  --prettierPath                The path to the "prettier" module used for
-                                inline snapshots.
-  --projects                    A list of projects that use Jest to run all
-                                tests of all projects in a single instance of
-                                Jest.
-  --reporters                   A list of custom reporters for the test suite.
-  --resetMocks                  Automatically reset mock state between every
-                                test. Equivalent to calling
-                                jest.resetAllMocks() between each test.
-  --resetModules                If enabled, the module registry for every test
-                                file will be reset before running each
-                                individual test.
-  --resolver                    A JSON string which allows the use of a custom
-                                resolver.
-  --restoreMocks                Automatically restore mock state and
-                                implementation between every test. Equivalent
-                                to calling jest.restoreAllMocks() between each
-                                test.
-  --rootDir                     The root directory that Jest should scan for
-                                tests and modules within.
-  --roots                       A list of paths to directories that Jest should
-                                use to search for files in.
-  -i --runInBand                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.
-  --runTestsByPath              Used when provided patterns are exact file
-                                paths. This avoids converting them into a
-                                regular expression and matching it against
-                                every single file.
-  --runner                      Allows to use a custom runner instead of Jest's
-                                default test runner.
-  --selectProjects              Run only the tests of the specified
-                                projects.Jest uses the attribute `displayName`
-                                in the configuration to identify each project.
-  --setupFiles                  A list of paths to modules that run some code
-                                to configure or set up the testing environment
-                                before each test.
-  --setupFilesAfterEnv          A list of paths to modules that run some code
-                                to configure or set up the testing framework
-                                before each test
-  --showConfig                  Print your jest config and then exits.
-  --silent                      Prevent tests from printing messages through
-                                the console.
-  --skipFilter                  Disables the filter provided by --filter.
-                                Useful for CI jobs, or local enforcement when
-                                fixing tests.
-  --snapshotSerializers         A list of paths to snapshot serializer modules
-                                Jest should use for snapshot testing.
-  --testEnvironment             Alias for --env
-  --testEnvironmentOptions      Test environment options that will be passed to
-                                the testEnvironment. The relevant options
-                                depend on the environment.
-  --testFailureExitCode         Exit code of `jest` command if the test run
-                                failed
-  --testLocationInResults       Add `location` information to the test results
-  --testMatch                   The glob patterns Jest uses to detect test
-                                files.
-  -t --testNamePattern          Run only tests with a name that matches the
-                                regex pattern.
-  --testPathIgnorePatterns      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.
-  --testPathPattern             A regexp pattern string that is matched against
-                                all tests paths before executing the test.
-  --testRegex                   A string or array of string regexp patterns
-                                that Jest uses to detect test files.
-  --testResultsProcessor        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.
-  --testRunner                  Allows to specify a custom test runner. The
-                                default is  `jasmine2`. A path to a custom test
-                                runner can be provided:
-                                `<rootDir>/path/to/testRunner.js`.
-  --testSequencer               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`
-  --testTimeout                 This option sets the default timeouts of test
-                                cases.
-  --testURL                     This option sets the URL for the jsdom
-                                environment.
-  --timers                      Setting this value to fake allows the use of
-                                fake timers for functions such as setTimeout.
-  --transform                   A JSON string which maps from regular
-                                expressions to paths to transformers.
-  --transformIgnorePatterns     An array of regexp pattern strings that are
-                                matched against all source file paths before
-                                transformation.
-  --unmockedModulePathPatterns  An array of regexp pattern strings that are
-                                matched against all modules before the module
-                                loader will automatically return a mock for
-                                them.
-  -u --updateSnapshot           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
-  --useStderr                   Divert all output to stderr.
-  --verbose                     Display individual test results with the test
-                                suite hierarchy.
-  --watch                       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.
-  --watchAll                    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.
-  --watchPathIgnorePatterns     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.
-  --watchman                    Whether to use watchman for file crawling.
-                                Disable using --no-watchman.
-  -h, --help                    display help for command
-
-```
-
-比如覆盖测试：
-```
-fes test --coverage
-```
-
-### 配置文件
-除了插件内置的默认配置之外，插件遵循 `Jest`的配置文件规范，约定项目根目录下的 `jest.config.js` 为用户配置文件，约定 `packages.json` 的 `jest` 属性内容也是配置。
-
-
-### 优先级
-
-`args` 配置 > `package.json`中的 `jest` >  `jest.config.js` > 默认配置 

docs/zh/reference/plugin/plugins/layout.md

@@ -1,320 +0,0 @@
-# @fesjs/plugin-layout
-
-## 介绍
-为了进一步降低研发成本，我们尝试将布局通过 fes 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
-- 侧边栏菜单数据根据路由中的配置自动生成。
-- 布局，提供 `side`、 `top`、`mixin` 三种布局。
-- 主题，提供 `light`、`dark` 两种主题。
-- 默认实现对路由的 404、403 处理。
-- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
-- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
-- 支持自定义头部区域。
-- 菜单支持配置icon
-- 菜单标题支持国际化
-  
-- 可配置页面是否需要 layout。
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-layout": "^2.0.0"
-    },
-}
-```
-
-## 布局类型
-配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
-```js
-export default {
-    layout: {
-        navigation: 'side'
-    }
-}
-```
-
-### side
-<!-- ![side](/side.png) -->
-<img :src="$withBase('side.png')" alt="side">
-
-### top
-<!-- ![top](/top.png) -->
-<img :src="$withBase('top.png')" alt="top">
-
-### mixin
-<!-- ![mixin](/mixin.png) -->
-<img :src="$withBase('mixin.png')" alt="mixin">
-
-### 页面禁用布局
-布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
-```vue
-<config lang="json">
-{
-    "layout": false
-}
-</config>
-```
-如果只是不想展示`sidebar`，则：
-```
-<config lang="json">
-{
-    "layout": {
-        "sidebar": false
-    }
-}
-</config>
-```
-`layout`的可选配置有：
-
-- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
-  
-- **header**： 头部区域，从v4.0.0开始，之前名称叫`top`
-
-- **logo**：logo和标题区域。
-
-## 配置
-
-### keep-alive
-从 4.0.7 开始支持配置路由页面缓存：
-```
-<config lang="json">
-{
-    "keep-alive": true
-}
-</config>
-```
-
-### 编译时配置
-在 `.fes.js` 中配置：
-```js
-export default {
-    layout: {
-        // 标题
-        title: "Fes.js",
-        // 底部文字
-        footer: 'Created by MumbleFE',
-        // 主题light
-        theme: 'dark'
-        // 是否开启 tabs
-        multiTabs: false,
-        // 布局类型
-        navigation: 'side',
-        // 是否固定头部
-        fixedHeader: false,
-        // 是否固定sidebar
-        fixedSideBar: true,
-        // sidebar的宽度
-        sideWidth: 200,
-        menus: [{
-            name: 'index'
-        }, {
-            name: 'onepiece'
-        }, {
-            name: 'store'
-        }, {
-            name: 'simpleList'
-        }]
-    },
-```
-
-#### footer
-- **类型**：`String`
-  
-- **默认值**：`null`
-
-- **详情**：页面底部的文字。
-
-#### theme
-- **类型**：`String`
-  
-- **默认值**：`dark`
-
-- **详情**：主题，可选有 `dark`、`light`
-
-#### navigation
-- **类型**：`String`
-  
-- **默认值**：`side`
-
-- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin` 
-
-#### fixedHeader
-- **类型**：`Boolean`
-  
-- **默认值**：`false`
-
-- **详情**：是否固定头部，不跟随页面滚动。
-
-#### fixedSideBar
-- **类型**：`Boolean`
-  
-- **默认值**：`true`
-
-- **详情**：是否固定sidebar，不跟随页面滚动。
-
-#### title
-- **类型**：`String`
-  
-- **默认值**：`name` in package.json
-
-- **详情**：产品名，会显示在 Logo 旁边。   
-
-#### logo
-- **类型**：`String`
-  
-- **默认值**：默认提供 fes.js 的 Logo
-
-- **详情**：Logo，会显示在布局上。
-
-#### locale
-- **类型**：`boolean`
-  
-- **默认值**：`false`
-
-- **详情**：是否显示语言选择框。
-
-#### multiTabs
-- **类型**：`boolean`
-  
-- **默认值**：`false`
-
-- **详情**：是否开启多页。
-
-#### menus
-- **类型**：`Array`
-  
-- **默认值**：`[]`
-
-- **详情**：菜单配置，子项具体配置如下：
-  
-  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
-  
-  - **path**：菜单的路径，可配置第三方地址。
-
-  - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
-
-```
-{
-    path: '/product',
-    match: ['/product/*', '/product/create']
-}
-```
-  
-  - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
-
-  - **icon**: 菜单的图标，只有一级标题展示图标。
-    - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
-```js
-{
-    icon: "AppstoreOutlined"
-}
-```
-    - 图标使用本地或者远程svg图片。
-```js
-{
-    icon: "/wine-outline.svg"
-}
-```
-  
-  - **children**：子菜单配置。
-  
-  
-### 运行时配置
-在 `app.js` 中配置：
-```js
-import UserCenter from '@/components/UserCenter';
-export const layout = {
-    customHeader: <UserCenter />
-};
-
-```
-
-#### header
-- **类型**：`String`
-  
-- **默认值**：`true`
-
-- **详情**：是否显示 header 区域。
-
-#### sidebar
-- **类型**：`String`
-  
-- **默认值**：`true`
-
-- **详情**：是否显示 sidebar 区域。
-
-#### logo
-- **类型**：`String`
-  
-- **默认值**：`true`
-
-- **详情**：是否显示 logo 区域。
-
-#### customHeader
-- **类型**：Vue Component
-  
-- **默认值**：`null`
-
-- **详情**：top的区域部分位置提供组件自定义功能。
-
-#### unAccessHandler
-- **类型**：`Function`
-  
-- **默认值**：`null`
-
-- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
-- **参数**
-  - router：createRouter 创建的路由实例
-  - to： 准备进入的路由
-  - from：离开的路由
-  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
-
-比如：
-```js
-export const access = {
-    unAccessHandler({ to, next }) {
-        const accesssIds = accessApi.getAccess();
-        if (to.path === '/404') {
-            accessApi.setAccess(accesssIds.concat(['/404']));
-            return next('/404');
-        }
-        if (!accesssIds.includes('/403')) {
-            accessApi.setAccess(accesssIds.concat(['/403']));
-        }
-        next('/403');
-    }
-};
-
-```
-
-#### noFoundHandler
-- **类型**：函数
-  
-- **默认值**：null
-
-- **详情**：     
-  
-  当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
-- **参数**
-  - router：createRouter 创建的路由实例
-  - to： 准备进入的路由
-  - from：离开的路由
-  - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next)
-
-比如：
-```js
-export const access = {
-    noFoundHandler({ next }) {
-        const accesssIds = accessApi.getAccess();
-        if (!accesssIds.includes('/404')) {
-            accessApi.setAccess(accesssIds.concat(['/404']));
-        }
-        next('/404');
-    }
-};
-
-```

docs/zh/reference/plugin/plugins/locale.md

@@ -1,196 +0,0 @@
-# @fesjs/plugin-locale
-
-## 介绍
-国际化插件，基于 [Vue I18n](https://github.com/intlify/vue-i18n-next)，用于解决 i18n 问题。
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-locale": "^2.0.0"
-    },
-}
-```
-
-
-## 配置
-
-### 约定式配置
-Fes.js 约定如下目录，项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换：
-```
-src
-  ├── locales
-  │    ├── zh-CN.js
-  │    └── en-US.js
-  └── pages
-  │    └── index.vue
-  └── app.js
-```
-多语言文件的命名规范：`<lang>-<COUNTRY>.js`
-
-多语言文件的内容规范：键值组成的字面量，如下：
-```js
-// src/locales/zh-CN.js
-export default {
-    menu: {
-        interface: '接口'
-    },
-    overview: '概述',
-    i18n: {
-        internationalization: '国际化，基于',
-        achieve: '实现。',
-        ui: 'UI组件'
-    }
-};
-```
-```js
-// src/locales/en-US.js
-export default {
-    menu: {
-        interface: 'interface'
-    },
-    overview: 'Overview',
-    i18n: {
-        internationalization: 'internationalization，base on',
-        achieve: 'to achieve.',
-        ui: 'UI components'
-    }
-};
-```
-想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
-
-
-### 编译时配置
-在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置：
-```js
-export default {
-    locale: {
-    }
-}
-```
-默认配置为：
-```js
-export default {
-    locale: {
-        locale: 'zh-CN', // default locale
-        fallbackLocale: 'zh-CN', // set fallback locale
-        baseNavigator: true, // 开启浏览器语言检测
-        legacy: true, // 用户是否需要 Legacy API 模式
-    }
-} 
-```
-所有配置项如下：
-
-#### locale
-- **类型**：`String`
-  
-- **默认值**：`zh-CN`
-
-- **详情**：当前的语言。
-
-#### fallbackLocale
-- **类型**：`String`
-  
-- **默认值**：`zh-CN`
-
-- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
-
-#### baseNavigator
-- **类型**：`Boolean`
-  
-- **默认值**：`true`
-
-- **详情**：开启浏览器语言检测。
-
-默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
-
-#### legacy
-- **类型**：`Boolean`
-  
-- **默认值**：`true`
-
-- **详情**：用户是否需要 Legacy API 模式
-
-
-### 运行时配置
-暂无。
-
-## API
-
-### locale
-插件 API 通过 `@fesjs/fes` 导出：
-```js
-import { locale } from '@fesjs/fes'
-```
-
-#### locale.messages
-- **类型**：`Object`
-  
-- **详情**：当前的配置的语言信息。
-
-#### locale.setLocale
-- **类型**：`Function`
-  
-- **详情**：设置当前的语言。
-- **参数**：
-  - locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
-- **返回值**：`null`
-```js
-import { locale } from '@fesjs/fes';
-locale.setLocale({ locale: 'en-US' });
-```
-
-#### locale.addLocale
-- **类型**：`Function`
-  
-- **详情**：手动添加语言配置。
-- **参数**：
-  - locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
-  - messages, 语言信息。
-- **返回值**：`null`
-```js
-import { locale } from '@fesjs/fes'
-locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
-```
-
-
-#### locale.getAllLocales
-- **类型**：`Function`
-  
-- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
-- **参数**：null
-- **返回值**：`Array`
-```js
-import { locale } from '@fesjs/fes';
-console.log(locale.getAllLocales());
-// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
-```
-
-
-### useI18n
-Composition API, 只能在 `setup` 函数中使用，更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。
-举个 🌰：
-```vue
-<template>
-  <form>
-    <label>{{ t('language') }}</label>
-  </form>
-  <p>message: {{ t('hello') }}</p>
-</template>
-
-<script>
-import { useI18n } from '@fesjs/fes'
-
-export default {
- setup() {
-   const { t } = useI18n()
-   // Something to do ...
-
-   return { ..., t }
- }
-}
-</script>
-```
-
-`useI18n()`返回结果是 [Composer](https://vue-i18n.intlify.dev/api/composition.html#composer)，提供类似 `t`、`n`、`d` 等转换函数，在模板中使用。

docs/zh/reference/plugin/plugins/model.md

@@ -1,107 +0,0 @@
-# @fesjs/plugin-model
-
-## 启用方式
-在 package.json 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-model": "^2.0.0"
-    },
-}
-```
-## 介绍
-一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新，提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性，在应用实例中共享响应式数据。
-
-我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
-
-文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。
-
-### Model 文件
-**src/models/useAuthModel.js**
-```js
-import { reactive } from 'vue'
-
-export default function useAuthModel() {
-  const user = reactive({});
-
-  const signin = ()=>{
-      // todo
-  }
-
-  const signout = ()=>{
-      // todo
-  }
-
-  return {
-    user,
-    signin,
-    signout
-  }
-}
-```
-
-### 在组件中使用 Model
-```vue
-<script>
-import { useModel } from "@fesjs/fes"
-export default {
-    setup(){
-        const { user, signin, signout } = useModel("useAuthModel")
-    }
-}
-</script>
-```
-
-### @@initialState
-在`beforeRender`的返回的内容会写入`@@initialState`
-```js
-export const beforeRender = {
-    loading: <PageLoading />,
-    action() {
-        const { setRole } = access;
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                setRole('admin');
-                // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
-                resolve({
-                    userName: 'harrywan'
-                });
-            }, 1000);
-        });
-    }
-};
-````
-然后我们可以在其他组件中使用：
-```vue
-<template>
-    <div class="right">{{initialState.userName}}</div>
-</template>
-<script>
-import { useModel } from '@fesjs/fes';
-
-export default {
-    setup() {
-        const initialState = useModel('@@initialState');
-        return {
-            initialState
-        };
-    }
-};
-</script>
-<style scope>
-</style>
-```
-
-
-## API
-
-### useModel
-
-**useModel(name)**
-- **类型**：函数
-  
-- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。
-- **参数**：
-  - name，传入 Model 文件名
-

docs/zh/reference/plugin/plugins/pinia.md

@@ -1,90 +0,0 @@
-# @fesjs/plugin-pinia
-
-## 介绍
-集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。
-
-
-为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出：
-```js
-import { defineStore } from 'pinia';
-```
-
-约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
-```
-└── src
-    ├── pages
-    │    └── index.vue
-    └── stores 
-    │    ├── plugin-logger.js       
-    │    ├── user.js
-    └── app.js
-```
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-pinia": "^2.0.0",
-        "pinia": "^2.0.11"
-    }
-}
-```
-
-## API
-
-### pinia
-`createPinia`执行后创建的实例。
-
-```js
-import { pinia } from '@fesjs/fes'
-```
-
-## 使用
-
-### 定义 store
-我们在 `src/store/main.js`中：
-```js
-import { defineStore } from 'pinia'
-
-// useStore could be anything like useUser, useCart
-// the first argument is a unique id of the store across your application
-export const useStore = defineStore('main', {
-  // other options...
-})
-```
-
-### setup
-
-```js
-import { useStore } from '@/store/main'
-export default {
-    setup(){
-        const store = useStore()
-    }
-}
-```
-
-### 非setup
-比如在app.js中:
-```js
-import { pinia } from '@fesjs/fes'
-
-export const beforeRender = {
-    loading: <PageLoading />,
-    action() {
-        const { setRole } = accessApi;
-        return new Promise((resolve) => {
-            setTimeout(() => {
-                const store = useStore(pinia);
-                store.$patch({
-                    userName: '李雷',
-                    role: 'admin'
-                });
-                setRole('admin');
-            }, 1000);
-        });
-    }
-};
-```

docs/zh/reference/plugin/plugins/qiankun.md

@@ -1,271 +0,0 @@
-# @fesjs/plugin-qiankun
-
-Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp) 实现，喜欢 React 的同学推荐直接用 Umi。
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-qiankun": "^2.0.0"
-    },
-}
-```
-
-## 介绍
-有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~
-
-可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。
-
-## 主应用配置
-
-### 第一步：注册子应用
-```js
-export default {
-    qiankun: {
-        main: {
-            // 注册子应用信息
-            apps: [
-                {
-                    name: 'app1', // 唯一 id
-                    entry: '//localhost:8001', // html entry
-                    props: {}  // 传递给子应用的数据
-                },
-                {
-                    name: 'app2', // 唯一 id
-                    entry: '//localhost:8002', // html entry
-                },
-            ],
-        },
-    },
-};
-```
-
-### 第二步：装载子应用
-
-#### 使用路由绑定的方式
-:::warning
-主应用和子应用需要自行适配路由路径！！！待完善...
-:::
-
-假设我们的系统之前有这样的一些路由：
-```js
-export default {
-    router: {
-        routes: [{
-            "path": "/",
-            "component": () => import('@/src/.fes/plugin-layout/index.js'),
-            "children": [
-                {
-                    "path": "/onepiece",
-                    "component": () => import('@/pages/onepiece'),
-                    "name": "onepiece",
-                    "meta": {
-                        "name": "onepiece",
-                        "title": "onepiece"
-                    }
-                }
-            ]
-        }]
-    }
-}
-```
-我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可：
-```js {16-23}
-export default {
-    router: {
-        routes: [{
-            "path": "/",
-            "component": () => import('@/src/.fes/plugin-layout/index.js'),
-            "children": [
-                {
-                    "path": "/onepiece",
-                    "component": () => import('@/pages/onepiece'),
-                    "name": "onepiece",
-                    "meta": {
-                        "name": "onepiece",
-                        "title": "onepiece"
-                    }
-                },
-                {
-                    "path": "/son",
-                    "meta": {
-                        "name": "son",
-                        "title": "子应用",
-                        "microApp": "app1"
-                    }
-                }
-            ]
-        }]
-    }
-}
-```
-当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`：
-```vue
-<config>
-{
-    "name": "son",
-    "title": "子应用",
-    "microApp": "app1"
-}
-</config>
-```
-
-
-####  使用 `<MicroApp />` 组件的方式
-:::tip
-建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。
-:::
-```vue
-<template>
-    <MicroApp :name="name" />
-</template>
-<script>
-import { MicroApp } from '@fesjs/fes';
-
-export default {
-    components: { MicroApp },
-    setup(){
-        const name = "app1"
-        return {
-            name
-        }
-    }
-}
-</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>
-```
-
-## 子应用配置
-
-### 第一步：插件注册
-```js
-export default {
-    qiankun: {
-        micro: {},
-    }
-};
-```
-
-### 第二步：配置运行时生命周期钩子（可选）
-插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。
-```js
-export const qiankun = {
-    // 应用加载之前
-    async bootstrap(props) {
-        console.log('app1 bootstrap', props);
-    },
-    // 应用 render 之前触发
-    async mount(props) {
-        console.log('app1 mount', props);
-    },
-    // 当 props 更新时触发
-    async update(props){
-        console.log('app1 update', props);
-    },
-    // 应用卸载之后触发
-    async unmount(props) {
-        console.log('app1 unmount', props);
-    },
-};
-
-```
-
-## 父子应用通讯
-
-有两种方式实现
-
-### 配合 [useModel](./model.md) 使用
-
-确保已经安装了 `@fesjs/plugin-model`：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-model": "^2.0.0"
-    },
-}
-```
-
-#### 主应用传递 props
-
-- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可：
-```vue
-<template>
-    <MicroApp :name="name" :user="user" />
-</template>
-<script>
-import { MicroApp } from '@fesjs/fes';
-
-export default {
-    components: { MicroApp },
-    setup(){
-        const name = "app1"
-        const user = ref("")
-        return {
-            name,
-            user
-        }
-    }
-}
-</script>
-```
-
-- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如：
-```js
-import { reactive } from 'vue';
-
-export default () => {
-    const state = reactive({ c: 1 });
-    return {
-        state
-    };
-};
-```
-
-#### 子应用消费 props
-
-子应用中会自动生成一个全局名为 `qiankunStateFromMain` 的 `model`， 可以在任意组件中获取主应用透传的 `props` 的值。
-
-```vue
-<script>
-export default {
-    setup(){
-        const mainState = useModel('qiankunStateFromMain');
-        return {
-            mainState
-        };
-    }
-}
-</script>
-```
-
-### 基于 props 传递
-
-- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
-- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节） 

docs/zh/reference/plugin/plugins/request.md

@@ -1,214 +0,0 @@
-# @fesjs/plugin-request
-
-基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
-## 启用方式
-
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-request": "^2.0.0"
-    },
-}
-```
-## 配置
-
-### 构建时配置
-
-```js
-export default {
-    request: {
-        dataField: 'result'
-    },
-}
-```
-
-#### dataField
-
-- 类型： `string`
-- 默认值： `''`
-- 详情：
-
-    `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
-
-
-#### base(即将废弃)
-
-- 类型： `string`
-- 默认值： `''`
-- 详情：
-
-    `base` 接口前缀。 
-
-::: warning 即将废弃
-这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
-:::
-
-### 运行时配置
-
-在 `app.js` 中进行运行时配置。
- 
-```js
-export const request = {
-    // 格式化 response.data (只有 response.data 类型为 object 才会调用)
-    responseDataAdaptor: (data) => {
-        data.code = data.code === '200' ? '0' : data.code;
-        return data;
-    },
-    // 关闭 response data 校验（只判断 xhr status）
-    closeResDataCheck: false,
-    // 请求拦截器
-    requestInterceptors: [],
-    // 响应拦截器
-    responseInterceptors: [],
-    // 错误处理
-    // 内部以 reponse.data.code === '0' 判断请求是否成功
-    // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
-    errorHandler: {
-        11199(response) {
-            // 特殊 code 处理逻辑
-        },
-        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 请求
-
-```js
-import {request} from '@fesjs/fes';
-
-request('/api/login', {
-    username: 'robby',
-    password: '123456'
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
-})
-```
-
-### merge 重复请求
-
-连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
-
-当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
-
-```js
-import {request} from '@fesjs/fes';
-
-request('/api/login', {
-    username: 'robby',
-    password: '123456'
-}, {
-    mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
-})
-```
-
-### 请求节流(即将废弃)
-
-
-::: warning 即将废弃
-因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行
-:::
-
-
-### 请求缓存
-
-```js
-import {request} from '@fesjs/fes';
-
-request('/api/login', {
-    username: 'robby',
-    password: '123456'
-}, {
-    cache: {
-        cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
-        cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
-    },
-}).then((res) => {
-    // do something
-}).catch((err) => {
-    // 处理异常
-})
-```
-
-若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
-
-
-### 结合 use 使用
-
-```js
-import {useRequest} from '@fesjs/fes';
-
-
-export default {
-    setup() {
-        const {loading, data, error} = useRequest('/api/login', {
-            username: 'robby',
-            password: '123456'
-        })
-
-        return {
-            loading,
-            data,
-            error
-        }
-    }
-}
-```
-
-## API
-
-### request
-
-- **类型**：函数
-
-- **详情**：请求后端接口
-- **参数**：
-  - url: 后端接口 url
-  - data: 参数
-  - options: 配置（ 支持 axios 所有配置）
-- **返回值**: Promise
-
-### useRequest
-
-request 的封装，返回响应式 `loading`、`error`、 `data`

docs/zh/reference/plugin/plugins/sass.md

@@ -1,34 +0,0 @@
-# @fesjs/plugin-sass
-
-## 介绍
-
-Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。
-
-::: tip webpack 构建 sass 插件
-如果使用 Vite 构建，直接装 `sass` 依赖即可，不需要安装此插件。
-:::
-
-## 启用方式
-
-在 `package.json` 中引入依赖：
-
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-sass": "^2.0.0"
-    }
-}
-```
-
-## global css
-
-添加 `src/global.scss` 和 `src/global.sass` 为全局 CSS 入口，添加一些通用样式内容。
-
-## Vue 单文件组件
-
-Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`，例如：
-
-```vue
-<style lang="scss"></style>
-```

docs/zh/reference/plugin/plugins/vuex.md

@@ -1,192 +0,0 @@
-# @fesjs/plugin-vuex
-## 介绍
-集成vuex插件
-
-增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示
-
-约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。
-```
-└── src
-    ├── pages
-    │    └── index.vue
-    └── stores 
-    │    └── foo
-    │    │    └── bar.js
-    │    ├── counter.js
-    │    ├── plugin-logger.js       
-    │    ├── user.js
-    └── app.js
-```
-::: tip
-为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api
-```js
-import { useStore } from 'vuex';
-```
-:::
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "dependencies": {
-        "@fesjs/fes": "^2.0.0",
-        "@fesjs/plugin-vuex": "^2.0.0"
-    }
-}
-```
-
-## 配置
-在 `.fes.js` 中配置：
-```js
-export default {
-    vuex: {
-        strict: true // 开启严格模式
-    }
-}
-```
-
-## 场景使用
-先定义在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();
-        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的所有事件类型
- 
-### GETTER_TYPES
-* 类型 `Object`
-* getter的所有方法名
-### ACTION_TYPES
-* 类型 `Object`
-* action的所有事件类型

docs/zh/reference/plugin/plugins/windicss.md

@@ -1,28 +0,0 @@
-# @fesjs/plugin-windicss
-
-
-## 介绍
-
-`windicss` 支持
-
-## 启用方式
-在 `package.json` 中引入依赖：
-```json
-{
-    "devDependencies": {
-        "@fesjs/plugin-windicss": "^2.0.0"
-    },
-}
-```
-
-## 配置
-
-在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)：
-
-```js
-export default {
-    windicss: {
-        root: './',
-    }
-}
-```

packages/create-fes-app/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/create-fes-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/create-fes-app",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "create a app base on fes.js",
   "main": "lib/index.js",
   "files": [

packages/fes-compiler/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-access/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-access/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-access",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "@fesjs/plugin-access",
   "main": "lib/index.js",
   "files": [

packages/fes-plugin-access/src/runtime/runtime.js

@@ -18,14 +18,10 @@ export function onRouterCreated({ router }) {
                     next,
                 });
             }
+            return next(false);
         }
-        let path;
+        // path是匹配路由的path，不是页面hash
-        if (to.matched.length === 1) {
+        const canRoute = await access.hasAccess(to.matched[to.matched.length - 1].path);
-            path = to.matched[0].path;
-        } else {
-            path = to.path;
-        }
-        const canRoute = await access.hasAccess(path);
         if (canRoute) {
             return next();
         }

packages/fes-plugin-enums/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-icon/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-jest/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-layout/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-layout",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "@fesjs/plugin-layout",
   "main": "lib/index.js",
   "files": [
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@fesjs/fes": "^2.0.0",
-    "@fesjs/fes-design": "^0.3.3",
+    "@fesjs/fes-design": "^0.4.0",
     "vue": "^3.0.5",
     "vue-router": "^4.0.1"
   },

packages/fes-plugin-layout/src/index.js

@@ -38,20 +38,15 @@ export default (api) => {
             ...(api.config.layout || {}),
         };
 
-        // 路由信息
+        const iconNames = helper.getIconNamesFromMenu(userConfig.menus);
-        const routes = await api.getRoutes();
-        // 把路由的meta合并到menu配置中
-        userConfig.menus = helper.fillMenuByRoute(userConfig.menus, routes);
 
-        const icons = helper.getIconsFromMenu(userConfig.menus);
+        const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
-
-        const iconsString = icons.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
         api.writeTmpFile({
             path: join(namespace, 'icons.js'),
             content: `
         ${iconsString.join(';\n')}
         export default {
-            ${icons.join(',\n')}
+            ${iconNames.join(',\n')}
         }`,
         });
 

packages/fes-plugin-layout/src/node/helper.js

@@ -1,61 +1,5 @@
 
-const matchName = (config, name) => {
+export function getIconNamesFromMenu(data) {
-    let res = {};
-    if (Array.isArray(config)) {
-        for (let i = 0; i < config.length; i++) {
-            const item = config[i];
-            if (item.meta && item.meta.name === name) {
-                res = item.meta;
-                res.path = item.path;
-                break;
-            }
-            if (item.children && item.children.length > 0) {
-                res = matchName(item.children, name);
-            }
-        }
-    }
-    return res;
-};
-
-export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
-    dep += 1;
-    if (dep > 3) {
-        console.warn('[plugin-layout]: 菜单层级最好不要超出三层！');
-    }
-    const arr = [];
-    if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) {
-        menuConfig.forEach((menu) => {
-            const pageConfig = {};
-            if (menu.name) {
-                Object.assign(pageConfig, matchName(routeConfig, menu.name));
-            }
-            // menu的配置优先级高，当menu存在配置时，忽略页面的配置
-            Object.keys(pageConfig).forEach((prop) => {
-                if (menu[prop] === undefined || menu[prop] === null || menu[prop] === '') {
-                    menu[prop] = pageConfig[prop];
-                }
-            });
-            // 处理icon
-            if (menu.icon) {
-                const icon = menu.icon;
-                const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
-                if (typeof icon === 'string' && !((urlReg.test(icon) || icon.includes('.svg')))) {
-                    menu.icon = {
-                        type: 'icon',
-                        name: icon
-                    };
-                }
-            }
-            if (menu.children && menu.children.length > 0) {
-                menu.children = fillMenuByRoute(menu.children, routeConfig, dep);
-            }
-            arr.push(menu);
-        });
-    }
-    return arr;
-};
-
-export function getIconsFromMenu(data) {
     if (!Array.isArray(data)) {
         return [];
     }
@@ -63,12 +7,19 @@ export function getIconsFromMenu(data) {
     data.forEach((item = { path: '/' }) => {
         if (item.icon) {
             const { icon } = item;
-            if (icon.type === 'icon') {
+            // 处理icon
-                icons.push(icon.name);
+            if (icon) {
+                const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
+                if (
+                    typeof icon === 'string'
+                    && !(urlReg.test(icon) || icon.includes('.svg'))
+                ) {
+                    icons.push(icon);
+                }
             }
         }
         if (item.children) {
-            icons = icons.concat(getIconsFromMenu(item.children));
+            icons = icons.concat(getIconNamesFromMenu(item.children));
         }
     });
 

packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js

@@ -0,0 +1,60 @@
+const getMetaByName = (config, name) => {
+    let res = {};
+    if (Array.isArray(config)) {
+        for (let i = 0; i < config.length; i++) {
+            const item = config[i];
+            if (item.meta && item.meta.name === name) {
+                res = item.meta;
+                res.path = item.path;
+                break;
+            }
+            if (item.children && item.children.length > 0) {
+                res = getMetaByName(item.children, name);
+                if (res.path) {
+                    break;
+                }
+            }
+        }
+    }
+    return res;
+};
+
+const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
+    dep += 1;
+    if (dep > 3) {
+        console.warn('[plugin-layout]: 菜单层级最好不要超出三层！');
+    }
+    const arr = [];
+    if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) {
+        menuConfig.forEach((menu) => {
+            const pageConfig = {};
+            if (menu.name) {
+                Object.assign(
+                    pageConfig,
+                    getMetaByName(routeConfig, menu.name)
+                );
+            }
+            // menu的配置优先级高，当menu存在配置时，忽略页面的配置
+            Object.keys(pageConfig).forEach((prop) => {
+                if (
+                    menu[prop] === undefined
+                    || menu[prop] === null
+                    || menu[prop] === ''
+                ) {
+                    menu[prop] = pageConfig[prop];
+                }
+            });
+            if (menu.children && menu.children.length > 0) {
+                menu.children = fillMenuByRoute(
+                    menu.children,
+                    routeConfig,
+                    dep
+                );
+            }
+            arr.push(menu);
+        });
+    }
+    return arr;
+};
+
+export default fillMenuByRoute;

packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js

@@ -0,0 +1,22 @@
+
+
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
+import { inject } from 'vue';
+
+let runtimeConfig;
+
+export default () => {
+    if (!runtimeConfig) {
+        runtimeConfig = plugin.applyPlugins({
+            key: 'layout',
+            type: ApplyPluginsType.modify,
+            initialValue: {
+                initialState: inject('initialState'),
+                sidebar: true,
+                header: true,
+                logo: true
+            }
+        });
+    }
+    return runtimeConfig;
+};

packages/fes-plugin-layout/src/runtime/index.tpl

@@ -1,17 +1,50 @@
-import { reactive, defineComponent } from "vue";
+import { ref, defineComponent, computed } from 'vue';
-import { plugin, ApplyPluginsType } from "@@/core/coreExports";
+import { plugin, ApplyPluginsType, } from '@@/core/coreExports';
-import BaseLayout from "./views/BaseLayout.vue";
+import { getRoutes } from '@@/core/routes/routes'
+import BaseLayout from './views/BaseLayout.vue';
+import getRuntimeConfig from './helpers/getRuntimeConfig';
+import fillMenu from './helpers/fillMenu';
 
 const Layout = defineComponent({
     name: 'Layout',
-    setup(){
+    setup() {
-        const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
+        const userConfig = {{{REPLACE_USER_CONFIG}}};
-        const runtimeConfig = plugin.applyPlugins({
+        const runtimeConfig = getRuntimeConfig();
-            key: "layout",
+        const {
-            type: ApplyPluginsType.modify,
+            menus,
-            initialValue: {},
+            customHeader,
+            menuConfig,
+            // 非 BaseLayout需要的
+            initialState,
+            sidebar,
+            header,
+            logo,
+            // 跟logo冲突，换个名字
+            logoUrl,
+            ...otherConfig
+        } = runtimeConfig;
+        if (logoUrl) {
+            userConfig.logo = logoUrl;
+        }
+        if (menuConfig && typeof menuConfig === 'object') {
+            Object.assign(userConfig.menuConfig, menuConfig);
+        }
+        Object.keys(otherConfig).forEach((p) => {
+            if (otherConfig[p] !== undefined) {
+                userConfig[p] = otherConfig[p];
+            }
         });
-        const localeShared = plugin.getShared("locale");
+        let menusRef = ref(userConfig.menus);
+        // 如果运行时配置了menus，则需要处理
+        if (menus && typeof menus === 'function') {
+            menusRef = ref(menus(userConfig.menus));
+        }
+        // 把路由的meta合并到menu配置中
+        const filledMenuRef = computed(() => {
+            return fillMenu(menusRef.value, getRoutes());
+        });
+
+        const localeShared = plugin.getShared('locale');
         return () => {
             const slots = {
                 customHeader: () => {
@@ -24,14 +57,23 @@ const Layout = defineComponent({
                 },
                 locale: () => {
                     if (localeShared) {
-                        return <localeShared.SelectLang></localeShared.SelectLang>;
+                        return (
+                            <localeShared.SelectLang></localeShared.SelectLang>
+                        );
                     }
                     return null;
-                },
+                }
             };
-            return <BaseLayout locale={ localeShared ? true : false } {...userConfig} v-slots={slots}></BaseLayout>;
+            return (
+                <BaseLayout
+                    {...userConfig}
+                    locale={localeShared ? true : false}
+                    menus={filledMenuRef.value}
+                    v-slots={slots}
+                ></BaseLayout>
+            );
         };
     }
-})
+});
 
 export default Layout;

packages/fes-plugin-layout/src/runtime/runtime.js

@@ -1,23 +1,23 @@
-import { plugin, ApplyPluginsType } from '@@/core/coreExports';
 // eslint-disable-next-line import/extensions
 import { access as accessApi } from '../plugin-access/core';
 import Exception404 from './views/404.vue';
 import Exception403 from './views/403.vue';
+import getRuntimeConfig from './helpers/getRuntimeConfig';
 
 if (!accessApi) {
     throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！');
 }
 
 const handle = (type, router) => {
-    const accesssIds = accessApi.getAccess();
+    const accessIds = accessApi.getAccess();
     const path = `/${type}`;
     const name = `Exception${type}`;
     const components = {
         404: Exception404,
         403: Exception403,
     };
-    if (!accesssIds.includes(path)) {
+    if (!accessIds.includes(path)) {
-        accessApi.setAccess(accesssIds.concat([path]));
+        accessApi.setAccess(accessIds.concat([path]));
     }
     if (!router.hasRoute(name)) {
         router.addRoute({ path, name, component: components[type] });
@@ -26,11 +26,7 @@ const handle = (type, router) => {
 
 export const access = (memo) => ({
     unAccessHandler({ router, to, from, next }) {
-        const runtimeConfig = plugin.applyPlugins({
+        const runtimeConfig = getRuntimeConfig();
-            key: 'layout',
-            type: ApplyPluginsType.modify,
-            initialValue: {},
-        });
         if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
             return runtimeConfig.unAccessHandler({
                 router,
@@ -47,11 +43,7 @@ export const access = (memo) => ({
         next('/403');
     },
     noFoundHandler({ router, to, from, next }) {
-        const runtimeConfig = plugin.applyPlugins({
+        const runtimeConfig = getRuntimeConfig();
-            key: 'layout',
-            type: ApplyPluginsType.modify,
-            initialValue: {},
-        });
         if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
             return runtimeConfig.noFoundHandler({
                 router,

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -14,7 +14,16 @@
                     <img :src="logo" class="logo-img" />
                     <div class="logo-name">{{ title }}</div>
                 </div>
-                <Menu class="layout-menu" :menus="menus" :collapsed="collapsedRef" mode="vertical" :inverted="theme === 'dark'" />
+                <Menu
+                    class="layout-menu"
+                    :menus="menus"
+                    :collapsed="collapsedRef"
+                    mode="vertical"
+                    :inverted="theme === 'dark'"
+                    :expandedKeys="menuConfig?.expandedKeys"
+                    :defaultExpandAll="menuConfig?.defaultExpandAll"
+                    :accordion="menuConfig?.accordion"
+                />
             </f-aside>
             <f-layout :fixed="fixedSideBar" :style="sideStyleRef">
                 <f-header v-if="routeLayout.header" ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
@@ -41,7 +50,15 @@
                     <img :src="logo" class="logo-img" />
                     <div class="logo-name">{{ title }}</div>
                 </div>
-                <Menu class="layout-menu" :menus="menus" mode="horizontal" :inverted="theme === 'dark'" />
+                <Menu
+                    class="layout-menu"
+                    :menus="menus"
+                    mode="horizontal"
+                    :inverted="theme === 'dark'"
+                    :expandedKeys="menuConfig?.expandedKeys"
+                    :defaultExpandAll="menuConfig?.defaultExpandAll"
+                    :accordion="menuConfig?.accordion"
+                />
                 <div class="layout-header-custom">
                     <slot name="customHeader"></slot>
                 </div>
@@ -80,7 +97,15 @@
                     collapsible
                     class="layout-aside"
                 >
-                    <Menu class="layout-menu" :menus="menus" :collapsed="collapsedRef" mode="vertical" />
+                    <Menu
+                        class="layout-menu"
+                        :menus="menus"
+                        :collapsed="collapsedRef"
+                        mode="vertical"
+                        :expandedKeys="menuConfig?.expandedKeys"
+                        :defaultExpandAll="menuConfig?.defaultExpandAll"
+                        :accordion="menuConfig?.accordion"
+                    />
                 </f-aside>
                 <f-layout :embedded="!multiTabs" :fixed="fixedSideBar" :style="sideStyleRef">
                     <f-main class="layout-main">
@@ -98,11 +123,12 @@
 
 <script>
 import { ref, computed, onMounted } from 'vue';
-import { useRoute, plugin, ApplyPluginsType } from '@@/core/coreExports';
+import { useRoute } from '@@/core/coreExports';
 import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
 import Menu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
 import defaultLogo from '../assets/logo.png';
+import getRuntimeConfig from '../helpers/getRuntimeConfig';
 
 export default {
     components: {
@@ -158,6 +184,9 @@ export default {
             default: 200,
         },
         footer: String,
+        menuConfig: {
+            type: Object,
+        },
     },
     setup(props) {
         const headerRef = ref();
@@ -171,15 +200,7 @@ export default {
 
         const collapsedRef = ref(false);
         const route = useRoute();
-        const runtimeConfig = plugin.applyPlugins({
+        const runtimeConfig = getRuntimeConfig();
-            key: 'layout',
-            type: ApplyPluginsType.modify,
-            initialValue: {
-                sidebar: true,
-                header: true,
-                logo: true,
-            },
-        });
         const routeLayout = computed(() => {
             let config;
             // meta 中 layout 默认为 true
@@ -207,8 +228,8 @@ export default {
         const sideStyleRef = computed(() =>
             props.fixedSideBar
                 ? {
-                    left: collapsedRef.value ? '48px' : `${props.sideWidth}px`,
+                      left: collapsedRef.value ? '48px' : `${props.sideWidth}px`,
-                }
+                  }
                 : null,
         );
         return {
@@ -260,6 +281,9 @@ export default {
         .layout-header-custom {
             flex: 1;
         }
+        .layout-menu {
+            width: auto;
+        }
     }
     .fes-layout-aside {
         z-index: 1;

packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue

@@ -1,34 +1,42 @@
 <script lang="jsx">
-import { ref, onBeforeMount } from 'vue';
+import { ref, onBeforeMount, isVNode } from 'vue';
 // eslint-disable-next-line import/extensions
 import Icons from '../icons';
 import { validateContent } from '../helpers/svg';
 
+const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
+const isUrlResource = (name) => urlReg.test(name) || name.includes('.svg');
+
 export default {
     props: {
         icon: [String, Object],
     },
     setup(props) {
-        const AIcon = ref(null);
+        const AIconComponent = ref(null);
         const AText = ref(null);
 
         onBeforeMount(() => {
-            if (props.icon && props.icon.type === 'icon') {
+            if (typeof props.icon === 'string') {
-                AIcon.value = Icons[props.icon.name];
+                if (isUrlResource(props.icon)) {
-            } else {
+                    fetch(props.icon).then((rsp) => {
-                fetch(props.icon).then((rsp) => {
+                        if (rsp.ok) {
-                    if (rsp.ok) {
+                            return rsp.text().then((svgContent) => {
-                        return rsp.text().then((svgContent) => {
+                                AText.value = validateContent(svgContent);
-                            AText.value = validateContent(svgContent);
+                            });
-                        });
+                        }
-                    }
+                    });
-                });
+                } else {
+                    AIconComponent.value = Icons[props.icon];
+                }
             }
         });
 
         return () => {
-            if (AIcon.value) {
+            if (isVNode(props.icon)) {
-                return <AIcon.value />;
+                return props.icon;
+            }
+            if (AIconComponent.value) {
+                return <AIconComponent.value />;
             }
             if (AText.value) {
                 return <span class={'fes-layout-icon'} innerHTML={AText.value}></span>;

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -38,17 +38,12 @@
     </template>
     <router-view v-else v-slot="{ Component, route }">
         <keep-alive :include="keepAlivePages">
-            <component
+            <component :is="getComponent(Component, route)" />
-                :is="getComponent(Component, route)"
-                :key="getPageKey(route)"
-            />
         </keep-alive>
     </router-view>
 </template>
 <script>
-import {
+import { computed, unref, ref } from 'vue';
-    computed, onMounted, unref, ref
-} from 'vue';
 import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
 import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
 import { useRouter, useRoute } from '@@/core/coreExports';
@@ -68,20 +63,6 @@ export default {
         multiTabs: Boolean
     },
     setup() {
-        const route = useRoute();
-        const router = useRouter();
-        const pageList = ref([]);
-        const actions = [
-            {
-                value: 'closeOtherPage',
-                label: '关闭其他'
-            },
-            {
-                value: 'reloadPage',
-                label: '刷新当前页'
-            }
-        ];
-
         const createPage = (_route) => {
             const title = _route.meta.title;
             return {
@@ -93,11 +74,21 @@ export default {
             };
         };
 
-        const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
+        const route = useRoute();
+        const router = useRouter();
+        const pageList = ref([createPage(route)]);
+        const actions = [
+            {
+                value: 'closeOtherPage',
+                label: '关闭其他'
+            },
+            {
+                value: 'reloadPage',
+                label: '刷新当前页'
+            }
+        ];
 
-        onMounted(() => {
+        const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
-            pageList.value = [createPage(route)];
-        });
 
         router.beforeEach((to) => {
             if (!findPage(to.path)) {

packages/fes-plugin-locale/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-locale/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-locale",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "@fesjs/plugin-locale",
   "main": "lib/index.js",
   "files": [
@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "@fesjs/fes": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.10",
+    "@fesjs/fes-design": "^0.4.0",
     "vue": "^3.0.5"
   },
   "typings": "./types.d.ts"

packages/fes-plugin-model/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> 

packages/fes-plugin-model/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-model",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "@fesjs/plugin-model",
   "main": "lib/index.js",
   "files": [

packages/fes-plugin-model/src/index.js

@@ -1,8 +1,5 @@
 import { readFileSync } from 'fs';
 import { join } from 'path';
-import { lodash, winPath } from '@fesjs/utils';
-import { getModels } from './utils/getModels';
-import { getTmpFile } from './utils/getTmpFile';
 
 const namespace = 'plugin-model';
 
@@ -12,6 +9,10 @@ export default (api) => {
         utils: { Mustache },
     } = api;
 
+    const { lodash, winPath } = require('@fesjs/utils');
+    const { getModels } = require('./utils/getModels');
+    const { getTmpFile } = require('./utils/getTmpFile');
+
     function getModelDir() {
         return api.config.singular ? 'model' : 'models';
     }
@@ -22,18 +23,10 @@ export default (api) => {
 
     function getAllModels() {
         const srcModelsPath = getModelsPath();
-        return lodash.uniq([
+        return lodash.uniq([...getModels(srcModelsPath)]);
-            ...getModels(srcModelsPath),
-            // ...getModels(
-            //     paths.absPagesPath,
-            //     `**/${getModelDir()}/**/*.{js,jsx}`
-            // ),
-            // ...getModels(paths.absPagesPath, '**/*.model.{js,jsx}')
-        ]);
     }
 
     const absCoreFilePath = join(namespace, 'core.js');
-    const absRuntimeFilePath = join(namespace, 'runtime.js');
     const absInitialStateFilePath = join(namespace, 'models/initialState.js');
 
     api.register({
@@ -64,14 +57,10 @@ export default (api) => {
             }),
         });
 
-        api.writeTmpFile({
+        api.copyTmpFiles({
-            path: absRuntimeFilePath,
+            namespace,
-            content: Mustache.render(readFileSync(join(__dirname, 'runtime/runtime.tpl'), 'utf-8'), {}),
+            path: join(__dirname, 'runtime'),
-        });
+            ignore: ['.tpl'],
-
-        api.writeTmpFile({
-            path: absInitialStateFilePath,
-            content: Mustache.render(readFileSync(join(__dirname, 'runtime/models/initialState.tpl'), 'utf-8'), {}),
         });
     });
 
@@ -81,6 +70,4 @@ export default (api) => {
             source: absCoreFilePath,
         },
     ]);
-
-    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 };

packages/fes-plugin-model/src/runtime/core.tpl

@@ -1,39 +1,29 @@
-import { inject } from "vue";
-
-const modelKey = Symbol("plugin-model");
 
 {{{userImports}}}
 {{{extraImports}}}
 
-export const models = { 
+export const models = {
 {{#extraModels}}
     {{{extraModels}}},
 {{/extraModels}}
 {{#userModels}}
     {{{userModels}}},
 {{/userModels}}
-}
-const cache = new Map();
-
-export const install = (app)=>{
-    const useModel = (name) => {
-        const model = models[name];
-        if(model === undefined){
-            throw new Error("[plugin-model]: useModel, name is undefined.");
-        }
-        if (typeof model !== "function") {
-            throw new Error("[plugin-model]: useModel is not a function.");
-        }
-        if(!cache.has(name)){
-            cache.set(name, model())
-        }
-        return cache.get(name)
-    };
-    app.provide(modelKey, useModel);
-}
-
-export const useModel = (name) => {
-    return inject(modelKey)(name);
 };
 
 
+const cache = new Map();
+
+export const useModel = (name) => {
+    const modelFunc = models[name];
+    if (modelFunc === undefined) {
+        throw new Error('[plugin-model]: useModel, name is undefined.');
+    }
+    if (typeof modelFunc !== 'function') {
+        throw new Error('[plugin-model]: useModel is not a function.');
+    }
+    if (!cache.has(name)) {
+        cache.set(name, modelFunc());
+    }
+    return cache.get(name);
+};

packages/fes-plugin-model/src/runtime/models/initialState.js

@@ -0,0 +1,5 @@
+import { inject } from 'vue';
+
+export default function initialStateModel() {
+    return inject('initialState');
+}

packages/fes-plugin-model/src/runtime/models/initialState.tpl

@@ -1,5 +0,0 @@
-import { inject, reactive } from "vue";
-
-export default function initalModel() {
-    return reactive(inject("initialState"));
-}

packages/fes-plugin-model/src/runtime/runtime.tpl

@@ -1,5 +0,0 @@
-import { install } from "./core";
-
-export function onAppCreated({ app }) {
-    install(app)
-}

packages/fes-plugin-model/src/utils/getModels.js

@@ -3,13 +3,13 @@ import { getValidFiles } from '.';
 
 export function getModels(cwd, pattern) {
     const files = glob
-        .sync(pattern || '**/*.{js,jsx}', {
+        .sync(pattern || '**/*.{js,jsx,ts,tsx}', {
             cwd
         })
         .filter(
             file => !file.endsWith('.d.ts')
-        && !file.endsWith('.test.js')
+                && !file.endsWith('.test.js')
-        && !file.endsWith('.test.jsx')
+                && !file.endsWith('.test.jsx')
         );
 
     return getValidFiles(files, cwd);

packages/fes-plugin-monaco-editor/README.md

@@ -1,4 +1,18 @@
 
+# 痛点
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
+
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
+
+
 ## Fes.js 是什么？
 Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。     
 
@@ -17,20 +31,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 |  插件   | 介绍  | 
 |  ----  | ----  |
-| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
+| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
+| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
+| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)  | svg 文件自动注册为组件 |  
-| [@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)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
+| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
+| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
+| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
+| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) |  简易的数据管理方案 |
-| [@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) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@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-vuex](http://fesjs.mumblefe.cn/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-qiankun](http://fesjs.mumblefe.cn/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-sass](http://fesjs.mumblefe.cn/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使用的代码编辑器） |
+| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
+| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia，状态处理 |
+| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 |
+
 
 ## 像数 1, 2, 3 一样容易
 使用 `yarn`：
@@ -59,6 +75,31 @@ npm run dev
 
 ## 反馈
 
-请联系开源助手加入微信群：    
+| Github Issue  | 微信群 | Fes.js开源运营小助手 |
+| --- | --- | --- |
+| [@fesjs/fes.js/issues](../../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"/> |
+
+
+## 参与共建
+
+我们非常欢迎社区同学能提交PR：
+
+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](../../issues)。
+
+## 社区活动
+
+### Fesjs 社区有奖征文活动
+
+为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
+
+经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
+请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+
+ 
 
-<img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/>