docs: 插件

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

@@ -38,13 +38,6 @@ export const zh: SidebarConfig = {
     '/zh/reference/api/README.md'
   ],
   '/zh/reference/plugin/': [
-    {
-      isGroup: true,
-      text: '指南',
-      children: [
-        '/zh/reference/plugin/README.md',
-      ],
-    },
     {
       isGroup: true,
       text: 'Presets',

docs/zh/guide/directory-structure.md

@@ -1,6 +1,6 @@
 # 目录结构
 
-在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的。
+在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的：
 ```
 fes-template
 ├── package.json
@@ -24,7 +24,7 @@ fes-template
 包含插件和插件集，以 `@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
 
 #### tsconfig.json
-支持`@webank/fes`和使用`@`的API提示
+解决 `@webank/fes` 和使用 `@` 的 API 提示
 
 #### .fes.js
 配置文件，包含 Fes.js 内置功能和插件的配置。
@@ -32,7 +32,7 @@ fes-template
 #### .env
 定义环境变量。
 
-比如`.env`文件内容如下：
+比如 `.env` 文件内容如下：
 ```
 PORT=8888
 FES_ENV=prod
@@ -44,7 +44,7 @@ process.env.FES_ENV = 'prod';
 ```
 
 #### mock.js
-mock 配置文件。
+mock 数据的配置文件。
 
 ### dist 目录
 执行 `fes build` 后，产物默认会存放在这里。
@@ -58,7 +58,7 @@ mock 配置文件。
 ### src 目录
 
 #### .fes 目录
-临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .fes 目录到 git 仓库，他们会在 fes dev 和 fes build 时被删除并重新生成。
+临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 `.fes` 目录到 `git` 仓库，他们会在 `fes dev` 和 `fes build` 时被删除并重新生成。
 
 #### pages 目录
 所有路由组件存放在这里。

docs/zh/guide/route.md

@@ -1,10 +1,10 @@
 # 路由
 
-像Vue、React这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 `Vue Router` 实现的路由，想了解更多的同学可以看看[官方文档](https://next.router.vuejs.org/)。
+像 Vue 、React 这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 `Vue Router` 实现的路由，想了解更多的同学可以看看[官方文档](https://next.router.vuejs.org/)。
 
 ## 路由配置
 
-在配置文件（.fes.js）中通过 router 进行配置，格式为路由信息的数组。
+在配置文件 `.fes.js`中通过 `router` 进行配置。
 ```js
 export default {
     router: {
@@ -15,11 +15,11 @@ export default {
 ```
 
 ### routes
-添加到路由的初始路由列表。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/)中关于路由配置、路由匹配相关内容。
+`routes` 是配置添加到路由的初始路由列表，格式为路由信息的数组。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/) 中关于路由配置、路由匹配相关内容。
 
 
 ### mode 
-创建 Histroy 的类型：
+创建历史记录的类型：
 - **h5**，对应 [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)
@@ -104,8 +104,8 @@ pages
 ```
 
 **需要注意的是，满足以下任意规则的文件不会被注册为路由**：
-- 不是 .vue 文件
-- components 目录中的文件
+- 不是 `.vue` 文件
+- `components` 目录中的文件
 
 
 ### 动态路由

docs/zh/reference/plugin/README.md

@@ -1 +1,11 @@
-# 插件
+## 架构
+
+![架构](/framework.png "架构")
+
+Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
+
+## 插件和插件集
+<p>
+    <img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
+</p>
+Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

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

@@ -1 +1,78 @@
-# fes-plugin-access
+# @webank/fes-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>
+```
+
+### 角色
+Fes.js 用角色定义一组资源。当访问 Fes.js 应用时，使用插件提供的 API 设置用户的角色，角色对应的资源才可见，非角色对应的资源不可见。
+
+
+当然有时候业务比较复杂，角色不能在前端应用中预先定义，而是用户自定义的，储存在数据库中。不要怕！插件也提供粒度更细的 API 来控制当前用户能访问的资源。
+
+## 启用方式
+在 `package.json` 中引入依赖：
+```json
+{
+    "dependencies": {
+        "@webank/fes": "^2.0.0",
+        "@webank/fes-plugin-access": "^2.0.0"
+    },
+}
+```
+
+## 配置
+
+### 编译配置
+在 `.fes.js` 中配置：
+```js
+export default {
+    access: {
+        roles: {
+            admin: ["/", "/onepiece", '/store']
+        }
+    }
+}
+```
+
+### 运行时配置
+在 `app.js` 中配置：
+```js
+export const access = {
+    noAccessHandler({ router, to, from, next}) {
+        console.log("被拦截");
+        next(false);
+    }
+};
+
+```
+
+## API
+
+### 函数
+
+### 指令
+
+### 组件

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

@@ -1 +1,7 @@
-# fes-plugin-enums
+# @webank/fes-plugin-enums
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,7 @@
-# fes-plugin-icon
+# @webank/fes-plugin-icon
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,6 @@
-# fes-plugin-jest
+# @webank/fes-plugin-jest
+## 启用方式
+
+## 配置
+
+## 命令 

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

@@ -1 +1,8 @@
-# fes-plugin-layout
+# @webank/fes-plugin-layout
+
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,7 @@
-# fes-plugin-locale
+# @webank/fes-plugin-locale
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,8 @@
-# fes-plugin-model
+# @webank/fes-plugin-model
+
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,8 @@
-# fes-plugin-request
+# @webank/fes-plugin-request
+
+
+## 启用方式
+
+## 配置
+
+## API

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

@@ -1 +1,9 @@
-# fes-plugin-vuex
+# @webank/fes-plugin-vuex
+
+
+## 启用方式
+
+## 配置
+
+
+## API