diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e7eb629..f4591fb 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -24,7 +24,6 @@ module.exports = {
             'start',
             {
                 title: '前端',
-                collapsable: false,
                 children: [
                     '/frontend/',
                     '/frontend/icon',
@@ -35,20 +34,18 @@ module.exports = {
                     '/frontend/deploy',
                     {
                         title: '组件',
-                        collapsable: false,
                         children: [
-                            '/frontend/components/abstract-table',
-                            '/frontend/components/region-selector',
-                            '/frontend/components/search-form',
-                            '/frontend/components/upload-file',
-                            '/frontend/components/tree-select',
+                            '/frontend/component/abstract-table',
+                            '/frontend/component/region-selector',
+                            '/frontend/component/search-form',
+                            '/frontend/component/upload-file',
+                            '/frontend/component/tree-select',
                         ]
                     },
                     '/frontend/directives',
                     '/frontend/filters',
                     {
                         title: '全局方法',
-                        collapsable: false,
                         children: [
                             '/frontend/global-methods/bottom-tip',
                             '/frontend/global-methods/guide',
@@ -64,9 +61,8 @@ module.exports = {
             },
             {
                 title:'后端',
-                collapsable: false,
                 children: [
-                    '/backend/',
+                    '/backend/'
                 ]
             }
         ]
diff --git a/docs/.vuepress/public/布局-设置面板.png b/docs/.vuepress/public/布局-设置面板.png
new file mode 100644
index 0000000..b4273b2
Binary files /dev/null and b/docs/.vuepress/public/布局-设置面板.png differ
diff --git a/docs/.vuepress/public/布局.png b/docs/.vuepress/public/布局.png
new file mode 100644
index 0000000..187c674
Binary files /dev/null and b/docs/.vuepress/public/布局.png differ
diff --git a/docs/.vuepress/public/路由和菜单-首屏加载效果.png b/docs/.vuepress/public/路由和菜单-首屏加载效果.png
new file mode 100644
index 0000000..3575973
Binary files /dev/null and b/docs/.vuepress/public/路由和菜单-首屏加载效果.png differ
diff --git a/docs/.vuepress/public/路由和菜单-骨架屏.png b/docs/.vuepress/public/路由和菜单-骨架屏.png
new file mode 100644
index 0000000..d39b434
Binary files /dev/null and b/docs/.vuepress/public/路由和菜单-骨架屏.png differ
diff --git a/docs/frontend/README.md b/docs/frontend/README.md
index be7f195..6c6505a 100644
--- a/docs/frontend/README.md
+++ b/docs/frontend/README.md
@@ -13,25 +13,16 @@
 
 - 动态路由、动态菜单
 
-- 布局功能
+- 布局
   - 异步路由组件loading骨架屏
-  - 响应式的顶部菜单
-  - 多级侧边栏
-  - 面包屑
+  - 多种导航模式
+  - 仿ant design响应式的顶部菜单（虽然存在问题，目前推测是ele的问题）
+  - 无限级递归菜单
   - 多页签（支持详情页缓存）
   - 支持移动端
-  - 导航栏、侧边栏可隐藏
-  - 侧边栏折叠时可显示上级
 
 - Excel导出，支持多级表头、合并行
 
-- 组件
-  - 用户导航
-  - 行政区划选择器，支持树形和选项卡型
-  - 封装的上传组件，整合七牛云，支持多种格式的文件预览
-  - 封装了antd风格的dialog，可拖拽、超出可滚动
-  - 手写签名
-
 - element-ui增强
   - message支持分组、进度条功能
 ```
@@ -45,24 +36,25 @@
 │   ├── api                    # 数据请求集合
 │   │   │── request.js         # axios封装
 │   ├── asset
-│   │   │── icon               # 项目所有svg icons
+│   │   │── icon               # 项目所有svg图标
 │   │   └── style              # 样式集合
 │   ├── component              # 公用组件
 │   ├── config
 │   │   │── index.js           # 基础配置项
 │   ├── directive              # 自定义指令集合
 │   ├── filter                 # 自定义过滤器集合
-│   ├── globalMethod           # 全局方法，使用this.$xx调用
+│   ├── globalMethod           # 全局方法，已挂载到Vue原型上，使用this.$xx调用
 │   ├── layout                 # 布局文件夹，包含了导航栏、侧边栏、多页签、全局页脚
 │   ├── mixin                  # 公用混入
 │   ├── plugin                 # 一些插件，均使用import()来动态引入
 │   ├── router
-│   │   │── module             # 前端静态路由定义
+│   │   │── guardian           # 路由守卫集合
+│   │   │── module             # 前端定义的静态路由
 │   │   │── define.js          # 静态路由导出
 │   │   │── index.js
 │   │   └── util.js
 │   ├── store                  # vuex配置
-│   ├── utils                  # 工具类
+│   ├── util                   # 工具类
 │   ├── view                   # 路由页面集合
 │   ├── App.vue
 │   └── main.js
diff --git a/docs/frontend/components/abstract-table.md b/docs/frontend/components/abstract-table.md
index b8dbb0f..623f50d 100644
--- a/docs/frontend/components/abstract-table.md
+++ b/docs/frontend/components/abstract-table.md
@@ -18,7 +18,7 @@
 
 ### 引入：
 
-`@/components/AbstractTable`。
+`@/component/AbstractTable`。
 
 ### 使用：
 
diff --git a/docs/frontend/components/region-selector.md b/docs/frontend/components/region-selector.md
index 99850ec..ac2e57d 100644
--- a/docs/frontend/components/region-selector.md
+++ b/docs/frontend/components/region-selector.md
@@ -1,12 +1,12 @@
 # 行政区划选择器
 
-目前分 `树型` 和 `选项卡型` 两种，由于 `树型` 不完善，所以这里只介绍 `选项卡型`，有兴趣的可以查看源码`@/components/RegionSelector/Tree`。
+目前分 `树型` 和 `选项卡型` 两种，由于 `树型` 不完善，所以这里只介绍 `选项卡型`，有兴趣的可以查看源码`@/component/RegionSelector/Tree`。
 
 <img :src="$withBase('/region-selector_tab.png')">
 
 ### 引入：
 
-`@/components/RegionSelector`
+`@/component/RegionSelector`
 
 ### 使用：
 ```html
diff --git a/docs/frontend/components/search-form.md b/docs/frontend/components/search-form.md
index 42063f0..ee1e3be 100644
--- a/docs/frontend/components/search-form.md
+++ b/docs/frontend/components/search-form.md
@@ -7,7 +7,7 @@
 
 ### 引入：
 
-`@/components/SearchForm`，`@/components/SearchFormItem`
+`@/component/SearchForm`，`@/component/SearchFormItem`
 
 ### 使用：
 ```html
diff --git a/docs/frontend/components/tree-select.md b/docs/frontend/components/tree-select.md
index cbe0245..ab04aa7 100644
--- a/docs/frontend/components/tree-select.md
+++ b/docs/frontend/components/tree-select.md
@@ -10,7 +10,7 @@
 
 ### 引入：
 
-`@/components/TreeSelect`
+`@/component/TreeSelect`
 
 ### 使用：
 ```html
diff --git a/docs/frontend/components/upload-file.md b/docs/frontend/components/upload-file.md
index cdbc1e0..720b2c9 100644
--- a/docs/frontend/components/upload-file.md
+++ b/docs/frontend/components/upload-file.md
@@ -6,7 +6,7 @@
 
 ### 引入：
 
-`@/components/UploadFile`
+`@/component/UploadFile`
 
 ### 使用： 
 ```html
diff --git a/docs/frontend/deploy.md b/docs/frontend/deploy.md
index 19c1879..cba4f0a 100644
--- a/docs/frontend/deploy.md
+++ b/docs/frontend/deploy.md
@@ -1,6 +1,6 @@
 # 构建和发布
 
-## 构建
+### 构建
 
 当项目开发完毕，只需要运行一行命令就可以打包你的应用：
 ```shell script
@@ -12,7 +12,7 @@ npm run build
 
 如果需要指定`dist`目录等，则需要通过`vue.config.js`的`outputDir`进行配置。
 
-## 发布
+### 发布
 
 如果静态文件不是部署在根目录下，比如想部署在 `/app` 下，那么需要将 `@/config/index.js` 中的 `contextPath` 改为 `/app/`。
 
@@ -24,7 +24,7 @@ npm run build
 `contextPath` 应始终以 `/` 开头，以 `/` 结束。
 :::
 
-## 路由模式
+### 路由模式
 
 项目提供了动态修改路由模式的功能，只需要修改 `@/config/index.js` 中的 `route.mode` 即可。
 
diff --git a/docs/frontend/directives.md b/docs/frontend/directives.md
index a194416..baacd17 100644
--- a/docs/frontend/directives.md
+++ b/docs/frontend/directives.md
@@ -3,7 +3,7 @@
 ## el-dialog拖拽
 
 已全局注册，使用方式：
-```js
+```html
 <el-dialog v-drag-dialog/>
 ```
 
@@ -11,7 +11,7 @@
 
 从[quasar](https://quasar.dev/vue-directives/material-ripple)处搬运
 已全局注册，使用方式：
-```js
+```html
 <div v-ripple/>
 ```
 更多细节请根据quasar文档使用
diff --git a/docs/frontend/icon.md b/docs/frontend/icon.md
index cf4a9cc..dc8139f 100644
--- a/docs/frontend/icon.md
+++ b/docs/frontend/icon.md
@@ -1,5 +1,5 @@
 # 图标
 
-组件已全局注册，以`<v-icon icon="..."">`来使用。
+组件已全局注册，以`<v-icon icon="...">`来使用。
 当`icon`属性以`svg-`开头时，将渲染为`svg`，否则为`i`标签。
 svg的引入与[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html)相同。
diff --git a/docs/frontend/layout.md b/docs/frontend/layout.md
index 87770fd..0e59691 100644
--- a/docs/frontend/layout.md
+++ b/docs/frontend/layout.md
@@ -1,6 +1,10 @@
 # 布局
 
-此布局是在vue-element-admin的基础上改造而来。
+<img :src="$withBase('/布局.png')">
+
+文件目录：`@/layout/index.vue`。
+
+此布局是在vue-element-admin的基础上改造而来，并且模仿and design pro实现了三种导航模式。
 
 实际上这个布局算是二级路由，一级路由是App.vue，这就是为什么经常会看到路由会这么写的原因：
 ```json
@@ -17,37 +21,109 @@
     ]
 }
 ```
-`Layout` 填充到 `App.vue` 里的 `<router-view>`，而真正的路由页面 `@/views/index` 则填充到 `Layout` 里的 `<router-view>`。
+`Layout`（指`@/layout/index.vue`） 填充到 `App.vue` 里的 `<router-view>`，
+而真正的路由页面 `Page` 则填充到 `Layout` 里的 `<router-view>`。
+当然，如果 `Layout` 中**没有写** `<router-view>`，那么只会显示布局组件。
+
+项目中没有用到 `Layout` 的页面只有 `@/router/define.js` 里的 `login`、`403`、`404`、`500`。
+
+此外，在写`Layout`这个重型组件时，已经尽可能地进行独立化（拥有作为独立组件的可能性）。
+目前`Layout`的数据控制基本由`Vue.observable`实现（文件都在`@/layout/store`下），
+仅有*未读消息数*、*用户信息*需要使用`vuex`。
+
+## 侧边栏
+
+文件目录：`@/layout/component/Aside/index.vue`。
+扩展了抽屉模式、自动隐藏这两个功能。
+
+侧边栏**不会**在以下情形渲染：
+- PC端下选择了顶部导航模式
+- 没有需要显示的菜单（仅不渲染dom）
+
+### 侧边栏LOGO
+
+文件目录：`@/layout/component/Aside/Logo.vue`。
+想更改logo地址的请修改 `@/config/index.js` 中的 `sidebarLogoUrl`，或者自己重写（需要注意侧边栏的折叠情况）
+
+### 侧边栏菜单
+
+侧边栏菜单借助了 `@/component/menu/NavMenu/item.vue` 来渲染菜单项，具体配置请查看[路由配置](./router/.html)。
+
+侧边栏菜单扩展了以下功能：
+- 点击已激活的菜单可刷新路由
+- 折叠时可显示父级菜单
+- 菜单激活时自动滚动到可视区域
+
+## 头部导航栏
+
+文件目录：`@/layout/component/Header/component/Navbar/index.vue`。
 
-项目中没有用到 `Layout` 的页面只有 `@/router/define.js` 里的 `login`、`403`、`404` 这三个。
+### 汉堡包
 
-## 面包屑
+文件目录：`@/layout/component/Header/component/Navbar/Hamburger.vue`。
 
-摆设，放在那里充充数，正在研究是不是要移到页面里去，因为感觉和顶部菜单冲突。
+PC端的行为是切换侧边栏的折叠状态，移动端是切换侧边栏在抽屉模式下的显示状态。
+当侧边栏无需渲染时，汉堡包同样不会渲染。
 
-## 顶部菜单
+### 导航菜单
 
-响应式设计，能够使菜单部分隐藏或全部隐藏，参考了ant design。
-由路由配置项数组中的根节点组成，根据路由地址自动高亮。
+文件目录：`@/layout/component/Header/component/Navbar/HeadMenu.vue`。
 
-## 多页签
+头部导航菜单基本可以视为垂直版的侧边栏菜单，也具有*点击已激活的菜单可刷新路由*的功能，此外还扩展了以下功能：
+- 仿ant design的响应式（目前还存在组件未更新的问题，初步判断是element-ui的问题）
 
-增加了平滑滚动功能，增加了快捷键功能：`ctrl + → 下一个页签`、`ctrl + ← 上一个页签`
+头部导航菜单**不会**在以下情形渲染：
+- 是移动端
+- PC端下选择了侧边栏导航模式
+
+### 设置面板
+
+<img :src="$withBase('/布局-设置面板.png')">
+
+文件目录：`@/layout/component/Header/component/Navbar/SettingDrawer.vue`。
+
+设置面板的数据与`Layout`的数据是相互独立的，这么做是为了`Layout`的独立性。
+在设置面板中修改数据后，会将配置写入localStorage。
+在面板mounted时，会将localStorage中的配置数据同步到`Layout`的store中
+
+::: tip 注意 
+设置面板中的主题色修改功能默认只在dev环境下生效，为啥呢，因为还在研究原理。  
+想放开限制需要：
+1. 修改`@/layout/component/header/navbar/component/SettingDrawer`中的`changeThemeColor`方法
+2. 修改`vue.config.js`中的`configureWebpack.plugins`配置项
+:::
+
+## 头部多页签
+
+文件目录：`@/layout/component/Header/component/Tagsview/index.vue`。
+
+在原版的基础上扩展了以下功能：
+- 平滑滚动
+- 快捷键响应：`ctrl + → 下一个页签`、`ctrl + ← 上一个页签`
 
 ::: warning 注意 
 多页签在 启用 / 停用 之间切换时，之前缓存的页签实例会清空，也就是说再次打开时会是新的页面
 :::
 
-## 侧边栏
+## 路由页面
+
+文件目录：`@/layout/component/Page/index.vue`。
+
+### 页头
+
+文件目录：`@/layout/component/Page/PageHeader.vue`。
+
+将原先在头部导航栏的面包屑挪到了这里（参考[dcat-admin](https://github.com/jqhph/dcat-admin)）。
+这里说明一下面包屑的实现，是直接用$route.matched做的，没有考虑其他特殊情况。
+
+不想显示页头的可以将路由配置项的`meta.pageHeader`设为`false`。
 
-重复点击菜单可刷新路由，折叠时可以选择是否在折叠菜单上显示父级。
+### 页脚
 
-侧边栏的滚动分两种情况，一种是整体的滚动，这是用 `<el-scrollbar>` 做的。
-另一种是弹出菜单的滚动，这是用 `css` 做的，不用 `<el-scrollbar>` 是因为没办法避免bug，
-具体原因可以去看element-ui的 `<submenu> #handleMouseleave`。
+文件目录：`@/layout/component/Page/component/PageFooter.vue`。
 
-## 全局页脚
+只是一个静态dom，想咋改就咋改。
 
-想改啥去 `@/layout/component/Footer.vue` 里改，妥妥的。
+目前页脚全局显示，没有提供配置来隐藏。
 
 
diff --git a/docs/frontend/new.md b/docs/frontend/new.md
index d0cf087..83e09bb 100644
--- a/docs/frontend/new.md
+++ b/docs/frontend/new.md
@@ -1,19 +1,19 @@
 # 新增页面
 
-1. 把数据请求api创建出来，在 `@/api`下根据模块区分。
+1. 把数据请求api创建出来，在`@/api`下根据模块区分。
 
-2. 在 `@/views` 下创建路由页面，根据模块区分，页面务必以`Page.vue`结尾。
+2. 在`@/view`下创建路由页面，根据模块区分，页面务必以`Page.vue`结尾。
 
 3. 如果页面过大过复杂，建议按功能拆分，放在当前页面的文件夹里。
 
-4. 独有的样式同样放在当前页面的文件夹里，能公用的提取到 `@/asset/style` 里。
+4. 独有的样式同样放在当前页面的文件夹里，能公用的提取到`@/asset/style`里。
 
 5. 路由定义
-   - 5.1 如果使用静态路由，在 `@/router/modules` 下创建路由文件，这个文件夹下的js会被`@/router/define.js`自动导出。
+   - 5.1 如果使用静态路由，在`@/router/module`下参考预设路由创建文件，并在`@/router/module/index.js`中导出。
    - 5.2 如果使用动态路由，需要在数据库或`系统管理 -> 菜单管理`中添加路由信息。
 
-6. 如果需要创建vuex模块，请在 `@/store/modules` 下创建，同样的，该文件夹下的js会被自动导出。
+6. 如果需要创建vuex模块，请在`@/store/module`下创建，该文件夹下的js会被自动导出。
 
-7. 如果页面之间存在公共组件，建议抽取出来放到 `@/component` 中
+7. 如果页面之间存在公共组件，建议抽取出来放到`@/component`中
 
-8. 如果页面之间存在公共逻辑，建议抽取出来放到 `@/mixin` 中
+8. 如果页面之间存在公共逻辑，建议抽取出来放到`@/mixin`中
diff --git a/docs/frontend/permission.md b/docs/frontend/permission.md
index e5adbe1..4bd41ad 100644
--- a/docs/frontend/permission.md
+++ b/docs/frontend/permission.md
@@ -4,13 +4,12 @@
 
 鉴权方法为 `@/util/auth.js #auth`。
 
-鉴权前的准备工作：
+### 鉴权前的准备工作
 
 登陆成功后，后台返回用户所拥有的资源，构造出用户的权限树。
-之后用户在进入系统的任意一个非白名单内的路由时，会向后台获取
-所有的资源，构造出总权限树。
+之后用户在进入系统的任意一个非白名单内的路由时，会向后台获取所有的资源，构造出总权限树。
 
-鉴权流程：
+### 鉴权流程
 
 1. 如果用户是`admin`身份，那么直接放行。
 
@@ -20,7 +19,7 @@
 
 4. 否则拦截，如果是在路由的拦截器中则会跳转至403页面。
 
-当然前端的权限控制只是过滤一小部分，对接口的过滤工作还是得由后端完成。
+此流程与后端的流程行为一致。当然前端的权限控制只是过滤一小部分，对接口的过滤工作还是得由后端完成。
 
 ### 如何移除权限控制？
 
@@ -31,14 +30,13 @@
 
 首先只有两种情况前端会用RBAC：
 
-**1.角色固定**：
+**1. 角色固定**：
 
 比如接口管理平台YAPI，角色就是固定的那三四个，前端可以直接写死，这种是最最适合的。
 
-**2.角色不固定，但是后端可以返回角色-资源的映射表：**
+**2. 角色不固定，但是后端可以返回角色-资源的映射表：**
 
-映射表规定了页面上所有的资源（路由页面、数据接口、按钮等等）被哪些角色所拥有，这样
-只需要凭一个用户的角色就能控制资源的访问。但是嗦实话，所有开源的纯vue管理后台全部
-不是这样搞的。
+映射表规定了页面上所有的资源（路由页面、数据接口、按钮等等）被哪些角色所拥有。
+这样只需要凭一个用户的角色就能控制资源的访问，但是绝大部分开源的纯vue管理后台都偷懒没做这部分的工作。
 
 所以这里偷懒，直接把用户拥有的所有资源返回给前端。不过这也导致了不好用无状态的jwt来代替session。
diff --git a/docs/frontend/plugins.md b/docs/frontend/plugins.md
index 3c6947c..2b86189 100644
--- a/docs/frontend/plugins.md
+++ b/docs/frontend/plugins.md
@@ -9,7 +9,7 @@
 
 ## 图片压缩
 
-支持 `png`、`jpg` 两种格式的图片，使用方法参考 `@/views/example/developingTest/components/ImageCompressTest.vue`。
+支持 `png`、`jpg` 两种格式的图片，使用方法参考 `@/view/example/test/develop/component/ImageCompressTest.vue`。
 
 ::: tip
 由于是以 `worker` 的形式调用，所以需要准备 `cjpeg.min.js` 和 `pngquant.min.js`，这两个文件都放在项目的 `public`下。
diff --git a/docs/frontend/router.md b/docs/frontend/router.md
index f4c3f17..1e753f1 100644
--- a/docs/frontend/router.md
+++ b/docs/frontend/router.md
@@ -1,10 +1,10 @@
-# 路由
+# 路由和菜单
 
 项目中默认使用了前端预设的静态路由，
-要使用后端返回的动态路由的话需要打开 `@/config/index.js` 中的 `route.useBackendDataAsRoute` 选项。
+要使用后端返回的数据来生成动态路由和菜单的话需要将 `@/config/index.js` 中的 `route.useBackendDataAsRoute` 设为 `true`。
 
-本项目不支持二级以上的路由，虽然路由配置可以无限级，但是实际上是二级路由的效果，因为在处理路由
-数据时会将二级以上的路由缩减为其叶子节点，也就是说如果有如下路由：
+本项目不支持二级以上的路由，虽然路由配置可以无限级，但是实际上是二级路由的效果。
+因为在处理路由数据时会将二级以上的路由缩减为其叶子节点，也就是说如果有如下路由：
 ```js
 const routes = [
     {
@@ -48,21 +48,20 @@ const routes = [
     }
 ]
 ```
-这样做的目的是为了避免多级路由缓存失效的问题，而且大部分情况下，三级路由（或更高）可以借助动态组件
-来实现同样的效果，
+这样做的目的是为了避免多级路由缓存失效的问题，而且大部分情况下，三级路由（或更高）可以借助动态组件来实现同样的效果。
 
 ## 路由配置项
 
-路由配置项不光参与路由的生成，也参与侧边栏的生成。
+本项目的路由配置除了`component`以外，与`vue-router`没有区别，仅在`meta`中添加了一些用于生成路由和菜单的字段。
 
-这里约定，配置项中只有根节点（即顶部菜单）的path以'/'开头。
-并且，只有根节点和叶子节点可以自定义component。
-目前根节点的component固定为`Layout`
+这里约定，配置项中只有根节点（即顶部菜单）的path以'/'开头，并且，只有根节点和叶子节点可以自定义`component`。
 
-此外，所有根节点（经过缩减）的redirect属性都将设为其第一个子节点的fullPath，目前不支持自定义。
+目前根节点的`component`固定为`'Layout'`。
+
+此外，所有根节点（经过降级缩减）的`redirect`属性都将设为其第一个子节点的`fullPath`，目前不支持自定义。
 
 ::: warning 注意 
-项目中，路由配置项中的component是字符串，比如组件路径是`@/views/test/indexPage.vue`，那么component可以是
+路由配置项中的`component`是字符串，比如组件路径是`@/view/test/indexPage.vue`，那么component可以是
 `test/`、`test/index`、`test/indexPage`、`test/indexPage.vue`，具体可以看`@/router/util.js` 中的 `generateRoutes` 方法。
 :::
 
@@ -73,18 +72,18 @@ const routes = [
 | :------------: | :--------------------------------------------------: | :--------: | :---: |
 | title          | 路由在侧边栏、面包屑、页签                           | `string`   | -     |
 | dynamicTitle   | 路由在面包屑、页签中的动态名称，参数为(to,from)      | `function` | -     |
-| hidden         | 是否在侧边栏中显示                                   | `boolean`  | -     |
-| alwaysShow     | 是否总是把只有一个子级的菜单以嵌套模式在侧边栏中展示 | `boolean`  | -     | 
+| hidden         | 是否在菜单中隐藏                                     | `boolean`  | -     |
+| alwaysShow     | 是否总是把只有一个子级的菜单以嵌套模式展示           | `boolean`  | -     | 
 | sort           | 侧边栏的排序值，值越小越靠前                         | `number`   | 10000 | 
-| icon           | 图标名，<v-icon>的icon属性                           | `string`   | -     |
+| icon           | 图标名，`<v-icon>`的icon属性                         | `string`   | -     |
 | affix          | 是否在多页签中固定显示                               | `boolean`  | -     |
-| noCache        | true时缓存页面                                       | `boolean`  | -     |
-| activeMenu     | 侧边栏当前激活菜单的index                            | `string`   | -     |
+| noCache        | true时不缓存页面                                     | `boolean`  | -     |
+| activeMenu     | 当前激活菜单的index，因为激活菜单可能并非当前路由    | `string`   | -     |
 | noAuth         | true时路由不需要鉴权                                 | `boolean`  | -     |
 | iframe         | 需要打开的iframe的地址                               | `string`   | -     |
 | usePathKey     | 是否使用$route.path作为组件缓存的key                 | `boolean`  | -     |
 | useFullPathKey | 是否使用$route.fullPath作为组件缓存的key             | `boolean`  | -     |
-| commonModule   | 共用组件的唯一标识                                   | `any`      | -     |
+| commonModule   | 共用组件的唯一标识，用于判断路由是否复用组件         | `any`      | -     |
 
 ::: tip 注意
 路由meta上的noAuth、noCache会被子路由继承，优先使用子路由的值
@@ -113,20 +112,37 @@ const routes = [
 所以在 `router.beforeEach` 中做了判断，如果跳转前后的路由的 `meta.commonModule` 相同的话，那么借助 `/redirect` 跳转一次，从而避免组件复用的问题
 
 ::: warning 注意
-如果使用 `name`，需要缓存的页面的 `name` 必须和路由的 `name` 一致
+如果使用`name`作为组件缓存的标识，那么缓存的页面的`name`必须和路由的`name`一致
 :::
 
 ## 路由白名单
 
-在 `@/router/index.js` 中有这么一句:
+在 `@/router/guardian/security.js` 中有这么一句:
 ```js
-const whiteList = transformWhiteList(['/login', '/register', '/404', '/403'])
+const whiteList = ['/login', '/register', '/403', '/404', '/500'].map(url => pathToRegexp(url))
 ```
-这个 `whiteList` 就是白名单，里面的值会被转为正则表达式，详细请查看[path-to-regexp文档](https://github.com/pillarjs/path-to-regexp)。
-被`whiteList` 匹配的路由不需要验证，直接放行。
+这个`whiteList`就是白名单，里面的值会被转为正则表达式，详细请查看[path-to-regexp文档](https://github.com/pillarjs/path-to-regexp)。
+被白名单匹配的路由不需要验证，直接放行。
+
+## 路由守卫
+
+所有路由守卫全部位于`@/router/guardian`中。
+
+预设的路由守卫如下：
+- nprogress进度条守卫
+- 防止路由复用组件的守卫
+- 修改页面标题信息的守卫
+- 登陆和权限守卫
+- 控制iframe显隐的守卫
+
+::: warning 注意
+路由守卫是有先后顺序的，请查看`@/router/guardian/index.js`
+:::
 
 ## 首屏加载效果
 
+<img :src="$withBase('/路由和菜单-首屏加载效果.png')">
+
 想体验的可以把 `network` 设为 `slow 3g` 就可以在在线实例看到效果。
 
 原理很简单，在 `index.html` 里有这么一段：
@@ -142,6 +158,8 @@ const whiteList = transformWhiteList(['/login', '/register', '/404', '/403'])
 
 ## 骨架屏
 
+<img :src="$withBase('/路由和菜单-骨架屏.png')">
+
 通常情况下，路由组件都是以 `import(...)` 的形式异步引入，
 如果想让路由在加载异步组件时显示，可以使用以下方式：
 ```js
@@ -160,7 +178,7 @@ component: lazyLoadView(import(...))
 ```
 项目中具体的使用方式可以查看 `@/router/util #generateRoutes`方法。
 
-关于 `AsyncHandler` 的更多选项，可以查看[官方文档](https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81)
+关于 `AsyncHandler` 的更多选项，可以查看[官方文档](https://cn.vuejs.org/v2/guide/component-dynamic-async.html#%E5%A4%84%E7%90%86%E5%8A%A0%E8%BD%BD%E7%8A%B6%E6%80%81)
 
 ## 过渡动画
 
diff --git a/docs/frontend/utils.md b/docs/frontend/utils.md
index 6fce687..9181f5c 100644
--- a/docs/frontend/utils.md
+++ b/docs/frontend/utils.md
@@ -36,9 +36,9 @@ const tree2 = createTree(arr2, 0, 'xid', 'ypid')
 
 ## 纯前端导出excel
 
-依赖exceljs（实际上项目中还有xlsx-style的实现版本，见 `@/utils/excel/xlsx`，不过存在问题，所以弃用了）。
+依赖exceljs，项目中使用script引入。
 ```js
-import {json2workbook, exportExcelByJs} from '@/utils/excel'
+import {json2workbook, workbook2excel} from '@/utils/excel'
 
 const column = [
     {header: ['合并表头演示', '序号'], prop: 'no', merge: true},
@@ -52,33 +52,29 @@ const arr = [
 
 const workbook = json2workbook(arr, column)
 
-exportExcelByJs(workbook, '测试导出.xlsx')
+workbook2excel(workbook, '测试导出.xlsx')
 ```
 
 ### json2workbook(data, columns, merge) : workbook
 
 - `data` : `array`，json数组。
-
 - `columns` : `array`，列配置项数组，列配置详细如下：
-```js
-{
-    header : string | array，表头名称，通过使用'-'分隔符或者传入array来实现多级表头
-    prop : string，表头对应的 json 字段名称，如果为空，则该字段不会写入excel表格
-    merge : boolean，是否需要合并，true的话会从上至下合并值相同的相邻单元格
-    width : number，单元格宽度，默认 20
-}
-```
+
+| 参数   | 说明                                                          | 类型           | 默认 |
+| :----: | :-----------------------------------------------------------: | :------------: | :--: |
+| header | 表头名称，通过使用'-'分隔符或者传入array来实现多级表头        | `string|array` | -    |
+| prop   | 表头对应的 json 字段名称，如果为空，则该字段不会写入excel表格 | `string`       | -    |
+| merge  | 是否需要合并，true的话会从上至下合并值相同的相邻单元格        | `boolean`      | -    |
+| width  | 单元格宽度                                                    | `number`       | 20   |
 
 - `merge` : `object`，合并配置项，详细如下：
-```js
-{
-    primaryKey : string，每行json数据的唯一标识字段名称
-    orderKey : string，每行json数据的序号字段名称
-}
-```
 
-### exportExcelByJs(workbook, filename)
+| 参数       | 说明                           | 类型     | 默认 |
+| :--------: | :----------------------------: | :------: | :--: |
+| primaryKey | 每行json数据的唯一标识字段名称 | `string` | -    |
+| orderKey   | 每行json数据的序号字段名称     | `string` | -    |
 
-- `workbook`，json2workbook的返回结果
+### workbook2excel(workbook, filename)
 
+- `workbook`，exceljs的workbook对象
 - `filename` : `string`，导出的文件名称，需要带上.xlsx后缀