+
| 
|
+
diff --git a/docs/contributing.md b/docs/contributing.md
deleted file mode 100644
index 563bf804..00000000
--- a/docs/contributing.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-sidebar: auto
----
-
-# Contributing Guide
-
-## Overview
-
-This repository employs a [monorepo](https://en.wikipedia.org/wiki/Monorepo) setup with [yarn classic workspaces](https://classic.yarnpkg.com/en/docs/workspaces), and hosts a number of associated but separated packages in the `packages` directory:
-
-- `@vuepress/core`: The VuePress core. Provides pure Node API to generate VuePress app, including page handling, plugin system and data preparation.
-
-- `@vuepress/client`: The VuePress client package. Provides the client entry, and exports types and composable utils that can be used in client side development.
-
-- `@vuepress/bundler-webpack`: The VuePress bundler package with webpack. Use webpack to `dev` and `build` VuePress app that generated by `@vuepress/core`.
-
-- `@vuepress/cli`: The VuePress command line interface (CLI) package. It will resolve user config file, and create VuePress app with `@vuepress/core`, then use `@vuepress/bundler-${name}` to execute corresponding command.
-
-- `@vuepress/theme-default`: The VuePress default theme.
-
-- `@vuepress/plugin-${name}`: Official plugins.
-
-- `@vuepress/shared`: Utilities that shared between node side and client side.
-
-- `@vuepress/utils`: Utilities that should only be used in node side.
-
-- `vuepress`: Simply a wrapper of `@vuepress/cli`, which requires `@vuepress/bundler-webpack` and `@vuepress/theme-default` as dependencies. If users want to use default theme with webpack, they can simply install this package.
-
-## Development Setup
-
-Pre-requirement:
-
-- [Node.js](http://nodejs.org) **version 12+**
-- [Yarn v1 classic](https://classic.yarnpkg.com/en/docs/install)
-
-Clone the repo, and install dependencies:
-
-```bash
-yarn
-```
-
-Start watching source files:
-
-```bash
-yarn dev
-```
-
-Open another terminal, and start developing the documentation site:
-
-```bash
-yarn docs:dev
-```
-
-Main tools that used in this project:
-
-- [TypeScript](https://www.typescriptlang.org/) as the development language
-- [Jest](https://jestjs.io/) for unit testing
-- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) for code linting and formatting
-
-## Scripts
-
-### `yarn build`
-
-The `build` script uses `tsc` to compile typescript source files to javascript dist files.
-
-You may need to run this script first after your clone this repository, because the dist files are ignored by `.gitignore`.
-
-### `yarn copy`
-
-The `copy` script of root project runs `copy` script in all packages, copying some resources from source directory to dist directory.
-
-Some source files (e.g. `.vue`, `.styl` files) can not be processed by `build` script, but should keep the same relative path in the dist directory.
-
-You may need to run this script after your clone this repository, too.
-
-### `yarn dev`
-
-The `dev` script runs `copy` and `build` scripts in watch mode.
-
-### `yarn clean`
-
-The `clean` script runs `clean` script in all packages, cleaning all the dist files and caches. In other words, it will remove all the files that generated by `build`, `copy` and `dev` scripts.
-
-It's used before you want to re-build source files from a clean / initial state.
-
-### `yarn docs:*`
-
-#### `yarn docs:build`, `yarn docs:dev`, `yarn docs:clean`
-
-The `docs:` prefix indicates that these scripts are for documentation, i.e. the `docs` directory.
-
-VuePress is using itself to build its own documentation site.
-
-You need to run `yarn build && yarn copy` to build VuePress source files first, then run these `docs:` scripts to develop and build our documentation.
-
-#### `yarn docs:serve`
-
-Serve the documentation site locally.
-
-You need to run `yarn docs:build` first to generate the documentation dist files, and then run `yarn docs:serve` to serve them.
-
-### `yarn lint`
-
-The `lint` script uses ESLint to check all source files.
-
-### `yarn test`
-
-The `test` script uses Jest to run unit testings.
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 1e9cce4f..8389fd01 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -1,39 +1,75 @@
-# Introduction
-VuePress is a markdown-centered static site generator. You can write your content (documentations, blogs, etc.) in [Markdown](https://en.wikipedia.org/wiki/Markdown), then VuePress will help you to generate a static site to host them.
+# 介绍
-The purpose of creating VuePress was to support the documentation of Vue.js and its sub-projects, but now it has been helping a large amount of users to build their documentation, blogs, and other static sites.
-## How It Works
-A VuePress site is in fact a single-page application (SPA) powered by [Vue](https://v3.vuejs.org/) and [Vue Router](https://next.router.vuejs.org).
+## 痛点
-Routes are generated according to the relative path of your markdown files. Each Markdown file is compiled into HTML with [markdown-it](https://github.com/markdown-it/markdown-it) and then processed as the template of a Vue component. This allows you to directly use Vue inside your Markdown files and is great when you need to embed dynamic content.
+在开发一个前端项目之前，我们可能需要做如下准备工作：
+- 搭建开发环境
+- 约定代码规范
+- 封装API请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
-During development, we start a normal dev-server, and serve the VuePress site as a normal SPA. If you’ve used Vue before, you will notice the familiar development experience when you are writing and developing with VuePress.
+除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
-During build, we create a server-rendered version of the VuePress site and render the corresponding HTML by virtually visiting each route. This approach is inspired by [Nuxt](https://nuxtjs.org/)'s `nuxt generate` command and other projects like [Gatsby](https://www.gatsbyjs.org/).
+## Fes.js 是什么？
-## Why Not ...?
+Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
-### Nuxt
+它主要具备以下功能：
+- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
+
+- :firecracker: __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
-Nuxt is an outstanding Vue SSR framework, and it is capable of doing what VuePress does. But Nuxt is designed for building applications, while VuePress is more lightweight and focused on content-centric static sites.
+- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
-### VitePress
+- :package: __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
-VitePress is the little brother of VuePress. It's also created and maintained by our Vue.js team. It's even more lightweight and faster than VuePress. However, as a tradeoff, it's more opinionated and less configurable. For example, it does not support plugins. But VitePress is powerful enough to make your content online if you don't need advanced customizations.
+- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
-It might not be an appropriate comparison, but you can take VuePress and VitePress as Laravel and Lumen.
-### Docsify / Docute
+## Fes.js 如何工作？
-Both are great projects and also Vue-powered. Except they are both fully runtime-driven and therefore not SEO-friendly. If you don’t care for SEO and don’t want to mess with installing dependencies, these are still great choices.
+### 架构
+
-### Hexo
+Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
-Hexo has been serving the Vue 2.x docs well. The biggest problem is that its theming system is static and string-based - we want to take advantage of Vue for both the layout and the interactivity. Also, Hexo’s Markdown rendering isn’t the most flexible to configure.
+### 插件和插件集
+
+
+
` tag or not.
-
- The wrapper is required by the `highlightLines` and `lineNumbers`. That means, if you disable `preWrapper`, the line highlighting and line numbers will also be disabled.
-
- You can disable it if you want to implement them in client side. For example, [Prismjs Line Highlight](https://prismjs.com/plugins/line-highlight/) or [Prismjs Line Numbers](https://prismjs.com/plugins/line-numbers/).
-
-##### markdown.code.vPre
-
-- Type: `boolean`
-
-- Default: `true`
-
-- Details:
-
- Enable the `v-pre` directive on `` tag or not.
-
-- Also see:
- - [Guide > Markdown > Syntax Extensions > Code Blocks > Wrap with v-pre](../guide/markdown.md#wrap-with-v-pre)
-
-#### markdown.customComponent
-
-- Type: `undefined | false`
-
-- Details:
-
- Options for VuePress built-in markdown-it custom-component plugin.
-
- Set to `false` to disable this plugin.
-
-::: danger
-You should not configure it unless you understand what it is for.
-:::
-
-#### markdown.emoji
-
-- Type: `EmojiPluginOptions | false`
-
-- Details:
-
- Options for [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji).
-
- Set to `false` to disable this plugin.
-
-- Also see:
- - [Guide > Markdown > Syntax Extensions > Emoji](../guide/markdown.md#emoji)
-
-#### markdown.extractHeaders
-
-- Type: `ExtractHeadersPluginOptions | false`
-
-- Details:
-
- Options for VuePress built-in markdown-it extract-headers plugin.
-
- It will extract page headers to page data, which will be used for generating sidebar, table of contents, etc. For example, the sidebar of current page is auto generated from the headers that extracted by this plugin.
-
- Set to `false` to disable this plugin.
-
-#### markdown.hoistTags
-
-- Type: `HoistTagsPluginOptions | false`
-
-- Details:
-
- Options for VuePress built-in markdown-it hoist-tags plugin.
-
- It will hoist specific HTML tags in your Markdown to the top-level of SFC. By default, only `
+```
+
+### 角色
+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`。
+```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
+
+ accessOnepicess
+
+
+```
+### v-access
+在指令 `v-access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染DOM，当没有权限时隐藏此DOM。
+```vue
+
+ accessOnepicess2
+
+
+```
+
+### 组件 Access
+组件 `Access` 中传入 `accessId`，则当 `accessId` 拥有权限时渲染此组件，当没有权限时隐藏此组件。
+```vue
+
+ accessOnepicess1
+
+
+```
\ No newline at end of file
diff --git a/docs/reference/plugin/plugins/enums.md b/docs/reference/plugin/plugins/enums.md
new file mode 100644
index 00000000..2a688b3c
--- /dev/null
+++ b/docs/reference/plugin/plugins/enums.md
@@ -0,0 +1,226 @@
+# @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
+
+
+
+
+ {{item.value}}：{{item.key}}
+
+
+
+ {{item.name}}：{{item.disabled}}
+
+
+ {{enumsGet('roles', '2', { dir: 'eName' })}}
+
+
+
+
+```
+## API
+### get
+* `get(name: string)` 获取指定名字的枚举
+
+* `get(name: string, key: string)` 获取指定名字及键枚举默认值
+
+* `get(name: string, opt: {extend: Array